增强网站前端功能的最佳方法之一是添加 WordPress 自定义 JavaScript。但是，弄清楚如何执行此操作可能很棘手，尤其是如果您习惯使用定制器插入自定义 CSS 时。
幸运的是，您可以使用多种不同的策略，具体取决于您的经验水平和您想要实现的目标。了解您的选项后，您可以选择最适合您的自定义 JavaScript 解决方案。
在本文中，我们将向您介绍可用于将自定义 JavaScript 添加到您的 WordPress 站点的三种方法，并讨论每个选项的优缺点。以下是我们将介绍的三种方法 – 您可以单击以直接跳转到特定方法：
- 使用 Head & Footer Code 插件（对于非技术用户来说最简单的选择）
- 在 functions.php 文件中添加代码
- 将代码添加到 head（使用 wp_enqueue_script 函数或 wp_head 钩子）
让我们开始吧！
1.安装 Head & Footer Code 等插件
使用插件是将 WordPress 自定义 JavaScript 添加到您的网站的最简单方法之一。例如，页眉和页脚代码是一个很棒的工具：
这个免费插件允许您以多种方式插入代码。您可以将其用于 Facebook Pixel、Google Analytics、自定义 CSS 等。
首先，通过从管理仪表板导航到插件 → 添加新插件，然后搜索“页眉和页脚代码”，将插件添加到您的站点。
点击“立即安装”和“激活”按钮后，您可以在“工具”→“页眉和页脚代码”中找到插件的设置。在这个屏幕上，有页眉、页脚和正文部分的三个框：
您可以在这些框中的任何一个中输入您的 WordPress 自定义 JavaScript。完成后，选择屏幕底部的“保存更改”按钮。然后代码将加载到您网站的每个页面上。
使用插件的优点和缺点
使用插件的主要优点是它是一种对初学者友好的选择。您无需担心编辑主题文件。如果您正在寻找一种无缝方式来添加其他类型的代码和自定义 CSS，那么 Head & Footer Code 插件可能也会派上用场。
但是，这种方法的缺点是它涉及安装第三方插件，一些网站所有者试图避免这种情况。如果您想将扩展保持在最低限度，最好使用其他方法之一。此外，该插件专为站点范围内的 JavaScript 更改而不是特定页面或帖子而设计。
2.使用您的 functions.php 文件
将 WordPress 自定义 JavaScript 添加到您的站点的另一种方法是利用内置函数和挂钩来编辑 functions.php 文件。此方法涉及手动将脚本上传到您的服务器。
在我们开始之前，我们建议您创建一个子主题。此步骤有助于确保您仍然可以安全地更新父主题。您还应该备份您的网站以防出现问题。
此方法涉及使用 IS_PAGE 函数。您可以添加条件逻辑以将自定义 JavaScript 应用于单个帖子或页面。
首先，找到并打开您的 functions.php 文件，然后复制并粘贴以下代码片段：
function ti_custom_javascript() { ?> // 将您的 javscript 代码放在这里 此代码会将 JavaScript 添加到您的标头。要将其应用于单个帖子，您可以使用以下命令：
function ti_custom_javascript() { if (is_single ('3')) { ?> // 您的 javscript 代码在此处 请注意，您需要将上面示例中的 3 替换为您要添加代码的帖子 ID 号。要查找此号码，请从您的管理仪表板导航到该帖子，然后单击编辑。在浏览器栏中的网址中，ID号为"post=":
替换身份证号后保存文件，在指定区域添加自定义JavaScript。您还可以对单个 WordPress 页面重复相同的过程。
编辑 functions.php 文件的优点和缺点
编辑 functions.php 文件的一个优点是您不需要安装其他插件。您还可以使用此技术为您的主题和 WordPress 本身添加特性和功能。例如，此方法可以将 JavaScript 插入到单个帖子或页面或所有页面中。
此方法的唯一缺点是它涉及使用代码和编辑站点文件。因此，如果您没有该部门的经验，这可能不是最佳选择。
有一种方法可以通过将
标签直接插入 header.php 文件来添加自定义 WordPress JavaScript。但是，不推荐使用这种方法。它会干扰 WordPress 加载顺序并导致与其他主题和插件发生冲突。
如果您想通过站点的标头将自定义 JavaScript 添加到所有页面，有两种方法可以实现。您可以编辑 functions.php 文件并使用创建通用函数的 wp_enqueue_script 函数。或者，您可以使用 wp_head 动作挂钩。
让我们来看看这两个选项...
使用 wp_enqueue_script 函数将 JavaScript 添加到您的标头
首先，您需要添加自定义 JavaScript文件被上传到模板目录。您可以通过文件传输协议 (FTP) 客户端或文件管理器执行此操作。
导航到您网站的模板文件夹（wp_content → 主题 → [您的主题]）。然后，选择上传：
请注意此文件的确切文件路径。例如，它应该类似于“https://www.yourdomain.com/wp-content/themes/twentytwentyuone/js/myjsfile.js”。
接下来，找到并打开您的 functions.php 文件，然后复制并粘贴以下代码片段：
function ti_custom_javascript() { wp_enqueue_script('example-script', get_template_directory_uri( ) .'/js/examplescript.js'); } add_action('wp_enqueue_scripts', 'ti_custom_javascript');
请务必将模板 URL 替换为您自己的。最后，保存您的文件。
使用 wp_head 挂钩添加自定义 JavaScript
您还可以使用 wp_head 操作挂钩通过内联脚本将自定义 JavaScript 添加到标头。同样，这种方法不可取，因为它会创建太多脚本。但是，这比将脚本直接插入 header.php 文件要好。
您也可以将此方法用于页脚，它使用操作挂钩将内联脚本添加到您的站点。 wp_enqueue_script 函数将自定义脚本排入队列，而 wp_head 方法在您的页眉模板（和页脚，如果您使用 wp_footer 挂钩）中打印脚本。
首先，导航到您的 functions.php 文件，然后复制并粘贴以下内容：
function ti_custom_javascript() { ?> // 您的 javascript 代码在此处 请注意，wp_head 挂钩仅在您网站的前端触发。这意味着您使用此方法添加的任何自定义 JavaScript 都不会出现在管理或登录区域中。但是，如果要将 JavaScript 添加到这些区域，可以分别使用 admin_head 和 login_head 操作挂钩。
将 JavaScript 添加到标头的优点和缺点
wp_enqueue_script 函数是开发人员的首选，因为它可以防止可能的冲突。此外，使用此方法不会创建任何依赖脚本。
将自定义 WordPress JavaScript 添加到站点标头的主要问题是，它可能会导致加载自己脚本的其他插件出现问题。此设置还会导致多次加载多个脚本，从而影响站点的整体速度和性能。
开始使用 WordPress 自定义 JavaScript
默认情况下，WordPress 不允许您将 JavaScript 代码片段插入到您的页面和帖子中。幸运的是，有一些方法可以在不破坏站点的情况下添加 WordPress 自定义 JavaScript。最佳方法取决于您对编辑站点文件的熟悉程度以及您希望在何处应用脚本。
正如我们在本文中所讨论的，您可以通过三种方式将 WordPress 自定义 JavaScript 添加到您的站点：
- 安装插件，例如页眉和页脚代码。
- 使用您的 functions.php 文件将自定义 JavaScript 添加到各个页面或帖子。
- 使用 wp_enqueue_script 函数或 wp_head 挂钩将 JavaScript 添加到您的标头。
既然您知道如何向 WordPress 添加自定义 JavaScript，您可能会对我们关于向 WordPress 添加自定义 CSS 的其他指南感兴趣。
您对将 WordPress 自定义 JavaScript 添加到您的网站有任何疑问吗？在下面的评论部分让我们知道！
