Springe zum Hauptinhalt

Javascript auf Wordpress: Bei der Verwendung von AJAX

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.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 "Zeigen Sie ein wenig Liebe! »Mit einem Zähler auf der Startseite und dank AJAX bei jedem Tastendruck (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 eines AJAX-Aufrufs aufgrund von Benutzeraktionen
  • 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 auf WordPress in die Praxis umsetzen. Unser erstes Beispiel zeigt ein einfaches Popup mit der Anzahl der Kommentare eines Artikels, wenn wir auf den Titel klicken. Wir verwenden ein untergeordnetes Thema basierend auf dem Thema " 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 nennen Sie es "Ajax-Test", erstellen Sie 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 in die Kopfzeile Ihres CSS-Stylesheets ein (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 dazu die CSS-Datei in das untergeordnete Design importiert. Die empfohlene Methode hierfür ist jedoch das "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, Energie zu haben, ein wenig weiter zu gehen, finden Sie ein schönes Bild, schneiden Sie es in 880px von 660px zu und legen Sie es in den Ordner des Themas des Kindes, und benennen Sie es dann um screenshot.png “. Es wird im Bereich Darstellung angezeigt, wenn Sie das Thema aktivieren möchten.

Ajax WordPress-Beispielthema

Da dieses Thema des Kindes basiert 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 ".

Fügen Sie eine Schaltfläche hinzu

Zu Beginn werden wir den Button " Zeigen Sie Liebe unpeu! “. Ein großartiger Ort, um es auszustellen, wären Artikel mit Seitenleistenmotiven.

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 bedeutet, dass wir es ändern können, indem wir es in unserer eigenen Datei functions.php definieren. Der erste Schritt ist das Kopieren und Einfügen der gesamten Funktion in unsere Datei functions.php:

twentysixteen_entry_meta function () {if ( 'post' === get_post_type ()) {$ author_avatar_size = apply_filters ( 'twentysixteen_author_avatar_size' 49); printf ( ‚<span class = "byline"> <span class = "author V-Card">% 1 $ s <span class = "Screen-Reader-text">% 2 $ s </ span> <a class =„url fn n "href =" % 3 $ s „>% 4 </a> $ s </ span> </ span> 'get_avatar (get_the_author_meta (' user_email), $ author_avatar_size), _x ( 'Autor' ' Verwendet vor Post Autor Name '' twentysixteen), esc_url (get_author_posts_url (get_the_author_meta ( 'ID'))), get_the_author ()). } If (in_array (get_post_type (), array ( 'Post', 'Befestigungs'))) {twentysixteen_entry_date (); } $ Get_post_format format = (); if (current_theme_supports (post-Formate '$ file)) {printf (' <span class = "entry-size">% s <a href="%1$s"> $ 2 3% $ s </ a > </ span> 'sprintf (' <span class = "Screen-Reader-text">% s </ span> '_x (' Format '' vor dem Post-Format verwendet. '' twentysixteen ‚)), esc_url (get_post_format_link ($ file)) get_post_format_string ($ file)); } If ( 'post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } {Echo '<span class = "Kommentare-link">' (is_singular () && post_password_required () && (comments_open () || get_comments_number ())!); comments_popup_link (sprintf (__ ( 'Leave a comment <span class = "Screen-Reader-text">% s </ span>', ‚twentysixteen), get_the_title ())); echo '</ span>'; }}

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

$ Get_post_meta lieben = (get_the_ID (), 'show_some_love', true); Liebe = $ (empty ($ Liebe))? 0: $ Liebe; echo '<span class = "love-Taste"> <img width = "28" src = ""> <span class = "number">'. $ Liebe. </ Span> </ span> ‚;
Erklären Sie alle diesen Code:

Die erste Zeile gibt die Anzahl der Lieben an, die der Artikel erhalten hat. In einigen Fällen sind diese Daten nicht vorhanden, dh wenn Sie noch nicht auf die Schaltfläche geklickt haben. 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 einem Bereich besteht, der ein Bild und die Anzahl der Lieben enthält. Ich habe die Quelle des Bildes leer gelassen, weil ich dort eine SVG verwenden möchte. Sie können eine base64-codierte SVG-Datei verwenden, um eine Bildlinie zu erstellen. Dies erspart Ihnen Anfragen und macht Ihre Website effizienter.

Ich habe dieses kleine freie Bild zur Verfügung gestellt Link. Kopieren Sie den empfangenen Code und fügen Sie ihn wie folgt in die Quelle des Bildes 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 CSS für den Stil der Schaltfläche verwendet, um einen Hover-Effekt zu erzielen. Es ist nicht sehr offensichtlich, dass es sich um einen Knopf handelt, aber es wird für unseren einfachen Test sein.

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

Knopf Liebe Wordpress Tutorial

Aktion auslösen

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. "

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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

Erstens brauchen wir einen Ort zum Senden von Daten. Der Ort, an dem wir die Daten senden, verarbeiten und den Anruf entgegennehmen. WordPress verfügt über einen integrierten Speicherort für AJAX-Aufrufe, den wir verwenden können: die Datei " Admin-ajax.php Innen " wp-admin “. Wir können diese URL nicht zu unserem Skript hinzufügen (Verwenden Sie eine "rohe" Codierung ist nicht akzeptabel), Lassen Sie uns also etwas gerissen Wordpress.

Die Funktion wp_localize_script () Ursprünglich sollte es Zeichenfolgen in JavaScript-Dateien übersetzen, was auch gut funktioniert. Wir können damit auch Variablen in unsere JavaScript-Dateien übertragen, in diesem Fall die URL unserer AJAX-Datei. Fügen Sie der 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, um den Artikel zu identifizieren, auf dem wir "ein wenig Liebe hinzufügen" möchten). Dies kann aus dem DOM wiederhergestellt werden. Werfen Sie einen Blick auf die Struktur des folgenden Themas "Twenty Sixteen":

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 dies nicht die eleganteste Lösung ist, können wir die ID von dort eingeben.

$ (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 Abfragen zu differenzieren, 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 Welche enthält die Artikel-ID und eine Aktion. So sollte es sein.

(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-Abfragen in eckigen Klammern mit dem Aktionsparameter senden. 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 Wird für nicht verbundene Benutzer ausgeführt, wird einer nur für angemeldete Benutzer ausgelöst. 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 werden eine einfache Warnung anzeigen, die "Bravo! 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:

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

jquery ajax Beispiel Schaltfläche

Um die tatsächliche Anzahl von "Likes" zu erhalten, müssen wir nur die aktuelle Nummer ermitteln, eine Nummer inkrementieren, 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 die Änderungen in der Benutzeroberfläche anhand der Antwort vor

Dieser Teil scheint einfach (weil es so ist), aber es ist normalerweise am schwierigsten einzurichten. Im Moment müssen wir nur den Artikel mit der aktuellen Nummer finden und den Inhalt anhand der 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 der 5-Zeile 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 ist alles, im Prinzip müssen Sie in der Lage sein, diese neue Funktion in Ihrem benutzerdefinierten Thema in Aktion zu sehen. Wenn Sie auf ein Problem stoßen, zögern Sie nicht, es uns mitzuteilen. Hast du noch einen Tipp, den du teilen möchtest? Tun Sie 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