So verwenden Sie Ajax in WordPress

Veröffentlicht: 2023-02-12

Wenn Sie einen engagierten und aktiven Kundenstamm für Ihre Website haben, fragen Sie sich vielleicht, wie Sie ihm ein wirklich interaktives und bereicherndes Weberlebnis bieten können. Das Angebot von Echtzeit-Interaktivität kann ein großer Anziehungspunkt für Ihr Publikum sein.

Glücklicherweise ist Asynchronous JavaScript and XML (Ajax) eine zugängliche Methode, um Ihrer Website interaktive Funktionen hinzuzufügen. Wenn es um WordPress geht, können Sie den Prozess sogar mit einem Ajax-basierten Plugin vereinfachen.

In diesem Artikel stellen wir Ihnen Ajax und seine Funktionsweise vor. Wir führen Sie auch durch die ersten Schritte mit Ajax in WordPress. Lass uns gleich einsteigen!

Was ist Ajax und wie funktioniert es?

Ajax vereint eine Reihe verschiedener Programmiersprachen wie HTML, CSS, JavaScript und mehr. In Aktion arbeitet es hinter den Kulissen, um Anfragen von einem Webbrowser entgegenzunehmen, sie an den Server zu senden und die Ergebnisse zurück an den Browser zu übertragen.

Als Webbenutzer werden Sie nicht wissen, dass Ajax am Werk ist. Sie erhalten einfach ein hochgradig interaktives Erlebnis. Auf Ihrer eigenen Website können Sie beispielsweise Ajax verwenden, um Likes für Beiträge von angemeldeten Benutzern zu akzeptieren und eine Echtzeit-Zählung anzuzeigen.

Warum ist Ajax nützlich?

Mit Ajax müssen Benutzer eine Seite nicht neu laden, um bestimmte Änderungen daran zu sehen. Dies bedeutet, dass Ihre Website schnell bleibt und eine reibungslosere Benutzererfahrung bietet. Da Ajax effizient ist und nur die benötigten Daten hin und her sendet, kann es die Bandbreite maximieren und schwerere Datenübertragungen vermeiden.

Als Webbenutzer profitieren wir ständig von den Vorteilen von Ajax. Ein Beispiel ist die Suchfunktion von Google mit automatischer Vervollständigung.

Andere Beispiele, mit denen Sie vielleicht vertraut sind, sind Facebook-Kommentare und Instagram-Likes. Ajax ist wahrscheinlich überall dort im Einsatz, wo Sie mit einer Webseite interagieren und sofort Informationen zurückerhalten können.

Erste Schritte mit Ajax in WordPress

Wenn es um WordPress geht, gibt es einige Möglichkeiten, wie Ajax nützlich ist. Zuerst werfen wir einen Blick auf die Ajax-URL und wie man sie zusammen mit WordPress-Funktions-Hooks verwendet.

Die Ajax-URL in WordPress

Da WordPress Ajax standardmäßig im Admin-Dashboard verwendet, ist es nicht schwierig, dort weitere Ajax-Funktionen hinzuzufügen. Wenn Sie Ajax jedoch am Frontend Ihrer Website verwenden möchten, müssen Sie verstehen, wie die Ajax-URL funktioniert.

In WordPress hat Ihre admin-ajax.php- Datei eine URL. Dies stellt die Informationen bereit, die zum Senden von Daten zur Verarbeitung erforderlich sind, und ist für die Front-End-Ajax-Entwicklung von entscheidender Bedeutung. WordPress verwendet einen wp_localize_script()-Aufruf, um die Ajax-URL zum Verbinden von JavaScript- und PHP-Funktionen zu verwenden, da PHP diese nicht ohne Hilfe direkt spiegeln kann.

So verwenden Sie den Ajax-Action-Hook in WordPress

WordPress verwendet Hooks in seiner Programmierung, damit Plugins und Themes mit dem WordPress-Kern interagieren können. Hooks gibt es in zwei Varianten: „actions“ und „filters“. Mit Ajax verwenden Sie Action-Hooks, um Funktionen auszuführen.

Mit Aktionen können Sie Daten zu WordPress hinzufügen oder seine Funktionsweise ändern. Bei Ajax verwenden Sie die Aktion wp_ajax_(action). Darin kann dann eine benutzerdefinierte Funktion eingehakt werden, die während eines Ajax-Aufrufs ausgeführt wird.

Dieser WordPress-Beispielcode zeigt beispielsweise, wie ein Ajax-Aufruf und ein JavaScript-Objekt in derselben Datei kombiniert werden können, um eine Aktion auszuführen:

<?php

add_action( 'wp_ajax_my_action', 'my_action' );

Funktion meine_Aktion() {
global $wpdb; // So erhalten Sie Zugriff auf die Datenbank

$was auch immer = Intervall( $_POST['was auch immer'] );

$was auch immer += 10;

echo $was auch immer;

wp_die(); // Dies ist erforderlich, um sofort beendet zu werden und eine ordnungsgemäße Antwort zurückzugeben
}

Sie können auch separate JavaScript-Dateien für Ihre Ajax-Aktionen erstellen. Sie müssen nur darauf achten, die Ajax-URL zu verwenden, damit die Aufrufe nicht verloren gehen.

So verwenden Sie Ajax, indem Sie mit einem Beispiel-Plugin arbeiten (3 Schritte)

Wenn Sie mit Ajax experimentieren möchten, bauen Sie am besten ein Plugin damit. Glücklicherweise gibt es viele Beispielcodes oder Bare-Bones-Plugins, mit denen Sie beginnen können. Für dieses Beispiel verwenden wir einen herunterladbaren Mustercode für WordPress-Plug-ins.

Schritt 1: Erstellen Sie die entsprechenden Dateistrukturen

Zuerst müssen Sie Ihr Plugin benennen und die entsprechenden Dateistrukturen dafür erstellen. Der Name muss eindeutig sein und darf nicht mit anderen Tools im WordPress-Plugin-Verzeichnis in Konflikt geraten. Das liegt daran, dass, wenn ein Benutzer dein Plugin hochlädt, es in sein Verzeichnis wp-content/plugins/ wandert.

Sobald Sie sich für einen Namen entschieden haben, müssen Sie mindestens die folgenden drei Dateien in Ihrem eigenen wp-content/plugins/ -Verzeichnis erstellen:

  • plugin-name.php
  • plugin-name.js
  • plugin-name.css

Sie sollten die .php- Datei in den Ordner Ihres neuen Plugins legen und separate Unterordner für die JavaScript- und CSS-Dateien erstellen. Alle Dateien, die für die Funktion Ihres Plugins erforderlich sind, müssen sich im selben Hauptordner befinden.

Im nächsten Schritt sehen Sie, dass der von uns verwendete Beispielcode vorgefertigte Dateistrukturen enthält. Wir denken jedoch, dass es wichtig ist zu verstehen, wie man bei Null anfängt und warum Ihre Dateien auf eine bestimmte Weise strukturiert sein müssen.

Schritt 2: Wählen Sie einen Beispielcode aus, mit dem Sie beginnen möchten

Die Verwendung einer Beispielcodedatei ist ein guter Ausgangspunkt, wenn Sie Ajax in Ihrem ersten Plugin ausprobieren. Sie sollten Ihren Beispielcode jedoch immer überprüfen, um sicherzustellen, dass er sicher ist und keine Fehler enthält.

Wie bereits erwähnt, verwenden wir für unser Beispiel das WordPress-Plugin Boilerplate. Dieser Beispielcode wird mit den Dateien geliefert, die Sie benötigen, um Ihr Plugin fertigzustellen.

Dieses Beispiel-Plug-in hält sich auch an die Codierungs- und Dokumentationsstandards von WordPress. Sie können die ZIP- Datei des Plugins von der Boilerplate-Website herunterladen, um loszulegen.

Schritt 3: Aktionen in Ihren Code einbinden

Der von uns verwendete Plugin-Beispielcode wurde mit objektorientierter Programmierung (OOP) erstellt. Dies hilft Programmierern, ihren Code zu organisieren, und erstellt ein leicht gemeinsam nutzbares und wiederverwendbares Entwicklungsmuster.

Außerdem enthält der Code alle Dateien, die für die Plugin-Entwicklung erforderlich sind, einschließlich der Aktivierungs- und Deaktivierungsdateien im /includes/ -Verzeichnis. Sie werden es auch leicht finden, die für die Öffentlichkeit und den Administrator zugänglichen Dateien nach Bedarf zu finden.

Werfen wir einen Blick auf unser Beispiel-Plugin, indem wir uns den Anfang der Datei plugin-name.php ansehen:

<?php

/**
* Die Plugin-Bootstrap-Datei
*
* Diese Datei wird von WordPress gelesen, um die Plugin-Informationen im Plugin zu generieren
* Admin-Bereich. Diese Datei enthält auch alle vom Plugin verwendeten Abhängigkeiten,
* registriert die Aktivierungs- und Deaktivierungsfunktionen und definiert eine Funktion
* registriert die Aktivierungs- und Deaktivierungsfunktionen und definiert eine Funktion
* das das Plugin startet.
*
* @link http://example.com
* @seit 1.0.0
* @Paket Plugin_Name
*
* @wordpress-plugin
* Plugin-Name: WordPress Plugin Boilerplate
* Plugin-URI: http://example.com/plugin-name-uri/
* Beschreibung: Dies ist eine kurze Beschreibung dessen, was das Plugin tut. Es wird im WordPress-Adminbereich angezeigt.
* Version: 1.0.0
* Autor: Ihr Name oder Ihre Firma
* Autoren-URI: http://example.com/
* Lizenz: GPL-2.0+
* Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.txt
* Textdomäne: Plugin-Name
* Domänenpfad: /Sprachen
*/

Alle in diesem Teil des Codes enthaltenen Informationen sind wichtig für die Registrierung Ihres Plugins bei WordPress. So weiß das Plugin-Verzeichnis, was für Ihr Plugin angezeigt werden soll.

Jetzt müssen Sie ein paar Dinge tun, um alle Punkte zu verbinden, einschließlich:

  • Stellen Sie sicher, dass Ihre Ajax-URL für Ihr Skript verfügbar ist. Sie können dazu wp_localize_script() verwenden.
  • Erstellen Sie eine Plugin-Name-Klasse mit der Klasse Plugin-Name{} in Ihrer Plugin-Name.php- Datei. Hier definieren Sie Ihre Aktionshaken.
  • Erstellen Sie eine entsprechende JavaScript-Funktion in Ihrer Datei plugin-name.js .

Ein wichtiges Element des Ajax-Ansatzes ist die Definition, wer die einzelnen Funktionen verwenden kann, insbesondere beim Erstellen von Front-End-Interaktivität. Wir werden eine Front-End-Aktion mit etwas Beispielcode von WordPress einhängen:

if ( is_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action' );
// Fügen Sie hier andere Back-End-Action-Hooks hinzu
} anders {
// Hier Nicht-Ajax-Front-End-Action-Hooks hinzufügen
}

Beachten wir einige Dinge in diesem Beispiel. Erstens stehen diese Aktionen jedem auf der Website zur Verfügung, unabhängig davon, ob er bei einem Konto angemeldet ist oder nicht. Dies wird durch den Aufruf „wp_ajax_nonpriv_()“ angezeigt. Zweitens können Sie sehen, dass es auch Back-End-Verwaltungsaktionen gibt, die während der Front-End-Aktionen eingehakt werden.

Um den Prozess zu verstehen, der in dieser Reihe von Aktionen stattfindet, ist es auch wichtig zu wissen, dass my_frontend_action die PHP-Funktion my_frontend_action_callback() auslöst.

Schritt 4: Testen und debuggen Sie Ihr Plugin

Sobald Sie alle benötigten Action-Hooks und entsprechenden Funktionen eingerichtet haben, sollten Sie Ihr Plugin testen und möglicherweise debuggen (falls es Probleme gibt). Ihr Webhost bietet möglicherweise ein Debugging-Tool als Teil seines Hosting-Pakets an.

Hier bei WP Engine stellen wir das WP Engine Error Log zur Verfügung, um Ihnen bei der Suche nach Problemstellen zu helfen.

Unser Fehlerprotokoll bietet einen farbkodierten Überblick über alle Fehler im Code Ihrer Website und darüber, wo sie mit unseren Servern oder anderen Teilen Ihrer Website interagieren. Dies erleichtert die Fehlerbehebung erheblich, unabhängig davon, ob Sie mit Ajax oder etwas ganz anderem arbeiten.

Entdecken Sie andere WP-Engine-Ressourcen und -Tools

Jetzt, da Sie auf dem Weg sind, erstaunliche WordPress-Plugins mit Ajax zu erstellen, möchten Sie vielleicht einschätzen, welche anderen Tools Sie benötigen. WP Engine bietet eine vollständige Digital Experience Platform (DXP) und ist hier, um Ihnen bei der Erstellung neuer Plugins für WordPress zu helfen.

Egal, ob Sie an unserem WP-Engine-Fehlerprotokoll interessiert sind, damit Sie ein fehlerfreies Plugin ausführen können, oder einfach nur ein solides und sicheres WordPress-Hosting benötigen, wir bieten eine Vielzahl von Plänen und Ressourcen, die Sie verwenden können!