将自定义外部js添加到wordpress的最佳方法是什么

正如领先的CMS社区所声称的那样，互联网中有25％使用的是WordPress。 看到趋势，我们别无选择，只能相信它们，几乎每个^第二个博客和每个第四^个站点似乎都在使用最强大且用户友好的CMS。 对此，人们和开发人员已开始将其网站转移到WordPress平台。

为了将您的网站从简单，甜蜜转变为一个复杂的，高性能的CMS网站，人们陷入了一个非常基本的步骤，并提出了以下问题： 对于Love，我如何获得此外部JavaScript（.js）文件在这个WordPress主题中工作？ 你也是问同样一个问题的人吗？ 好吧，朋友，您终于来对地方了：我在这里引导您逐步完成实现此任务的最简单方法！

现在，假设您已经安装了WordPress，并且已经准备好使用外部JS进行启动，那么让我们开始执行包含文件的任务！

注意：本教程使用的是以下文件（testrun.js），我正在研究的主题是WordPress的二十一岁。

警报（'你好'）;

让我们开始！

所有脚本和样式表均从functions.php中加载。 这是在WordPress中加载它们的正确方法，以避免与WordPress本身或使用的插件加载的任何其他脚本冲突。 如果让WordPress管理所有包含的文件，则需要让它知道您希望将此文件包含在文件的页眉（开始）或页脚（结束）部分中。 每个模板/主题都有其自己的functions.php，因此很难归纳出包含所有要包含的文件的函数的确切名称。 由于我以26岁为主题，因此以下是我的functions.php（用于包含文件）的快照。 您的应在某种程度上类似于以下内容：

wp_enqueue_script函数根据脚本的依赖关系（如果尚未包含脚本并且已注册所有依赖关系）在正确的时间将脚本文件链接到生成的页面。 您可以将脚本与先前使用wp_register_script（）函数注册的句柄链接，或者为该函数提供链接脚本所需的所有参数。

wp_enqueue_script（$ handle，$ src，$ deps，$ ver，$ in_footer）具有以下参数：

$句柄

（字符串）（必需）脚本名称。

$ src

（string | bool）（可选）来自WordPress根目录的脚本路径。 示例：“ / js / myscript.js”。

默认值：false

$ deps

（数组）（可选）此脚本所依赖的注册句柄数组。

默认值：array（）

$ ver

（string | bool）（可选）指定脚本版本号（如果有的话）的字符串。 此参数用于确保无论缓存如何都将正确的版本发送到客户端，因此，如果版本号可用并且对于脚本有意义，则应包括此参数。

默认值：false

$ in_footer

（布尔）（可选）是否在脚本之前入队 或之前 。 默认为“ false”。 接受“ false”或“ true”。

默认值：false

您可以忽略本教程的wp_register_script（）函数。 我们的目的是仅包含外部JS。 没有它就可以正常工作！

因此，如果我想将脚本命名为“ test”，请记住，此参数（$ handle）不一定是实际文件的名称，并且我的文件具有对jquery的外部依赖性，版本为1.0，并且在页面加载之前加载那么我的函数将如下所示：

wp_enqueue_script（'tutorial'，get_template_directory_uri（）。'/js/testrun.js'，array（'jquery'），'1.0'，false）;

如果您注意到，我使用了get_template_directory_uri（），因此，在函数之后串联的字符串“ /js/testrun.js ”实际上是模板 索引文件的文件路径。

因此，您的$ src属性（即js文件的来源）将变成： get_template_directory_uri（）。'path_to_js_wrt_index_of_template'。

因此，最终的functions.php看起来像：

坚持在那里，我们快完成了！ 只需立即保存此内容并在您的网站上单击“刷新”即可……您应该看到JS正常工作！ 这是我的：

由于我们将$ in_footer选项设置为false，因此脚本在页面加载之前加载，但在JQuery加载后加载，因为它被添加为依赖项！

和..瞧！ 在这里，您已成功..您已成功在WP主题中包含一个外部自定义JS文件！

快乐编码！

参考：排队功能：WordPress Codex