如何在 WordPress 中将 PHP 数据和字符串传递给 JavaScript

将所有数据放在 php 文件中的静态字符串中是一种很好的做法。如果稍后需要在 javascript 中使用某些数据，将数据作为data-*属性放入 html 中也是一种很好的做法。但在某些特定情况下，您别无选择，只能将字符串直接传递给 JavaScript 代码。

如何在 WordPress 中将 PHP 数据和字符串传递给 JavaScript 第1张

如果您包含一个 javaScript 库，并且发现自己在header.php中初始化了一个 JavaScript 对象，然后将数据分配给它的属性，那么本文适合您。

本文将教您如何正确地将 PHP 数据和静态字符串传递到您的 JavaScript 库。

为什么需要将数据传递给 JavaScript

让我举例说明一些需要将数据传递给 JavaScript 的典型场景。例如，有时我们需要将这些值放入您的 JavaScript 代码中：

主页、管理员、插件、主题或 ajax URL
可翻译字符串
主题或 wordpress 选项

传递数据的常用方式

假设我们有一个名为myLibrary.js的 jquery 文件，我们将把它包含在我们的 WordPress 站点中：

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中：

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

现在的问题是我们如何填充home和pleaseWaitLabel属性？您可能本能地在header.php中添加了类似这样的内容来获取所需的数据：

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

这按预期工作，但有更好和更短的方法来做到这一点。

WordPress 方式

在本节中，我们将讨论几种不同的方式来了解它在 WordPress 中的工作原理。

老方法：使用wp_localize_script函数

将数据传递给 JavaScript 的旧方法是使用wp_localize_script函数。此函数旨在在您使用对脚本进行排队后使用wp_enqueue_scripts。

让我们看看这个函数的语法及其参数。

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

$handle. 要将值绑定到的排队脚本的句柄。
$objectName. 将保存的所有值的 JavaScript 对象$arrayOfValues。
$arrayOfValues. 包含要传递给脚本的名称和值的关联数组。

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

让我们调整前面的示例以使用我们传递数据的新方法。首先，我们将脚本加入队列，然后调用wp_localize_script我们的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_localize_script( 'my_js_library', 'php_vars', $datatoBePassed );

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

因为我们使用wp_localize_script了，所以我们不必在header.php中运行任何东西，我们可以安全地删除<script>标签的内容：

我们还可以从我们的 jQuery 脚本中删除额外的属性。现在可以简化为：

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

新方法：使用 wp_add_inline_script函数

新的推荐方法是使用wp_add_inline_script函数。应在使用对脚本进行排队后使用此函数wp_enqueue_scripts。

让我们看看这个函数的语法和参数。

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

$handle. 将内联脚本添加到的脚本的名称。
$data. 包含要添加的 JavaScript 的字符串。
$position. 是在句柄之前还是之后添加内联脚本。

所以这个函数会在你的 JavaScript 代码之前或之后添加一个内联脚本。

让我们用版本修改我们在上一节中讨论的示例wp_add_inline_script。

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( 'wpdocs-my-script', 'const php_vars = ' . json_encode( $dataToBePassed ), 'before' );

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

我们在 JavaScript 中的变量将可用php_vars.home，php_vars.pleaseWaitLabel如以下代码片段所示。

var myLibraryObject;
 
(function($) {
    "use strict";
 
    myLibraryObject = {
        someFunction: function() {
            console.log(php_vars.home);
            console.log(php_vars.pleaseWaitLabel);
        }
    }
}(jQuery));

所以通过这种方式，您可以将 PHP 数据和字符串传递给 WordPress 中的 JavaScript。