如何正确地将 jQuery 脚本添加到 WordPress

WordPress 已经存在于我们的生活中超过 16 年，但向主题和插件添加脚本的方法对许多开发人员来说仍然是个谜.在本文中，我们终于消除了困惑.

由于它是最常用的 Javascript 库之一，今天我们将讨论如何将简单的 jQuery 脚本添加到您的 WordPress 主题或插件中.

但首先……

关于jQuery的兼容模式

在我们开始将脚本附加到 WordPress 之前，了解 jQuery 的兼容模式很重要.

您可能知道，WordPress预加载了 jQuery，您可以将其与您的代码一起使用.

WordPress 的 jQuery 也有"兼容模式"，这是一种避免与其他语言库发生冲突的机制.

此防御机制的一部分意味着您不能像在其他项目中那样直接使用 $ 符号.

相反，在为 WordPress 编写 jQuery 时，您需要使用 jQuery.

查看下面的代码示例:

加载要点 a931ee5568d1d3774622d3b572535fd1

问题是，编写 jQuery 无数次需要更长的时间，使其更难阅读，并且会使您的脚本膨胀.

好消息?

经过一些修改，您可以再次使用我们可爱的小美元符号.

顺便说一句，如果您第一次接触 jQuery，$ 符号只是 jQuery() 的别名，然后是函数的别名.

基本结构如下所示:$(selector).action().美元符号定义了 jQuery……"(选择器)"查询或查找 HTML 元素……最后，"jQuery action()"是要对元素执行的操作.

回到我们如何解决兼容性问题……这里有几个可行的选择:

1.进入jQuery隐形模式

绕过兼容模式的第一种方法是隐蔽你的代码.

例如，如果您在页脚中加载脚本，则可以将代码包装在一个匿名函数中，该函数会将 jQuery 映射到 $.

如下例所示:

加载要点 9463033d31b54e8c0bd3ab9d39770

如果您想在标题中添加您的脚本(如果可能，您应该避免这样做，更多内容见下文)，您可以将所有内容包装在一个文档就绪函数中，同时传递 $.

加载要点 626f5d6b73425c68321041162d7ae>

1. 通过入队

向WordPress添加jQuery脚本

2. 向 WordPress 管理员添加脚本
3. 注销 WordPress'jQuery
4. 入队前不应该注册脚本吗?
5. 使用插件将 jQuery 添加到 WordPress

将 jQuery 脚本添加到 WordPress 的最简单方法之一是通过称为"入队"的过程.

对于常规 HTML 网站，我们将使用 <link> 元素添加脚本.WordPress 最终会做同样的事情，但我们将使用特殊的 WP 功能来实现它.

通过这种方式，它为我们处理了所有依赖项(感谢 WP！).

如果您正在处理一个主题，则可以使用 functions.php 文件中的 wp_enqueue_script() 函数.

外观如下:

加载要点a079c7cd9663a1a789b0a17fca8fb458</a789b0a17fca8fb458

这个函数需要五个参数:

1. $handle – 可用于引用脚本的唯一句柄.
2. $src – 脚本文件的位置.
3. $deps – 指定依赖项数组.
4. $ver – 脚本的版本号.
5. $in_footer – 让 WordPress 知道将脚本放在哪里.

*关于 $in_footer 的一些注意事项是，默认情况下，脚本将加载到标头中.

这是不好的做法，会大大降低您的网站速度.因此，如果您想将脚本放在页脚中，请确保将此参数设置为 true.

向 WordPress 管理员添加脚本

您还可以向管理员添加脚本.使用的函数完全一样，你只需要使用不同的钩子即可.

例如:

加载要点 53fef91bddb0eef98888792a74b0da38

我们需要使用 admin_enqueue_scripts 而不是挂钩到 wp_enqueue_scripts.

就是这样！

真的.

如何注销 WordPress 的 jQuery

但是，如果您想使用不同于 WordPress 预加载的 jQuery 版本怎么办?

您可以将它排入队列……但这会在页面上留下两个版本的 JQ.

为了避免这种情况，我们必须注销 WP 的版本.

这看起来像这样:

加载要点 6bb83501e8dcd7a31e2d7932e3db8008

就像使用 wp_deregister_script() 一样简单注销 WP 的 jQuery，然后包含您要添加的 jQuery 脚本.

在上面的示例中，我们使用了Google 托管的 jQuery 库，但您显然会将其替换为您自己脚本的 URL.

入队前不应该注册脚本吗?

如果您想在需要时加载脚本而不是直接将它们加载到页面中-您可以提前注册脚本.

例如，wp_loaded:

加载要点 66dfc64552d2df13a1a44d7394e11a19

完成此操作后，您可以在需要时将脚本排入队列:

加载要点 db7b3b58557fd50129789296874caa69

请记住使用相同的名称以避免与其他脚本冲突.

使用条件标签

使用条件标签仅在必要时加载您的脚本.

这在管理员中更常用，您只想在特定页面(而不是整个管理员)上使用脚本.这还可以节省带宽和处理时间——这意味着您网站的加载速度更快.

查看 WordPress Codex 中的管理员排队脚本文档以了解更多信息.

使用插件将 jQuery 添加到 WordPress

WP 插件目录还有很多很棒的插件，您可以使用它们将脚本插入到 WordPress 帖子、页面或主题中.

一些众所周知的 JavaScript/jQuery 插件示例包括:高级自定义字段、简单的自定义 CSS 和 JS，脚本 n 样式 和 资产清理. >

编写您自己的 jQuery 故事

更好地理解 jQuery 只会让您所做的工作更有影响力.无论是用于您自己的网站还是客户项目.

jQuery 以其简单性而著称，正如您(希望)在本文中了解到的那样，一旦您知道如何将简单的 jQuery 脚本添加到 WordPress 中就很容易了.

是的，与使用普通 HTML 相比有一点开销，但还有依赖项管理和清晰性的额外好处.

不仅如此，通过使用绕过 jQuery 的 WP 默认兼容性等小技巧，您将为自己节省大量时间、精力和臃肿的代码.

标签:

• javascript
• jquery
• WordPress 代码
• WordPress 开发