如果您想增强 WordPress 网站的前端功能，则需要向网站添加 JavaScript——无论您使用的是第三方库还是自定义脚本。
根据您的目标和编码知识，您可以选择一些技术将自定义 JavaScript 添加到 WordPress，从使用插件或自定义块到将自定义脚本附加到不同的动作挂钩。
在本教程中，我们将研究每种方法，了解它们的工作原理，并解释何时应该使用哪一种方法。
向 WordPress 添加自定义 JavaScript
虽然您可以使用 WordPress 内置的定制器为主题添加自定义 CSS，但您无法使用 JavaScript 进行同样的操作。要将自定义 JavaScript 添加到您的 WordPress 网站，您需要使用插件、编辑（子）主题的 functions.php文件，或使用块编辑器。我们将详细介绍这些选项，但这里只做一个简短的总结。
1.您可以使用不同类型的插件向 WordPress 添加自定义 JavaScript：
- 用于编辑页眉和页脚模板的插件
- 用于向 WordPress 添加自定义 JS 代码的插件
- 用于添加和配置第三方脚本（例如 Google Analytics 或 AdSense）的脚本专用插件
2.您还可以在functions.php 文件中使用 WordPress 函数和钩子：
- 和
wp_head动作wp_footer钩子 wp_enqueue_scripts、admin_enqueue_scripts和login_enqueue_scripts动作钩子- WordPress
wp_enqueue_script()功能
3.或者您可以使用块编辑器将自定义 JavaScript 添加到特定页面或帖子：
- 选择自定义 HTML 块选项
- 在自定义 HTML 块中使用 <script> 标签
你绝对不应该做的一件事
尽管向 WordPress 网站添加自定义脚本的最简单方法是将<script> 标签直接 放入header.php或 footer.php 模板文件中，但您绝对不应该这样做。这是因为 WordPress 具有特定的加载顺序，在任何情况下都应遵循该顺序。
如果您将自定义 JavaScript 直接插入页眉或页脚模板，则可能会与您的主题、网站上运行的插件或 WordPress 核心发生冲突。您应该使用本文详细介绍的其中一种技术。
因此，切勿在header.php 或 footer.php文件中添加类似以下行 （即使从技术上讲可以这样做）：
<script src= "https://example.com/wp-content/themes/your-theme/js/script.js" ></script>1.使用插件向 WordPress 添加自定义 JavaScript
当您执行以下操作时，建议使用插件：
- 不想直接编辑源文件
- 想要添加与主题无关的 JavaScript，即使您决定切换到新主题也可以保留
您可以使用不同类型的插件将自定义 JavaScript 添加到您的 WordPress 网站。
1.1. 用于编辑header.php和footer.php 的插件
第一种选择是使用插件，该插件允许您 编辑 WordPress 主题的 页眉和页脚模板文件。如果您想添加在页面内容 之前加载的脚本（例如分析和跟踪脚本），则需要编辑页眉模板；而内容之后加载的脚本则需要编辑页脚模板。通常，当您的脚本修改页面上显示的元素（例如图库脚本）时，应将其放置在页脚中。
插入页眉和页脚 是一个很好的插件示例，它允许您编辑页眉和页脚模板。它的用户界面简洁，只有两个文本区域——一个用于页眉，一个用于页脚脚本。它可以将您的脚本添加到操作挂钩wp_head或wp_footer操作钩子中。
您可以在两个输入字段中插入任何类型的脚本。您需要将脚本放在<script></script>标签中。此外，您还可以使用此插件将自定义 CSS 添加到标题模板中——只需将其放在<style></style>标签中即可（请注意，CSS 应始终添加到标题中）。
1.2. 在 WordPress 中添加自定义 JavaScript 的插件
另一个选择是选择允许你向 WordPress 网站添加自定义 JavaScript 的插件。这些插件与页眉和页脚编辑插件非常相似，并且大多数也使用了 wp_head 和 wp_footer 动作钩子。但是，它们通常会提供更多配置选项。
例如， Simple Custom CSS and JS 插件允许您为自定义 JavaScript 文件定义永久链接，将其保存到 wp-content/文件夹，并将脚本作为自定义帖子类型进行管理等等。如果您想在 WordPress 网站中添加多个自定义 JavaScript 文件并保持其井然有序，您会发现这类插件非常有用。
1.3. 用于向 WordPress 添加 JS 脚本的插件
最后，如果您只想在网站上添加一个第三方脚本，还可以检查它是否有 WordPress 集成插件。流行的第三方 JavaScript 库的创建者经常会在 WordPress.org 代码库中发布免费插件，以便您轻松地将其工具添加到您的网站。这类插件最大的优势在于，它通常会内置针对特定 JavaScript 库的配置选项。
例如，流行的GA Google Analytics插件可让您直接从 WordPress 管理区域将 Google Analytics 添加到您的网站。它具有特定于 Google Analytics 脚本的内置功能，例如增强链接归因、IP 匿名化、自定义跟踪器对象等。
2.编辑子主题的functions.php文件
除了依赖插件之外，您还可以使用 WordPress 的内置函数和动作钩子将自定义 JavaScript 添加到您的网站。在这种情况下，您需要编辑 functions.php文件并手动将脚本上传到您的服务器。
建议您为自定义内容创建一个子主题，以便安全地更新父主题，而不会丢失自定义代码。您可以将自定义脚本上传到子主题的根文件夹，或者，如果您有多个脚本，则可 以为它们创建一个脚本文件夹。
您需要将用于排队或打印自定义 JavaScript 的 PHP 代码添加到子主题的 functions.php文件中。您可以在代码编辑器中编辑此文件，然后手动将更新版本上传到服务器，也可以通过WordPress 管理界面的“外观”>“主题编辑器” 菜单进行编辑（参见下方截图）。
wp_enqueue_script()2.1. 使用函数将自定义脚本加入队列
WordPress主题手册推荐使用 wp_enqueue_script() 向网站添加自定义脚本的功能。此内置功能遵循 WordPress 的加载顺序，并按正确的顺序将您的自定义脚本放入队列，这样它们就不会与 WordPress 核心加载的其他脚本以及您网站上正在运行的插件冲突。
使用wp_enqueue_script()，您可以将自定义 JavaScript 添加到页眉和页脚模板中。默认情况下，它会将脚本添加到<head>页眉模板加载的页面部分中。
如果您想将脚本添加到标题中，只需定义一个自定义句柄（’custom’如下例所示）和脚本路径即可。如下所示，我还使用了get_stylesheet_directory_uri()WordPress 函数来获取子主题目录的 URI。该add_action()函数将自定义tutsplus_enqueue_custom_js()函数添加到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’);
}请注意，尽管 wp_enqueue_script() 内置的 WordPress 函数和 wp_enqueue_scripts 动作钩子的名称几乎相同，但它们是不同的东西。
除了为页眉添加脚本之外，您还可以使用该 wp_enqueue_script() 函数将自定义 JavaScript 添加到页脚模板。但是，在这种情况下，您还需要分别定义所有可选参数：
- 依赖项：
array()因为我们现在没有依赖项 - 脚本的版本：
false因为我们不想添加版本号 - 这是否适用于页眉或页脚模板：
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() 的参数中。WordPress核心已注册了wp_enqueue_script()一些 常用的脚本和库’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()函数进行注册和排队，然后才能使用其自定义句柄将其添加为依赖项。
如果您想在管理区域而不是网站前端运行脚本，则需要使用admin_enqueue_scripts 动作钩子而不是wp_enqueue_scripts 在add_action()函数中运行。对于登录页面，您需要使用 login_enqueue_scripts 动作钩子，该钩子只会将自定义脚本加入到登录页面。
2.2. 使用wp_head或wp_footer动作钩子打印出你的内联脚本
虽然 WordPress 文档建议将此wp_enqueue_script()函数用于自定义脚本，但您也可以使用 wp_head和wp_footer操作钩子将内联脚本添加到您的网站。这些钩子不会将您的自定义脚本放入队列，而是仅将它们打印在页眉或页脚模板中。因此，您只能使用此技术来添加内联脚本，而不能将其用于外部 .js文件。
您可以这样使用wp_head动作挂钩在标题模板中打印出内联脚本：
<?php
/* Inline script printed out in the header */
add_action(’wp_head’, ’tutsplus_add_script_wp_head’);
function tutsplus_add_script_wp_head() {
?>
<script>
console.log("I’m an inline script tag added to the header.");
</script>
<?php
}
以下是如何使用wp_footer动作钩子在页脚模板中打印出内联脚本的方法：
<?php
/* Inline script printed out in the footer */
add_action(’wp_footer’, ’tutsplus_add_script_wp_footer’);
function tutsplus_add_script_wp_footer() {
?>
<script>
console.log("I’m an inline script tag added to the footer.");
</script>
<?php
}由于wp_head和wp_footer仅在网站前端触发，使用这些钩子添加的脚本不会在管理区域和登录页面加载。要将自定义内联脚本添加到管理区域，您应该在函数中使用admin_head和admin_footer动作钩子add_action()。如果您想在登录页面上打印脚本，请使用login_head和login_footer动作钩子。
请注意，上述插件（插入页眉和页脚以及简单自定义 CSS 和 JS）不仅用于内联脚本，还用于外部 wp_head.js文件，但除非您真正了解自己在做什么，否则仍然不应该使用后者。这是因为这些插件会运行额外的检查，以确保遵循 WordPress 的加载顺序。如果您想手动添加自定义脚本，坚持使用推荐的功能会更安全、更方便。wp_footerwp_enqueue_script()
3.添加自定义 HTML 块
如果您使用的是块主题，则前两种方法仍然适用于在 WordPress 中添加 JavaScript。不过，“自定义 HTML 块”选项比上述方法更简单、更直接。
因此，如果您选择使用自定义 HTML 块选项在 WordPress 中添加自定义 JavaScript，请按照以下步骤操作：
- 打开您想要编辑的现有帖子或页面，或者创建一个新的。
- 点击页面上您想要添加代码的位置。您会看到一个“+”按钮。点击它。
- 您可以 在搜索栏中输入“自定义 HTML” ，也可以点击“浏览全部”按钮。如果您选择后者，整个菜单将显示在屏幕左侧。您可以在“小部件”部分找到“自定义 HTML”区块。
- 最后，在自定义 HTML 块内的 <script> 标签内添加 JavaScript 代码。
您还可以将 JavaScript 代码添加到 WP 小部件。为此，请按照以下步骤编辑小部件的代码：
- 选择你的小部件。你会看到顶部栏中出现三个垂直的点。这是小部件的“选项”按钮。
- 在“选项”菜单上，选择“编辑为 HTML”选项。
- 代码编辑器随即显示。在此处，在 <script> 标签内添加 JavaScript 代码。
总结
您可以通过使用插件、编辑主题或子主题的functions.php文件或使用自定义 HTML 块选项开始将 JS 添加到 WordPress 网站。
如果您不想编辑源文件，建议您使用插件，因为这些插件可以确保您的自定义脚本按正确的顺序加载。手动将脚本添加到 functions.php文件中，可以让您将自定义脚本与主题绑定，并确保所有内容按顺序加载，而无需在 WordPress 网站中添加其他插件。
评论0