So fügen Sie einer WordPress-Site eine Suchleiste hinzu

So fügen Sie eine Suchleiste im WordPress-Site-Banner hinzu

Websitebesitzer haben oft Schwierigkeiten, ihren WordPress-Websites eine Suchleiste hinzuzufügen. Einige von ihnen wenden komplexe Methoden an, um ihren WP-Websites eine Suchleiste hinzuzufügen, während andere überhaupt keine Ahnung haben, welche Methode sie anwenden sollen.

In diesem Fall ist es entscheidend, eine Möglichkeit zu finden, Ihrer WordPress-Website reibungslos und mühelos eine Suchleiste hinzuzufügen. Wenn Sie es satt haben, ineffiziente Methoden zum Einfügen einer Suchleiste in Ihre WordPress-Website auszuprobieren, sind Sie hier genau richtig.

Egal, ob Sie eine neue WP-Website erstellt haben oder eine alte WP-Website haben, dieser Beitrag ist informativ und lehrreich.

Suchleiste – eine schnelle und effiziente Möglichkeit, Informationen zu beschaffen:

Eine Website enthält über die Homepage, die Produktseiten, die Blogseiten und die Preisseite zahlreiche Informationen. Betrachten Sie sich einfach als Website-Besucher. Wenn Sie eine Website besuchen, neigen Sie oft dazu, Daten von verschiedenen Webseiten zu beziehen.

Wie finden Sie in diesem Fall diese Daten? Werden Sie feststellen, dass sie diese Seiten einzeln besuchen? Sicherlich würden Sie das nicht gerne tun.

Nicht, dass Sie die benötigten Informationen auf diesem Weg nicht finden würden. Aber es ist zeitaufwändig und auch ekelerregend. Hier kommt das Hinzufügen einer Suchleiste zu Ihrer WordPress-Site ins Spiel. 

Laut einer Umfrage von Suchmaschinenjournal, Mehr als 40% Besucher sagen, dass ein Suchfeld das wichtigste Merkmal einer Website ist

Warum sollten Sie Ihrer Website eine Suchleiste hinzufügen?

Angenommen, Sie haben auf Ihrer Website keine Suchleiste. In diesem Fall haben die Besucher beim Besuch Ihrer Website Schwierigkeiten, die benötigten Informationen zu finden. Infolgedessen verlassen sie Ihre Website und Ihr gesamtes Ziel, sie auf die Website zu bringen, wird vergeblich sein.

Lassen Sie mich vorstellen einige der größten Vorteile Sie können noch besser werden, indem Sie unten eine Suchleiste zu Ihrer Website hinzufügen.

  • Erleichtert Ihren Kunden die Suche nach Informationen
  • Optimiert die Benutzererfahrung
  • Steigert das Engagement 
  • Reduziert die Absprungrate
  • Zeigt die erforderlichen Elemente oder Informationen mit einigen Schlüsselwörtern an

Kannst du Fügen Sie mit dem WordPress-Standardsuch-Widget eine Suchleiste zum Website-Menü hinzu: 

Ist es möglich, eine Menüsuchleiste mit dem WordPress-Standardsuch-Widget hinzuzufügen? Nein, das kannst du nicht. Denn mit WordPress können Sie eine Suchleiste nur in Widget-bereiten Bereichen hinzufügen. 

Wenn Sie dem Menü eine Suchleiste hinzufügen möchten, müssen Sie andere Plugins oder Widgets in verschiedenen Bereichen Ihrer Website nutzen, einschließlich der Kopf-und Fußzeile

Aus diesem Grund würde ich Ihnen in diesem Tutorial drei verschiedene Methoden zum Hinzufügen einer Suchleiste auf Ihrer WordPress-Site vorstellen. 

Schauen wir uns nun an, wie Sie über das WordPress-Standard-Widget eine Suchleiste zu Ihrer Website hinzufügen können.

Suchleiste mit WordPress-Standardsuch-Widget hinzufügen:

Der einfachste und bequemste Weg, eine Suchleiste in Ihre WordPress-Website einzufügen, ist über Ihr WordPress-Dashboard. Wie geht das? Schauen wir es uns an-

Navigieren Sie über das Dashboard zu den Widgets:

Gehen Sie zunächst zum Dashboard Ihres Admin-Panels und suchen Sie nach „Darstellung“. Navigieren Sie und klicken Sie in einer Liste von Elementen unter „Darstellung“ auf „Widgets“.   

Dashboard > Darstellung > Widgets

Navigieren Sie über das Dashboard zu den Widgets

Fügen Sie das Such-Widget aus den verfügbaren Widgets hinzu:

Dadurch gelangen Sie zu einer neuen Seite mit verschiedenen Seitenabschnitten. Klicken Sie nun auf die Schaltfläche „Block hinzufügen“ (erscheint mit einem +-Zeichen), um alle vorhandenen Widgets anzuzeigen. 

Scrollen Sie nach unten, um das Such-Widget zu finden, oder schreiben Sie „Suchen“ in das Suchfeld, um das Such-Widget zu finden.

Klicken Sie auf den Abschnitt, in dem die Suchleiste angezeigt werden soll, und klicken Sie dann auf das Such-Widget. Alternativ können Sie das Such-Widget auch per Drag & Drop in den gewünschten Abschnitt ziehen.

Fügen Sie das Such-Widget hinzu

Nehmen Sie die notwendigen Änderungen vor:

Die Suchleiste wird nun unter dem ausgewählten Abschnitt angezeigt. Sie können die erforderlichen Änderungen an verschiedenen Elementen vornehmen, z. B. an der Ausrichtung der Suchleiste, der Schaltflächenposition, der Textfarbe usw. 

Sie können der Suchleiste auch eine benutzerdefinierte Beschriftung entsprechend Ihren Anforderungen hinzufügen. Klicken Sie abschließend auf die Schaltfläche „Aktualisieren“.

Passen Sie die Suchleiste an

Sehen Sie sich die Suchleiste auf Ihrer Seite an:

Wenn Sie nun eine Ihrer veröffentlichten Seiten oder Beiträge besuchen, können Sie feststellen, dass die Suchleiste oder das Suchfeld in der Hauptseitenleiste angezeigt wird.

Sehen Sie sich die Suchleiste im Frontend an

Suchleiste mit ElementsKit-Such-Widget hinzufügen:    

Jetzt werde ich Sie durch eine andere führen Einfache Möglichkeit, Ihrer Website eine WordPress-Suchleiste hinzuzufügen. Und das über das Header-Such-Widget von ElementsKit. Es ist ganz einfach, über ElementsKit ein Suchfeld hinzuzufügen

Tatsächlich ist ElementsKit ein Elementor-Addon. In diesem Sinne kann das Hinzufügen einer Suchleiste mit ElementsKit auch als Elementor-Suchleiste bezeichnet werden, oder?

Schauen wir uns das ohne weitere Umschweife an So fügen Sie eine Suchleiste mit dem ElementsKit-Such-Widget hinzu

Navigieren Sie im Dashboard zu einem Ihrer vorhandenen Beiträge oder Seiten:

Gehen Sie zunächst zum Dashboard und suchen Sie nach Beiträgen oder Seiten. Hier zeige ich, wie das ElementsKit-Widget mit einem Beitrag namens „Hello World!“ funktioniert. 

Gehen Sie zu „Beiträge“ und wählen Sie dann „Alle Beiträge“, damit alle Ihre Beiträge angezeigt werden. Von dort aus können Sie den Beitrag auswählen, dem Sie eine Suchleiste hinzufügen möchten. Falls Sie noch keinen Beitrag oder keine Seite haben, müssen Sie einen neuen Beitrag oder eine neue Seite hinzufügen.

Dashboard > Beiträge > Alle Beiträge > Ihr Beitrag

Gehen Sie zu einer der vorhandenen Seiten

Wechseln Sie zum Elementor-Fenster:

Klicken Sie nun oben in der Mitte auf „Mit Elementor bearbeiten“. Dadurch gelangen Sie zum Elementor-Fenster.

Wechseln Sie zum Elementor-Fenster

Ziehen Sie das Header-Such-Widget per Drag-and-Drop: 

Im Elementor-Fenster erhalten Sie Zugriff auf unzählige Widgets. Geben Sie das Widget „Kopfzeilensuche“ in das Suchfeld ein, um das Widget zu finden. Alternativ können Sie auch nach unten scrollen und das Widget finden. 

Sobald Sie das Widget gefunden haben, ziehen Sie es per Drag & Drop in den dafür vorgesehenen Bereich, damit die Suchleiste angezeigt wird. Vergessen Sie nicht, den Abschnitt über dem Text Ihres Beitrags hinzuzufügen, da es sich um eine Kopfzeilen-Suchleiste handelt.

Ziehen Sie das Header-Such-Widget per Drag-and-Drop

Legen Sie die Parameter der Suchleiste fest:

Sobald die Suchleiste auf der Seite erscheint, ist es an der Zeit, die Parameter der Leiste nach Ihren Wünschen festzulegen. Auf der Registerkarte „Inhalt“ finden Sie einen Abschnitt „Kopfzeilensuche“, in dem Sie einen Platzhaltertext einfügen, ein Suchsymbol auswählen und die Schriftgröße anpassen können. 

Legen Sie die Parameter der Suchleiste auf der Registerkarte „Inhalt“ fest

Auf der Registerkarte „Stil“ finden Sie zwei Abschnitte: „Kopfzeilensuche“ und „Suchcontainer“. Im Abschnitt „Kopfzeilensuche“ können Sie Parameter wie Hintergrundfarbe, Rahmentyp, Suchfeldschatten, Rand usw. der Suchleiste anpassen.

Legen Sie die Parameter der Suchleiste auf der Registerkarte „Stil“ für den Abschnitt „Kopfzeilensuche“ fest

Im Abschnitt „Suchcontainer“ können Sie den Hintergrundtyp auswählen und den Platzhaltertext und die Rahmenfarbe festlegen.

Legen Sie die Parameter der Suchleiste auf der Registerkarte „Stil“ für den Abschnitt „Suchcontainer“ fest

Endlich kann es losgehen!

Nachdem Sie Ihre Einstellungen abgeschlossen haben, können Sie die Suchleiste am vorderen Ende Ihres Beitrags überprüfen und anzeigen. Wenn Sie mit dem Aussehen des Suchfelds nicht zufrieden sind, können Sie es im Admin-Bereich erneut ändern. 

Sehen Sie sich die Header-Suchleiste in Ihrem Beitrag an

Es ist ein Kinderspiel, mit ElementsKit eine Suche zu WordPress-Sites hinzuzufügen, nicht wahr? Darüber hinaus erhalten Sie zahlreiche Vorteile, wenn Sie Ihrer WordPress-Site eine Suchleiste hinzufügen, die ich oben aufgeführt habe. Warum also nicht ElementsKit ausprobieren?

ElementsKit ist ein All-in-One-Add-on für den Elementor-Seitenersteller, einschließlich leistungsstarker Module, Widgets, Megamenüsowie Kopf- und Fußzeile.

Suchfeld mit CSS-Code hinzufügen:

Es gibt noch eine weitere Möglichkeit, Ihrer Website eine Suchleiste hinzuzufügen: die Verwendung von CSS-Code. Obwohl Sie dafür ein wenig technisches Wissen benötigen, ist es kein Hexenwerk. Ich zeige dir hier den Vorgang und es wird danach super einfach sein. 

Gehen Sie zum Theme-Editor:

Klicken Sie zunächst auf „Aussehen” aus dem Dashboard und navigieren Sie zu „Theme-Editor“. 

Navigieren Sie zum Theme-Editor

Öffnen Sie die Datei header.php oder sidebar.php:

Damit wechseln Sie standardmäßig zur Datei style.css. Öffnen Sie von dort aus die header.php oder sidebar.php Datei abhängig von der Position, an der die Suchleiste angezeigt werden soll.

Öffnen Sie die Datei header.php oder die Datei sidebar.php

Suchleistenfunktion hinzufügen:

Fügen Sie nun diese Funktion hinzu <?php get_search_form(); ?> in Ihrem Dateicode header.php oder sidebar.php. Ich habe die Funktion im Dateicode header.php hinzugefügt. 

Fügen Sie eine Suchleistenfunktion hinzu

Sehen Sie sich die Suchleiste auf Ihrer Website an:

Öffnen Sie abschließend eine Ihrer veröffentlichten Seiten und Sie werden feststellen, dass oben die Suchleiste angezeigt wird. Wenn Sie die Funktion in der Datei sidebar.php hinzugefügt haben, würde die Suchleiste in der Seitenleiste erscheinen. 

Die Suchleiste wird auf der Seite angezeigt

Auflösung:

Das ist es! Ich habe Sie durch alles geführt 3 supereinfache Techniken zum Hinzufügen einer Suchleiste zu Ihrer WordPress-Website. Abhängig von Ihren Anforderungen können Sie sich für eine davon entscheiden. Jedoch, Wenn Sie die WordPress-Suchleiste mit dem Header-Such-Widget von ElementsKit hinzufügen, erhalten Sie einen zusätzlichen Vorteil.

Was ist das? Grenzenlose Anpassungsmöglichkeiten!!! Wenn Sie also Anpassungen lieben, nutzen Sie das Header-Such-Widget von ElementsKit. Damit können Sie Ihrer Suchleiste ein faszinierendes Aussehen verleihen. 

ElementsKit-Promo-GIF

Kommentare

Schreibe einen Kommentar

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