Wie man die WordPress Suche anpasst bzw. verändert

Artikelbild Wordpress

In jeden WordPress Blog gibt es das Widget Suche, wie man diese WordPress Suche anpassen kann zeige ich euch heute.

Meist befindet sich die Suche in einem WordPress Blog in einer der Sidebars und wird in Form eines Widgets hinzugefügt oder ist als Standard enthalten, wenn nichts in einer Sidebar eingefügt wird. Auch in diesem Blog war das so, was aber meiner Meinung nach die Sidebar zu sehr vergrößert bzw. aufgebläht hat.

Wie bin ich vorgegangen?

  1. Ich habe mir in meinem Theme die Definitionen der Sidebars angeschaut, da hier in der Sidebar 1, wenn kein Widget hinzugefügt wurde, immer die Suche auf dem Blog erschien. Dabei habe ich folgende Code gefunden was auch der Code für die Darstellung der Suche ist.
     

    <div class=„Block“>
        <div class=„Block-body“>
    <
    div class=„BlockHeader“>
                <div class=„header-tag-icon“>
    <div class=„BlockHeader-text“>
    php _e(Search‚, ‚kubrick); ?>
    </div>
    </div>
    <div class=„l“></div>
    <div class=„r“><div></div></div>
    </div>
    <div class=„BlockContent“>
    <div class=„BlockContent-tl“></div>
    <div class=„BlockContent-tr“><div></div></div>
    <div class=„BlockContent-bl“><div></div></div>
    <div class=„BlockContent-br“><div></div></div>
    <div class=„BlockContent-tc“><div></div></div>
    <div class=„BlockContent-bc“><div></div></div>
    <div class=„BlockContent-cl“><div></div></div>
    <div class=„BlockContent-cr“><div></div></div>
    <div class=„BlockContent-cc“></div>
    <div class=„BlockContent-body“>
    <form method=„get“ id=„searchform“ action=<?php bloginfo(url); ?>/“>
    <input type=„text“ value=<?php the_search_query(); ?> name=„s“ id=„s“ style=„width: 95%;“ />
    <button class=„Button“ type=„submit“ name=„search“>
    <span class=„btn“>
    <span class=„t“><?php _e(Search‚, ‚kubrick); ?></span>
    <span class=„r“><span></span></span>
    <span class=„l“></span>
    </span>
    </button>
    </form>
    </div>
    </div>
    </div>
    </div>

    Als geübter Coder sieht man gleich, welcher Code das eigentliche Suchfeld bildet, für alle die nicht so geübt sind im Quellcode lesen und bearbeiten extrahiere ich den notwendigen Code hier:

    <form method=„get“ id=„searchform“ action=<?php bloginfo(url); ?>/“>
    <input type=„text“ value=<?php the_search_query(); ?> name=„s“ id=„s“ style=„width: 95%;“ />
    <button class=„Button“ type=„submit“ name=„search“>
    <span class=„btn“>
    <span class=„t“><?php _e(Search‚, ‚kubrick); ?></span>
    <span class=„r“><span></span></span>
    <span class=„l“></span>
    </span>
    </button>
    </form
    >

  2. Nun gilt es den Code an die eigenen Bedürfnisse anzupassen. Bei mir sah es erst wie folgt aus:
    Wordpress_Suche_Anpassen_alt
    Die WordPress Suche will ich nun an meine Bedürfnisse wie folgt anpassen:
    Wordpress_Suche_Anpassen_neu
  3. Code anpassen, dabei muss folgendes gesagt werden:

    <form method=„get“ id=„searchform“ action=<?php bloginfo(url); ?>/“></form>

    [Form bildet den Rahmen für das eigentliche Formular]

    <input type=„text“ value=<?php the_search_query(); ?> name=„s“ id=„s“ style=„width: 95%;“ />

    [input type=”text” bildet das Eingabefeld für den Suchbegriff]

    <button class=„Button“ type=„submit“ name=„search“>
    <span class=„btn“>
    <span class=„t“><?php _e(Search‚, ‚kubrick); ?></span>
    <span class=„r“><span></span></span>
    <span class=„l“></span>
    </span>
    </button>
    </form
    >

    [button bildet den Absendebutton oder Absendeknopf für die Suche]

    Um nun das Suchfeld an meine Bedürfnisse im WordPress Blog anzupassen, habe ich eine Weile im Netz gesucht und bin auf folgenden Artikel gestoßen (WordPress Suche manuell in das Theme einbinden). Ich bin dann der Anleitung gefolgt, da ich im Suchfeld gern den Hinweis stehen haben wollte “Seite duchrsuchen …”. Dort ist nun folgendes beschrieben.

    querystring = esc_attr(apply_filters('the_search_query', get_search_query()));
    $searchstring = "Suchbegriff eingeben";
    if (empty($querystring)) { $querystring = $searchstring; }
    ?>
    "get" id="searchform" action="bloginfo('url'); ?>/">
    <input type=
    "text" name="s" id="s" value="echo $querystring; ?>"
    onblur="if (this.value == '') { this.value = ''; }"
    onfocus="if (this.value == '') { this.value = ''; }" />
    <input type="submit" id="searchsubmit" value="Suchen" />
    
    form>

    Bei der Variable $searchstring = “Suchbegriff eingeben” definiert man die Worte, welche  in dem Suchfeld angezeigt werden, wenn keine Suche durchgeführt wird.

    Alles was im Bereich <?php … ?> steht beschreibt den Inhalt des Suchfeldes und alles im Bereich <form ..>… deklariert das Aussehen des Suchfeldes. <input type=„text“ … ist wieder das Suchfeld an sich, welches hier noch mit einem kleinen Effekt versehen ist, durch welchen der angezeigte Inhalt verschwindet, sobald man in des Suchfeld mit der Maus klickt. Weiterhin sehen wir den Begriff id=”..”, was ein Verweis auf eine CSS Gestaltung des Suchfeldes ist.

    <input type=„submit” id=searchsubmit” value=Suchen” />

    ersetzt dabei den vorher definierten Button. Type=”submit” deklariet das Feld als Button. ID ist ein Verweis auf eine Deklaration für eine CSS Gestaltung des Buttons und Value beschreibt welches Wort auf dem Button stehen soll.

  4. Bei mir selbst gestaltet sich die Deklaration des Suchfeldeswie folgt:
    querystring = esc_attr(apply_filters('the_search_query', get_search_query()));
    $searchstring = "Seite durchsuchen ...";
    if (empty($querystring)) { $querystring = $searchstring; }
    ?>
    "get" class="searchform" action="bloginfo('url'); ?>/">
    <input type="text" value="echo $querystring; ?>" onblur="if (this.value == '') { this.value = ''; }"
                onfocus="if (this.value == '') { this.value = ''; }" name="s" class="searchfield" />
    <input type="submit" class="searchsubmit" value="" name="search" />    
    form>

     

    Dabei habe ich den Verweis auf dies CSS Gestaltung von id=”” in class=”” geändert, damit dies auch jedem im Browser angezeigt wird, da es bei Formularen, wohl besser ist als CSS Verweis eine Klasse zu nutzen statt eine ID. Class=”searchform” bestimmt das Aussehen des Formulars, class=”seachfield” gibt an wie das Suchfeld aussehen soll und class=”searchsubmit” ist die Klasse in des CSS Datei für den Suchbutton.

  5. Damit sich die Optik nun noch ändern müssen die Klassen natürlich noch in der CSS Dateieingefügt werden. Dies könnte wie folgt aussehen:
    /* search form */
    .searchform {
        display: inline-block;
        font-size: 100%;
        padding: 0;
        margin: -1px 0 1px;
    }
    .searchfield {
        width: 158px;
        padding: 4px 7px 2px 5px;
        color: #999;
        border: 1px solid #7188a9 !important;
        margin-top: 4px;
        line-height: 1.2em;
        background-image: url('images/BlockContent-h.png');
        -moz-border-radius:14px;
    }

    input[type=“submit“].searchsubmit {
    background: no-repeat 0 0;
    background-image: url(‚images/search-button-purple.png‚);
    height: 24px;
    width: 24px;
    border: none;
    cursor: pointer;
    text-indent: -999%;
    margin: 0;
    padding: 0 3px 0 3px;
    }

    #right-header-widgets .searchform,
    #top-bar-right-widgets .searchform {
    float: right;
    }

     

    Hierbei legt die Klasse .searchfield durch -moz-border-radius:14px; fest, das die Ecken des Suchfeldes abgerundet sein sollen. Bei der Klasse
    input[type=“submit“].searchsubmit wird durch
    background-image: url(‚images/search-button-purple.png‘);
    festgelegt, das der Stadardbutton durch eine Grafik ersetzt wird.

  6. Jetzt Alles noch als Seite speichern, ich würde hier searchform.php empfehlen.
  7. Damit das neue Suchfeld jetzt auch noch z.B. im Header an der gewünschten Stelle erscheint, fügen wir es noch an die stelle ein, das könnte wie folgt aussehen:

    <div class="header_sidebar">
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    </div>

     

    Nun sollte das angepasste Suchfeld in deinem WordPress Blog an der gewünschten stelle erscheinen.

Ich wünsche viel Spaß beim nachbauen.

Dir hat der Beitrag gefallen, dann einfach weiterempfehlen.

Über Michael Bergler 679 Artikel
Mein Name ist Michael Bergler ich stamme aus Sachsen und habe seit 10 Jahren die Leidenschaft mich mit HTML, PHP, Bildbearbeitung und Perl zu beschäftigen. Seit 2011 lebe ich in Chemnitz und arbeite als Selbständiger in dem Bereich Informationstechnologie (IT), Büroservice und Telefonmarketing. In meinem Blog, online seit Dezember 2010, geht es um die Ausbildung zum IT-Systemkaufmann, Games und alles rund um den PC. Von daher lag es nah eine Umschulung 2006 – 2009 in dem Beruf IT-Systemkaufmann zu absolvieren, welche ich dann auch im Januar 2009 erfolgreich abgeschlossen habe. Ich bin in Leipzig geboren und in der Umgebung von Dresden aufgewachsen.

1 Kommentar

Kommentar verfassen