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

导语: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默认兼容性),您将节省大量时间、精力和臃肿的代码。

发表评论

电子邮件地址不会被公开。 必填项已用*标注