Ajax und WordPress

Die Ajax-Technik, wie wir in unserem Einführungsartikel über Ajax erklärt haben, ist populär geworden, da sie es uns ermöglicht, einen Teil des Webseiteninhalts zu aktualisieren, ohne die Seite aktualisieren zu müssen. Dies sorgt für ein verbessertes Benutzererlebnis.

WordPress-Sites sind natürlich keine Ausnahme. Wie wir Ajax in WordPress verwenden, unterscheidet sich jedoch von der Verwendung in anderen Webanwendungen.

Was ist Admin-Ajax und wie funktioniert es?

WordPress hat Ajax bereits für seine eigenen Verwaltungsfunktionen wie automatisches Speichern, sofortige Updates, Kommentarmoderation, Hinzufügen/Löschen von Beiträgen usw. implementiert. Das bedeutet, dass es für uns sofort einsatzbereit ist, indem wir einfach die zugehörigen Funktionen von WordPress nutzen.

Die Schlüsseldatei für diesen Zweck ist die Datei admin-ajax.php , die sich im Ordner wp-admin befindet und zum Herstellen einer Verbindung zwischen dem Client und dem Server verwendet wird.

In dieser Datei können Sie ungefähr in Zeile 159 sehen, wie alle Ajax-Anforderungen von einigen Aktionshaken registriert werden.

 if ( ! empty( $_GET['action'] ) && in_array( $_GET['action'], $core_actions_get, true ) ) { add_action( 'wp_ajax_' . $_GET['action'], 'wp_ajax_' . str_replace( '-', '_', $_GET['action'] ), 1 ); } if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_post, true ) ) { add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 ); }

Die wp_ajax_{$action} bezieht sich auf die eingeloggten Benutzer und die wp_ajax_nopriv_{$_REQUEST['action']} auf die Seitenbesucher. Wenn Sie eine Anfrage erstellen möchten, die alle Benutzer umfasst, müssen wir beide Hooks verwenden.

Mit Hilfe dieser Aktionen können Sie also eine benutzerdefinierte Funktion einbinden und Ihre Daten an WordPress übergeben, um eine Ajax-Anfrage zu stellen. Sehen wir uns das mal in Aktion an.

WordPress-Ajax-Beispiel

Wir verwenden das gleiche Beispiel wie in unserem Ajax-Einführungsartikel und erstellen ein Formular, das es dem Benutzer ermöglicht, in den Titeln der Artikel zu suchen und die vorgeschlagenen Ergebnisse im Handumdrehen anzuzeigen.

Im Kopfbereich unseres Designs fügen wir die HTML-Ausgabe für unser Suchformular ein. Wir verwenden das Design Twenty Twenty-One, also haben wir die Datei header.php bearbeitet, die sich im Hauptordner des Designs befindet, und die folgenden Zeilen vor der Zeile <div id=“content“ class=“site-content“> eingefügt.

 <p><b>Search in articles:</b></p> <form> <input type="text" class="userInput"> </form> <p>Articles available: <span class="txtHint"></span></p>

Jetzt sollte das Formular, das der Benutzer verwenden kann, im Frontend sichtbar sein.

HINWEIS: Hier bearbeiten wir direkt die header.php -Datei des Themes, ohne ein untergeordnetes Theme zu erstellen. Dies ist keine gute Praxis und hat eine Reihe von Nachteilen. Wenn Sie mehr über die Bedeutung von untergeordneten Themen erfahren möchten, lesen Sie bitte unseren zugehörigen Artikel. Für die Zwecke dieses Beispiels haben wir den Code einfach und themenbezogen gehalten. Daher wird nicht empfohlen, diesen Code auf einer Produktionswebsite zu verwenden.

Als Nächstes fügen Sie die JavaScript-Funktion ein, die die Anfrage sendet. Wir werden stattdessen jQuery verwenden, da es bereits mit WordPress geliefert wird und einsatzbereit ist. Natürlich müssen wir ein Skript nach WordPress-Art einbinden.

Stellen Sie unser Skript in die Warteschlange

Wir werden WordPress über die Existenz der JS-Datei informieren, indem wir die function.php -Datei des Themes bearbeiten und das Skript wie folgt in die Warteschlange stellen. Unsere Datei ist die custom.js , die wir erstellt und in einen neuen „js“-Ordner unter dem Hauptordner des Themes gelegt haben.

 function ajax_search_script() { wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true ); $script_data_array = array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'search_titles_nonce' ), ); wp_localize_script( 'custom-script', 'ajax_object', $script_data_array ); wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ajax_search_script' );

In der Funktion ajax_search_script() haben wir das Skript registriert und lokalisiert und dann die lokalisierten Daten mit der integrierten Funktion wp_enqueue_script() in die Warteschlange gestellt. Dann haben wir die Funktion ajax_search_script() in die wp_enqueue_scripts eingebunden, was die richtige Aktion ist, wenn Skripte in WordPress in die Warteschlange gestellt werden.

Die Verwendung von wp_localize_script könnte hier verwirrend sein, da es als WordPress-Funktion ursprünglich dafür entwickelt wurde, alle in Ihrem Skript verwendeten Zeichenfolgen zu übersetzen. Es wird jedoch auch häufig verwendet, um generische Daten von PHP an JavaScript zu übergeben. In unserem Fall, um die Ajax-URL und das Nonce-Objekt zu übergeben.

Die Nonce-Nutzung ist notwendig, damit die jQuery-Ajax-Anfrage als eine Anfrage validiert werden kann, die von der Website kommt. Wenn Sie mit der Verwendung von Nonces in WordPress nicht vertraut sind, können Sie mehr in unserem verwandten Artikel lesen.

Das ajax_object ist der Wert des erforderlichen Parameters $object_name der Funktion wp_localize_script() und wird später im jQuery-Code verwendet.

Groß! Lassen Sie uns nun unsere Funktion mit dem richtigen Inhalt füllen.

JavaScript

In die Datei custom.js wir unsere jQuery eingefügt.

 jQuery(function($) { $('.userInput').on('keyup', function() { var input = $(this).val(); if(input != '') { var data = { 'action': 'get_articles_titles', 'search_text': input, 'nonce': ajax_object.nonce } $.post(ajax_object.url, data, function(response) { $('#txtHint').html(response); }); } }); });

Dieses Mal haben wir jQuery und JSON verwendet, um die gewünschten Daten, Aktion, Suchtext, Nonce, an das serverseitige Skript zu übergeben. Die Callback-Funktion get_articles_titles() ist für die Verarbeitung der Daten im Backend, die Aufbereitung der Ergebnisse und das Zurücksenden einer Antwort verantwortlich.

Außerdem verwenden wir, wie Sie sehen können, das ajax_object von wp_localize_script mit seinen zwei Array-Werten, nonce und url.

Die Haken

Jetzt müssen wir die authentifizierten Ajax-Aktionen mit den zuvor erwähnten notwendigen Hooks binden. Wir erinnern Sie daran, dass Sie beide Hooks verwenden müssen, um sowohl angemeldete als auch nicht angemeldete Benutzer einzubeziehen. Fügen Sie in Ihrer Datei functions.php diese beiden Zeilen unter dem zuvor hinzugefügten Code zum Einreihen des Skripts hinzu.

 add_action('wp_ajax_get_articles_titles', 'get_articles_titles'); add_action('wp_ajax_nopriv_get_articles_titles', 'get_articles_titles');

Wie Sie vielleicht schon bemerkt haben, ist der Hook-Name eigentlich ein Präfix, gefolgt von unserem Aktionsnamen. Die Hook-Funktion get_articles_titles ist der Ort, an dem wir die Titel der Artikel tatsächlich abrufen. Wir werden diese Funktion auch innerhalb von functions.php definieren.

 function get_articles_titles() { check_ajax_referer('ajax_nonce', 'nonce'); $input = $_POST['search_text']; $args = array( 'posts_per_page' => -1, 'post_type' => 'post', ); $the_query = new WP_Query( $args ); $autocomplete = "<br>"; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $title = get_the_title( get_the_ID() ); if ( strpos( strtolower($title), strtolower($input) ) !== false ) { $autocomplete .= $title . "<br>" ; } } wp_reset_postdata(); } echo $autocomplete; wp_die(); }

Der check_ajax_referer ist dafür verantwortlich, dass die Ajax-Anfrage nicht extern verarbeitet wird.

Die erforderlichen Parameter hier sind die Aktion, die sich auf 'nonce' => wp_create_nonce( 'ajax_nonce' ) in Ihrer Funktion ajax_search_script() , zusammen mit dem Wert, der sich auf nonce bezieht.

Und das ist es! Wir haben gerade ein sehr einfaches Ajax-PHP-Beispiel erstellt. Wenn Sie den Code an dieser Stelle in einer WordPress-Testumgebung ausprobieren, sollte er so funktionieren.

Wobei der Service 1-5 die Titel unserer Testbeiträge sind.

Fazit

Dies war ein Artikel darüber, wie wir die Reaktionsfähigkeit und Leistung einer WordPress-Website verbessern können, indem wir die Vorteile von Ajax nutzen. Hoffentlich sind Sie jetzt bereit, ähnliche Techniken auf Ihrer eigenen Website zu verwenden und die Benutzererfahrung zu verbessern!