如何將PHP數據和字符串傳遞給WordPress中的JavaScript

>將PHP數據傳遞給JavaScript的最佳實踐：wp_localize_script>和wp_add_inline_script>

的比較

>將數據存儲在PHP文件中的靜態字符串中是建議的練習。 如果在您的JavaScript代碼中需要此數據，請使用wp_localize_script或wp_add_inline_script>直接將其合併到您的HTML中。

>。

使用wp_enqueue_scripts涉及的傳統方法。讓我們檢查其繼任者wp_localize_script，以及更新的，首選的方法，。 wp_add_inline_script>

函數wp_localize_script

此功能提供了一種將數據傳遞給JavaScript的結構化方法。 這是其語法：

wp_localize_script( $handle, $objectName, $arrayOfValues );

• ：JavaScript文件的註冊句柄（例如'my_js_library'）。 $handle
• ：將包含您數據的JavaScript對象的名稱。 > $objectName
：一個持有數據傳遞的關聯數組。
• > $arrayOfValues

中的示例實現：

> functions.php 在您的JavaScript（

）中，

wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );

$dataToBePassed = array(
    'home'            => get_stylesheet_directory_uri(),
    'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);

wp_localize_script( 'my_js_library', 'php_vars', $dataToBePassed );

訪問這樣的數據： and

。 此方法消除了myLibrary.js> php_vars.home中的代碼的需求 php_vars.pleaseWaitLabelheader.php

函數

wp_add_inline_script這個較新的功能提供了一種簡化的方法。它的語法為：

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

：JavaScript文件的註冊句柄。

• ：一個包含要添加的JavaScript代碼的字符串。 這應該包括您要通過的數據。 $handle>
• ：指定在哪裡添加inline腳本（'之前'或'之後'腳本）。 $data>
• $position中的示例：
>

>您的JavaScript可以通過functions.php>和

訪問數據。此方法簡化了您的代碼並保持

wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );

$dataToBePassed = array(
    'home'            => get_stylesheet_directory_uri(),
    'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);

wp_add_inline_script( 'my_js_library', 'const php_vars = ' . json_encode( $dataToBePassed ), 'before' );

清潔器。

> php_vars.homephp_vars.pleaseWaitLabel結論header.php

>通常是其簡單性和效率的首選。但是，仍然是一個有效的選擇，特別是如果您更喜歡一種更結構化的方法來管理數據。 選擇最適合您的編碼樣式和項目需求的方法。 這種提高的清晰度和效率使這些功能為任何WordPress開發人員提供了寶貴的工具。

以上是如何將PHP數據和字符串傳遞給WordPress中的JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！