Springe zum Hauptinhalt

Javascript auf WordPress: AJAX Anwendungsfall

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Ajax, oder Asynchronous Javascript and XML, wird für die Kommunikation mit serverseitigen Skripten verwendet und ermöglicht das Laden dynamischer Inhalte, ohne dass die Seite neu geladen werden muss.

Angenommen, Sie erstellen eine Website für eine lokale Wohltätigkeitsorganisation und möchten eine positive Atmosphäre fördern. Sie können eine Schaltfläche mit der Bezeichnung "Zeige etwas Liebe! »Mit einem Zähler auf der Homepage und dank AJAX jedes Mal, wenn die Schaltfläche aktiviert wird (von einem Besucher angeklickt) erhöht sich der Zähler, ohne die Seite neu zu laden.

Dies ist das Beispiel, das wir in diesem Tutorial erstellen werden.

In diesem Tutorial erfahren Sie mehr darüber, was AJAX ist, wie es verwendet werden kann und wie Sie damit großartige Funktionen in WordPress erstellen.

Lassen Sie uns beginnen.

Die Grundlagen von AJAX

  • Der AJAX-Feed folgt normalerweise den folgenden Schritten:
  • Initiieren Sie einen AJAX-Aufruf aufgrund einer Benutzeraktion
  • Empfangen und verarbeiten Sie die Anfrage auf dem Server
  • Erfassen Sie die Antwort und führen Sie alle erforderlichen Aktionen über JavaScript aus
  • Einrichten einer neuen Themenumgebung

Lassen Sie uns dies in WordPress in die Praxis umsetzen. In unserem ersten Beispiel wird ein einfaches Popup angezeigt, das die Anzahl der Kommentare für einen Artikel enthält, wenn wir auf den Titel klicken. Wir werden ein untergeordnetes Thema verwenden, das auf dem " Zwanzig Sechzehn Aus WordPress.

Hier ist, was Sie tun müssen:

Erstellen Sie einen neuen Ordner im Themes-Verzeichnis in Ihrer WordPress-Installation unter " wp-content "Und nenne es" Ajax-Test ", erstelle die beiden Dateien erforderlich mit Wordpressnämlich " functions.php "," Styles.css "und fügen Sie eine neue Datei mit dem Namen" script.js "hinzu. Fügen Sie den folgenden Code zum Header Ihres CSS-Stylesheets hinzu (style.css).

/ * Theme Name: Ajax Testing Theme Theme URI: http://premium.wpmudev.com Beschreibung: Ein Thema für unser Wissen AJAX Autor testen: Daniel Pataki Autor URI: http://danielpataki.com Vorlage: twentysixteen Version: 1.0.0 Lizenz GNU General Public License oder später v2 Lizenz URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Das Stylesheet des übergeordneten Themas muss vom untergeordneten Thema geladen werden. In der Vergangenheit wurde dies durch Importieren der CSS-Datei in das untergeordnete Thema erreicht. Die empfohlene Methode hierfür ist die Verwendung von "Enqueueing". Denken Sie daran, wir haben Ihnen gezeigt, wie Sie diese Funktion verwenden.

So fügen wir das übergeordnete Stylesheet und unsere JavaScript-Datei direkt hinzu:

add_action ( 'wp_enqueue_scripts', 'ajax_test_scripts'); ajax_test_scripts function () {wp_enqueue_style (Eltern-Stil ", get_template_directory_uri () '/style.css.'); wp_enqueue_script (. 'Ajax-Test-Skripte' get_stylesheet_directory_uri () '/scripts.js', array ( 'jquery'), 1.0.0 ', true); }

Wenn Sie das Gefühl haben, die Energie zu haben, noch einen Schritt weiter zu gehen, finden Sie ein schönes Bild, schneiden Sie es auf 880 x 660 Pixel zu, legen Sie es in den Themenordner des Kindes und benennen Sie es um. " screenshot.png ". Es wird im Bereich "Darstellung" angezeigt, wenn Sie das Thema aktivieren möchten.

Ajax WordPress-Beispielthema

Da dieses untergeordnete Thema auf „ Zwanzig Sechzehn Und dass wir (noch!) Nichts geändert haben, sollte die Seite genauso aussehen wie ein klassisches Theme mit dem Theme " Zwanzig Sechzehn ".

Hinzufügen einer Schaltfläche

Zu Beginn werden wir den Button " Zeigen Sie Liebe unpeu! ". Ein großartiger Ort, um es anzuzeigen, wäre in der Seitenleiste für Themenartikel.

Nach einigen Recherchen hat sich herausgestellt, dass die Seitenleiste von einer Funktion mit dem Namen " twentysixteen_entry_meta () »Was befindet sich im Verzeichnis« inc / template-tags.php ".

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Diese Funktion ist " anschließbar Das heißt, wir können es ändern, indem wir es in unserer eigenen Datei functions.php definieren. Der erste Schritt besteht darin, die gesamte Funktion zu kopieren und in unsere eigene Datei functions.php einzufügen:

Funktion twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Author', 'Wird vor dem Namen des Postautors verwendet.', 'twentysixteen'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } if (in_array (get_post_type (), array ('post', 'attachment')) {twentysixteen_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('Postformate', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Wird vor dem Postformat verwendet.', ')) twentysixteen ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comment_open () || get_comments_number ())) {echo ' '; comment_popup_link (sprintf (__ ('Hinterlasse einen Kommentar zu% s ', 'twentysixteen'), get_the_title ())); Echo ' '; }}

Fügen wir den Schlüssel ganz unten in die Metadaten ein:

$ love = get_post_meta (get_the_ID (), 'show_some_love', true); $ love = (leer ($ love))? 0: $ Liebe; Echo ' '. $ Liebe. ' ';
Erklären Sie alle diesen Code:

In der ersten Zeile wird die Anzahl der Lieben abgerufen, die der Artikel erhalten hat. In einigen Fällen sind diese Daten nicht vorhanden, dh wenn die Schaltfläche noch nicht angeklickt wurde. Aus diesem Grund verwenden wir

Die zweite Zeile im Code, um den Wert auf 0 zu setzen, wenn der Wert leer ist.

Die dritte Zeile enthält die Schaltfläche, die aus einer Spanne besteht, die ein Bild und die Anzahl der Liebenden enthält. Ich habe die Quelle des Bildes leer gelassen, weil ich dort eine SVG verwenden möchte. Sie können ein Base64-codiertes SVG verwenden, um eine Bildzeile zu erstellen. Dies erspart Ihnen Anfragen und macht Ihre Website effizienter.

Ich habe dieses kleine kostenlose Bild verwendet Link. Kopieren Sie den Code, den Sie erhalten, und fügen Sie ihn wie folgt in die Bildquelle ein:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

Ich habe auch ein bisschen CSS für das Styling der Schaltfläche verwendet, um einen Hover-Effekt zu erzielen. Es ist nicht sehr offensichtlich, ob es sich um einen Knopf handelt, aber für unseren einfachen Test.

.love-Taste img {margin-right: 6px; Opazität: 0.7; cursor: pointer; } .love-Taste img: Hover {Opazität: 1; }

Knopf Liebe Wordpress Tutorial

Auslösen einer Aktion

Endlich kommen wir zu unserem JavaScript! Wir müssen auf unseren Gegenstand zielen und einen Klick darauf erkennen. So geht's:

(function ($) {$ (document) .on ('click', '.love-button img', function () {alert ("Liebe wird geteilt");})}) (jQuery);

Wenn Sie an dieser Stelle auf die Schaltfläche klicken, sollte eine JavaScript-Warnung mit dem Text "Liebe wird geteilt" angezeigt werden. ""

Datenanforderungen

Anstelle dieses Textes müssen wir einen AJAX-Aufruf auslösen. Bevor wir unseren Code schreiben, werden wir verstehen, was wir senden müssen.

Die AJAX-URL

Zunächst benötigen wir einen Ort zum Senden von Daten. Der Ort, an den wir die Daten senden, verarbeitet die Daten und beantwortet den Anruf. WordPress hat einen eingebauten Ort, um AJAX-Aufrufe zu verarbeiten, den wir verwenden können: " Admin-ajax.php " Innerhalb " wp-admin ". Wir können diese URL nicht zu unserem Skript hinzufügen (Die Verwendung von "roher" Codierung ist nicht akzeptabel), Lassen Sie uns also etwas gerissen Wordpress.

Die Funktion wp_localize_script () War ursprünglich dazu gedacht, Zeichenfolgen in JavaScript-Dateien zu übersetzen, was gut funktioniert. Wir können es auch verwenden, um Variablen an unsere JavaScript-Dateien zu übergeben, in diesem Fall die URL unserer AJAX-Datei. Fügen Sie unserer Datei den folgenden Code hinzu: " Funktionen Wie folgt:

wp_localize_script ('ajax-test-scripts', 'ajaxTest', Array ('ajax_url' => admin_url ('admin-ajax.php')));

Das Ergebnis dieses letzten Objekts heißt ajaxTest und enthält ein bestimmtes Array im letzten Parameter als Eigenschaften. Zur Eingabe des Wertes können wir verwenden ajaxTest.ajax_url in unserem JavaScript-Code.

Die Kennung des Artikels

Wir senden beliebige Daten als Identifikator des Artikels (dass wir verwenden werden, um den Artikel zu identifizieren, zu dem wir "ein wenig Liebe hinzufügen" wollen.). Dies kann aus dem DOM abgerufen werden. Schauen Sie sich die Struktur an, die im folgenden Thema "Twenty Sixteen" verwendet wird:

Artikel Struktur Twenty Sixteen

Unser Button hat einen "Artikel" als einen seiner Vorfahren. Dieses Element hat die Klasse und enthält die numerische Kennung des Artikels. Obwohl es nicht die eleganteste Lösung ist, können wir die ID von dort abrufen.

$ (Dokument) .auf ( 'Klick', 'img .love-Taste', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). Attr ( 'id') .replace ( 'post', '')); console.log (id)})

Die Aktion

WordPress erfordert auch, dass wir einen Parameter namens action senden. Da alle Aktionen an admin-ajax gesendet werden, benötigen wir eine Möglichkeit, diese Anforderungen zu unterscheiden, daher die Verwendung dieses Parameters.

Senden einer AJAX-Anfrage

Wir können jetzt alles zusammenfügen. Wir müssen einen AJAX-Aufruf für " wp-admin / admin-ajax.php Welches enthält die Artikel-ID und eine Aktion. So sollte es aussehen.

(Funktion ($) {$ (document) .auf ( 'Klick', 'img .love-Taste', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') ersetzen ( 'post', '')); $ Schnipsel ({url: ajaxTest.ajax_url Typ 'post', Daten: {Aktion: 'add_love' post_id: post_id} Erfolg: function (Antwort) {alert ( 'Erfolg, die neue Zählung' + response)}})})}) (jQuery);

$ .ajax () ist die verwendete Funktion, die eine Reihe von Parametern akzeptiert. Die URL enthält das Ziel, das derzeit unsere Datei ist ajax-url.php “. Der Typ ist auf " Post Wie jede Anfrage von einem Formular gesendet. Der Datenparameter ist ein Objekt, das " Schlüsselwert Das wollen wir an den Server senden. Später können wir sie mit $ _POST ['action'] und $ _POST ['post_id'] lesen.

Anwendungsverarbeitung

Normalerweise müssen Sie die Datei bearbeiten " Admin-ajax.php », Weil die Anfrage dorthin gesendet wird. Es ist eine Systemdatei, daher werden wir sie nicht ändern. Mit WordPress können Sie AJAX-Anforderungen in eckigen Klammern mit dem Aktionsparameter übergeben. Das Modell ist wie folgt:

Wenn Sie Ihre Aktion benannt haben add_love Sie müssen eine Funktion an einen Hook mit dem Namen " wp_ajax_add_love Und / oder wp_ajax_nopriv_add_love “. Die Aktionen NoPriv ”Läuft für abgemeldete Benutzer, eine läuft nur für angemeldete Benutzer. In unserem Fall möchten wir beide verwenden. Als schnellen Test legen wir einen Standardrückgabewert fest:

Der Erfolgsparameter ist eine Funktion, die ausgeführt wird, wenn der AJAX-Aufruf abgeschlossen ist. Wir zeigen eine einfache Warnung mit der Aufschrift „Gut gemacht! Das neue Konto ist “mit unserer Antwort am Ende hinzugefügt.

add_action ( 'wp_ajax_add_love', 'ajax_test_add_love'); add_action ( 'wp_ajax_nopriv_add_love', 'ajax_test_add_love'); ajax_test_add_love Funktion () {echo 4; die (); }

Wir haben unsere Funktion an beide Klammern angehängt, eine fertig Echo 4 und dann die Funktion " die () “. Dies ist bei WordPress erforderlich, sonst erhalten Sie am Ende jeder Antwort eine 0. Wenn Sie jetzt auf die Schaltfläche klicken, sollte Folgendes angezeigt werden:

jquery ajax Beispiel Schaltfläche

Um die tatsächliche Anzahl der Likes zu ermitteln, müssen wir lediglich die aktuelle Nummer abrufen, um eins erhöhen, in der Datenbank speichern und die neue Nummer anzeigen.

ajax_test_add_love function () {$ love = get_post_meta ($ _POST [ 'post_id'] 'show_some_love', true); Liebe = $ (empty ($ Liebe))? 0: $ Liebe; $ Liebe ++; update_post_meta ($ _ POST [ 'post_id'], 'show_some_love' Lieber $); echo $ Liebe; die (); }

Wenn Sie jetzt auf die Schaltfläche klicken, sollte das Popup-Fenster "1“. Wenn Sie die Seite aktualisieren, sollte die neue Nummer angezeigt werden. Wenn Sie erneut auf die Schaltfläche klicken, wird sie erstellt 2 ". Jetzt müssen wir nur noch sicherstellen, dass die Nummer direkt in der Benutzeroberfläche angezeigt wird.

Nehmen Sie mithilfe der Antwort Änderungen an der Benutzeroberfläche vor

Dieser Teil scheint einfach (weil es so ist), aber es ist im Allgemeinen am schwierigsten zusammenzustellen. Im Moment müssen wir nur das Element suchen, das die aktuelle Nummer enthält, und seinen Inhalt durch die Antwort ändern.

(Function ($) {$ (document) .auf ( 'klicken', 'img .love-Taste', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). ersetzen attr ( 'id') ( 'post', '')); var $ number = $ (this) .parent () zu finden (. '. Nummer') $ .ajax ({url :. ajaxTest.ajax_url, Typ: 'post', Daten: {Aktion: 'add_love' post_id: post_id,}, Erfolg: function (Antwort) {$ number.text (Antwort);}})})}) (jQuery);

Ich habe unserem vorherigen JS-Code nur zwei Zeilen hinzugefügt. In Zeile 5 speichere ich das Element, das die Nummer in der Variablen enthält $ number. In der 14-Zeile ändere ich den Text dieses Elements, um die Antwort anzuzeigen, bei der es sich um die neue Zahl handelt.

Das war's, im Grunde sollten Sie in der Lage sein, diese neue Funktion in Aktion für Ihr benutzerdefiniertes Thema zu sehen. Wenn Sie ein Problem haben, lassen Sie es uns bitte wissen. Haben Sie noch einen Tipp, den Sie teilen möchten? Mach es in den Kommentaren.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
7 Aktien
Aktie2
tweet1
Registrieren4