是否可以从 WordPress 模板 PHP 文件更改 script.js 文件中的 JS 字符串变量？

Question

我有一个我想解决的问题，但不完全了解如何解决它，并且想知道这里是否有人知道方法。

在我的 WordPress 主题中，我有一个位于 JS 文件夹中的 script.js 文件，其中包含用于在页面加载时加载 Instagram 提要的脚本。

$(window).on('load', function(){
 $.instagramFeed({
'username': 'usernamehere',
'container': "#instagram-feed-demo",
'display_profile': false,
'display_biography': false,
'display_igtv': false,
'items': 9,
'items_per_row': 3,
  'styling': false
 });
}); 

在我的 WordPress 单页模板中，我想使用自定义字段填充用户名字符串，但是如果我将脚本移动到脚本标记中的模板中，它不起作用但在 script.js 文件中可以正常工作。

有人知道从单个模板中填充字符串的方法吗？

Answer 1

不确定我是否正确理解了您的需要，但您可以检查加载 script.js 文件的模板（使用wp_enqueue_script函数）并使用相同的处理程序名称添加对wp_localize_script function 的另一个调用并将其传递给变量数组可用于 javascript。

例子：

wp_enqueue_script('script-handler', 'url to the script.js file', []);
wp_localize_script('script-handler', 'jsObjectName', [
  'username' => $usernamehere,
]);

使用 wp_localize_script jsObjectName创建的 js wp_localize_script jsObjectName 将在调用 script.js 文件之前，使其值可在脚本中使用。

现在将 Instegram 代码更改为如下所示：

$(window).on('load', function(){
  $.instagramFeed({
    'username': jsObjectName.username,
    'container': "#instagram-feed-demo",
    'display_profile': false,
    'display_biography': false,
    'display_igtv': false,
    'items': 9,
    'items_per_row': 3,
    'styling': false
  });

});