Einfache Suche mit automatischem Vorschlag in WordPress - Tutorial

Das Erstellen einer Suchleiste mit Autosuggest in WordPress ist überraschend einfach, schnell und kostenlos. Hier ist unser Tutorial, wie es geht.

Warum sollten Sie sich überhaupt die Zeit nehmen, die automatische Suche zu WordPress hinzuzufügen? Zunächst einmal sparen Sie Zeit. Ihre Blog-Besucher werden es mehr lieben, weil es ihnen das Leben erleichtert, indem sie einen einfachen Zugriff auf Informationen bieten, die sie bequem von Ihrer Website aus suchen. Es gibt einen Grund, warum Google und andere informationsorientierte Suchwerkzeuge diese Art von Funktion verwenden.

Hinweis: Die Autosuche in WordPress kann manchmal auch als „ Live-Ajax-Suche “ bezeichnet werden. Da WooCommerce dieselbe Datenbank wie WP verwendet und Produkte einfach ein benutzerdefinierter Beitragstyp sind, funktioniert dieses Tutorial auch für das beliebte E-Commerce-Plugin.

Was du brauchen wirst

Sie benötigen einen Code-Snippet-Manager, die Möglichkeit zum Kopieren und Einfügen und das Live Search-Plugin (kostenlos im Repo).

Beachten Sie Folgendes: Jedes Formular, das <?php get_search_form() ?> verwendet, funktioniert automatisch mit dieser Lösung und benötigt die nächsten beiden Schritte nicht. Springen Sie einfach zu diesem Abschnitt, wenn Sie diese Route wählen.

Dies ist jedoch bei vielen Themes, Seitenerstellern und anderen Tools nicht der Fall. Elementor und Oxygen verwenden diese von WordPress angebotene eingebaute Form nicht (so dass ihre Benutzer sie in Bezug auf Größe, Schriftart und Farbe einfach gestalten können). Um also eine Suchleiste mit automatischer Vervollständigung für Elementor, Oxygen, die meisten anderen Seitenersteller und viele Themen zu erhalten, befolgen Sie die unten beschriebenen Schritte.

Selbst wenn Sie es wie oben abgebildet über PHP ohne CSS hinzufügen, bleibt ein unformatiertes Suchformular. Wenn Sie jedoch Zugriff auf Ihre Themendateien/Vorlagen haben, ist dies eine praktikable Möglichkeit , ein Suchformular auf Ihrer Website zu erhalten. Dadurch wird das Standard-WordPress-Markup verwendet, sodass Sie das CSS unten anpassen können.

Wir bevorzugen die folgende Methode, da Sie den Stil und die Klassen bearbeiten, spezielle Elemente hinzufügen, Benutzer zu benutzerdefinierten Suchendpunkten senden und vieles mehr können – Sie bauen dieses Ding von Grund auf neu.

Das PHP

Lassen Sie uns zunächst dieses Suchformular erstellen. Sie können zusätzliche Eingaben, CSS-Klassen, Platzhalter und mehr hinzufügen. Wenn Sie den Code unverändert lassen, funktioniert das zugehörige CSS neben dem HTML. Je nachdem, wie Sie eine Website erstellen, können Sie diese einfach in die eigentliche Struktur der Vorlage einfügen, wo eine Suchleiste mit automatischer Vervollständigung enden soll ODER Weg 2 gehen.

Route 2 ist wahrscheinlich das, was die meisten Websitebesitzer verwenden werden. Anstatt dieses rohe HTML und PHP zu verwenden, werden wir es in einen Shortcode umwandeln, der es viel kompatibler mit WordPress macht. Auf diese Weise können Sie es in Gutenberg, jeden gewünschten Seitenersteller und mehr einfügen. Es gibt ein paar Möglichkeiten, dies zu tun; Wir werden eine einfache, aber kostenpflichtige Methode und eine schwierigere, aber einfachere Methode beschreiben.

Kostenpflichtig (einfach)

Holen Sie sich Scripts Orginizer, ein Premium-WordPress-Plugin, das die Verwaltung von Code auf Ihrer WordPress-Website erleichtert (Rezension). Gehen Sie nach der Installation zu Scripts Organizer -> Import, zu finden im Seitenleisten-Admin-Menü.

Laden Sie diese Datei herunter (ein Export von allem, was unten erwähnt wird), importieren Sie sie und fahren Sie mit dem Abrufen des Shortcodes fort.

Sobald Sie im benutzerdefinierten CSS-Abschnitt angekommen sind, springen Sie zum SCORG-Teilabschnitt, laden Sie diesen JSON herunter, importieren Sie, installieren Sie das Live-Such-Plug-in und machen Sie es einsatzbereit.

Sie können auch den manuellen Schritten folgen. Erstellen Sie zunächst einen neuen Eintrag:

Führen Sie nun Folgendes durch:

1. Geben Sie ihm einen Titel
2. Codeblock-Schalter aktivieren: Ein
3. Skriptspeicherort: Shortcode
4. Kopieren/Einfügen des PHP/HTML-Codes von oben.
5. Behalten Sie alle anderen Standardeinstellungen bei und klicken Sie auf „Veröffentlichen“.

So sollte es aussehen, wenn du damit fertig bist️.

Schnappen Sie sich den Shortcode, der im Skripteintrag unten links im Code-Editor oder auf der Seite mit der Code-Snippet-Liste angezeigt wird:

Nehmen Sie diesen Shortcode und fügen Sie ihn überall mit Gutenberg, TINYMCE, Elementor Shortcode Widget oder einer anderen Shortcode-spezifischen Methode ein.

Gehen Sie nun zu Schritt zwei und fügen Sie das CSS zu Ihrer Website hinzu.

Free Way (etwas schwieriger)

Installieren Sie das kostenlose Code Snippets-Plugin. Laden Sie das folgende Code-Snippet herunter und importieren Sie es in Ihre Website:

Diese Datei kann auch in Advanced Scripts (im Wesentlichen eine einfachere Premium-Version von Code Snippets) und sogar in Scripts Organizer importiert werden.

Fügen Sie dann die Suche hinzu, indem Sie den folgenden Shortcode in Ihrem Frontend verwenden:

Unabhängig davon, wie Sie die Suche hinzufügen, wenn Sie das zugrunde liegende HTML und PHP aus diesem Abschnitt verwenden, verleiht das CSS im nächsten Abschnitt ihr einen schönen Stil.

Das CSS

Wenn Sie die Struktur und die Klassen beibehalten, fügen Sie einfach dieses benutzerdefinierte CSS zu Ihrer Website hinzu, um ein gut gestaltetes Suchformular mit der Funktion zur automatischen Vervollständigung zu erhalten.

Hinweis: Dieser Code ist nicht mit der Methode <?php get_search_form() ?> zum Einfügen einer Suchleiste kompatibel. Abhängig von Ihrem Thema bedeutet das Einfügen eines Suchformulars auf diese Weise jedoch, dass es die Stile Ihres Themas erbt.

Sie können dieses CSS über Aussehen -> Anpassen -> Zusätzliches CSS zu Ihrem Page Builder-Dienstprogramm hinzufügen oder SCORG verwenden.

Wir empfehlen SCORG. Fügen Sie einen neuen CSS-Teil hinzu, fügen Sie den Code ein und veröffentlichen Sie ihn (oder importieren Sie diese Datei). Navigieren Sie zu dem im vorherigen Schritt erstellten Shortcode-Snippet, gehen Sie zum Abschnitt „SCSS Partials Manager“ und wählen Sie show , suchen Sie nach dem Titel dieses Partials und wählen Sie ihn aus. Aktualisiere es. Jetzt wird auch das CSS geladen, wo immer Sie den Shortcode platzieren. Es wird nur dort geladen, wo der Shortcode platziert ist, nicht global , was für die Leistung großartig ist.

Jetzt brauchen wir nur noch die Magic Sauce.

Die magische Sauce (SearchWP Live Ajax Search)

Dies ist ein unglaubliches Plugin, das vom Team hinter der SearchWP-Plugin-Suite entwickelt wurde. Es ist kostenlos und im WordPress-Repository enthalten. Anstelle komplexer Codestrukturen können wir dies installieren und eine Live-Suche in weniger als einer Minute zum Laufen bringen.

Klicken Sie nach der Installation auf das Suchformular, das Sie mit Shortcode, Rohcode oder einem eingefügt haben, das die native WordPress-PHP-Einfügung verwendet, und Sie sollten das folgende Verhalten sehen:

Das ist es, du bist fertig! Genießen Sie ein Suchformular auf Ihrer WordPress-Website, das Benutzersuchen mithilfe der AJAX-Technologie automatisch vervollständigt.

Erweitern Sie diese Live-Suche in WordPress

SearchWP Live Ajax Search ist ein kostenloses Plugin, mit dem Sie tun können, was der Name schon sagt: Live Ajax Search hinzufügen. Es funktioniert mit oder ohne die Premium-Sammlung von SearchWP und den zugehörigen Erweiterungen. Wenn Sie SearchWP nicht verwenden, wird die Standard-WP-Suchmaschine verwendet.

Die standardmäßige WordPress-Suche sortiert nach Relevanz (in der Vergangenheit war das nicht der Fall – wild!), indem sie nach dem Titel eines Beitrags und dann nach dem Inhalt sucht. Aber das ist immer noch Elementor, und es gibt bessere Optionen da draußen. Tatsächlich haben wir einen weiteren Artikel über bessere Alternativen geschrieben, den Sie hier lesen können: Bessere Suchlösungen für WordPress

Da die Live-Suche jedoch von Search WP erstellt wird, verwendet sie diese Engine automatisch, wenn sie installiert ist. Search WP ist überlegen, da es Keyword-Stemming, genauere Übereinstimmungen, Indizierung von Dokumenten, Unterstützung für WooCommerce, Algorithmus-Anpassung und mehr umfasst. Wir empfehlen dringend, Ihre Live-Suche aufzubauen und die anderen Funktionen des Premium-Plug-ins zu nutzen, um noch bessere Suchergebnisse anzubieten.

Wenn Sie nach einer Alternative zu SearchWP suchen, ist Ivory Search ein kostengünstigeres Plugin, das ähnliche Funktionen und eine LTD bietet! Dieses Plugin für die Live-Suche (WP Search Autocomplete) sollte sofort mit Ivory Search funktionieren. Sie können auch andere Suchmaschinen verwenden; Laut den Dokumenten müssen Sie nur Folgendes tun:

Fügen Sie der Formulareingabe das folgende Attribut hinzu: data-swpengine="supplemental" input Sie 'supplemental' durch den Namen Ihrer gewünschten Suchmaschine.

Häufig gestellte Fragen auflisten

Noch einfacher mit Sauerstoff

Es ist kein Geheimnis, dass wir Oxygen Builder lieben, also ist hier eine noch einfachere Möglichkeit, AJAX Live Search (automatische Vervollständigung) mit diesem Tool hinzuzufügen.

Hinweis: Dieses Tutorial und Plugin funktionieren nicht mit dem Oxygen Search Form Widget, da es, wie in einem vorherigen Abschnitt erwähnt, weder die Standard-PHP-Methode zum Einfügen eines Suchformulars verwendet, noch das erforderliche Datenattribut enthält.

Einfache Schritte:

1. Fügen Sie einen Codeblock hinzu, wo immer Sie das Suchformular haben möchten, fügen Sie das unten gefundene PHP ein (oder fügen Sie Wasserstoff-Shortcodes ein, die den Codeblock automatisch erstellen).
2. Fügen Sie das unten gefundene CSS zu Oxygen Global CSS hinzu und ändern Sie es nach Belieben (hauptsächlich Farben).
3. Installieren und aktivieren Sie das Live Search-Plugin, kostenlos im Repo hier.
4. Schwelgen Sie in der Herrlichkeit der Live-Suche.

Da wir PHP mit dem Page Builder direkt in Vorlagen und Seiten platzieren können, können wir einfach das folgende PHP in einen Codeblock einfügen, das CSS über globale Einstellungen hinzufügen und Schluss machen (stellen Sie sicher, dass Sie die Live-Such-Plugin, hier zu finden).

Sie können auch die folgenden Hydrogen Shortcodes kopieren/einfügen (wenn Sie Hydrogen Pack (hier überprüft) haben).

Klicken Sie einfach auf Kopieren, installieren Sie Hydrogen und fügen Sie es in Ihre Seite ein. CSS wird in den Codeblock eingefügt.

Verwenden Sie schließlich das CSS (von oben genommen):

Wir empfehlen, dieses CSS über das globale CSS von Oxygen einzufügen.

So sollte das Endergebnis aussehen:

Wenn Sie dieses Teil wiederverwenden möchten, können Sie es auch einfach zu einem wiederverwendbaren Teil machen. Solange Sie das Live Search-Plugin installiert haben, sollten Sie mit einer netten AJAX-Suchleiste für Ihre Besucher gut zurechtkommen.

<?php get_search_form() ?>

Oder verwenden Sie einfach den obigen Code, wenn Sie keine erweiterte Anpassung benötigen (einschließlich, aber nicht beschränkt auf bessere Suchlösungen als die Kernsuche von WP). Da wir Shortcodes in diesem Seitenersteller verwenden können, können Sie natürlich auch der oberen Hälfte dieses Tutorials folgen, die Sie durch die Erstellung eines kurzen Codes zur Verwendung am Frontend Ihrer Website führt.

Fazit

Im Jahr 2022 ist es wichtiger denn je, Ihren Benutzern ein großartiges Erlebnis und die Tools zu bieten, die sie benötigen, um auf die gewünschten Inhalte zuzugreifen. In diesem Artikel wurden verschiedene Methoden zum Installieren der WordPress-Live-Ajax-Suche auf einer Website in weniger als 15 Minuten vorgestellt.

Hier sind mehrere Methoden beschrieben, sodass Sie auswählen können, ob Sie sie für Themenvorlagendateien verwenden, Shortcodes generieren möchten, die mit Seitenerstellern kompatibel sind, und noch mehr Methoden integrieren können. Das Plugin, das verwendet wird, um die Live-Suchfunktion zu erreichen, ist völlig kostenlos und gut gestaltet.

Irgendwelche Fragen? Fühlen Sie sich frei, sie im Kommentarbereich unten zu hinterlassen.