WordPress: PHP-Variablen an JavaScript-Datei übergeben – wp_localize_script
Von Robert WordPress erlaubt es mit Hilfe der wp_localize_script-Funktion, PHP-Variablen an JavaScript zu übergeben.
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 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.«
