Czasami zachodzi potrzeba przekazania danych (np. adresu admin-ajax.php) z PHP do JavaScript. Można to zrobić w dwojaki sposób.
Inline JavaScript
Inline JavaScript to kod JavaScript zawarty między tagami <script> i </script> i zamieszczony bezpośrednio w kodzie HTML. Poniżej przykład przekazania danych z PHP do inline JavaScript:
<script>
let ajaxUrl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
</script>JavaScript w osobnym pliku
Aby przekazać dane do kodu JavaScript znajdującym się w osobnym pliku js, można użyć funkcji wp_localize_script. Funkcja ta utworzy obiekt JavaScript i zamieści go w kodzie HTML między tagami <script> i </script>. Obiekt można potem odczytać w pliku JavaScript.
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script( 'test-style', get_stylesheet_directory_uri() . '/test.js' );
$data = array( 'ajaxUrl' => admin_url( 'admin-ajax.php' ),
'otherInfo' => array( 1, 3, 5 ),
);
wp_localize_script( 'test-style', 'testObj', $data );
} );Na podstawie tego kodu WordPress wygeneruje następujący HTML:
<script id="test-style-js-extra">
var testObj = {"ajaxUrl":"https:\/\/my-domain.com\/wp-admin\/admin-ajax.php","otherInfo":[1,3,5]};
</script>
<script src="https://my-domain.com/wp-content/themes/astra-child/test.js?ver=6.5.3" id="test-style-js"></script>W pliku test.js można odczytać obiekt testObj:
console.log(testObj.ajaxUrl);
console.log(testObj.otherInfo[0]);