如何将自定义 JavaScript 添加到您的 WordPress 网站？

如果您想增强您的WordPress站点的前端功能，您需要添加JavaScript到您的站点——不管您使用的是第三方库还是自定义脚本。基于您的目标和编程知识，您可以选择几种技术来向WordPress添加定制的JavaScript，从使用插件到将定制脚本附加到不同的动作钩子。

将自定义JavaScript添加到WordPress

虽然您可以使用WordPress的内置Customizer将自定义CSS添加到主题中，但是JavaScript却无法做到这一点。 要将自定义JavaScript添加到WordPress站点，您需要使用插件或编辑（子）主题的functions.php文件。 我们将详细介绍这两个选项，但这是一个简短的摘要。

1.您可以使用不同类型的插件向WordPress添加自定义JavaScript：

• 用于编辑页眉和页脚模板的插件
• 用于将自定义JS代码添加到WordPress的插件
• 脚本特定的插件，用于添加和配置第三方脚本，例如Google Analytics（分析）或AdSense

2.或者，您可以使用WordPress函数并在functions.php文件中使用钩子：

• wp_head和wp_footer动作挂钩
• wp_enqueue_scripts ， admin_enqueue_scripts和login_enqueue_scripts操作挂钩
• wp_enqueue_script() WordPress函数

你不应该做的一件事

即使将自定义脚本添加到WordPress网站的最简单方法是将

1.使用插件将自定义JavaScript添加到WordPress

在以下情况下，建议使用插件：

• 不想直接编辑源文件
• 想要添加与主题无关JavaScript，即使您决定切换到新主题也可以保留

您可以使用各种插件将自定义JavaScript添加到WordPress网站。

用于编辑header.php和footer.php的插件

第一种选择是使用一个插件，该插件可让您编辑 WordPress主题的页眉和页脚模板文件 。 如果要添加在页面内容之前加载的脚本（例如分析和跟踪脚本），则需要编辑页眉模板，而在内容之后加载的脚本进入页脚模板。 通常，当脚本修改页面上显示的元素（例如图像库脚本）时，应将其放置在页脚中。

插入页眉和页脚是一个很好的插件示例，可让您编辑页眉和页脚模板。 它具有一个简单的用户界面，只有两个文本区域-一个用于页眉，一个用于页脚脚本。 它将您的脚本添加到wp_head或wp_footer操作挂钩。

您可以将任何类型的脚本插入两个输入字段。 您需要使用标记将脚本括起来。 此外，您还可以使用此插件将自定义CSS添加到标头模板中，只需用标记将其括起来（请注意，应始终将CSS添加到标头中）。

用于添加自定义JavaScript的插件

另一个选择是选择一个插件，该插件可让您向WordPress网站添加自定义JavaScript 。 这些插件与页眉和页脚编辑插件非常相似，其中大多数还使用wp_head和wp_footer操作挂钩。 但是，它们通常为您提供更多配置选项。

例如，使用Simple Custom CSS and JS插件，您可以为自定义JavaScript文件定义永久链接，将其保存到wp-content /文件夹中，将脚本作为自定义帖子类型进行管理，等等。 如果您想将多个自定义JavaScript文件添加到WordPress网站并保持井井有条，那么您会发现这种插件非常有用。

脚本特定的插件

最后，如果您只想向网站添加一个第三方脚本，则还可以检查该脚本是否具有适用于WordPress的集成插件。 流行的第三方JavaScript库的创建者经常在WordPress.org存储库中发布免费插件，以便您可以轻松地将其工具添加到您的网站中。 这种插件的最大优点是，它通常会带有针对该特定JavaScript库的内置配置选项。

例如，流行的GA Google Analytics（分析）插件可让您直接从WordPress管理区域将Google Analytics（分析）添加到您的网站。 它具有特定于Google Analytics（分析）脚本的内置功能，例如增强的链接归因，IP匿名化，自定义跟踪器对象等。

2.编辑您的孩子主题的functions.php文件

除了依赖插件之外，您还可以使用WordPress的内置功能和操作挂钩将自定义JavaScript添加到您的网站。 在这种情况下，您需要编辑functions.php文件并将脚本手动上传到服务器。 还建议为您的自定义创建子主题 ，以便您可以安全地更新父主题而不会丢失自定义代码。 您可以将自定义脚本上载到子主题的根文件夹，或者，如果您有多个脚本，则可以为其创建脚本文件夹。

您需要向子主题的functions.php文件中添加入队或打印出自定义JavaScriptPHP代码。 您可以在代码编辑器中编辑此文件，然后将更新的版本手动上传到服务器，也可以通过WordPress管理区域的外观>主题编辑器菜单进行编辑 （请参见下面的屏幕截图）。

使用wp_enqueue_script()函数将您的自定义脚本wp_enqueue_script()

WordPress主题手册建议使用wp_enqueue_script()函数将自定义脚本添加到您的站点。 此内置函数尊重WordPress的加载顺序，并以适当的顺序排列您的自定义脚本，因此它们不会与WordPress核心加载的其他脚本和您网站上运行的插件发生冲突。

使用wp_enqueue_script() ，您可以将自定义JavaScript添加到页眉和页脚模板中。 默认情况下，它使脚本进入由标题模板加载的页面的部分。

如果要将脚本添加到标头，则只需定义一个自定义句柄（在下面的示例中为'custom' ）和脚本路径。 正如您在下面看到的，我还使用了get_stylesheet_directory_uri() WordPress函数来获取子主题目录的URI。 然后add_action()函数将自定义tutsplus_enqueue_custom_js()函数添加到wp_enqueue_scripts操作钩子，该钩子使您可以将要显示在站点前端的自定义脚本加入wp_enqueue_scripts 。

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

请注意，尽管内置的WordPress函数wp_enqueue_script()和wp_enqueue_scripts操作钩几乎具有相同的名称，但它们是不同的。

除了将脚本wp_enqueue_script()页眉之外，还可以使用wp_enqueue_script()函数将自定义JavaScript添加到页脚模板中。 但是，在这种情况下，您还需要分别定义所有可选参数：

1. 依赖项： array()因为我们目前没有依赖项
2. 脚本的版本： false因为我们不想添加版本号
3. 这是用于页眉模板还是页脚模板：当我们切换到页脚模板时为true ，这是非默认选项

/* Custom script with no dependencies, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', 
    array(), false, true);
}

如果您的自定义脚本具有依赖项，则需要将其添加到array()   wp_enqueue_script()函数的参数。 WordPress核心已经注册了几个流行的脚本和库 ，例如jQuery，因此您可以使用它们的注册句柄（在下面的示例中为'jquery' ）添加它们。

/* Custom script with jQuery as a dependency, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', 
    array('jquery'), false, true);
}

如果您有一个未由WordPress注册的依赖项，则需要使用另一个wp_enqueue_script()函数进行注册并使其入队，然后才能使用其自定义句柄将其添加为依赖项。

如果要在管理区域而不是站点的前端运行脚本，则需要在add_action()函数中使用admin_enqueue_scripts操作挂钩而不是wp_enqueue_scripts 。 对于登录屏幕，您需要使用login_enqueue_scripts操作钩子，该钩子仅使登录页面的自定义脚本入队。

使用wp_head或wp_footer动作挂钩打印出内联脚本

尽管WordPress文档建议将wp_enqueue_script()函数用于自定义脚本，但是您也可以使用wp_head和wp_footer操作挂钩将内联脚本添加到您的站点。 这些钩子只在页眉或页脚模板中将它们打印出来，而不是使您的自定义脚本排队。 因此，您仅应使用此技术添加内联脚本，而不应使用外部.js文件。

这是使用wp_head操作钩子在标题模板中打印出内联脚本的方式：

这是您可以使用wp_footer操作挂钩在页脚模板中打印出内联脚本的方式：

由于wp_head和wp_footer仅在您网站的前端启动，因此添加了这些挂钩的脚本不会加载到管理区域和登录页面中。 要将自定义内联脚本添加到您的管理区域，您应该使用add_action()函数中的admin_head和admin_footer操作挂钩。 而且，如果要在登录页面上打印出脚本，请使用login_head和login_footer操作挂钩。

请注意，上述插件（插入页眉和页脚以及简单的自定义CSS和JS）确实将wp_head和wp_footer不仅用于内联脚本，而且还用于外部.js文件，但是除非您真的知道您自己，否则仍然不应该使用后者是做。 这是因为插件会执行额外的检查，以确保遵守WordPress的加载顺序。 如果要手动添加自定义脚本，则坚持使用推荐的wp_enqueue_script()函数会更安全，更轻松。

结语

您可以使用插件或通过编辑主题或子主题的functions.php文件将自定义JavaScript添加到WordPress网站。

如果您不想编辑源文件，则推荐使用插件，因为这些插件可确保自定义脚本以正确的顺序加载。 手动将脚本排队在functions.php文件中，使您可以将自定义脚本与主题相关联，并使所有内容井井有条，而不必向WordPress网站添加其他插件。

Envato市场上最好的WordPress主题和插件

探索在ThemeForest上创建的数千个最佳WordPress主题，以及CodeCanyon 上 领先的WordPress插件 。 购买这些高质量的WordPress主题和插件，并为您和您的访客改善您的网站体验。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-add-custom-javascript-to-your-wordpress-site--cms-34368