So fügen Sie einen Suchumschalteffekt in WordPress hinzu

Haben Sie das Suchsymbol mit Umschalteffekt auf vielen beliebten Websites gesehen? Sehen Sie sich unser Schwesterprojekt List25 als Beispiel an. Die Idee ist, ein einfaches Suchsymbol anzuzeigen, und wenn der Benutzer darauf klickt, werden die Suchformulare auch als Umschalteffekt bezeichnet. Dies ist ein netter Effekt, der Platz spart und es den Benutzern ermöglicht, sich auf den Inhalt zu konzentrieren. Ganz zu schweigen davon, dies ist ideal für Mobile Responsive Themes. In diesem Artikel zeigen wir Ihnen, wie Sie einen Suchumschalteffekt in WordPress-Themes hinzufügen.

Hinweis: Dieses Tutorial richtet sich an fortgeschrittene Benutzer, die sich mit WordPress-Vorlagen-Tags, HTML und CSS auskennen. Anfängernutzern wird empfohlen, zuerst auf dem lokalen Server zu üben.

Anzeigen des WordPress-Suchformulars

WordPress fügt dem HTML-Standard CSS-Klassen hinzu, die von verschiedenen Vorlagen-Tags innerhalb eines Designs generiert werden. WordPress-Themes verwenden Template-Tag zur Anzeige des Suchformulars. Es können zwei verschiedene Suchformulare ausgegeben werden, eines für HTML4-Designs und eines für Designs mit HTML5-Unterstützung. Wenn dein Thema hat add_theme_support ('html5', array ('search-form')) Zeile in der Datei functions.php, dann gibt dieses Template-Tag ein HTML5-Suchformular aus. Andernfalls wird das HTML4-Suchformular ausgegeben.

Eine andere Möglichkeit, um herauszufinden, welche Form Ihr Thema generiert, ist der Quellcode des Suchformulars.

Dies ist das Vorlagetag "get_search_form ()", das angezeigt wird, wenn Ihr Design keine HTML5-Unterstützung hat:

 
 Suchen nach:     

Und dies ist das Formular, das es für ein Design mit HTML5-Unterstützung generiert.

   Suchen nach:     

In diesem Tutorial verwenden wir das HTML5-Suchformular. Wenn Ihr Design ein HTML4-Suchformular generiert, fügen Sie diese Codezeile in die Datei functions.php Ihres Themas ein:

 add_theme_support ('html5', array ('search-form')); 

Nachdem Sie sichergestellt haben, dass Ihr Suchformular ein HTML5-Formular generiert, platzieren Sie das Suchformular im nächsten Schritt dort, wo Sie es anzeigen möchten.

Hinzufügen des Umschalteffekts zum WordPress-Suchformular

Als erstes benötigen Sie ein Suchsymbol. Das Standardthema Twenty Thirteen in WordPress enthält ein sehr kleines Symbol, das wir in unserem Tutorial verwenden werden. Sie können jedoch auch eigene in Photoshop erstellen oder aus dem Internet herunterladen. Stellen Sie einfach sicher, dass die Datei search-icon.png heißt.

Nun müssen Sie dieses Suchsymbol in den Bilderordner Ihres Themes hochladen. Stellen Sie über einen FTP-Client wie Filezilla eine Verbindung zu Ihrer Website her und öffnen Sie Ihr Designverzeichnis.

Dies ist nun der letzte und wichtigste Schritt. Sie müssen dieses CSS zum Stylesheet Ihres Themes hinzufügen:

 .site-header .search-form position: absolut; rechts: 200px; oben: 200px;  .site-header .search-field Hintergrundfarbe: transparent; Hintergrundbild: URL (images / search-icon.png); Hintergrundposition: 5px Mitte; Hintergrundwiederholung: keine Wiederholung; Hintergrundgröße: 24px 24px; Grenze: keine; Cursor: Zeiger; Höhe: 37px; Marge: 3px 0; Auffüllen: 0 0 0 34px; Position: relativ; -Webkit-Übergang: Breite 400ms Leichtigkeit, Hintergrund 400ms Leichtigkeit; Übergang: Breite 400ms Leichtigkeit, Hintergrund 400ms Leichtigkeit; Breite: 0;  .site-header .search-field: focus background-color: #fff; Grenze: 2px fest # c3c0ab; Cursor: Text; Umriss: 0; Breite: 230px;  .search-form .search-submit display: none;  

Das Wichtigste an diesem CSS sind die CSS3-Übergangseffekte, die es uns ermöglichen, den Toggle-Effekt mit Leichtigkeit zu erzeugen. Beachten Sie auch, dass Sie die Position des Suchsymbols und -formulars noch an das Layout Ihres Themas anpassen müssen.

Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, einen Suchumschalteffekt in Ihrem WordPress-Design hinzuzufügen. Was denken Sie über das Suchformular zum Umschalten? Wir sehen immer mehr Seiten mit diesem Effekt. Hinterlassen Sie Ihr Feedback und Ihre Fragen in den Kommentaren oder treten Sie mit uns in das Gespräch bei Google+.