So übergeben Sie PHP-Variablen an JavaScript in WordPress

Wenn Sie ein WordPress-Theme oder -Plugin erstellen, haben Sie manchmal JavaScript-Code, der Daten/Werte von PHP verwenden muss. Sie benötigen beispielsweise diese Werte in Ihrem JavaScript-Code:

Homepage URL
Theme option values
WordPress posts data
etc

Der einfachste Weg, dies zu tun, besteht darin, diese Werte in JavaScript-Objekten in Ihrer header.php-Themedatei oder Ihrem wp_head-Hook zu initialisieren. Zum Beispiel :

<script>
var myThemeParams = {
   homeURL: <?php echo home_url(); ?>,
   themeOptions: <?php echo get_theme_mod( 'mytheme_options', false ); ?>,
}
</script>

Auch wenn es funktioniert, aber WordPress hat uns eine Funktion zur Verfügung gestellt, um so etwas zu tun. Es heißt wp_add_inline_script.

wp_add_inline_script( $handle, $data, $position = 'after' )

$handle : Name des Skripts, zu dem das Inline-Skript hinzugefügt werden soll.

$data : String, der das hinzuzufügende JavaScript enthält.

$position : Ob das Inline-Skript vor oder nach dem Handle hinzugefügt werden soll.

Diese Funktion fügt vor oder nach Ihrem JavaScript-Code ein Inline-Skript hinzu. Es kann tatsächlich mehr tun, als PHP-Variablen an JavaScript weiterzugeben. Einen weiteren Anwendungsfall sehen Sie hier.

Um also wp_add_inline_script zum Übergeben von Variablen von PHP an JavaScript zu verwenden, müssen Sie die Positionseigenschaften auf before setzen, damit das Inline-Skript vor Ihrer JS-Datei hinzugefügt wird. Und dann initialisieren Sie ein JavaScript-Objekt und setzen den Wert mit Daten von PHP.

$myThemeParams = array(
    'homeURL' => home_url(),
    'themeOptions' => get_theme_mod( 'mytheme_options', false )
);
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js' );
wp_add_inline_script( 'my-theme-script', 'var myThemeParams = ' . wp_json_encode( $myThemeParams ), 'before' );

In Ihrem JavaScript können Sie wie folgt darauf zugreifen:

console.log( myThemeParams.homeURL );
console.log( myThemeParams.themeOptions );