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

Die Suchleiste ist ein wesentliches Element einer Website, dem niemand widersprechen würde. Dies liegt daran, dass eine Website eine Menge Informationen über die Homepage, Produktseiten, Blogseiten, Preisseiten usw. enthält. Deshalb ist es wichtig, dass Sie Ihrer WordPress-Site eine Suchleiste hinzufügen.

Wenn Sie einige Informationen benötigen, die auf verschiedenen Seiten vorhanden sind, wie werden Sie sie finden? Werden sie diese Seiten einzeln besuchen? Das möchten Sie sicher nicht. Nicht, dass Sie Ihre gewünschten Informationen auf diese Weise nicht finden werden. Aber es ist zeitaufwändig und auch ekelerregend. Hier kommt das Hinzufügen einer Suchleiste zu Ihrer Website ins Spiel.

Warum eine Suchleiste auf Ihrer Website hinzufügen?

Angenommen, Sie haben keine Suchleiste auf Ihrer Website. In diesem Fall werden die Besucher, wenn sie Ihre Website besuchen, Schwierigkeiten haben, die erforderlichen Informationen zu finden. Infolgedessen verlassen sie Ihre Website und Ihr gesamter Zweck, sie auf die Website zu bringen, wird vergeblich sein.

Lassen Sie mich unten einige der wichtigsten Vorteile vorstellen, die Sie durch das Hinzufügen einer Suchleiste auf Ihrer Website erzielen können.

• Erleichtert die Suche Ihrer Kunden nach Informationen
• Optimiert die Benutzererfahrung
• Steigert das Engagement
• Reduziert die Absprungrate
• Zeigt die erforderlichen Elemente oder Informationen mit wenigen Schlüsselwörtern an, um den Aufwand zu reduzieren

Hinzufügen einer Suchleiste zum Menü mit dem WordPress-Standardsuch-Widget:

Können Sie eine Suchleiste im Menü mit dem WordPress-Standardsuch-Widget hinzufügen? Nein, das kannst du nicht. Denn mit WordPress können Sie die 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 Kopf- und Fußzeile.

Aus diesem Grund würde ich Sie in diesem Tutorial durch 3 verschiedene Methoden zum Hinzufügen einer Suchleiste auf Ihrer WordPress-Site führen.

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

Suchleiste mit WordPress-Standardsuch-Widget hinzufügen:

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

Navigieren Sie vom Dashboard zu den Widgets:

Gehen Sie zu Beginn zum Dashboard Ihres Admin-Panels und suchen Sie nach Aussehen. Navigieren Sie zu Widgets und klicken Sie in einer Liste mit Elementen unter Aussehen auf Widgets.

Dashboard > Darstellung > Widgets

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

Dadurch gelangen Sie zu einer neuen Seite, die mit verschiedenen Seitenabschnitten angezeigt wird. Klicken Sie nun auf die Schaltfläche „Block hinzufügen“ (erscheint mit + 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 Ihren gewünschten Bereich ziehen.

Nehmen Sie die notwendigen Anpassungen vor:

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

Sie können der Suchleiste auch ein benutzerdefiniertes Label gemäß Ihren Anforderungen hinzufügen. Klicken Sie abschließend auf die Schaltfläche Aktualisieren.

Zeigen Sie die Suchleiste auf Ihrer Seite an:

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

Suchleiste mit dem ElementsKit-Such-Widget hinzufügen:

Jetzt werde ich Sie durch eine weitere einfache Möglichkeit führen, eine Suchleiste in Ihrer WordPress-Site hinzuzufügen. Und das über das Kopfzeilen-Such-Widget von ElementsKit. Es ist super einfach, ein Suchfeld über ElementsKit hinzuzufügen.

Schauen wir es uns ohne weiteres an -

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

Gehen Sie zunächst zum Dashboard und suchen Sie Beiträge 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, in dem Sie eine Suchleiste hinzufügen möchten. Falls Sie keinen bestehenden 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

Wechseln Sie zum Elementor-Fenster:

Klicken Sie nun oben in der Mitte auf „Mit Elementor bearbeiten“. Dadurch gelangen 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-and-Drop in den vorgesehenen Bereich, damit die Suchleiste angezeigt wird. Vergessen Sie nicht, den Abschnitt über dem Text Ihres Beitrags hinzuzufügen, da es sich um eine Header-Suchleiste handelt.

Stellen Sie die Parameter der Suchleiste ein:

Sobald die Suchleiste auf der Seite erscheint, ist es an der Zeit, die Parameter der Leiste nach Ihren Wünschen einzustellen. 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.

Auf der Registerkarte „Stil“ befinden sich zwei Abschnitte – Kopfzeilensuche und Suchcontainer. Im Abschnitt Kopfzeilensuche können Sie die Parameter wie Hintergrundfarbe, Randtyp, Schatten des Suchfelds, Rand usw. der Suchleiste anpassen.

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

Endlich sind Sie startklar!

Nachdem Sie Ihre Einstellungen abgeschlossen haben, können Sie die Suchleiste am Frontend 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.

Suchfeld mit CSS-Code hinzufügen:

Es gibt noch eine weitere Möglichkeit, Ihrer Website eine Suchleiste hinzuzufügen, und zwar die Verwendung von CSS-Code. Dafür braucht man zwar ein bisschen technisches Wissen, aber es ist keine Raketenwissenschaft. Ich werde Ihnen den Prozess hier zeigen und danach wird es super einfach sein.

Gehen Sie zum Design-Editor:

Klicken Sie zunächst im Dashboard auf „Darstellung“ und navigieren Sie zum „Design-Editor“.

Datei header.php oder sidebar.php öffnen:

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

Suchleistenfunktion hinzufügen:

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

Zeigen Sie die Suchleiste auf Ihrer Website an:

Öffnen Sie schließlich eine Ihrer veröffentlichten Seiten und Sie werden feststellen, dass die Suchleiste oben erscheint. Wenn Sie die Funktion in der Datei sidebar.php hinzugefügt hätten, würde die Suchleiste in der Seitenleiste erscheinen.

Auflösung:

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

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