WordPress: PHP-Variablen an JavaScript-Datei übergeben – wp_localize_script

Von: Jonas, Robert

WordPress erlaubt es mit Hilfe der wp_localize_script-Funktion, PHP-Variablen an JavaScript zu übergeben.

Aktualisiert von 2019 – 2023

In WordPress ist es mit Hilfe der wp_localize_script-Funktion möglich, PHP-Variablen an JavaScript zu übergeben. Diese Funktion ist besonders hilfreich, wenn man in einer mehrsprachige Website mit Übersetzungs-Strings arbeitet oder wenn Inhalte über AJAX nachgeladen werden sollen. In diesem Beitrag zeigen wir euch, wie ihr PHP-Variablen in WordPress richtig an JavaScript übergebt.

JavaScript in WordPress einbinden

JavaScript sollte innerhalb von WordPress immer mit Hilfe der wp_enqueue_script-Funktion in der functions.php geladen werden. Hierzu müsst ihr einen Handler (im Beispiel dieses Beitrags kb_script) vergeben und den Pfad zu eurem Skript angeben. Weitere Informationen dazu findet ihr im Codex von WordPress.

wp_enqueue_script('kb_script', get_template_directory_uri().'/js/scripts.min.js', false);

PHP-Variablen an JavaScript übergeben

Nachdem ihr das Skript eingebunden habt, könnt ihr mit der wp_localize_script-Funktion PHP-Variablen an das JavaScript übergeben. Hierfür müsst ihr zuerst – mit Hilfe des zuvor angegeben Handlers (kb_script) – das Skript auswählen, an das die Variable übergeben werden soll. Anschließend legt ihr einen Namen für die Variable fest (im Beispiel kb_strings), die alle zu übermittelten Daten enthält.

Die Daten müsst ihr nun über ein Array definieren. Hierfür wird jeweils ein »Key« und ein »Value« benötigt. Die Angaben im Array werden mit Komma voneinander getrennt. Im Beispielcode übergeben wir so den übersetzbaren Text für »Menu« und »Back to top«.

wp_localize_script( 'kb_script', 'kb_strings', array(
 'menutext' => __('Menu','textdomain'),
 'backtotop' => __('Back to top','textdomain')
));

Variablen in JavaScript ausgeben

Die Ausgabe der Werte erfolgt nun, indem ihr den zuvor gewählten Namen der Variablen durch Punkt mit dem jeweiligen »Key« verbindet.

var menuText = kb_strings.menutext;
var backToTopText = kb_strings.backtotop;

// Testausgabe in der JS-Konsole
console.log(menuText);
console.log(backToTopText);

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Robert Menzel

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«