WordPress: PHP Variablen an JavaScript übergeben

WordPress bietet eine einfache, sichere und schnelle Möglichkeit an, beliebige PHP Variablen an eine JavaScript Datei zu übergeben.

Häufig werden in WordPress PHP Variablen auch in einer JavaScript Datei benötigt. Natürlich könntest du jetzt einfach im HTML einen <script>-Tag machen und dort die Variablen anlegen.

Allerdings bringt WordPress eine einfache Funktion wp_localize_script() mit, die diese Aufgabe für dich übernimmt. Und so einfach klappt das.

1. JavaScript Datei in WordPress einbinden

In WordPress sollten JavaScript-Dateien immer über wp_enqueue_script() statt über einen HTML <script>-Tag eingebunden werden. Dazu kannst du folgendes Code-Snippet nutzen und in deiner functions.php einfügen.

// functions.php

function register_js_files() {
  wp_enqueue_script("my_own_script", get_template_directory_uri() . "/js/script.js");
}
add_action("wp_enqueue_scripts", "register_js_files");

Der erste Parameter ist ein beliebiger Name, welcher allerdings nicht doppelt vergeben sein darf. Der zweite Parameter ist der Pfad zu deiner JavaScript Datei. In diesem Fall liegt er im Theme-Ordner unter js/script.js. (Pfad zum Child-Theme: get_stylesheet_directory_uri()).

Optional kann man noch weitere Parameter angeben: Die zuvor zu ladenden Skripte (z.B. jQuery), ein Versions-String der als Parameter an die JavaScript Datei angehängt wird und ein Boolean, ob das Skript im Head oder im Footer der Seite geladen werden soll. Mit diesen Parametern könnte die Zeile so aussehen:

  wp_enqueue_script("my_own_script", get_template_directory_uri() . "/js/script.js", array("jquery"), "1.3.3", true);

Hier findest Du ganz viele nützliche Snippets für WordPress 🙂

2. WordPress PHP Variablen an JavaScript übergeben

Nach der wp_enqueue_script() Funktion ergänzen wir die markierten Zeilen, in der die PHP Daten übergeben werden.

// functions.php

function register_js_files() {
  wp_enqueue_script("my_own_script", get_template_directory_uri() . "/js/script.js");
  wp_localize_script("my_own_script", "WPVars", array(
        "your_data" => "HIHI FUNNY DATA",
        "blog_name" => get_bloginfo("name"),
        "time" => time(),
        "images_folder" => get_template_directory_uri() . "/images",
      )
    );
}
add_action("wp_enqueue_scripts", "register_js_files");

Die Funktion wp_localize_script() erwartet 3 Parameter:

• $handle: Der Name des Skripts, der die Variablen bekommen soll (my_own_script in unserem Fall)
• $object_name: Der Variablenname, den das JavaScript Objekt mit unseren Daten haben soll
• $l10n: Die eigentlichen Daten als PHP-Array (multidimensional)

3. Variablen in JavaScript verwenden

In der eingebundenen JavaScript Datei können wir jetzt mit unserem gewählten Objektnamen auf die PHP Variablen zugreifen.

console.log(WPVars.your_data);
console.log(WPVars.blog_name);
console.log(WPVars.time);
console.log(WPVars.images_folder);

Was du jetzt mit diesen Variablen machst liegt in deiner Hand – viel Spaß damit! 🙂

Wenn du wissen willst, wie man Daten zwischen WordPress und Browser dynamisch übertragen kann (z.B. für Pagination, Live-Suche und dynamisches Nachladen von Inhalten), schau dir meinen Beitrag zum Thema Ajax in WordPress an.