Möchten Sie einen Such-Toggle-Effekt in WordPress hinzufügen?
Ein Such-Toggle-Effekt ermöglicht es Ihnen, ein Suchsymbol anstelle eines Formulars anzuzeigen. Wenn Sie auf das Symbol klicken, wird das Suchformular mit einer subtilen Slide-out-Animation angezeigt.
In diesem Artikel zeigen wir Ihnen, wie Sie den Such-Toggle-Effekt in WordPress einfach hinzufügen können.
Was ist der Search Toggle Effect in WordPress?
Der Such-Toggle-Effekt ist eine Webdesign-Technik zur Verbesserung der Sucherfahrung auf einer WordPress-Website.
Anstelle eines Suchformulars wird ein Suchsymbol angezeigt. Wenn ein Benutzer darauf klickt, wird das Suchformular mit einer Slideout-Animation angezeigt.
Das Standard-Suchformular von WordPress sieht nicht sehr gut aus. Viele Top-WordPress-Themes ersetzen bereits das Standardformular durch ihre Stile.
Wenn Ihr Theme jedoch immer noch ein statisches, einfaches Suchformular verwendet, können Sie dieses Tutorial nutzen, um es benutzerfreundlicher zu gestalten.
Schauen wir uns also an, wie man den Such-Toggle-Effekt in WordPress einfach hinzufügen kann.
Hinweis: Dieses Tutorial ist für mittlere und fortgeschrittene Benutzer geeignet, da es ein gewisses Grundverständnis von HTML/CSS voraussetzt.
Hinzufügen eines Such-Toggle-Effekts in WordPress
Um einen Such-Toggle-Effekt in WordPress hinzuzufügen, müssen Sie einen Suchformular-Block oder ein Widget auf Ihrer Website platzieren und dann einen benutzerdefinierten CSS-Code hinzufügen.
Zunächst müssen Sie dafür sorgen, dass auf Ihrer Website ein Suchformular vorhanden ist.
Hinzufügen eines Suchformulars in einem Blockthema mit vollständiger Website-Bearbeitung
Wenn Sie ein neueres WordPress-Block-Theme mit der vollständigen Website-Bearbeitungsfunktion verwenden, fügen Sie auf diese Weise das Suchformular zu Ihrer Website hinzu.
Rufen Sie einfach die Seite Erscheinungsbild “ Editor auf. Fügen Sie auf der Bearbeitungsseite den Block „Suche“ hinzu, in dem Sie das Suchformular anzeigen möchten.
Vergessen Sie danach nicht, auf die Schaltfläche „Speichern“ zu klicken, um Ihre Änderungen zu speichern.
Hinzufügen eines Suchformulars in anderen WordPress-Themes
Bei WordPress-Themes ohne die Funktion zur vollständigen Bearbeitung der Website können Sie den Suchblock oder das Such-Widget in Ihre Seitenleiste oder einen anderen Widget-fähigen Bereich einfügen.
Gehen Sie auf die Seite Erscheinungsbild “ Widgets und fügen Sie den Block/das Widget „Suche“ in die Seitenleiste ein, wo Sie das Suchformular anzeigen möchten.
Als nächstes müssen Sie ein transparentes Bild für das Suchsymbol finden.
Für diesen Lehrgang verwenden wir dieses Bild. Es ist für dunkle Hintergründe geeignet (Sie können es gerne auf Ihrer Website verwenden).
Wenn Sie ein eigenes Suchsymbol erstellen möchten, sollten Sie ein transparentes PNG-Bild mit einer Größe von maximal 50×50 Pixeln erstellen.
Sobald Sie das Bildsymbol haben, müssen Sie es auf Ihre Website hochladen. Gehen Sie auf die Seite Medien “ Neu hinzufügen und laden Sie Ihr Suchsymbol-Bild hoch.
Klicken Sie nach dem Hochladen auf die Schaltfläche „URL in die Zwischenablage kopieren“ und fügen Sie diese URL in einen einfachen Texteditor wie Notepad oder TextEdit ein.
Nun, da alles vorhanden ist, müssen Sie Ihrer WordPress-Website einige benutzerdefinierte CSS hinzufügen.
Für dieses Tutorial empfehlen wir die Verwendung des WPCode-Plugins , um Ihr benutzerdefiniertes CSS zu speichern.
Mit WPCode können Sie ganz einfach benutzerdefinierte Codeschnipsel in WordPress hinzufügen. Es ist einfach zu bedienen, und Ihr Code wird nicht durch Theme-Updates oder den Wechsel zu einem anderen Theme beeinträchtigt.
Zunächst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Seite Code Snippets in Ihrem WordPress-Admin-Dashboard aufrufen. Klicken Sie dann einfach oben auf die Schaltfläche „Neu hinzufügen“.
Auf dem nächsten Bildschirm müssen Sie zunächst einen Titel für dieses Codefragment angeben. Das kann alles sein, was Ihnen hilft, dieses Codefragment zu identifizieren.
Ändern Sie anschließend den „Code-Typ“ in „HTML-Schnipsel“. Wir werden unser benutzerdefiniertes CSS mit HTML in die Kopfzeile der Website laden.
Nun müssen Sie den folgenden Code in das Feld „Codevorschau“ einfügen.
<style type="text/css">
.wp-block-search__inside-wrapper
.wp-block-search__input {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.wp-block-search__inside-wrapper
.wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
Wichtig! Vergessen Sie nicht, /url/to/search-icon.png durch die zuvor kopierte Bild-URL zu ersetzen.
Danach müssen Sie den Schalter „Inaktiv“ auf „Aktiv“ umstellen und dann auf die Schaltfläche „Snippet speichern“ klicken.
Sie können nun Ihre Website besuchen, um Ihr Suchformular mit dem Umschalteffekt in Aktion zu sehen.
Fehlerbehebung für den Toggle-Effekt des Suchformulars
Die obige Methode funktioniert mit den meisten modernen WordPress-Themes, die Widget-Blöcke verwenden.
Bei einigen Themen funktioniert diese Methode jedoch möglicherweise nicht.
Dies kann passieren, wenn das Suchformular in Ihrem WordPress-Theme nicht die Klassen wp-block-search__inside-wrapper und wp-block-search__input enthält.
In diesem Fall müssen Sie das Inspektionstool verwenden, um herauszufinden, welche CSS-Klassen von Ihrem WordPress-Theme verwendet werden.
Im Screenshot unten verwendet unser Demo-Theme beispielsweise diese CSS-Klassen für das Suchformular.
Sie können nun den unten stehenden Code ändern und stattdessen diese CSS-Klassen verwenden. Hier ist ein Beispiel.
<style type="text/css">
.search-wrap input.s {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
So sah es auf unserer Test-Website aus.
Bonus-Tipp: Fügen Sie eine bessere WordPress-Suche für Ihre Website hinzu
Der Toggle-Effekt lässt Ihr WordPress-Suchformular nur hübsch aussehen. Er hat keinen Einfluss auf die Qualität der Suchergebnisse auf Ihrer Website.
WordPress verfügt standardmäßig über eine sehr einfache Suchfunktion. Diese Suchfunktion ist langsam, ungenau und zeigt oft leere Ergebnisse an.
An dieser Stelle kommt SearchWP ins Spiel.
Es ist das beste WordPress-Such-Plugin auf dem Markt und ermöglicht es Ihnen, die Standard-Suchfunktion einfach durch eine leistungsstarke Suchmaschine zu ersetzen.
SearchWP ersetzt Suchformulare automatisch, sodass Sie keine Theme-Dateien bearbeiten müssen. Es sucht überall auf Ihrer Website nach Übereinstimmungen und verbessert die Qualität der Suchergebnisse drastisch.
Es kommt auch mit einer Live-Such-Erweiterung, um sofort Ergebnisse anzuzeigen, wie Benutzer ihre Anfragen eingeben. Außerdem hat es volle eCommerce-Unterstützung, die es Ihnen ermöglicht, eine intelligente WooCommerce-Suchfunktion für Ihren Online-Shop zu erstellen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie einen Such-Toggle-Effekt in WordPress hinzufügen können. Vielleicht interessiert Sie auch unser WordPress Conversion-Tracking-Leitfaden oder Sie erfahren, wie Sie die beliebtesten Beiträge auf Ihrer Website finden.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
James Burns says
Thank you so much. Exactly the info I needed, presented in an easy-to-understand format.
WPBeginner Support says
You’re welcome, glad you found our content helpful
Admin
Osh says
Hi,
I’m using a child theme, should i add those codes to the parent theme’s files?
I tried to do that and it is not working, please help !!!
Thanks
WPBeginner Support says
You would want to add the code to your child theme
Admin
Benjamin Rutledge says
Is it possible to implement this only on mobile? My theme has a nice animated search function on desktop, but only a toggle to show/hide search box in place of my logo on mobile.
Beth Terry says
Hi. Thank you very much for this code. I did have to play around with the positioning to get the search button to appear where I want it, and since I only wanted it to appear in the mobile version, I also added css to the media query for over 800px screens to show the full search field instead of the icon. I got it working great, but I do think it’s a little complicated for folks who just want something to basically plug and play.
You can view the results here:
To everyone who doubts, javascript is definitely not needed.
Beth Terry says
Also, I want to add that I am using a Twenty Twelve child theme, which comes with the HTML4 search code. Adding the HTML5 support to the functions.php did not fix it, so I copied and pasted the HTML5 search code that you posted above into my theme header where I wanted to search box to be.
Emily G says
Hi there – implementing this on a website and would like to use FontAwesome instead of an image. I cannot get the icon to show yup, however. Do you have any tips? I am adding the font and icon font-family: FontAwesome;
content: „\f002″; to the .search-form input[type=“search“]
Thanks!
Bradley says
Try this:
font: normal normal normal 1em/1 FontAwesome;
Steve says
I was so hoping this would work for me. I pasted in the code in the Additional CSS area of my theme (twentytwelvechild), added the search-icon.png to my theme folder using FTM and added add_theme_support(‚html5′, array(’search-form‘)); to my theme’s functions.php file. I see no change and wonder what I have missed. I hope someone can offer me a clue. thank you.
Harmandeep Singh says
Its not working.
Crowd says
Thank you very much, works like a charm.
Do you think there’s a way to make the search field appear from right to left (unlike from left to right like now)?
Marimar says
Align the text to the right
text-align: right;
It slides to the other side.
Tony López says
Thanks! It work perfectly.
Cato says
Yeah… just like I thought, this doesn´t work at all. How is it supossed to work with no JS anyway?
Cato says
Hmmm this is kind of old but… no javascript required here really? what kind of dark magic is this?
WPBeginner Support says
Instead of JS, this technique uses CSS.
Admin
SiRetu says
Thanks for the code… Is this responsive? I mean, I want the search field is fully showed when in mobile. Is it possible?
Panfi says
Not working for me and wonder why
Cassy says
I got this working on genesis but my search form is in my nav bar, and when the screen width is relatively too small, the search form moves down.
Sohan says
It works!
Thank you soooooooooooooo much!
Anur says
I dont think this works on Genesis
Cassy says
I got it working on Genesis. You have to move the search-icon.png into your genesis child theme images folder. Then, depending on where you put your search form, mine is in the nav bar so it is slightly different, you adjust the css style to your likes. I had to modify the „.genesis-nav-menu .search input“ class to get it working.
Laura says
Hi Cassy, Can you give a little more info on how you modified the .genesis-nav-menu .search input class? I can’t seem to get it working. Thanks!
Maria says
Hi! I’m using Genesis and I can’t get this effect to work. Any tips as to why?
Anur says
yea the same problem im on genesis with enteprise pro theme doesnt work.
Anyone who has solution to make this work on genesis..
Roy says
this is really great! Is it possible to get the icon to sit static at the right while the form slides out to the left? I can’t seem to figure it out!
Joshua Farr says
Greetings – Thank you for this great bit of code. I’ve tried inserting it into a client’s site that I’m working, using the HTML5 version of the code, I placed the extra bit into functions.php and added all of the css. I put in a search icon and got the form to show up how I want on the site – it will even do all of the toggle-ing effect as desired – but when I enter text that I want to search to test it out, I can not submit the search to view search results. We are using a woocommerce theme, „Mystile“, which has a default search form (which works when entered) but I much prefer the looks and functionality of the form as mentioned on this page.
We tried putting the wocommerce search form code side by side with the code you gave above, tried swapping out bits and pieces to „merge“ the two…but no luck.
Any reccomendations would be extremely helpful.
Thank you!
-Josh
WPBeginner Support says
There could be many things that may cause this, it is not possible for us to help out with theme compatibility issues.
Admin
Rajeesh Nair says
Now that’s some interesting stuff there. Though I am a mere beginner and I actually use the search option that has come default with the blog theme which is like a pop-up (not exactly a pop-up though as its CSS and not javascript) and displays search bar.
But what I am exactly looking for is that how to display Google Search along with Blog search as found in popular blogs like ListVerse and others. Please guide me through this!
WPBeginner Support says
Take a look at our guide on how to add Google search in WordPress.
Admin
adolf witzeling says
Another great tutorial. I will add this to my site-just because it’s cool.
alexisnicholson says
Code looks fabulous , I appreciate your efforts , surely gonna try this one for my word press project .
Codingbrains
Shahraar Khan says
A demo would be helpful.. Also what does the use of role=“search“ attribute in the form tag, what is the attribute „role“ used for?
Susan Silver says
I have been looking for a simple tutorial on this. Thanks! Have you done one yet on the sliding menus like those on the Facebook mobile app? These menus are becoming very popular, even for desktop apps.
WPBeginner Support says
Actually we have, checkout how to add a slide panel menu in WordPress.
Admin