WordPress已经成为我们生活中超过16年的一部分，但是将脚本添加到主题和插件的方法对于许多开发人员来说仍然是个谜。 在本文中，我们终于结束了混乱。
由于它是使用最广泛的 JavaScript 库之一，今天我们将讨论如何将 jQuery 脚本添加到您的主题或 WordPress插件.
关于jQuery兼容模式
在开始将脚本添加到WordPress之前，了解jQuery的兼容模式非常重要。
如您所知，WordPress已经包含了jQuery。
WordPress上的jQuery版本也有一个“ 兼容模式 这是一种避免与其他JavaScript库冲突的机制。
这种防御机制的一部分意味着您 ne pouvez pas 使用 $就像在其他项目中一样直接签名。
相反，在为WordPress编写jQuery代码时，应使用 jQuery.
这是该代码的示例：
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
问题是，编写jQuery一百万次会花费更长的时间，使其更难阅读，并且会使您的脚本不堪重负。
好消息？
经过一些修改，您可以再次使用我们可爱的小美元符号。
顺便说一句，如果你是 jQuery新手 ，$符号只是jQuery（）的别名，然后是函数的别名。
基本结构如下所示： $(selector).action()。 美元符号定义jQuery……“（选择器）”查询或找到HTML元素……最后“ jQuery（）action”是要在元素上执行的动作。
回到我们如何解决兼容性问题的方法……这里有一些可行的选择：
1，进入jQuery隐身模式
解决兼容模式的第一种方法是潜入代码。
例如，如果将脚本加载到页脚中，则可以将代码包装在匿名函数中，该函数将映射jQuery $.
如下例所示：
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
如果您想将脚本添加到标题中（如果可能，应避免使用，请参见下文），您可以将所有内容包装在可用于文档的函数中，并传递 $一路走来。
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2.进入“无冲突”模式
避免拼写jQuery的另一种简单方法是切换到模式 “无冲突” 并使用其他快捷方式。
在这种情况下： $j而不是默认值 $.
您所要做的就是在脚本顶部声明它：var $j = jQuery.noConflict();
好的，现在你知道更多关于为 WordPress 编写有效的 jQuery 代码了，让我们把它添加到我们的 网站Web.
如何将jQuery脚本添加到WordPress
将jQuery脚本添加到WordPress的最简单方法之一是通过称为“设置”的过程 等待线 “。
为 网站Web 经典 HTML，我们将使用 <link> 添加脚本的项目。 WordPress最终会做同样的事情，但是我们将使用特殊的WP函数来实现此目的。
这样，它为我们管理了我们所有的依赖项（感谢WP！）。
如果您正在处理主题，则可以使用该功能 wp_enqueue_script() 在 functions.php 文件。
看起来是这样的：
function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
该功能需要 五个参数：
- $ handle-可以用来引用脚本的唯一句柄。
- $src – 脚本文件的位置。
- $ deps-指定一个依赖项数组。
- $ ver-脚本的版本号。
- $ in_footer-让WordPress知道将脚本放在哪里。
*需要注意的一件事 $in_footer 表示默认情况下脚本将被加载到头文件中。
这是不好的做法，可能会大大降低您的网站速度。 因此，如果要将脚本放在页脚中，请确保将此参数设置为true。
向WordPress管理员添加脚本
您还可以将脚本添加到管理员。 使用的功能完全相同，只需要使用其他钩子即可。
例如：
函数my_admin_scripts（）{
wp_enqueue_script（'my-great-script'，plugin_dir_url（__文件__）。 '/js/my-great-script.js'，数组（'jquery'），'1.0.0'，true）;
}
add_action（'admin_enqueue_scripts'，'my_admin_scripts'）;
不用登录， wp_enqueue_scripts我们必须使用 admin_enqueue_scripts.
如何从WordPress退订jQuery
但是，如果您要使用与WordPress预加载版本不同的jQuery版本，该怎么办？
您可以将它排队……但是这意味着页面上将有两个版本的jQuery。
为避免这种情况，我们需要注销WP版本。
看起来是这样的：
//包含自定义jQuery
shapeSpace_include_custom_jquery（）函数{
wp_deregister_script ('jquery');
wp_enqueue_script(
'jquery',
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
array(),
null,
true);
}
add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');就像使用 wp_deregister_script（） 为 注销 WP中的jQuery，然后包括要添加的jQuery脚本。
在上面的示例中，我们使用了 Google托管的jQuery库 ，但显然您将用您自己的脚本的URL替换它。
您不应该在排队之前保存脚本吗？
如果要根据需要加载脚本，而不是将其直接加载到页面中，则可以更早保存脚本。
例如，在 wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
完成此操作后，您可以在需要时将脚本排队：
| add_action（'wp_enqueue_scripts'，'enqueue_front_scripts'）; |
| add_action（'admin_enqueue_scripts'，'enqueue_back_scripts'）; |
请记住使用相同的名称，以避免与其他脚本冲突。
使用条件标签
仅在需要时使用条件标签来加载脚本。
这在管理中更常用，您只想在特定页面上使用脚本（而不是在整个管理中）。 它还可以节省带宽和处理时间，这意味着您的加载时间更快 网站Web.
看看 排队脚本的文档 有关更多信息，请参见WordPress Codex。
使用插件将jQuery添加到WordPress
WP plugins 目录还包含许多有趣的插件，您可以使用这些插件将脚本插入到您的帖子、页面或 WordPress主题.
以下是一些著名的JavaScript / jQuery插件的示例： 高级自定义字段 , 简单的自定义CSS和JS , 脚本样式 et 资源清理。
创建自己的jQuery项目
对jQuery的更好理解只会使您的工作更具影响力。 无论是您自己的网站还是客户项目。
jQuery以其简单性而闻名，正如您（希望）在本文中了解到的那样，一旦您知道如何将简单的jQuery脚本添加到WordPress就很容易了。
是的，与使用原始HTML相比，会有一些开销，但是依赖性管理和清晰度也有额外的好处。
不仅如此，通过使用一些小技巧，例如绕过jQuery WP的默认兼容性，您将节省大量时间，精力和effort肿的代码。
