Twenty Twelve Theme – Suchfeld im Header

Beim Theme Twenty Twelve kann man mit zwei Handgriffen das Suchfeld in den Header also über das Menü verschieben. Das geht ohne oder mit Child-Theme. Zwei Fetzen Code per Copy&Paste an die richtige Stelle von style.css und header.php und das Werk ist vollbracht. Wenn man will kann man das auch einfach über das Dashboard von WordPress erledigen.

Twenty Twelve Theme – Suchfeld im Header: Vor- und Nachteile

Normalerweise ist das Suchfeld beim Theme Twenty Twelve im Widget der Sidebar untergebracht und kann dort einfach nach Lust und Laune durch Drag&Drop verschoben werden. Nun habe ich das Suchfeld gerne an erster Stelle, um den Service für meine User zu verbessern. Das führt allerdings dazu, dass wichtige Inhalte der Sidebar weiter nach unten verschoben werden.
Also kommt man schnell auf die Idee das Suchfeld bzw. die Suche in einen Bereich zu verlegen, wo man noch Platz hat, z.B. über die Hauptnavigation bzw. das Menü.

Twenty Twelve Theme - Suchfeld im Header

Twenty Twelve Theme – Suchfeld im Header


Als Nachteil dieser Veränderung könnte man sehen, dass die Suchfunktion nun bei kleineren Auflösungen wie z.B. bei Smartphones recht prominent im Header erscheint, wobei sie andernfalls mit der Sidebar einfach nach unten verschoben werden würde. Das ist Geschmackssache.
Ich persönlich sehe immer noch Vorteile darin das Suchfeld zu verschieben, da ein Großteil meiner User immer noch über den Computer und nicht über das Smartphone kommen. Außerdem ist es m.E. nicht schlecht dem User auch auf dem Smartphone die Suche in der logischen Nähe zum Hauptmenü anzubieten. So kann er suchen, wenn er nicht auf Anhieb etwas in der Navigation findet.

Twenty Twelve Theme – Suchfeld im Header: style.css & header.php – Code

Für alle die zusätzlichen bzw. neuen Code gern im Child-Theme von Twenty Twelve haben steht hier, wie man das Child-Theme anlegen kann…
Ansonsten kann man den Code auch direkt in style.css und header.php einpflegen.

Zuerst gehen wir im Backend von WordPress auf Design/Editor/style.css und fügen ganz unten unter dem vorliegenden Code diesen Code-Fetzen für das Styling der Suchbox ein:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.header-search {
    float: right;
    margin-top: -50px;
}
@media (max-width: 650px) {
    .header-search {
        margin-top:5px;
        text-align:center;
        float:none;
    }
    .main-navigation  {
        clear:both;
    }
}

Speichern und das war es auch schon mit der style.css.

Als zweiten Schritt gehen wir im Backend auf Design/Editor/header.php und suchen den abschließenden Tag der Headergruppe:

1
</hgroup>

Direkt darunter fügen wir den folgenden Code-Fetzen zum PHP-Aufruf der Suche ein:

1
<div class="header-search"><?php get_search_form(); ?></div>

Abspeichern nicht vergessen und schon kannst Du die verschobene Suchfunktion im Header oben rechts finden.
Jetzt muss man nur noch unter Design/Widgets die Suche aus dem Widget herausziehen und das Werk ist vollbracht. Du hast jetzt mehr Platz in der Sidebar und eine prominentere Suchfunktion.

Bei Fragen oder Gedanken zum Thema Twenty Twelve Theme – Suchfeld im Header, schreibe einen Kommentar…

7 Gedanken zu „Twenty Twelve Theme – Suchfeld im Header

  1. Greg

    Ich bin echt begeistert von Deiner Seite. Ich erstelle und Pflege ehrenamtlich Webseite für Institutionen die mildtätig unterwegs sind. Ich finde es toll das man hier bei dir kostenlose und wirklich hilfreiche Informationen bekommt. Klasse und vielen Dank.

    Greg

    Antworten
  2. Christine

    Ok, mein Kommentar brauch nicht freigeschaltet werden, ich hatte es in der style.css Datei nur falsch positioniert. :-)
    Danke trotzdem

    Antworten
  3. Christine

    Hallo, danke für die tolle Anleitung. Aber was habe ich denn falsch gemacht, dass die Suchfunktion nun links angezeigt wird?
    Bin Anfänger und gerade etwas ratlos :-(

    Antworten
  4. Doro

    Hi, habe versucht der Anleitung zu folgen, allerdings gibt es bei mir keine header.css im backend.
    Auch wenn ich mit auf meinem server suche finde ich alles Mögliche nur keine header css im twentytwelve ordner. Du schreibst:
    … gehen wir im Backend auf Design/Editor/header.css…
    Suche ich an der falschen Stelle? finde die Datei nicht, kannst Du helfen?
    Ich weiss bei mir sieht es etwas anders aus (http://www.kuechenkitchen.de/), habe das Suchfeld optisch abgeändert aber es müsste doch trotzdem noch in den Header zu verschieben sein oder?
    Bin dankbar für jeden Tip.

    Antworten
    1. Chris Andersen

      @Doro
      danke für den Hinweis… habe es schon korrigiert. Natürlich ist es die header.php.
      bg Chris :-)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>