Der BesserOnlineBlog 【ツ】

besser Online jeden Tag – Tipps für SEO, eCommerce, Online-Marketing

Ajax richtig in WordPress nutzen -Tutorial

wp_ajax
Helfe Sterne sammeln!
Loading ... Loading ...

In diesen Tutorial erkläre ich, wie man in WordPress korrekt eine AJAX Abfrage durchführt.

Gedankenstütze: Was ist AJAX?

Mithilfe von Ajax (Asynchronous JavaScript and XML) ist es in möglich, nachträglich Daten an den Webserver zu senden bzw. zu empfangen, ohne die komplette Seite neu laden zu müssen. Die Datenkommunikation führt hier Javascript mit dem Webserver durch. Wer technisches erfahren möchte, kann sich z.B. hier einlesen. Hier geht es jetzt direkt mit der WordPress Einbindung los.

Schritt 1: Einbindung eines Javascript Files (in functions.php)

Mit der Funktion “hook_ajax_script” wird die Javascript File in den WordPress Header eingebunden. Zu beachten ist der Hook Typ. Hier wp_enqueue_script wenn Ajax nur im Frontend geladen werden soll, bzw. admin_enqueue_scripts wenn wir Ajax auch im Backend benötigen. Der Pfad zur Javascript File muss natürlich individuell angepasst werden. 

Schritt 2: PHP Daten in im JavaScript File bekannt machen

Zugegeben, ich bin nicht ganz sicher, wie WordPress folgendes technisch umsetzt:

Wichtig ist, was wir hier machen: Mit wp_localize_script machen wir Daten im Javascript File als JavaScript-Variablen bekannt. Wir können dann folgend auf Daten zugreifen, die vom PHP Server mitgesendet wurden. ‘my_ajax_script’ muss hier dem zugeordneten Script von Schritt 1 entsprechen. Der zweite Parameter, hier bob_unique, kann frei gewählt werden, muss aber einzigartig sein. Packt den wp_localize_script Aufruf mit in die hook_ajax_script Funktion.

Im folgenden Array ist das Feld ‘ajaxurl’ => admin_url ( ‘admin-ajax.php’ ) zwingend notwendig. Alle weiteren Daten sind optional und je nach Bedarf zu verwenden.

Testing: Schreibt einen alert in eure Javascript File und testet ob die Daten korrekt geliefert werden:

Ist alles korrekt, bekommt ihr folgende Ausgaben: “http://www.domain.de/wp-admin/admin-ajax.php“.

Schritt 3: Per JavaScript (jQuery) eine Anfrage an den Server starten

So könnte ein jQuery Ajax Anfrage an den Server aussehen. Der Header-Übertragungstyp ist POST. Als URL übergeben wir die zuvor festgelegte admin-ajax.php URL von WordPress. Als data ist zwingend der Parameter Action zu übergeben. Dieser Name entspricht dem PHP Funktionsnamen der vom Ajax Call aufgerufen werden soll. Darum kümmern wir uns in Schritt 4. In diesem Beispiel übergebe ich zusätzlich noch den zuvor festgelegten title. Ist der Ajax-Call später erfolgreich, stehen alle zurück gegebenen Daten in der Variablen data.

Schritt 4: Empfangende PHP Funktion einrichten

Am besten in der functions.php hooken wir zum Schluss noch die Funktion serversidefunction. Hier können jetzt wieder Serverbasierte Abfragen getätigt werden, zum Beispiel die gängigen WordPress-Methoden wie the_content().

Alle Daten die zuvor im Javascript Ajax Aufruf unter data abgelegt wurden, können in der $_POST Variable abgerufen werden.

Die Funktion hooken wir hier wieder mit einer add_action, einmal für eingeloggte User, und einmal für nicht eingeloggte user.

Daten geben wir zurück mit echo json_encode($responseData). Es ist gängig Ajax Daten als json_encode zu versenden.

Mögliche Fehlerquellen & Tipps

Falls der Ajax-Call nicht geht, überprüft bitte folgendes.

  • Ist meine jQuery Bibliothek von WordPress erreichbar?
  • Werden alle PHP Funktionen von WordPress geladen (z.B. muss die Request entgegen nehmende PHP Funktion aus Schritt 4 geladen werden)
  • Ggf. stimmt etwas nicht mit der Reihenfolge in der die Hooks geladen werden. Bei mir hat das immer mal Probleme gemacht.

Folgende Anwendungstipps habe ich für euch:

  1. jQuery bietet eine json decode Methode an:
    parsedData = jQuery.parseJSON(data)
    Verwendet diese Zeile im JavaScript Success Bereich
  2. Wer Google Chrome nutzt kann mit dessen Developer Tool das Daten versenden verfolgen. Drücke dazu F12 und verfolge die Aktivitäten unter dem Registerpunkt “Network”. Wurde alles korrekt programmiert, kann man den Datenverkehr unter der Datei admin-ajax.php einsehen.
    ajax-developer-tool-chrome

Es macht natürlich Sinn den Ajax Aufruf erst dann zu triggern, wenn zum Beispiel jemand auf einen Button klickt. Wer den jQuery Event Listener noch nicht kennt, der lese sich bitte hier ein.

 

 

 


Hier schreibt: Phillip Groschup, Student für E-Commerce an der FH Würzburg. Ich interessiere mich für ECommerce, SEO/SEA, Online-Marketing und Webentwicklung. Ich schreibe und bearbeite mit Hilfe der gängingen Websprachen Websites. Insbesondere arbeite ich viel mit WordPress. Auf diesem Blog schreibe über diese Themen, über Vorträge und alles was mich sonst noch interessiert.

10 Kommentare bisher.

  1. Kai sagt:

    Hallo Phillip,

    sorry aber kannst Du mir möglicherweise helfen?
    Ich bin noch neu in WordPress und will azexo als Widget Designer nutzen. Irgendwie klappt das aber nicht. Dort stand etwas von Ajax und ich denke, das ist nicht zu putzen da… Aber für was dann? Irgendwie komme ich noch nicht ganz in die Bahn…
    Wenn ja, bin ich Dir super dankbar…
    Grüße schonmal
    Kai

    • Phillip Groschup sagt:

      Hallo Kai,

      erst mal sorry für die verspätete Rückmeldung.
      Azexo kenne ich leider gar nicht. Ich muss auch zugeben, dass ich deine eigentliche Frage nicht richtig verstanden habe.

      Wenn ich kann, helfe ich gerne :-)

  2. marc sagt:

    ist admin-ajax.php eine wordpress sache oder hat man diese selber anzulegen ? gruss marc

Schreibe einen Kommentar