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

作者 : 慕源网 本文共5620个字,预计阅读时间需要15分钟 发布时间: 2021-09-26 共426人阅读

如果您想增强 WordPress 网站的前端功能,您需要将 JavaScript 添加到您的网站——无论您使用的是第三方库还是自定义脚本。根据您的目标和编码知识,您可以从几种技术中进行选择,以将自定义 JavaScript 添加到 WordPress,从使用插件到将自定义脚本附加到不同的动作挂钩。

将自定义 JavaScript 添加到 WordPress

虽然您可以使用 WordPress 的内置定制器为您的主题添加自定义 CSS,但您不能使用 JavaScript 做同样的事情。要将自定义 JavaScript 添加到您的 WordPress 站点,您需要使用插件或编辑(子)主题的 functions.php文件。我们将详细介绍这两个选项,但这里有一个简短的总结。

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

  • 用于编辑页眉和页脚模板的插件
  • 用于向 WordPress 添加自定义 JS 代码的插件
  • 用于添加和配置第三方脚本(例如 Google Analytics 或 AdSense)的特定于脚本的插件

2. 或者你可以在functions.php 文件中使用WordPress函数和钩子 :

  • 在 wp_head 和 wp_footer 行动挂钩
  • 的 wp_enqueue_scripts , admin_enqueue_scripts 和login_enqueue_scripts 行动挂钩
  • 在 wp_enqueue_script() WordPress的功能

   你永远不应该做的一件事

尽管将自定义脚本添加到 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

您可以使用不同类型的插件将自定义 JavaScript 添加到您的 WordPress 网站。

   1.1. 用于编辑header.phpfooter.php 的插件

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

插入页眉和页脚 是一个很好的插件示例,它允许您编辑页眉和页脚模板。它有一个简单的用户界面,只有两个文本区域——一个用于页眉,一个用于页脚脚本。它将您的脚本添加到wp_headwp_footer动作挂钩。

您可以在两个输入字段中插入任​​何类型的脚本。您需要用<script></script>标签将脚本括起来。此外,您还可以使用此插件将自定义 CSS 添加到您的页眉模板中——您只需要将其用<style></style>标签括起来(请注意,CSS 应始终添加到页眉中)。

   1.2. 添加自定义 JavaScript 的插件

另一种选择是选择允许您向WordPress 网站添加自定义 JavaScript的插件。这些插件与页眉和页脚编辑插件非常相似,它们中的大多数也使用 wp_head 和 wp_footer 动作挂钩。但是,它们通常会为您提供更多配置选项。

例如, 简单的自定义 CSS 和 JS 插件可让您定义自定义 JavaScript 文件的永久链接,将它们保存到 wp-content/文件夹中,将您的脚本作为自定义帖子类型进行管理等等。如果您想将多个自定义 JavaScript 文件添加到您的 WordPress 站点并使其井井有条,您会发现这种类型的插件非常有用。

   1.3. 特定于脚本的插件

最后,如果您只想向您的站点添加一个第三方脚本,您还可以检查它是否有 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 管理区域的外观 > 主题编辑器菜单进行编辑 (请参见下面的屏幕截图)。

   2.1. 使用wp_enqueue_script()函数将您的自定义脚本排入队列

该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 添加到页脚模板。但是,在这种情况下,您还需要分别定义所有可选参数:

  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()函数将其加入队列,然后才能使用其自定义句柄将其添加为依赖项。

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

   2.2. 使用wp_headwp_footer动作钩子打印出你的内联脚本

尽管 WordPress 文档建议使用wp_enqueue_script()自定义脚本的功能,但您也可以使用wp_headwp_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_headadmin_footer动作挂钩add_action()。如果您想在登录页面上打印脚本,请使用login_headlogin_footer动作挂钩。

请注意,上述插件(插入页眉和页脚和简单的自定义CSS和JS)做使用wp_head,并wp_footer不仅是内嵌脚本而且对外部 的.js文件,但你还是不应该做后者,除非你真的知道自己在做什么. 这是因为插件会运行额外的检查,以确保遵守 WordPress 的加载顺序。如果您想手动添加自定义脚本,坚持使用推荐的wp_enqueue_script()功能会更安全、更容易。

包起来

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

如果您不想编辑源文件,建议使用插件,因为这些插件可确保您的自定义脚本以正确的顺序加载。手动在functions.php文件中排队您的脚本 允许您将自定义脚本绑定到您的主题并保持所有内容井然有序,而无需向您的WordPress 站点添加另一个插件。

WordPress 主题

推荐优质的WordPress收费主题,比如企业产品展示类主题、作品服务类主题、自媒体博客资讯主题、商城主题等。


慕源网 » 如何将自定义 JavaScript 添加到您的 WordPress 网站(WordPress自定义JavaScript)

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录