如何轻松地将 jQuery 脚本添加到 WordPress
已发表: 2021-09-21WordPress 已经存在于我们身边十多年了。 尽管该平台因其易于访问而广为人知，但在 WordPress 主题和插件中添加 jQuery 是许多开发人员关注的问题。
我们之前已经编写过有关解决诸如 WordPress 白屏死机和将您的 WordPress 网站置于维护模式等问题的指南。 在这篇文章中，我们将解释如何将 jQuery 添加到 WordPress，但在深入探讨之前，这里先简要介绍一下 jQuery 的兼容模式。
jQuery的兼容模式
在开始在 WordPress 中使用 jQuery 之前，了解 jQuery 的兼容模式同样重要。
WordPress 中的 jQuery 是预加载的，您可以在代码中使用它。 不过这里的重点是它还自带了jQuery的兼容模式，避免了与其他不同编程语言的库冲突。
尽管这听起来很正常，但这种防御机制存在一个小问题。 在 WordPress 中使用 jQuery 时，您必须使用术语“ jQuery ”而不是我们良好的旧$符号。
看看这个例子。
/* 常规 jQuery */
$('.hideable').on('click', function() {
$(this).hide();
})
/* 兼容模式 */
jQuery('.hideable').on('click', function() {
jQuery(this).hide();
})
现在这里的问题不是那么大，而是不是很愉快。 首先，你需要每次都编写“ jQuery ”，这需要相当多的时间，其次，这会让你的脚本看起来杂乱无章，难以阅读。
但别担心，通过一些修改，您可以绕过兼容性问题并能够使用旧的 $ 符号。
作为参考，$ 是jQuery()的别名和函数的句柄。
这是基本结构的样子。
$(选择器).action()
这里， $符号指的是 jQuery， $(selector)查找 HTML 元素， action()定义要对这些元素执行的操作。
这里有一些技术可以用来解决 jQuery 的兼容性问题。
如何克服 jQuery 的兼容性问题？
- 进入“jQuery Stealth”模式
- 进入“无冲突”模式
进入 jQuery 的隐身模式
图片来源：Podfeet
解决兼容性问题的第一种也是最常见的方法是进入隐身模式（隐秘地使用您的代码）。
假设您正在尝试在页脚中加载脚本。 将代码包装在一个匿名函数中，该函数最终将 jQuery 映射到 $。
参考这个例子
（函数（$）{
$('.hideable').on('click', function() {
$(this).hide();
})
})( jQuery );
现在，如果您想在标题中添加脚本，请将所有内容包装在文档就绪函数中，并一路传递 $。
这是一个例子。
jQuery(文档).ready(函数($){
$('.hideable').on('click', function() {
$(this).hide();
})
});
进入无冲突模式
现在这是解决兼容性问题的一种非常简单的方法。 您所要做的就是在脚本顶部声明这行代码，并且可以使用 $j 代替默认的 $ 符号。
var $j = jQuery.noConflict();
现在您已经知道如何在 WordPress 中使用 jQuery，让我们继续我们的主题——如何将 jQuery 脚本添加到您的 WordPress 网站。
如何将 jQuery 添加到 WordPress 网站
图片来源：fl1digital.com
将 jQuery 添加到 WordPress 可以通过一个名为Enqueueing的过程轻松完成。
我们使用元素<link>在常规 HTML 网站中添加脚本。 我们也可以在 WordPress 中做同样的事情。 但是，我们需要发挥一些 WordPress 的特殊功能才能进入其中。 请注意，这样做会为您处理所有依赖项。
假设您正在使用 WordPress 主题。 在您的functions.php文件中使用此函数。
wp_enqueue_script()
这是它的外观。
功能 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 放置脚本的位置
默认情况下，该脚本将加载到您网站的标题中，不建议这样做，因为它会显着影响您网站的速度。
相关：关于如何编辑 WordPress – HTML、CSS、PHP、JavaScript 的终极指南
如何将 jQuery 脚本添加到 WordPress 管理员
您可以使用相同的功能将 jQuery 添加到 WordPress 管理员。 你所要做的就是使用不同的钩子。
这是一个例子
功能 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');
现在只需将wp_enqueue_scripts与admin_enqueue_scripts交换就可以了。
如何在 WordPress 中取消注册 jQuery
如果您愿意使用与预加载不同的 jQuery 版本，则需要取消注册 WordPress 的 jQuery。
这是一个如何在 WordPress 中取消注册 jQuery 的示例。
// 包含自定义 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()取消注册 WordPress 的 jQuery 并包含您想要的脚本。
这里要记住的一件事是，我们在此示例中添加了 Google 托管的 jQuery 库。 您需要使用自己的脚本 URL 进行切换。
您应该在入队之前注册脚本吗？
如果您希望它们仅在页面中需要时加载，您可以在此过程的早期注册脚本。
这是一个例子
add_action('wp_loaded', 'register_all_scripts');
函数 register_all_scripts()
{
wp_register_script(…);
}
完成此操作后，在需要时将脚本排入队列。 就是这样。
add_action('wp_enqueue_scripts', 'enqueue_front_scripts');
add_action('admin_enqueue_scripts', 'enqueue_back_scripts');
使用条件标签
您还可以使用条件标签仅在需要时在 WordPress 中加载您的 jQuery。
尽管此方法通常用于管理员，您只希望在特定页面上使用它，但它可以节省大量带宽和处理时间，最终提高您网站的加载速度。
有关使用附加标签的更多信息，请参阅 WordPress 的管理员入队脚本文档。
如何使用插件将 jQuery 添加到 WordPress
WordPress 拥有超过 45000 个插件的插件目录。 您可以在 WordPress 网站上找到所需的任何功能的插件。
在 WordPress 网站页面、主题和帖子等中添加 jQuery 也是如此。
以下是一些用于将 jQuery 添加到 WordPress 的最流行的插件。
- 高级自定义字段
- 简单的自定义 CSS 和 JS
- 脚本 N 样式
- 资产清理
结论
所以你去。 现在您知道如何添加和使用 WordPress jQuery。
将这些知识应用于您的项目将帮助您创建出色的项目。 您还可以阅读我们关于 JPG 与 JPEG 和 WordPress 白标等主题的权威指南，以提高您的知识。