如何正确地将 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>

2.进入"无冲突"模式

另一种避免拼写 jQuery 的简单方法是进入"无冲突"模式并使用不同的快捷方式.

在这种情况下:$j 而不是默认的 $.

您所要做的就是在脚本的顶部声明:var $j = jQuery.noConflict();

好的,现在您对为 WordPress 编写有效的 jQuery 代码有了更多了解,让我们将其添加到我们的网站.

将 jQuery 脚本添加到 WordPress 的步骤

  1. 通过入队
  2. 向WordPress添加jQuery脚本

  3. 向 WordPress 管理员添加脚本
  4. 注销 WordPress'jQuery
  5. 入队前不应该注册脚本吗?
  6. 使用插件将 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 默认兼容性等小技巧,您将为自己节省大量时间、精力和臃肿的代码.

标签:

3
订阅评论
提醒
0 评论
内联反馈
查看所有评论