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

fabiha01

WordPress 已经问世超过 16 年了，但如何将脚本添加到主题和插件对许多开发者来说仍然是个谜。在本文中，我们终于解开了这些困惑。
混合 jQuery
WordPress 已经问世超过 16 年了，但如何将脚本添加到主题和插件对许多开发者来说仍然是个谜。在本文中，我们终于解开了这些困惑。

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

但首先……

关于 jQuery 的兼容模式
在我们开始将脚本附加到 WordPress 之前，了解 jQuery 的兼容模式非常重要。

您可能已经知道，WordPress预装了 jQuery，您可以在代码中使用它。

WordPress 的 jQuery 还具有“兼容模式”，这是一种避免与其他语言库冲突的机制。

这种防御机制的一部分意味着您不能$像在其他项目中那样直接使用该标志。

相反，当为 WordPress 编写 jQuery 时，您需要使用 jQuery。

查看下面的代码作为示例：

/* 常规 jQuery */
$ ( '.hideable' ) . on ( 'click' ,  function ( )  {
  $ ( this ) .隐藏( ) ；
} ）

/* 兼容模式 */
jQuery ( '.hideable' ) . on ( 'click' ,  function ( )  {
  jQuery ( this ) .隐藏( ) ；
} ）
查看原始兼容性.js 由GitHub ❤ 托管
问题是，编写无数次 jQuery 会花费更长的时间，使其更难阅读，并且会使脚本膨胀。

好消息？

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

顺便说一句，如果您是jQuery 新手，德国商业传真列表 $ 符号只是 jQuery() 的别名，然后是函数的别名。

基本结构如下所示：$(selector).action()。美元符号定义 jQuery...“（选择器）”查询或查找 HTML 元素...最后“jQuery action()”是对元素执行的操作。

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

1.进入 jQuery 隐身模式
绕过兼容模式的第一种方法是隐秘地使用你的代码。

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

就像下面的例子一样：

（函数（$ ） {
   
  $ ( '.hideable' ) . on ( 'click' ,  function ( )  {
    $ ( this ) .隐藏( ) ；
  } ）
   
} ）（ jQuery  ）；
查看原始using-dollar-footer.js 由GitHub ❤ 托管
如果您想在标题中添加脚本（如果可能的话应该避免，下面会详细介绍），您可以将所有内容包装在一个文档就绪函数中，并$沿途传递。

jQuery (文档) . ready (函数(  $  )  {
   
  $ ( '.hideable' ) . on ( 'click' ,  function ( )  {
    $ ( this ) .隐藏( ) ；
  } ）
   
} ）；
查看原始using-dollar-header.js 由GitHub ❤ 托管
2.进入“无冲突”模式
避免拼写出 jQuery 的另一个简单方法是进入 “无冲突”模式并使用不同的快捷方式。

在这种情况下：$j而不是默认的 $。

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

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

将 jQuery 脚本添加到 WordPress 的步骤
通过排队将 jQuery 脚本添加到 WordPress
将脚本添加到 WordPress 管理员
取消注册 WordPress 的 jQuery
您不应该在入队之前注册脚本吗？
使用插件将 jQuery 添加到 WordPress
将 jQuery 脚本添加到 WordPress 的最简单方法之一是通过称为“入队”的过程。

对于常规 HTML 网站，我们会使用 <link> 元素来添加脚本。WordPress 最终也会执行相同的操作，但我们将使用特殊的 WP 函数来实现。

这样，它就为我们处理了所有的依赖关系（感谢 WP！）。

如果您正在处理某个主题，则可以 在您的 文件wp_enqueue_script() 中使用该功能 。functions.php

它看起来是这样的：

函数 my_theme_scripts () {
    wp_enqueue_script（' my-great-script '，get_template_directory_uri（）。 '/ js/ my-great-script.js '，array（' jquery '），' 1.0.0 '，true）;
}
添加动作（' wp_enqueue_scripts '，' my_theme_scripts '）；
查看原始enqueue-theme.php 由GitHub ❤ 托管
此函数有五个参数：

$handle – 您可以用来引用脚本的唯一句柄。
$src——脚本文件的位置。
$deps – 指定依赖项数组。