时间戳

首页 > 解决方案 > 是否可以从 WordPress 模板 PHP 文件更改 script.js 文件中的 JS 字符串变量？

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

问题描述

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

在我的 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 文件中可以正常工作。

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

标签： javascriptphpwordpress

解决方案

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

例子：

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

jsObjectName使用该函数创建的 js 对象wp_localize_script将在调用 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
  });

});

推荐阅读