PHP Variable an JavaScript übergeben

PHP Variable an JavaScript übergeben

In diesem Beitrag zeige ich, wie man eine Variable aus PHP an JavaScript bzw. jQuery übergibt.

Die Übergabe von Variablen aus PHP an jQuery benötigte ich für das Auswechseln von Bildern.

PHP Code

Erklärung

Dieser PHP-Code passiert in der Datei functions.php.

In Zeile und holen wir uns den Dateinamen. In dem Beitrag Quick Tip: Dateiname anhand der URL holen kannst du mehr dazu lesen.

Ab Zeile sagen wir WordPress, dass es unsere JavaScript Datei gibt (projektquery.js).

Ab Zeile 15 speichern wir unsere gewünschten Variablen in einem Array.

Und in Zeile 21 passiert dann der Zauber.
Mit der Funktion wp_localize_script() übergeben wir die Variablen!

In meinen Fall sind die Parameter:
wp_localize_script( ‚projektquery‘, ‚imgParams‘, $imgParams );

  • ‚projektquery‘ = der handle, der in Zeile definiert ist.
  • ‚imgParams‘ = der Name der Variable, die in der JavaScript Datei vorkommt
  •  $imgParams = der Name der Variable in PHP – also die Variable, die übergeben wird

 

JavaScript bzw. jQuery Code

Erklärung

In Zeile wird überprüft, ob es denn die Variable imgParams überhaupt gibt.

In Zeile wird die Variable ThumbId definiert und gleichzeitig wird ihr der Wert aus der Variable imgParams übergeben.
Da imgParams ein Array ist, können wir in dieser Datei mittels dem Schlüssel „.thumb_id“ den Wert an ThumbId übergeben.

In Zeile passiert nochmals das gleiche.

Zum Testen werden in Zeile 8 alle Variablen in der Console des Browsers ausgegeben.

Danach kann man damit anstellen, was man möchte.

Resümee

Meines Erachtens ist die Funktion wp_localize_script() eine sehr unterschätze Funktion! Sie lässt einem leicht Variablen von PHP an JavaScript übergeben.

  • Karl

    Die Funktion wp_localize_script() ist tatscähclih sehr hilfreich. Danke für den übersichtlichen Post.

    • Martin Funk

      Danke für’s Feedback!

  • Melanie

    Lieber Martin,

    ich war letzte Woche in deinem WordPress-Seminar an der SAE und obwohl mein Blog schon etwas älter ist, hast du mir sehr weiter geholfen – obwohl ich wirklich keinen Dunst vom Programmieren und anderen Dingen habe – Vielen Dank für deine hilfreichen Tipps!

    Liebe Grüße,
    Melanie

    • Martin Funk

      Hey Melanie.

      Es freut mich natürlich sehr, wenn Leute aus dem „realen“ Leben hier her kommen. 🙂
      Bitte gerne. Es folgen sicher noch Beiträge die nicht nur mit Programmierung zu tun haben.
      lg

  • matuzo

    Hallo Martin,

    danke für die Zusammenfassung. Habe schon damit gearbeitet, aber viel länger gebraucht bis es tatsächlich funktioniert, als mit deiner Anleitung 😉

    Zwei Fragen habe ich aber:
    Wo führe ich hole_bild(); aus? Beispielsweise in der single.php, oder? In der functions.php geht es ja nicht, weil es dort die id nicht gibt. Stimmt das?

    Ist die Abhängigkeit von jQuery wirklich notwendig. Geht auch ohne, oder?

    Danke,
    matuzo

    • Martin Funk

      Hey Matuzo.

      1.) Du kannst die Funktion ausführen, wo du willst. Ich hatte die Funktion in der Datei functions.php. Dort rief ich sie mittels eines Hooks auf.
      Was du aber noch aufrufen musst, ist global $post;! Dann kannst du auf die id des aktuellen Beitrages zugreifen. Ich hab das oben im Code angepasst. Danke für den Hinweis.

      2.) Meinst du, ob man mit jQuery arbeiten muss? Nein. Du kannst auch mit „normalen“ JavaScript arbeiten.