导语：WordPress已经出现在我们的生活中超过16年了，但是对于许多开发者来说，将脚本添加到主题和插件的方法仍然是个谜。在这篇文章中，我们最终解决了这个困惑。
由于它是最常用的Javascript库之一，今天我们将讨论如何将简单的jQuery脚本添加到您的WordPress主题或插件中。
但首先是…。
关于jQuery的兼容模式
在我们开始将脚本附加到WordPress之前，了解jQuery的兼容模式很重要。
您可能知道，WordPress预装了jQuery，您可以在代码中使用它。
WordPress的jQuery还有一个“兼容模式”，这是一种避免与其他语言库发生冲突的机制。
这种防御机制的一部分意味着您不能像在其他项目中那样直接使用$符号。
相反，在为WordPress编写jQuery时，您需要使用jQuery。
有关示例，请查看以下代码：
/* Regular jQuery */
$('.hideable').on('click', function() {
$(this).hide();
})
/* Compatibility Mode */
jQuery('.hideable').on('click', function() {
jQuery(this).hide();
})
问题是，大量编写jQuery需要更长的时间，使其更难阅读，并且会使您的脚本变得臃肿。
好消息是？
只需稍加修改，您就可以再次使用我们可爱的小美元符号。
顺便说一句，如果您是jQuery的新手，$符号只是jQuery()的别名，然后是函数的别名。
基本结构如下所示：$(selector).action()。美元符号定义jQuery…。“(selector)”查询或查找Html元素…。最后，“jQuery action()”是要对元素执行的操作。
回到我们如何绕过兼容性问题…。以下是几个可行的选择：
1.进入jQuery隐形模式
绕过兼容模式的第一种方法是隐藏您的代码。
例如，如果您在页脚中加载脚本，则可以将代码包装在一个匿名函数中，该函数会将jQuery映射到$。
如下例所示：
(function($) {
$('.hideable').on('click', function() {
$(this).hide();
})
})( jQuery );
如果您希望将脚本添加到标题中(如果可能，您应该避免这样做，请在下面详细介绍)，您可以将所有内容包装在document-ready函数中，并在此过程中传递$。
jQuery(document).ready(function( $ ) {
$('.hideable').on('click', function() {
$(this).hide();
})
});
2.进入“无冲突”模式
另一种避免拼写jQuery的简单方法是进入“无冲突”模式并使用不同的快捷方式。
在本例中：$j 而不是默认的$。
您所要做的就是在脚本的顶部声明：var $j=jQuery.noConflict()；
好了，现在你知道了更多关于为WordPress编写有效的jQuery代码的知识，让我们把它添加到我们的网站上。
如何将jQuery脚本添加到WordPress。
将jQuery脚本添加到WordPress的最简单方法之一是通过一个称为“入队(enqueueing)”的过程。
对于常规的HTML网站，我们将使用<link>元素来添加脚本。WordPress最终也做了同样的事情，但我们将使用特殊的WP函数来实现它。
这样，它就可以为我们处理所有的依赖关系(感谢WP！)。
如果您正在处理主题，则可以在functions.php文件中使用 wp_enqueue_script() 函数。
下面是它看起来的样子：
function my_theme_scripts() {
wp_enqueue_script( 'my-great-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需要注意的一点是，默认情况下，脚本将加载到header中。
这是一种糟糕的做法，可能会极大地降低您的站点速度。因此，如果要将脚本放在页脚中，请确保将此参数设置为true。
将脚本添加到WordPress管理后台。
您还可以将脚本添加到管理后台。使用的函数完全相同，您只需要使用不同的钩子。
function my_admin_scripts() {
wp_enqueue_script( 'my-great-script', plugin_dir_url( __FILE__ ) . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );
我们需要使用ADMIN_ENQUEUE_SCRIPTS，而不是挂钩到wp_enqueue_script。
就这样!。
真的。
如何注销WordPress的jQuery
但是，如果您想使用与WordPress预加载版本不同的jQuery版本怎么办？
您可以将其排入队列…。但这就在页面上留下了两个版本的JQ。
为了避免这种情况，我们必须取消注册WP的版本。
这看起来是这样的：
// include custom jQuery
function 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' );
function register_all_scripts()
{
wp_register_script(...);
}
完成此操作后，您可以在需要时将脚本入队：
add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts' ); add_action( 'admin_enqueue_scripts', 'enqueue_back_scripts' );
只需记住使用相同的名称，以避免与其他脚本冲突。
使用条件标记
使用条件标记仅在必要时加载脚本。
这在admin中使用得更频繁，在admin中，您可能只想在特定页面(而不是整个管理后台)上使用脚本。这也节省了带宽和处理时间，这意味着您的网站加载速度更快。
有关更多信息，请查看WordPress Codex中的管理后台入队脚本文档。
使用插件将jQuery添加到WordPress
WP插件目录也有很多很棒的插件，你可以用它们将脚本插入到你的WordPress文章、页面或主题中。
一些众所周知的JavaScript/jQuery插件示例包括：Advanced Custom Fields, Simple Custom CSS and JS, Scripts n Styles, Asset CleanUp。
编写您自己的jQuery脚本历史
更好地理解jQuery只会使您所做的工作更有影响力。无论是为您自己的网站，还是为客户项目。
jQuery以其简单性而闻名，正如您(希望)在本文中了解到的那样，一旦您了解了如何将简单的jQuery脚本添加到WordPress中，那么将其添加到WordPress就轻而易举了。
是的，与使用普通HTML相比有一点开销，但是依赖项管理和清晰度也带来了额外的好处。
不仅如此，通过采用一些小技巧(如绕过jQuery的WP默认兼容性)，您将节省大量时间、精力和臃肿的代码。
