Autocomplete-Suche in WordPress mit Code erstellen

Dieses Tutorial ist für Sie, die eine Autocomplete-Suche in WordPress implementieren möchten, bei der wir die volle Kontrolle über die zurückgegebenen Übereinstimmungen haben.

Wir werden eine automatische Vervollständigung auf die Standard-WordPress-Suche anwenden, aber der Code ist sehr flexibel, sodass Sie die Abfrage an Ihre Bedürfnisse anpassen können. Ob es sich um eine spezifischere Abfrage nach einem benutzerdefinierten Beitragstyp, Beitragsmeta, Kategorien oder Abfragen zu völlig anderen Arten von Inhalten wie Benutzern oder etwas Manuellem aus der Datenbank handelt. Sie können die automatische Vervollständigung auch einfach auf eine benutzerdefinierte Sucheingabe anstelle der Standard-WordPress-Suche anwenden.

Was wir machen werden

Die automatische Vervollständigung ist ein UI-Feld, das unter dem Suchfeld angezeigt wird und während der Eingabe die Übereinstimmungen anzeigt. Wenn Sie auf eine Übereinstimmung klicken, sendet Sie der Browser zum Permalink dieses Beitrags. Dies bietet dem Endbenutzer eine schnellere Möglichkeit, durch Ihre Inhalte zu navigieren, da er nicht den zusätzlichen Umweg zu Ihrer Suchergebnisseite gehen muss. Wir werden AJAX verwenden, um die Übereinstimmungen kontinuierlich zu aktualisieren, während der Benutzer tippt.

Die Autovervollständigung wird mit Hilfe von jQuery UI Autocomplete generiert, einem Skript, das standardmäßig in WordPress enthalten ist.

Einrichten des Codes

Sie müssen den Code entweder in die PHP-Datei des Themes functions.phpoder in eine aktive Plugin-PHP-Datei einfügen. Dieses Tutorial basiert auf dem Hinzufügen zu einem Thema. Passen Sie die Pfade an Ihr Projekt an.

Der erste Schritt besteht darin, eine Javascript-Datei zu erstellen, die unseren Code zum Auslösen der automatischen Vervollständigung enthält. Für dieses Tutorial erstelle ich eine leere autocomplete.jsDatei im Ordner meines assets/js/Designs. Wo Sie Ihre Datei platzieren, liegt ganz bei Ihnen. Denken Sie nur daran, die Pfade unten anzupassen. Wir werden auf diese Datei zurückkommen, nachdem wir diese Datei ordnungsgemäß in WordPress eingereiht haben.

Einreihen von Skripten und Stilen

Wir müssen unsere JavaScript-Datei für die automatische Vervollständigung in die Warteschlange einreihen und sicherstellen, dass jQuery und jQuery UI Autocomplete in die Warteschlange eingereiht werden. Darüber hinaus enthält WordPress kein Styling für jQuery-UI-Bibliotheken, sodass wir auch ein Stylesheet für die jQuery-UI von Google CDN in die Warteschlange stellen müssen. Dies ist natürlich optional. Sie können das CSS auf andere Weise hinzufügen oder es vielleicht lieber selbst gestalten.

Wir werden alle Skripte und Stile in eine Funktion einreihen, die mit verbunden ist wp_enqueue_scripts:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '/assets/js/autocomplete.js', 
        ['jquery', 'jquery-ui-autocomplete'], null, true);
});

Der [wp_enqueue_script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)()obige Funktionsaufruf fügt unsere neu erstellte Javascript-Datei mit den richtigen Abhängigkeiten hinzu (das Array als dritter Parameter). Dadurch wird sichergestellt, dass WordPress die Skripte jQuery und jQuery UI Autocomplete in unserer WordPress-Instanz hinzufügt.

Als nächstes müssen wir einige Variablen bereitstellen, auf die wir über unser Autocomplete-Skript zugreifen können. Wir müssen die AJAX-URL kennen und möchten aus Sicherheitsgründen auch eine Nonce hinzufügen. Wir können dies tun, indem wir Folgendes verwenden [wp_localize_script](https://developer.wordpress.org/reference/functions/wp_localize_script/)():

Die wp_localize_script()Funktion erstellt eine globale Javascript-Variable AutocompleteSearchmit zwei Eigenschaften; ajax_urlund ajax_nonce. Damit können wir in unserer Autocomplete-JavaScript-Datei zum Beispiel den Wert der WordPress-AJAX-URL mit abrufen AutocompleteSearch.ajax_url.

Schließlich müssen wir etwas Styling hinzufügen. Wie bereits erwähnt, enthält WordPress kein jQuery-UI-Design, daher müssen wir selbst einige hinzufügen. Ich habe mich für das Hinzufügen eines Stylesheets über Google CDN entschieden. Wir müssen jedoch die Versionsnummer der jQuery-Benutzeroberfläche kennen, um das Stylesheet abzurufen. Wir könnten eine Versionsnummer fest codieren, aber ich bin kein Fan davon, irgendetwas fest zu codieren. Unten finden Sie einen netten Trick, um die in WordPress gespeicherten jQuery-UI-Versionsinformationen zu nutzen.

Wir verwenden [wp_enqueue_style](https://developer.wordpress.org/reference/functions/wp_enqueue_style/)()zum Registrieren und Hinzufügen eines neuen Stylesheets mit dem bereitgestellten CDN-Pfad als zweites Argument. Um eine gültige jQuery-UI-Versionsnummer abzurufen, verwenden wir die von der Funktion bereitgestellten Informationen [wp_scripts](https://developer.wordpress.org/reference/functions/wp_scripts/)().

Und das ist alles, was wir zum Einreihen von Skripten brauchen!

Schreiben des Autocomplete-Javascripts

Kehren wir zu unserer autocomplete.jsDatei zurück. Wir wissen, dass beim Laden dieses Skripts jQuery und jQuery UI Autocomplete bereits geladen sind, und wir haben auch Zugriff auf eine globale Variable mit den erforderlichen Informationen. Beginnen wir mit der Einrichtung einer jQuery-Dokument-Ready-Funktion, um sicherzustellen, dass unser Code ausgeführt wird, nachdem DOM bereit ist.

jQuery(function($) {
    // All code in here
});

Wenn wir uns auf die Dokumentation von jQuery UI Autocomplete beziehen, erfahren wir, dass wir einen jQuery-Selektor erstellen müssen, der auf ein Eingabefeld abzielt, und die Funktion autocomplete()darauf ausführen müssen.

Dies ist ein Punkt, an dem Sie den Code an Ihre Bedürfnisse anpassen können. Dieses Tutorial wendet die automatische Vervollständigung auf das Standard-WordPress-Suchfeld an (das normalerweise im Design durch Einfügen der Suchvorlage oder als Widget hinzugefügt wird). Die Klassennamen der Sucheingabe können von Thema zu Thema variieren. Aber vielleicht möchten Sie auf ein benutzerdefiniertes Eingabefeld abzielen oder in einer speziellen Vorlage suchen. Alles, was Sie tun müssen, ist, den jQuery-Selektor so zu ändern, dass er auf die gewünschte Eingabe abzielt.

In meinem Theme hat die standardmäßige WordPress-Suchfeldeingabe eine Klasse von .search-field. Ich füge auch den Klassennamen des übergeordneten Formulars hinzu, um ihn weiter einzugrenzen, damit wir nicht riskieren, dass die automatische Vervollständigung auf etwas anderes angewendet wird, das dieselbe Klasse verwendet.

Gemäß der Autocomplete-Dokumentation können wir einen AJAX-Aufruf in der Eigenschaft ausführen source(die ein Array von Elementen zurückgeben muss, die in der Autocomplete angezeigt werden sollen). Wir verwenden dazu die Ajax-Funktion von jQuery :

jQuery(function($) {
    $('.search-form .search-field').autocomplete({
        source: function(request, response) {
            $.ajax({
                dataType: 'json',
                url: AutocompleteSearch.ajax_url,
                data: {
                    term: request.term,
                    action: 'autocompleteSearch',
                    security: AutocompleteSearch.ajax_nonce,
                },
                success: function(data) {
                    response(data);
                }
            });
        },
    });
});

In Zeile #2teilen wir jQuery UI Autocomplete mit, auf welches Eingabefeld wir Autocomplete anwenden möchten. Passen Sie diesen Selektor an Ihre Bedürfnisse an.

In der einfachsten Form erwartet Autocomplete ein Array von Item-Objekten für die sourceEigenschaft. Hier erstellen wir eine Funktion mit zwei Parametern; requestenthält Informationen über unseren eingegebenen Wert (request.term), und responsedas ist eine Callback-Funktion, die wir aufrufen und die Daten bereitstellen müssen. Das machen wir in der AJAX- successFunktion in Zeile #13.

Der AJAX-Aufruf selbst ist ziemlich Standard. Wir definieren den Datentyp als JSON – das ist wichtig, sonst kann jQuery UI Autocomplete die Ergebnisse nicht parsen. Wenn urlwir auf ajax_urldie globale Variable zugreifen, die wir zuvor in unserem Skript lokalisiert haben; AutocompleteSearch. Und wie datawir an einem Informationsobjekt vorbeikommen. Die actionEigenschaft ist obligatorisch und für den nächsten Schritt erforderlich – nämlich die Identifizierung dieser spezifischen AJAX-Anfrage in PHP. Außerdem geben wir den eingegebenen Begriff in der Eingabe und der Nonce zu Sicherheitszwecken weiter.

Das ist es für die sourcesEigenschaft. Es gibt noch eine weitere Sache, die wir in unserem Autocomplete-Skript hinzufügen müssen. Standardmäßig wird in jQuery UI Autocomplete bei der Auswahl eines Elements die Eingabe einfach automatisch mit dem ausgewählten Element ausgefüllt. Wir möchten den Benutzer auf die URL des Beitrags umleiten, wenn er ein Element aus der Liste auswählt. Also fügen wir der selectEigenschaft eine Funktion hinzu:

                ...
                success: function(data) {
                    response(data);
                }
            });
        },      
        select: function(event, ui) {
            window.location.href = ui.item.link;
        },
    });
});

In dem Array von Elementen, die wir von unserem AJAX-Aufruf zurückgeben (das schreiben wir als nächstes), ist jedes Element ein Objekt mit Eigenschaften. Wir fügen jedem Element () eine benutzerdefinierte linkEigenschaft hinzu ui.item, die die Permalinks zu jedem Beitrag enthält. Wir übergeben diese URL an [window.location.href](https://www.w3schools.com/js/js_window_location.asp)die eine Browserumleitung ausgelöst wird.

Und das ist alles für den Javascript-Teil! Es bleibt nur noch, den PHP-Teil zu schreiben, der mit der Aktion auf AJAX-Anfragen lauscht autocompleteSearch.

Zurückgeben von Ergebnissen in PHP-zu-AJAX-Anforderungen

Um Funktionen zu schreiben, die auf bestimmte AJAX-Anfragen reagieren, verwenden wir die Hooks wp_ajax_{action}(eingeloggte Besucher) und wp_ajax_nopriv_{action}(nicht eingeloggte Besucher). Wir haben die Aktion wie autocompleteSearchin unserer AJAX-Anfrage oben definiert. Lesen Sie meinen Beitrag, der erklärt, wie AJAX in WordPress funktioniert, wenn Sie damit nicht vertraut sind.

Lassen Sie uns dies einrichten in functions.php(oder wo immer Sie in PHP Ihren Code hinzufügen):

add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');
add_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');
function awp_autocomplete_search() {
    // echo result
    die();
}

Mit dem obigen Code verknüpfen wir dieselbe Funktion mit den beiden AJAX-Hooks. In allen Funktionen, die an die wp_ajax AJAX-Hooks angeschlossen sind, müssen wir sicherstellen, dass immer die()oder exitam Ende, damit wir keine unerwünschte Ausgabe ausgeben. Ich verwende die [wp_die](https://developer.wordpress.org/reference/functions/wp_die/)()Funktion von WordPress.

Wir können die übergebenen Daten von Javascript abrufen $_REQUEST(funktioniert sowohl für GET- als auch für POST-Anforderungen). In unserem Javascript-Code haben wir den eingegebenen Begriff im Schlüssel ‘ term‘ übergeben. Das bedeutet, dass wir den Wert davon in abrufen können $_REQUEST['term']. Darauf basierend können wir dann eine Abfrage durchführen. Denken Sie daran, dass wir nur Ergebnisse zurückgeben möchten, die diesem Suchbegriff entsprechen.

Dies ist ein weiterer Punkt, an dem Sie den Code vollständig ändern und optimieren können, um ihn an Ihre Bedürfnisse anzupassen. Dieses Tutorial führt eine Standardabfrage für Beiträge und Seiten durch, aber Sie können die Abfrage optimieren oder eine völlig andere Abfrage für andere Daten durchführen. Vielleicht möchten oder müssen Sie stattdessen eine manuelle SQL-Abfrage durchführen (dies ist sicherlich speichereffizienter). Der entscheidende Teil hier ist das Array, das wir am Ende wiedergeben, das vom Autocomplete-Code unseres Javascripts geparst wird.

Zuerst prüfen wir, ob die Nonce gültig war, um eine gewisse Sicherheit für unsere AJAX-Aufrufe herzustellen. Wir können dies tun, indem wir die Funktion aufrufen [check_ajax_referer](https://developer.wordpress.org/reference/functions/check_ajax_referer/)(). Ich habe auch Code hinzugefügt, um sicherzustellen, dass wir keine schwere Anfrage ausführen, wenn der zurückgegebene Suchbegriff leer war. Wir sollten dann ein leeres json-codiertes Array zurückgeben.

Der obige Beispielcode führt [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)eine Suche nach dem eingegebenen Begriff durch. Wir müssen sicherstellen posts_per_page, -1dass wir alle Übereinstimmungen zurückgeben. Sehen Sie sich die Dokumentation an, WP_Querywenn Sie die Abfrage weiter optimieren möchten.

Wir durchlaufen dann die Ergebnisse (Zeile #17) und füllen ein Array mit Übereinstimmungen (Zeile #19-23). Die automatische Vervollständigung der jQuery-Benutzeroberfläche benötigt mindestens die Eigenschaft label, um anzugeben, was im Feld für die automatische Vervollständigung angezeigt werden soll. Wir geben auch Permalinks im Schlüssel „ link” weiter, den wir in unserem Javascript-Code verwenden, um den Benutzer weiterzuleiten.

Schließlich geben #27wir in Zeile das generierte Array als JSON aus, indem wir [json_encode](https://www.php.net/manual/en/function.json-encode.php)().

Mit diesem PHP-Teil sollte unsere automatische Vervollständigung funktionieren! Aktualisieren Sie Ihre Website und probieren Sie es aus!

Optionale Verbesserungen

Ein häufiges Problem ist, dass die Anzahl der Übereinstimmungen zu hoch ist und das Feld für die automatische Vervollständigung zu groß wird. Dafür gibt es zwei Lösungen.

minLengthEine Lösung besteht darin, die Eigenschaft der autocomplete()Funktion in Javascript hinzuzufügen. Diese Eigenschaft löst das Autocomplete-Feld erst aus, nachdem eine bestimmte Anzahl von Zeichen eingegeben wurde. Als Beispiel können wir mindestens 3 Zeichen verlangen, bevor die automatische Vervollständigung ausgelöst wird:

        ...
        select: function(event, ui) {
            window.location.href = ui.item.link;
        },
        minLength: 3,
    });
});

jQuery UI Autocomplete schlägt hier eine andere Lösung vor. Es zeigt ein Beispiel für das Hinzufügen von etwas CSS, um eine feste Höhe und eine interne Bildlaufleiste im Autocomplete-Feld hinzuzufügen.

Fazit und vollständiger Code

Wir haben der Suchfunktion von WordPress erfolgreich eine automatische Vervollständigung hinzugefügt, mit der wir die vollständige Kontrolle über die zurückzugebenden Übereinstimmungen haben. Es gibt den Besuchern eine schnellere Möglichkeit, durch Ihre Inhalte zu navigieren, da das Klicken auf eine Übereinstimmung direkt zum Beitrag weitergeleitet wird, anstatt zuerst einen Umweg auf einer Suchergebnisseite zu machen. Die Implementierung einer Autovervollständigung ist möglicherweise nicht immer auf allen WordPress-Sites sinnvoll, kann jedoch für die Suche nach bestimmten Inhalten oder innerhalb spezieller Vorlagen großartig sein!

Hier ist der endgültige Code in seiner Gesamtheit:

jQuery(function($) {
    $('.search-form .search-field').autocomplete({
        source: function(request, response) {
            $.ajax({
                dataType: 'json',
                url: AutocompleteSearch.ajax_url,
                data: {
                    term: request.term,
                    action: 'autocompleteSearch',
                    security: AutocompleteSearch.ajax_nonce,
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        select: function(event, ui) {
            window.location.href = ui.item.link;
        },
    });
});