如何在WordPress中动态生成JavaScript代码？

Question

我正在我的 WordPress 主题中设置一个选项面板，并且有一个选项，即“client_id”。我想使用该值并将其放入我的 JavaScript 文件中。WordPress 可以做到这一点吗？它有一个“编译器”可以将值返回到我的 JS 文件中吗？或者如何通过functions.php向我的WordPress主题添加JS函数？

目前我正在将 wp_enqueue 用于我的所有样式和脚本。我可以在 enqueue 中添加 JS 函数吗？

Answer 1

我在所有主题上使用本地化来获取 JavaScript 中的 PHP 数据。这并不难，下面我会详细介绍。

首先，确保您使用 enqueue 加载要在 FOOTER 中使用的 javascript 文件。如果它在页脚之前排队，您将不会获得任何数据，因为页脚是我们将数据提供给 JavaScript 的地方。这就是我的调用在functions.php 中的样子。null 和 true 参数对于使其正常工作至关重要，更多信息请参见 Codex

  //functions.php
  wp_enqueue_script('my_custom_javascript', get_template_directory_uri() . '/assets/js/scripts.js', array('jquery'), null, true);

然后在任何模板中，在代码顶部创建一个全局 PHP 数组变量。根据需要，向包含有意义名称的数组以及稍后要在 JavaScript 中使用的数据添加索引。

<?php // template file
  get_header();

  $javascript_data = array();
  //... then throughout your template ...
  $javascript_data['some_data'] = 'some value';
  $javascript_data['more_data'] = $some_variable;

然后，在页脚中，在调用 get_footer() 之前，添加一个本地化函数，该函数将 PHP 变量（包含您在模板中添加的所有内容）包装在一个方便的 javascript 对象中。法典中的更多信息

<?php //footer.php
  wp_localize_script( 'my_custom_javascript', 'js_data', $javascript_data );
  get_footer();      

这将获取 PHP 数组中的所有数据，并将其本地化到 my_custom_javascript 脚本队列中，创建一个可以立即在 javascript 文件中使用的对象，如下所示：

// Javascript file
alert(js_data.some_data);
// or
console.log(js_data.more_data);
// I usually add this to the top of my JS for debugging
console.dir(js_data);

所以对你来说，完成上述操作后，你的functions.php可能包括：

$javascript_data['client_id'] = get_client_id();
function get_client_id(){
// $client_id = code to get the id here
// return $client_id
}

然后页脚会将该数据本地化到您的脚本中，并且 js_data.client_id 将在您的 javascript 文件中可用。