如果您想增强 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 块中使用
1.使用插件向 WordPress 添加自定义 JavaScript
当您执行以下操作时，建议使用插件：
不想直接编辑源文件
想要添加与主题无关的 JavaScript，即使您决定切换到新主题也可以保留
您可以使用不同类型的插件将自定义 JavaScript 添加到您的 WordPress 网站。
1.1. 用于编辑header.php和footer.php 的插件
第一种选择是使用插件，该插件允许您 编辑 WordPress 主题的 页眉和页脚模板文件。如果您想添加在页面内容 之前加载的脚本（例如分析和跟踪脚本），则需要编辑页眉模板；而内容之后加载的脚本则需要编辑页脚模板。通常，当您的脚本修改页面上显示的元素（例如图库脚本）时，应将其放置在页脚中。
插入页眉和页脚 是一个很好的插件示例，它允许您编辑页眉和页脚模板。它的用户界面简洁，只有两个文本区域——一个用于页眉，一个用于页脚脚本。它可以将您的脚本添加到操作挂钩wp_head或wp_footer操作钩子中。
您可以在两个输入字段中插入任何类型的脚本。您需要将脚本放在标签中。此外，您还可以使用此插件将自定义 CSS 添加到标题模板中——只需将其放在标签中即可（请注意，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 管理界面的“外观”>“主题编辑器” 菜单进行编辑（参见下方截图）。
暂无评论内容