Verwendung von AJAX mit PHP auf Ihrer WordPress-Site mit Ihrem eigenen Plugin
Veröffentlicht: 2021-07-23
In diesem Artikel diskutieren wir über AJAX mit PHP für Ihre WordPress-Website.
AJAX ist eine Technik für die Webentwicklung, die den Benutzern hilft, interaktive Anwendungen auf der Website zu entwickeln. Es bietet Benutzern ein schnelleres und reibungsloseres Weberlebnis. Es ermöglicht den Benutzern, Änderungen vorzunehmen oder Inhalte auf der Webseite zu aktualisieren, ohne die Seiten neu zu laden oder zu aktualisieren. Man muss verschiedene Programmiersprachen beherrschen, um mit AJAX arbeiten zu können.
Was ist AJAX?
AJAX steht für „Asynchronous JavaScript and XML“. Wie bereits erwähnt, wird es verwendet, um Webanwendungen zu erstellen, die unterhaltsam, ständig wechselnd und interaktiv sind.
Einige der beliebtesten Beispiele für Webanwendungen, die mit Hilfe von AJAX und verwandten Technologien entwickelt wurden, sind Google Maps, die Autocomplete-Funktion in der Google-Suche, Kommentare und „Gefällt mir“-Angaben in verschiedenen Social-Media-Beiträgen und viele andere.
Grundlagen von AJAX
Ajax entwickelt mithilfe verschiedener Programmiersprachen wie JavaScript, HTML, CSS und XML schnellere und verbesserte Webanwendungen und Websites. Neben diesen Programmiersprachen werden für die Entwicklung von Webanwendungen auch AJAX mit PHP und andere serverseitige Sprachen verwendet.
Es verwendet JavaScript für die Anzeige von Inhalten, während CSS bei der Präsentation und dem Document Object Model hilft. Es verwendet außerdem XHTML für den Inhalt.
Bei herkömmlichen Webanwendungen oder Webseiten werden Informationen synchron mit dem Server ausgetauscht. Auf der anderen Seite erstellt JavaScript in den Webanwendungen, die für die Verwendung von AJAX entwickelt wurden, wenn ein Ereignis auftritt, wie z. B. das Klicken auf eine Schaltfläche oder das Ausfüllen eines Formulars, eine XMLHTTP-Anforderung und sendet dieselbe im XML-Format an den Server.
Der Server verarbeitet die Anfrage, erstellt serverseitig eine Antwort und sendet sie an den Browser zurück. JavaScript verarbeitet dann die Antwort und der Inhalt auf dem aktuellen Anzeigebildschirm wird aktualisiert. Da ein erneutes Laden oder Aktualisieren von Seiten nicht erforderlich ist, werden die Benutzer nichts davon bemerken, dass Informationen an den Server übertragen werden.
Erforderliche Fähigkeiten, um mit AJAX in WordPress zu arbeiten
Wie aus der obigen Diskussion hervorgeht, benötigen Benutzer die folgenden Fähigkeiten, um AJAX richtig zu verwenden.
• Kenntnisse in Programmiersprachen wie JavaScript, HTML und CSS
• Kenntnisse in serverseitigen Sprachen wie PHP und anderen
• Grundlagen von XML oder JSON
Vorteile von AJAX
Die verschiedenen Vorteile von AJAX werden im Folgenden erörtert
• Es unterstützt fast alle derzeit verwendeten Browser
• Es beinhaltet eine schnellere Reaktionszeit, was eine verbesserte Benutzererfahrung in Bezug auf Geschwindigkeit und Leistung bedeutet
• Open-Source-JavaScript-Bibliotheken wie Prototype, jQuery usw. stehen zur Verwendung zur Verfügung
• Es reduziert die Zeit zwischen dem Client und dem Server, daher wird die Zeit sowohl der Benutzer als auch des Servers gespart
• Da der Server keine großen Datenmengen verarbeiten muss, trägt er dazu bei, die Bandbreitennutzung zu reduzieren und den Netzwerkbetrieb zu optimieren.
• Da eine XMLHTTP-Anforderung zum Abrufen von Daten verwendet wird, können die Benutzer mehrere Aufgaben gleichzeitig ausführen.
AJAX in WordPress
AJAX wird im Backend von WordPress verwendet, wodurch die Aktualisierungen sofort vorgenommen werden, wenn Änderungen an Beiträgen oder Kategorien vorgenommen werden oder wenn der Administrator Kommentare moderiert. AJAX wird hauptsächlich mit JQuery auf WordPress verwendet. Der Prozess, in dem WordPress AJAX verwendet, ist wie folgt
• Wenn eine Anfrage gestellt wird, durchläuft sie die Datei „admin-ajax.php“, die sich im Ordner „wp-admin“ befindet.
• Diese Anfragen müssen mindestens ein Datenelement liefern, das allgemein auch als „Aktion“ bezeichnet wird, indem die Methode „Get“ oder „Post“ verwendet wird.
• Diese Aktion veranlasst den Code in der Datei „admin-ajax.php“, zwei Hooks zu erstellen, nämlich „wp_ajax_my_action“ und „wp_ajax_nopriv_my_action“. Die 'my_action' in diesen Hooks gibt den Wert der Variablen 'action' der 'get'- oder 'post'-Methode an.
• Während der erste Hook für die Aktionen der eingeloggten Benutzer gedacht ist, ist der zweite Hook ausschließlich für die ausgeloggten Benutzer gedacht.
• Die Hook-Funktionen sollten für die Graceful Degradation geplant werden, die sicherstellt, dass die Codes auch dann noch funktionieren, wenn JavaScript in Browsern deaktiviert ist.
Erstellen Sie ein WordPress AJAX-Plugin
Nehmen wir in diesem Abschnitt das Beispiel eines einfachen WordPress-AJAX-Plugins namens „Post Likes Counter“. Dieses Plugin enthält die folgenden Funktionen:
• Es wird sofort am Frontend aktualisiert
• Die eingeloggten Benutzer dürfen die Beiträge liken.
• Wenn die abgemeldeten Benutzer versuchen, den Beitrag zu liken, erscheint eine Fehlermeldung auf dem Bildschirm
• Dieses Plugin hilft bei der Aufrechterhaltung der Gesamtaufzeichnung der Anzahl der „Gefällt mir“-Angaben und zeigt sie an
Zunächst muss ein leeres WordPress-Plugin erstellt und aktiviert werden. Um ein Plugin zu erstellen, müssen die folgenden Schritte durchgeführt werden.
Schritt 1 : Wählen Sie einen eindeutigen Namen für das Plugin. Man kann die Plugin-Repositorys überprüfen, um sicherzustellen, dass der vorgeschlagene Name des Plugins bereits nicht verwendet wird. Normalerweise wählen Plugin-Entwickler den Namen eines Plugins basierend auf der Funktion aus, die es ausführen soll.
Schritt 2 : Im nächsten Schritt muss eine PHP-Datei mit dem ausgewählten Plugin-Namen erstellt werden. Da Benutzer, die dieses Plugin installieren, die PHP-Datei für die Installation im WordPress-Plugin-Verzeichnis „wp-content/plugins-“ ablegen müssen, können Plugins nicht den gleichen Namen für PHP-Dateien haben.
Daher sollte auch der Dateiname des Plugins eindeutig sein, um Konflikte mit anderen Plugins im Repository zu vermeiden. Man kann seinen Namen oder den Namen seines Unternehmens im Präfix verwenden, um einen eindeutigen Namen für die PHP-Datei zu erstellen.
Schritt 3 : Es ist zu beachten, dass das WordPress-Plugin neben JavaScript, CSS, Sprachen und Bilddateien mindestens eine PHP-Datei enthalten sollte. Wenn mehrere Dateien vorhanden sind, wählen Sie einen eindeutigen Namen für das Verzeichnis und einen bevorzugten Namen für die Haupt-PHP-Datei.
Legen Sie alle Plugin-Dateien in das erstellte Verzeichnis und fordern Sie die Plugin-Benutzer auf, dieses gesamte Verzeichnis in das Verzeichnis „wp-content/plugins/“ hochzuladen.
Die WordPress-Installation kann so konfiguriert werden, dass das Standard-Plugin-Verzeichnis ‚wp-content/plugins/‘ geändert wird. Daher muss man plugin_dir_path() und plugin_url() für absolute Pfade und URLs in ihrem PHP-Code verwenden.
Beitragsvorlage des Themas
Nach dem Erstellen des Plugins muss man die Beitragsvorlage „single.php“ ihres Themas finden. Es kann im Stammverzeichnis des aktiven Designs gefunden werden. Es wird verwendet, wenn ein einzelner Beitrag abgefragt wird; wo man sein 'Post Like Counter'-Plugin platzieren möchte. Die Datei sollte zur Bearbeitung geöffnet bleiben.
Bereiten Sie die Beitragsvorlage für den AJAX-Aufruf vor
Es muss ein Link erstellt werden, damit die Benutzer Beiträge mögen können. Wenn die Benutzer JavaScript aktiviert haben, können sie die JavaScript-Dateien verwenden (die später erstellt werden) oder sie können dem Link direkt folgen. Fügen Sie dazu folgenden Code in die Datei ‚single.php‘ ein. Dieser Code kann auch zu jedem der Vorlagenteile hinzugefügt werden, die die Datei „single.php“ enthält.
// Der Metaschlüsselwert „Gefällt mir“ speichert die Gesamtzahl der Likes für einen bestimmten Beitrag, er zeigt 0 an, wenn es sich um eine leere Zeichenfolge handelt ID, "Gefällt mir", wahr); $likes = ($likes == "") ? 0 : $gefällt mir; ?> Dieser Beitrag hat <span id='like_counter'></span> Likes<br> // Link zur Datei admin-ajax.php. Nonce-Check für zusätzliche Sicherheit enthalten. Beachten Sie die Klasse „user_like“ für JS-fähige Clients. ID.'&nonce='.$nonce); echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="' . $link . '">Gefällt mir diesen Beitrag</a>'; ?>
Adressieren des Ajax-Aufrufs ohne JavaScript
Durch Klicken auf den im vorherigen Schritt erstellten Link wird man zum Skript „admin-ajax.php“ weitergeleitet; Sie werden jedoch kein nützliches Ergebnis finden, da die Funktion nicht zum Ausführen der Aktion erstellt wurde. Um die Funktion in der Plugin-Datei zu erstellen und sie den von WordPress erstellten Hooks hinzuzufügen, fügen Sie den folgenden Code ein.
<?php // wird hier nur zum Aktivieren der Syntaxhervorhebung verwendet. Lassen Sie dies weg, wenn es bereits in Ihrer Plug-in-Datei enthalten ist.
// Definiere die Aktionen für die beiden erstellten Hooks, zuerst für eingeloggte Benutzer und als nächstes für ausgeloggte Benutzer
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "bitte_anmelden");
// Definieren Sie die Funktion, die für angemeldete Benutzer ausgelöst werden soll
Funktion my_user_like() {
// Einmal auf eine zusätzliche Sicherheitsebene prüfen, die Funktion wird beendet, wenn sie fehlschlägt
if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_like_nonce")) {
exit("Wuff Wuff Wuff");
}
// Like_count für einen Beitrag abrufen, auf 0 setzen, wenn er leer ist, um 1 erhöhen, wenn ein Klick registriert wird
$like_count = get_post_meta($_REQUEST["post_id"], "likes", true);
$like_count = ($like_count == ') ? 0 : $like_count;
$new_like_count = $like_count + 1;
// Aktualisiere den Wert von 'likes' Metaschlüssel für den angegebenen Beitrag, erstellt neue Metadaten für den Beitrag, falls keine vorhanden sind
$like = update_post_meta($_REQUEST["post_id"], "likes", $new_like_count);
// Wenn obige Aktion fehlschlägt, wird der Ergebnistyp auf 'Fehler' und like_count auf alten Wert gesetzt, bei Erfolg auf new_like_count aktualisiert
if($like === false) {
$result['type#039;] = "Fehler";
$result['like_count'] = $like_count;
}
anders {
$result['type#039;] = "Erfolg";
$result['like_count'] = $new_like_count;
}
// Prüfen, ob die Aktion per Ajax-Aufruf ausgelöst wurde. Wenn ja, wird JS-Code ausgelöst, andernfalls wird der Benutzer auf die Post-Seite umgeleitet
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER[#039;HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$result = json_encode($result);
echo $ergebnis;
}
anders {
header("Ort: ".$_SERVER["HTTP_REFERER"]);
}
// Vergessen Sie nicht, Ihre Skripte mit einer die()-Funktion zu beenden - sehr wichtig
sterben();
}
// Definieren Sie die Funktion, die für abgemeldete Benutzer ausgelöst werden soll
Funktion bitte_login() {
echo "Sie müssen sich anmelden, um zu liken";
sterben();
}
Wenn alles klappt, wird die Anzahl der „Gefällt mir“-Angaben automatisch aktualisiert, wenn ein eingeloggter Benutzer auf den Link „Gefällt mir“ klickt. Wenn andererseits JavaScript deaktiviert ist, wird die Seite aktualisiert und zeigt die aktualisierten Zählungen der „Gefällt mir“-Angaben an.
Unterstützung für JavaScript hinzufügen
Das Hinzufügen von Unterstützung für JavaScript kann die Dinge einfacher machen. Für die Verwendung von AJAX mit PHP auf WordPress ist es erforderlich, die jQuery-Bibliothek zusammen mit der benutzerdefinierten JavaScript-Datei des Plugins einzureihen. Schreiben Sie dazu folgenden Code in das Plugin.
admin_url( 'admin-ajax.php' ))); // jQuery-Bibliothek und das oben registrierte Skript in die Warteschlange stellen wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'liker_script' ); }
Als nächstes muss die Javascript-Datei „liker_script.js“ erstellt werden, die weiter in den Stammordner des Plugins hochgeladen wird. Der folgende Code wird zum Erstellen der Datei „liker_script.js“ verwendet.
jQuery(document).ready( function() {
jQuery(".user_like").click( Funktion(e) {
e.preventDefault();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("data-nonce");
jQuery.ajax({
Typ: "Post",
dataType : "json",
URL: myAjax.ajaxurl,
data : {action: "my_user_like", post_id : post_id, nonce: nonce},
Erfolg: Funktion (Antwort) {
if(response.type == "Erfolg") {
jQuery("#like_counter").html(response.like_count);
}
anders {
alert("Ihr Like konnte nicht hinzugefügt werden");
}
}
});
});
});
So implementieren Sie AJAX in WordPress-Themes
Die folgenden Schritte helfen bei der Implementierung von AJAX mit PHP in den WordPress-Themes. Nehmen wir zum Beispiel an, dass unsere Arbeit darin besteht, die Kategorien in einem Dropdown-Menü anzuzeigen, und wenn Sie auf die „Übergeordnete Kategorie“ klicken, werden die Unterkategorien in einem anderen Dropdown-Feld angezeigt. Diese Aufgabe wird mit Hilfe der folgenden Schritte ausgeführt
Schritt 1 : Wählen Sie „Kategorien“ auf der linken Seite des Dashboards und geben Sie den Namen der Kategorien in das Feld ein, das auf der rechten Seite erscheint, und fügen Sie den Kategorie-Slug darunter ein. Wenn die übergeordnete Kategorie erstellt wird, wählen Sie „Keine“ aus, oder wenn die Unterkategorien erstellt werden, wählen Sie die übergeordnete Kategorie aus den Optionen aus.
Schritt 2 : In diesem Schritt wird eine WordPress-Vorlage erstellt, in der die AJAX-Funktionalität implementiert wird. Öffnen Sie eine neue PHP-Datei und speichern Sie sie. Fügen Sie den folgenden Code in die erstellte Seite ein.
Im obigen Code ist „Vorlagenname: Ajax implementieren“ der Name der WordPress-Vorlage und die Funktionen „get_header()“ und „get_footer()“ werden verwendet, um den Kopf- und Fußzeileninhalt der Seite anzuzeigen.
Erstens muss die jQuery-Bibliotheksdatei in die Seite aufgenommen werden, die beim Hinzufügen des AJAX-Zeugs hilft. AJAX mit PHP kann man entweder jede beliebige JavaScript-Bibliothek verwenden oder AJAX mit reinem JavaScript aufrufen. Im folgenden Beispiel wird die JavaScript-Bibliothek jQuery zur Implementierung von AJAX verwendet.
Schritt 3 : Fügen Sie die jQuery-Datei in die Vorlage ein und rufen Sie die Funktion „wp_dropdown_categories“ auf, damit die übergeordneten Kategorien im Dropdown-Menü abgerufen werden können.
#inhalt{breite:auto; Höhe:400px; Rand: 50px;}
<div>
</div>
<?php
Schritt 4 : Fügen Sie den jQuery-Code ein, um die ID der ausgewählten Hauptkategorie zu erhalten. Senden Sie es an die Datei „functions.php“, um die Unterkategorien unter dieser ausgewählten übergeordneten Kategorie-ID abzurufen. Die Ergebnisse können dann ohne Aktualisierung an die Seite zurückgesendet werden.
$(Funktion(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();
// ajax aufrufen
$("#sub_cat").leer();
$.ajax({
url:"/wp-admin/admin-ajax.php",
Typ:'POST',
data:'action=my_special_action&main_catid=' + $mainCat,
Erfolg: Funktion (Ergebnisse)
{
// Warnung (Ergebnisse);
$("#sub_cat").removeAttr("deaktiviert");
$("#sub_cat").append(Ergebnisse);
}
});
}
);
});
In diesem obigen Code wird der Code beim Änderungsereignis der Hauptkategorien-Dropdown-Liste mit der ID „#main_cat“ hinzugefügt.
var $mainCat=$('#main_cat').val();
Die Funktion .val() hilft beim Abrufen des ausgewählten Optionswerts aus der Dropdown-Liste und beim Speichern in der Variablen '$mainCat'.
$("#sub_cat").leer();
Das Unterkategorie-Dropdown-Menü „#sub_cat“ muss geleert werden, wenn es einen vorherigen Wert enthält, bevor AJAX aufgerufen wird.
Die folgende jQuery-Zeile hilft beim Aufrufen von AJAX jQuery-Funktionen. Überprüfen Sie die im folgenden Abschnitt angegebenen Parameter der AJAX-Funktion.
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
Typ:'POST',
Damit AJAX in WordPress funktioniert, wird der Parameter „URL“ verwendet. Daher werden Anfragen an die Datei „admin-ajax.php“ gesendet. Als nächstes werden die Hooks in der Datei „functions.php“ aufgerufen, um die geposteten Daten abzurufen, die an die URL „/wp-admin/admin-ajax.php“ gesendet wurden.
Um die Werte zusammen mit der Anfrage zu senden, wird der Parameter „data“ verwendet. In diesem Beispiel werden zwei Argumente mit dem Datenparameter verwendet – action und main_catid.
Schritt 5 : In der Datei „functions.php“ wird der folgende Code verwendet, um eine Aktion einzubinden.
add_action('wp_ajax_my_special_action', 'my_action_callback');
In dieser obigen Aktion hat Hook zwei Argumente. Im ersten Argument „wp_ajax_my_special_action“ ist „wp_ajax_“ der Wert, der zusammen mit dem Datenparameter „action“ gesendet wird. Im zweiten Argument 'my_action_callback' werden die Daten verarbeitet und die Ergebnisse zurückgesendet.
Dieser Aktionshaken oben ist für angemeldete Benutzer. Für die abgemeldeten Benutzer kann man die folgende Aktion einhaken
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
Der endgültige Code nach dem Hinzufügen von Hooks für beide Benutzer und die Rückruffunktion lautet wie folgt
Funktion implement_ajax() {
if(isset($_POST['main_catid']))
{
$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($categories als $cat) {
$option .= 'term_id.'">';
$option .= $katze->katzenname;
$option .= ' ('.$cat->category_count.')';
$option .= '';
}
echo 'Scegli...'.$option;
sterben();
} // Ende wenn
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//für nicht eingeloggte Benutzer.
Schritt 6 : Erstellen Sie in diesem Schritt eine neue Seite im Dashboard und weisen Sie dieser die Vorlage zu. Nachdem die Seite im Browser geladen wurde, wird das erste Dropdown-Menü mit übergeordneten Kategorien darin geladen.
Da das zweite Dropdown-Menü leer ist, wählen Sie die Option im ersten Dropdown-Menü aus, um zu überprüfen, wie es funktioniert.
So kann mit Hilfe eines neu erstellten Plugins AJAX mit PHP auf der WordPress-Seite genutzt werden.