wp_enqueue_scripts – 如何在WordPress中实现资源队列

wp_enqueue_scripts – 如何在WordPress中实现资源队列
在WordPress中,不是简单地将这些添加到标题中,您应该使用一种称为入队的方法,这是一种处理资产的标准化方式,具有管理依赖项的额外好处。在下面了解如何使用 wp_enqueue_scripts.

排队的工作原理

将脚本或样式排入队列时需要执行两个步骤。首先你注册它——告诉WordPress它在那里——然后你实际上将它排入队列,最终将它输出到标题中或在结束正文标签之前。

有两个步骤的原因与模块化有关。有时您会想让WordPress知道某个资产,但您可能不想在每个页面上都使用它。例如:如果您正在构建一个使用Javascript的自定义图库简码,您实际上只需要在使用简码时加载JS – 可能不是在每个页面上。

实现这一点的方法是首先注册脚本,只有在显示简码时才真正将其排入队列。

使用wp_enqueue_scripts入队基础知识

要在前端排队脚本和样式,您需要使用wp_enqueue_scripts钩子。在该挂钩的函数可以使用wp_register_script()wp_enqueue_script()wp_register_style()wp_enqueue_style()功能。

add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_register_style( ‘custom-gallery’, plugins_url( ‘/css/gallery.css’ , __FILE__ ) );
wp_register_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ) );
wp_enqueue_style( ‘custom-gallery’ );
wp_enqueue_script( ‘custom-gallery’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_register_style( ‘custom-gallery’, plugins_url( ‘/css/gallery.css’ , __FILE__ ) );
wp_register_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ) );

wp_enqueue_style( ‘custom-gallery’ );
wp_enqueue_script( ‘custom-gallery’ );
}

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );
}

在上面的例子中,我在同一个函数中注册和排队资产,这有点多余。实际上,您可以使用入队函数立即注册和入队,方法是使用与注册函数中相同的参数:

add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_enqueue_style( ‘custom-gallery’, plugins_url( ‘/css/gallery.css’ , __FILE__ ) );
wp_enqueue_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ) );
}
add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_enqueue_style( ‘custom-gallery’, plugins_url( ‘/css/gallery.css’ , __FILE__ ) );
wp_enqueue_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );
}

如果我要将这两个函数分开,我会通过在不同的钩子中使用它们来实现。在一个真实的例子中,我们可以使用wp_enqueue_scripts钩子来注册资产和短代码的函数来将它们排入队列。

add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_register_style( ‘custom-gallery’, plugins_url( ‘/css/gallery.css’ , __FILE__ ) );
wp_register_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ) );
}
add_shortcode( ‘custom_gallery’, ‘custom_gallery’ );
function custom_gallery( $atts ){
wp_enqueue_style( ‘custom-gallery’ );
wp_enqueue_script( ‘custom-gallery’ );
// Gallery code here
}
add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_register_style( ‘custom-gallery’, plugins_url( ‘/css/gallery.css’ , __FILE__ ) );
wp_register_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ) );

}

add_shortcode( ‘custom_gallery’, ‘custom_gallery’ );

function custom_gallery( $atts ){

wp_enqueue_style( ‘custom-gallery’ );
wp_enqueue_script( ‘custom-gallery’ );

// Gallery code here
}

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

}

add_shortcode( 'custom_gallery', 'custom_gallery' );

function custom_gallery( $atts ){

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );

    // Gallery code here
}

依赖管理

WordPress的排队机制内置了对依赖项管理的支持,使用两者wp_register_style()wp_register_script()函数的第三个参数。如果您不需要将它们分开,您也可以立即使用排队功能。

第三个参数是需要在当前资产入队之前加载的已注册脚本/样式数组。我们上面的例子很可能依赖于jQuery,所以让我们现在指定:

add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_enqueue_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ), array( ‘jquery’ ) );
}
add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_enqueue_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ), array( ‘jquery’ ) );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
}

我们不需要自己注册或排队jQuery,因为它已经是WordPress的一部分。您可以在Codex中找到WordPress中可用的脚本和样式列表。

如果您有自己的依赖项,则需要注册它们,否则您的脚本将无法加载。下面是一个例子:

add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_enqueue_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ), array( ‘jquery’ ) );
wp_enqueue_script( ‘custom-gallery-lightbox’, plugins_url( ‘/js/gallery-lightbox.js’ , __FILE__ ), array( ‘custom-gallery’ ) );
}
add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_enqueue_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ), array( ‘jquery’ ) );
wp_enqueue_script( ‘custom-gallery-lightbox’, plugins_url( ‘/js/gallery-lightbox.js’ , __FILE__ ), array( ‘custom-gallery’ ) );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );
}

假设第一个脚本是画廊,第二个脚本是使图像在灯箱中打开的扩展。请注意,即使我们的第二个脚本依赖于jQuery,我们也不需要指定这一点,因为我们的第一个脚本已经加载了jQuery。也就是说,声明所有依赖项可能是个好主意,只是为了确保如果您忘记包含依赖项,不会有任何破坏。

WordPress 现在知道我们需要哪些脚本,并且可以计算出需要将它们添加到页面的顺序。

每当您可以在页脚中加载脚本时,您都应该这样做。这会增加明显的页面加载时间,并可以防止您的网站在加载脚本时挂起,尤其是当它们包含AJAX调用时。

入队机制可以使用第五个参数(第四个是可选版本号)向页脚添加脚本。如果我们稍微修改一下,上面的示例将加载页脚中的脚本。

add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_enqueue_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ), array( ‘jquery’ ), ‘1.0’, true );
wp_enqueue_script( ‘custom-gallery-lightbox’, plugins_url( ‘/js/gallery-lightbox.js’ , __FILE__ ), array( ‘custom-gallery’, ‘jquery’ ), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_enqueue_script( ‘custom-gallery’, plugins_url( ‘/js/gallery.js’ , __FILE__ ), array( ‘jquery’ ), ‘1.0’, true );
wp_enqueue_script( ‘custom-gallery-lightbox’, plugins_url( ‘/js/gallery-lightbox.js’ , __FILE__ ), array( ‘custom-gallery’, ‘jquery’ ), ‘1.0’, true );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );
}

指定true作为第五个参数会将脚本放在页脚中,使用false或省略参数将在页眉中加载内容。正如我之前提到的,只要有可能,就在页脚中加载脚本。

为样式指定媒体

使用样式注册/入队功能的第五个参数,您可以控制已定义脚本的媒体类型(打印、屏幕、手持设备等)。通过使用此参数,您可以将样式的加载限制为特定的媒体类型,这是一个方便的小优化技巧。

add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_register_style( ‘custom-gallery-print’, plugins_url( ‘/css/gallery.css’ , __FILE__ ), array(), ‘1.0’, ‘print’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_plugin_assets’ );
function my_plugin_assets() {
wp_register_style( ‘custom-gallery-print’, plugins_url( ‘/css/gallery.css’ , __FILE__ ), array(), ‘1.0’, ‘print’ );

}

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );

}

有关可以使用的媒体类型的完整列表,请查看CSS规范

小结

对资产进行排队是一种强大的处理方式。它为您和其他插件/主题制作者提供了对整个系统的更多控制,并使依赖管理脱离您的手。

如果这还不够,这是添加资源的方式,如果您不使用此方法,许多主题市场和WordPress插件库本身将不会批准您的工作。

重要声明

本网站的文章部分内容可能来源于网络,如有侵犯你的权益请联系邮箱:wxzn8@outlook.com
站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!本站资源大多存储在云盘,如发现链接失效请反馈,我们会及时更新。

给TA打赏
共{{data.count}}人
人已打赏
WordPress开发学习

如何在FileZilla中显示隐藏文件

2023-1-13 18:53:52

WordPress开发学习

如何提升WordPress站内搜索速度及结果准确率

2023-1-13 18:54:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索