如何将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中文网其他相关文章！