Ein sauberer, ausklappbarer Such-Toggle kann Ihrer WordPress-Site sofort ein elegantes und modernes Gefühl verleihen. Anstatt eine vollständige Suchleiste in Ihrem Header anzuzeigen oder sie komplett zu verstecken, hält ein Toggle-Effekt Ihr Design ordentlich und macht die Suche leicht zugänglich.
Wir haben gesehen, dass dieses kleine Detail der Benutzeroberfläche einen großen Unterschied macht und Websites ein polierteres, professionelleres Aussehen verleiht, ohne Unordnung zu verursachen.
Das Beste daran? Es gibt Wege, dies intelligent und effizient zu tun.
In diesem Tutorial zeigen wir Ihnen genau, wie Sie einen reibungslosen, ausklappbaren Such-Toggle-Effekt in WordPress hinzufügen. Egal, ob Sie einen Blog, eine Geschäftswebsite oder einen Online-Shop betreiben, dieses Upgrade wird dazu beitragen, Ihre Benutzererfahrung mit einer einfachen, eleganten Note zu verbessern. 🎨
Was ist der Such-Toggle-Effekt in WordPress?
Der Such-Toggle-Effekt ist eine Webdesign-Technik, mit der Sie anstelle eines Suchformulars ein Suchsymbol anzeigen. Wenn ein Benutzer darauf klickt, erscheint das Suchformular mit einer Slideout-Animation.
Das standardmäßige WordPress-Suchformular sieht nicht sehr gut aus. Viele Top-WordPress-Themes ersetzen das Standardformular bereits durch ihre eigenen Stile.
Wenn Ihr Theme jedoch immer noch ein statisches, einfaches Suchformular verwendet, können Sie mit dieser Anleitung es benutzerfreundlicher gestalten.
In diesem Sinne zeigen wir Ihnen, wie Sie den Such-Toggle-Effekt in WordPress einfach hinzufügen und Ihre Website interaktiver gestalten. Hier ist eine kurze Übersicht über alle Themen, die wir in diesem Leitfaden behandeln werden:
- Hinzufügen eines Such-Toggle-Effekts in WordPress
- Fehlerbehebung beim Suchformular-Toggle-Effekt
- Bonus-Tipp: Fügen Sie eine bessere WordPress-Suche für Ihre Website hinzu
- FAQ: Hinzufügen eines Such-Toggle-Effekts in WordPress
- Weitere Anleitungen zur Verbesserung Ihrer WordPress-Suche
💡 Geheimtipp: Dieses Tutorial eignet sich am besten für fortgeschrittene WordPress-Benutzer, da es ein grundlegendes Verständnis von HTML / CSS erfordert.
Fangen wir an.
Hinzufügen eines Such-Toggle-Effekts in WordPress
Um einen Such-Toggle-Effekt in WordPress hinzuzufügen, müssen Sie einen Suchformularblock oder ein Widget auf Ihrer Website platzieren und dann benutzerdefinierten CSS-Code hinzufügen.
Stellen wir zunächst sicher, dass Sie ein Suchformular auf Ihrer Website haben.
Ein Suchformular in einem Block-Theme mit Full Site Editing hinzufügen
Wenn Sie ein WordPress-Block-Theme mit der Funktion für die vollständige Website-Bearbeitung verwenden, dann fügen Sie das Suchformular auf diese Weise zu Ihrer Website hinzu.
Besuchen Sie einfach Design » Editor in Ihrem WordPress-Dashboard. Auf dem Bearbeitungsbildschirm möchten Sie den Block „Suchen“ hinzufügen, wo Sie das Suchformular anzeigen möchten.
Vergessen Sie nicht, danach auf die Schaltfläche 'Speichern' zu klicken, um Ihre Änderungen zu speichern.
Ein Suchformular in anderen WordPress-Themes hinzufügen
Für WordPress-Themes ohne die Full-Site-Editing-Funktion können Sie den Suchblock oder das Widget zu Ihrer Seitenleiste oder einem anderen Widget-fähigen Bereich hinzufügen.
Um dies zu tun, gehen Sie in Ihrem WordPress-Dashboard zu Darstellung » Widgets. Fügen Sie dann den Block/Widget 'Suche' zum Seitenbereich hinzu, in dem Sie das Suchformular anzeigen möchten.
Als Nächstes suchen wir ein transparentes Bild für das Suchsymbol.
Für dieses Tutorial verwenden wir dieses Bild, da es für dunkle Hintergründe geeignet ist (verwenden Sie es gerne auf Ihrer Website).
Wenn Sie Ihr eigenes Suchsymbol erstellen müssen, wäre es großartig, ein transparentes PNG-Bild mit Abmessungen von nicht mehr als 50x50 Pixel zu erstellen.
Der nächste Schritt ist das Hochladen des Icons auf Ihre Website. Gehen Sie einfach zu Medien » Neu hinzufügen und klicken Sie auf „Dateien auswählen“, um Ihr Suchsymbolbild hochzuladen.
Nach dem Hochladen möchten Sie auf die Schaltfläche „URL in die Zwischenablage kopieren“ klicken und die URL in einen einfachen Texteditor wie Notepad oder TextEdit einfügen.
Jetzt, da alles an seinem Platz ist, müssen Sie Ihrer WordPress-Website benutzerdefiniertes CSS hinzufügen. Wir empfehlen die Verwendung von WPCode, dem besten Code-Snippet-Plugin, um Ihr benutzerdefiniertes CSS zu speichern.
WPCode ermöglicht es Ihnen, einfach benutzerdefinierte Code-Snippets in WordPress einzufügen. Es ist einfach zu bedienen und Ihr Code wird nicht von Theme-Updates oder beim Wechsel zu einem anderen Theme beeinträchtigt.
Einige unserer Partner-Marken nutzen es, um ihre benutzerdefinierten Snippets hinzuzufügen und zu verwalten. Es hat für sie außergewöhnlich gut funktioniert, und Sie können mehr darüber in unserem detaillierten WPCode-Testbericht erfahren.
Installieren und aktivieren wir also das kostenlose WPCode-Plugin. Wenn Sie Hilfe benötigen, finden Sie unsere Schritt-für-Schritt-Anleitung zum Thema Installation eines WordPress-Plugins.
Nach der Aktivierung besuchen Sie einfach die Seite Code-Snippets » + Snippet hinzufügen in Ihrem WordPress-Admin-Dashboard.
Auf dem nächsten Bildschirm sehen Sie die WPCode-Snippet-Bibliothek.
Fahren Sie mit der Maus über die Option „Benutzerdefinierten Code hinzufügen (Neuer Ausschnitt)“ in der Bibliothek und klicken Sie auf die Schaltfläche „Benutzerdefinierten Ausschnitt hinzufügen“, wenn sie erscheint.
Danach erscheint eine Liste von Code-Typen auf dem Bildschirm. Für dieses Tutorial müssen Sie die Option 'HTML-Snippet' auswählen.
Das liegt daran, dass Sie das benutzerdefinierte CSS über HTML im Website-Header laden werden.
Von dort aus müssen Sie einen Titel für dieses Code-Snippet angeben.
Es könnte alles sein, was Ihnen hilft, den Ausschnitt zu identifizieren.
Jetzt können Sie den folgenden Code in das Feld „Code-Vorschau“ 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' umlegen.
Vergessen Sie dann nicht, auf die Schaltfläche 'Snippet speichern' zu klicken.
Und das ist alles!
Wenn Sie Ihre Website besuchen, können Sie Ihr Suchformular mit dem Toggle-Effekt in Aktion sehen.
Fehlerbehebung beim Suchformular-Toggle-Effekt
Die obige Methode würde mit den meisten modernen WordPress-Themes, die Widget-Blöcke verwenden, funktionieren. Bei einigen Themes funktioniert diese Methode jedoch möglicherweise nicht.
Dies könnte 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 Inspect-Tool verwenden, um herauszufinden, welche CSS-Klassen von Ihrem WordPress-Theme verwendet werden.
Zum Beispiel verwendet unser Demotheme in der folgenden Bildschirmaufnahme diese CSS-Klassen für das Suchformular.
Nun können Sie den folgenden 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 Testwebsite 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 beeinträchtigt nicht die Qualität der Suchergebnisse Ihrer Website.
WordPress verfügt standardmäßig über eine sehr einfache Suchfunktion. Diese Funktion ist oft langsam, ungenau und liefert möglicherweise leere Ergebnisse.
Hier kommt SearchWP, das beste WordPress-Such-Plugin, ins Spiel. Es ermöglicht Ihnen, die Standard-Suchfunktion einfach durch eine leistungsstarke Suchmaschine zu ersetzen.
Wir haben es getestet, um alle seine Funktionen zu erkunden, und Sie können unseren vollständigen SearchWP-Testbericht lesen, um mehr darüber zu erfahren.
SearchWP ersetzt automatisch Suchformulare, 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 wird auch mit einer Live-Suche-Erweiterung geliefert, die Ergebnisse sofort anzeigt, während Benutzer ihre Suchanfragen eingeben. Außerdem verfügt es über vollständige E-Commerce-Unterstützung, mit der Sie ein intelligentes WooCommerce-Sucherlebnis in Ihrem Online-Shop erstellen können.
Für Schritt-für-Schritt-Anleitungen können Sie sich gerne unseren Leitfaden ansehen, wie Sie die WordPress-Suche mit SearchWP verbessern können: wie Sie die WordPress-Suche mit SearchWP verbessern.
FAQ: Hinzufügen eines Such-Toggle-Effekts in WordPress
Haben Sie Fragen dazu, wie der Such-Toggle funktioniert oder wie Sie ihn auf Ihrer WordPress-Website anpassen können? Hier sind einige häufig gestellte Fragen mit klaren Antworten, die Ihnen helfen sollen.
Muss ich programmieren können, um einen Such-Toggle-Effekt hinzuzufügen?
Nicht wirklich. Obwohl ein grundlegendes Verständnis von HTML oder CSS hilfreich sein kann, können Sie die Schritte in dieser Anleitung auch ohne Programmierkenntnisse befolgen.
Was ist, wenn mein Theme den Toggle-Effekt nicht richtig anzeigt?
Einige Themes benötigen möglicherweise zusätzliche Anpassungen. Wenn der Schalter nicht korrekt angezeigt wird, können Sie das Inspektionswerkzeug des Browsers verwenden, um die CSS-Klassen Ihres Themes zu finden und die benutzerdefinierten CSS wie im Tutorial gezeigt anzupassen.
Funktioniert dieser Such-Toggle auch auf Mobilgeräten?
Ja! Der Umschalteffekt ist reaktionsschnell und sollte sowohl auf Desktops als auch auf Mobilgeräten gut funktionieren. Stellen Sie einfach sicher, dass Sie ihn auf verschiedenen Bildschirmgrößen testen, um zu bestätigen, dass alles gut aussieht.
Kann ich jedes Bild für das Suchsymbol verwenden?
Ja, aber es ist am besten, ein transparentes PNG-Symbol zu verwenden, das sich vom Hintergrund Ihrer Website abhebt. Wir empfehlen, es unter 50×50 Pixel zu halten, damit es scharf aussieht und schnell geladen wird.
Weitere Anleitungen zur Verbesserung Ihrer WordPress-Suche
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen Such-Toggle-Effekt in WordPress hinzufügen. Als Nächstes könnten Ihnen diese Anleitungen hilfreich sein:
- So fügen Sie eine Suchleiste zum WordPress-Menü hinzu
- So suchen Sie nach Kategorie in WordPress
- So fügen Sie mehrsprachige Suche in WordPress hinzu
- So integrieren Sie benutzerdefinierte Beitragstypen in WordPress-Suchergebnisse
- So erstellen Sie ein durchsuchbares Mitgliederverzeichnis in WordPress
- So erstellen Sie eine durchsuchbare Datenbank in WordPress
- So schließen Sie Seiten von WordPress-Suchergebnissen aus
- So fügen Sie Ihrer WordPress-Website Sprachsuchfunktionen hinzu
- Beste Such-Plugins für WordPress-Benutzer
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Prad
Danke dafür.
Die Standard-UI des Suchblocks ist ziemlich mager. Mir gefällt diese Implementierung. Wenn jedoch 'Nur Button' ausgewählt ist und der Benutzer auf das Suchsymbol klickt, erscheint die Suchleiste links und verschiebt das Menü, was die Benutzeroberfläche ruiniert. Gibt es eine Möglichkeit, die Suchleiste unter dem Suchbutton erscheinen zu lassen, wie auf vielen Websites? Dieser Ansatz scheint meiner Meinung nach viel sauberer zu sein.
Danke.
WPBeginner Support
That can be a little more complex depending on the implementation but we may look into something like that for a possible future update to the article
Admin
Dennis Muthomi
Ich habe diesen Effekt auf einer Kundenwebsite.
Eine Sache, die Sie bei der Implementierung dieser Funktion berücksichtigen sollten, ist das mobile Erlebnis.
Auf kleineren Bildschirmen kann es von Vorteil sein, das CSS anzupassen, um sicherzustellen, dass die erweiterte Suchleiste nicht mit anderen Elementen überlappt.
Jiří Vaněk
Ich suchte nach einer Möglichkeit, Platz in meinem Hauptmenü zu sparen, da die Suchleiste ziemlich viel Platz beanspruchte. Ehrlich gesagt, fiel mir keine Möglichkeit ein, Platz zu sparen, da das Menü ziemlich lang war. Also versuchte ich, die Größe der Suchleiste zu reduzieren. Nachdem ich diesen Artikel gelesen hatte, habe ich Ihre Lösung angewendet und sie ist genau das, wonach ich gesucht habe. Die Suche auf meiner Website wird nicht so oft genutzt, und dies ist eine elegante Lösung, um Platz für das Hauptmenü zu schaffen und die Suchleiste auf die notwendige Größe zu reduzieren. Tolle Arbeit.
WPBeginner Support
Schön, dass Sie es hilfreich fanden!
Admin
James Burns
Vielen Dank. Genau die Informationen, die ich brauchte, präsentiert in einem leicht verständlichen Format.
WPBeginner Support
You’re welcome, glad you found our content helpful
Admin
Osh
Hallo,
Ich benutze ein Child-Theme, sollte ich diese Codes in die Dateien des Parent-Themes einfügen?
Ich habe versucht, das zu tun, und es funktioniert nicht, bitte helfen Sie !!!
Danke
WPBeginner Support
Sie sollten den Code zu Ihrem Child-Theme hinzufügen
Admin
Benjamin Rutledge
Ist es möglich, dies nur auf Mobilgeräten zu implementieren? Mein Theme hat eine schöne animierte Suchfunktion auf dem Desktop, aber auf Mobilgeräten nur einen Toggle, um das Suchfeld anstelle meines Logos ein- und auszublenden.
Beth Terry
Hallo. Vielen Dank für diesen Code. Ich musste mit der Positionierung herumspielen, um den Suchbutton dort erscheinen zu lassen, wo ich ihn haben möchte, und da ich ihn nur in der mobilen Version anzeigen wollte, habe ich auch CSS zur Media Query für Bildschirme über 800 Pixel hinzugefügt, um das vollständige Suchfeld anstelle des Icons anzuzeigen. Ich habe es großartig zum Laufen gebracht, aber ich denke, es ist ein wenig kompliziert für Leute, die einfach nur etwas zum Einstecken und Loslegen wollen.
Sie können die Ergebnisse hier einsehen:
An alle, die zweifeln, JavaScript wird definitiv nicht benötigt.
Beth Terry
Außerdem möchte ich hinzufügen, dass ich ein Twenty Twelve Child-Theme verwende, das den HTML4-Suchcode enthält. Das Hinzufügen der HTML5-Unterstützung zu functions.php hat das Problem nicht behoben, daher habe ich den HTML5-Suchcode, den Sie oben gepostet haben, in meinen Theme-Header kopiert und eingefügt, wo ich die Suchbox haben wollte.
Emily G
Hallo – ich implementiere das auf einer Website und möchte FontAwesome anstelle eines Bildes verwenden. Ich bekomme das Symbol jedoch nicht angezeigt. Haben Sie Tipps? Ich füge die Schriftart und die Icon-Schriftfamilie hinzu: font-family: FontAwesome;
content: "\f002"; zu .search-form input[type="search"]
Danke!
Bradley
Versuchen Sie Folgendes:
font: normal normal normal 1em/1 FontAwesome;
Steve
Ich hatte so gehofft, dass das für mich funktionieren würde. Ich habe den Code in den Bereich „Zusätzliches CSS“ meines Themes (twentytwelvechild) eingefügt, die search-icon.png mit FTM in meinen Theme-Ordner hochgeladen und add_theme_support(‘html5’, array(‘search-form’)); zu meiner theme’s functions.php-Datei hinzugefügt. Ich sehe keine Veränderung und frage mich, was ich übersehen habe. Ich hoffe, jemand kann mir einen Hinweis geben. Danke.
Harmandeep Singh
Es funktioniert nicht.
Menge
Vielen Dank, es funktioniert einwandfrei.
Gibt es Ihrer Meinung nach eine Möglichkeit, das Suchfeld von rechts nach links erscheinen zu lassen (im Gegensatz zu links nach rechts wie jetzt)?
Marimar
Text rechtsbündig ausrichten
text-align: right;
Es gleitet auf die andere Seite.
Tony López
Danke! Es funktioniert perfekt.
Cato
Ja… genau wie ich dachte, das funktioniert überhaupt nicht. Wie soll das überhaupt ohne JS funktionieren?
Cato
Hmmm, das ist ziemlich alt, aber... hier wird wirklich kein Javascript benötigt? Was für dunkle Magie ist das?
WPBeginner Support
Anstelle von JS verwendet diese Technik CSS.
Admin
SiRetu
Danke für den Code… Ist das responsiv? Ich meine, ich möchte, dass das Suchfeld auf dem Handy vollständig angezeigt wird. Ist das möglich?
Panfi
Not working for me and wonder why
Cassy
Ich habe das bei Genesis zum Laufen gebracht, aber mein Suchformular befindet sich in meiner Navigationsleiste, und wenn die Bildschirmbreite relativ klein ist, rutscht das Suchformular nach unten.
Sohan
Es funktioniert!
Vielen Dank!
Anur
Ich glaube nicht, dass das bei Genesis funktioniert
Cassy
Ich habe es auf Genesis zum Laufen gebracht. Sie müssen search-icon.png in den Bilderordner Ihres Genesis-Child-Themes verschieben. Dann, je nachdem, wo Sie Ihr Suchformular platzieren, meins ist in der Navigationsleiste, daher ist es etwas anders, passen Sie den CSS-Stil nach Ihren Wünschen an. Ich musste die Klasse „.genesis-nav-menu .search input“ ändern, um es zum Laufen zu bringen.
Laura
Hallo Cassy, Können Sie mir mehr Informationen geben, wie Sie die Klasse .genesis-nav-menu .search input modifiziert haben? Ich kann es nicht zum Laufen bringen. Danke!
Maria
Hallo! Ich benutze Genesis und dieser Effekt funktioniert nicht. Haben Sie Tipps, warum?
Anur
yea the same problem im on genesis with enteprise pro theme doesnt work.
Anyone who has solution to make this work on genesis..
Roy
Das ist wirklich großartig! Ist es möglich, dass das Symbol rechts statisch bleibt, während sich das Formular nach links schiebt? Ich kann es nicht herausfinden!
Joshua Farr
Grüße – Vielen Dank für diesen großartigen Code. Ich habe versucht, ihn in die Website eines Kunden einzufügen, an der ich arbeite, und dabei die HTML5-Version des Codes verwendet. Ich habe den zusätzlichen Teil in functions.php eingefügt und das gesamte CSS hinzugefügt. Ich habe ein Suchsymbol eingefügt und das Formular so angezeigt, wie ich es auf der Website haben möchte – es führt sogar den gewünschten Toggle-Effekt aus – aber wenn ich Text eingebe, den ich suchen möchte, um ihn zu testen, kann ich die Suche nicht absenden, um Suchergebnisse anzuzeigen. Wir verwenden ein WooCommerce-Theme namens „Mystile“, das ein Standard-Suchformular hat (das funktioniert, wenn es eingegeben wird), aber ich bevorzuge das Aussehen und die Funktionalität des Formulars, wie auf dieser Seite erwähnt.
Wir haben versucht, den WooCommerce-Suchformularcode nebeneinander mit dem obigen Code zu platzieren, Teile ausgetauscht, um die beiden zu 'verschmelzen'... aber ohne Erfolg.
Jede Empfehlung wäre äußerst hilfreich.
Danke!
-Josh
WPBeginner Support
Es kann viele Gründe dafür geben, wir können Ihnen bei Theme-Kompatibilitätsproblemen nicht helfen.
Admin
Rajeesh Nair
Das sind ja interessante Sachen. Obwohl ich noch ein Anfänger bin und die Suchfunktion nutze, die standardmäßig mit dem Blog-Theme geliefert wird und wie ein Pop-up ist (nicht genau ein Pop-up, da es CSS und kein JavaScript ist) und eine Suchleiste anzeigt.
Aber was ich genau suche, ist, wie man die Google-Suche zusammen mit der Blog-Suche anzeigt, wie sie auf beliebten Blogs wie ListVerse und anderen zu finden ist. Bitte helfen Sie mir dabei!
WPBeginner Support
Schauen Sie sich unseren Leitfaden an, wie Sie Google-Suche in WordPress hinzufügen.
Admin
adolf witzeling
Ein weiteres tolles Tutorial. Ich werde das auf meine Website stellen – einfach weil es cool ist.
alexisnicholson
Der Code sieht fabelhaft aus, ich schätze Ihre Bemühungen, werde das hier sicher für mein WordPress-Projekt ausprobieren.
Codingbrains
Shahraar Khan
Eine Demo wäre hilfreich.. Was bedeutet außerdem die Verwendung des Attributs role=\"search\" im Formular-Tag, wofür wird das Attribut \"role\" verwendet?
Susan Silver
Ich habe nach einem einfachen Tutorial dazu gesucht. Danke! Haben Sie schon eines zu den Schiebe-Menüs gemacht, wie die in der Facebook-Mobile-App? Diese Menüs werden immer beliebter, auch für Desktop-Apps.
WPBeginner Support
Tatsächlich haben wir das, schauen Sie sich an, wie Sie ein Slide-Panel-Menü in WordPress hinzufügen.
Admin