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

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

• 排队的工作原理
• 使用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_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
}

依赖管理

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' ) );
}

我们不需要自己注册或排队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' ) );
}

假设第一个脚本是画廊，第二个脚本是使图像在灯箱中打开的扩展。请注意，即使我们的第二个脚本依赖于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 );
}

指定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' );

}

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

小结

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

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