WordPress 传递PHP数据或字符串到JavaScript

本文目录
[隐藏]

• 1为什么需要传递数据到JavaScript
• 2传递数据的常用方式
• 3WordPress的方式
• 4执行 wp_localize_script
• 5结论

将所有静态字符串数据保存在PHP文件中是一个很好的做法。如果你需要在 JavaScript 使用一些数据，在HTML中将你的数据作为 data-* 属性也是一个好方法。但是在某些特定的情况下，你没有其他选择，只能将字符串直接传递到 JavaScript 代码中。

如果你引用了一个 JavaScript 库，并且你需要在 header.php 文件中初始化 JavaScript对象，然后传递数据到它的属性中，那么这篇文章很适合你。本文将教你如何正确地传递PHP数据和静态字符串到你的JavaScript库。

为什么需要传递数据到JavaScript

让我举例说明一些需要将数据传递到JavaScript 的典型场景。例如，有时我们需要得到这些值转换成JavaScript代码：

• 首页，管理后台，插件，主题或  ajax URL，
• 翻译的字符串，或
• 一个主题或WordPress的选项

传递数据的常用方式

比方说，我们有一个叫 myLibrary.js 一个jQuery的文件，要引入到我们的WordPress站点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var myLibraryObject;
 
(function($) {
    "use strict";
 
    myLibraryObject = {
        home: '', // populate this later
 
        pleaseWaitLabel: '', // populate use this later
 
        someFunction: function() {
            // code which uses the properties above
        }
    }
});

var myLibraryObject; (function($) { “use strict”; myLibraryObject = { home: ”, // populate this later pleaseWaitLabel: ”, // populate use this later someFunction: function() { // code which uses the properties above } } });

我们在主题的 functions.php 通过下面的代码调用它：

1

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

wp_enqueue_script( ‘my_js_library’, get_template_directory_uri() . ‘/js/myLibrary.js’ );

现在的问题是，我们如何才能填充 home 和 pleaseWaitLabel 属性，你可能已经本能地在 header.php 添加了这些代码来得到所需的数据：

1
2
3
4
5
6
7
8
9
10
11
12

<script>
(function( $ ) {
  "use strict";
 
  $(function() {
 
    myLibraryObject.home = '<?php echo get_stylesheet_directory_uri() ?>';
    myLibraryObject.pleaseWaitLabel = '<?php _e( 'Please wait...', 'default' ) ?>';
 
  });
}(jQuery));
</script>

<script> (function( $ ) { “use strict”; $(function() { myLibraryObject.home = ‘<?php echo get_stylesheet_directory_uri() ?>’; myLibraryObject.pleaseWaitLabel = ‘<?php _e( ‘Please wait…’, ‘default’ ) ?>’; }); }(jQuery)); </script>

这样可以实现我们的目的，但是，WordPress已经为我们提供了一个更好的和更短的方式来做到这一点。

WordPress的方式

将数据传递到 JavaScript 的推荐方法是使用 wp_localize_script() 函数。此功能意味着您要使用wp_enqueue_scripts() 来排队脚本后才使用。

1

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

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

下面是该函数的参数：

• $handle （字符串）（必填） 你所要附加数据的处理脚本
• $objectName （字符串）（必填） 将包含数据的脚本对象名称（也就是所要翻译文本的前缀）
• $arrayOfValues 包含名称和要传递给脚本值的关联数组

调用此函数之后，$objectName 变量将在指定的脚本中可用。

执行 wp_localize_script

让我们使用我们的新数据传递的方法来调整前面的例子。首先，我们排队脚本然后在我们的functions.php 使用 wp_localize_script 调用 ：

1
2
3
4
5
6
7

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 );

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 );

现在我们的 home 和 pleaseWaitLabel 值可以被我们的jQuery库内部通过php_vars变量访问。

由于我们使用了 wp_localize_script，我们没必要在 header.php 运行任何东西，现在可以安全地删除<script>标签的内容：

1
2
3
4
5
6
7
8
9
10
11
12

<script>
(function( $ ) {
  "use strict";
 
  $(function() {
 
    myLibraryObject.home = '<?php echo get_stylesheet_directory_uri() ?>';
    myLibraryObject.pleaseWaitLabel = '<?php _e( 'Please wait...', 'default' ) ?>';
 
  });
}(jQuery));
</script>

<script> (function( $ ) { “use strict”; $(function() { myLibraryObject.home = ‘<?php echo get_stylesheet_directory_uri() ?>’; myLibraryObject.pleaseWaitLabel = ‘<?php _e( ‘Please wait…’, ‘default’ ) ?>’; }); }(jQuery)); </script>

我们也可以从我们的jQuery脚本删除其他属性。它现在可以被简化为这样：

1
2
3
4
5
6
7
8
9
10
11

var myLibraryObject;
 
(function($) {
    "use strict";
 
    myLibraryObject = {
        someFunction: function() {
            // code which uses php_vars.home and php_vars.pleaseWaitLabel
        }
    }
}(jQuery));

var myLibraryObject; (function($) { “use strict”; myLibraryObject = { someFunction: function() { // code which uses php_vars.home and php_vars.pleaseWaitLabel } } }(jQuery));

结论

通过使用 wp_localize_script，我们的代码更简单，我们的header.php更干净。希望你可以在自己的代码中使用此功能，并享受其好处。