Jak przekazać zmienne PHP do JavaScript w WordPress

Kiedy tworzysz motyw WordPress lub wtyczkę, czasami masz kod JavaScript, który musi używać danych/wartości z PHP. Na przykład potrzebujesz tych wartości w kodzie JavaScript :

Homepage URL
Theme option values
WordPress posts data
etc

Najłatwiej to zrobić, inicjując te wartości w obiektach JavaScript w pliku motywu header.php lub haczyku wp_head. Na przykład :

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

Mimo, że to działa, WordPress dostarczył nam funkcję do robienia czegoś takiego. Nazywa się wp_add_inline_script.

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

$handle : Nazwa skryptu, do którego ma zostać dodany skrypt wbudowany.

$data : Ciąg zawierający dodany JavaScript.

$position : Określa, czy dodać skrypt inline przed uchwytem, ​​czy po.

Ta funkcja doda wbudowany skrypt przed lub po kodzie JavaScript. W rzeczywistości może zrobić więcej poza przekazywaniem zmiennych PHP do JavaScript. Tutaj możesz zobaczyć inny przypadek użycia.

Tak więc, aby użyć wp_add_inline_script do przekazywania zmiennych z PHP do JavaScript, musisz ustawić właściwości position na before, tak aby skrypt inline został dodany przed twoim plikiem JS. A następnie zainicjuj obiekt JavaScript i ustaw wartość danymi z 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' );

W swoim JavaScript możesz uzyskać do niego dostęp w ten sposób:

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