kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Web Animationen, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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);

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.