WP _ enqueue _ scripts–如何在WordPress中实现资源队列

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

排队的工作原理

使用wp_enqueue_scripts队列基础知识

依赖性管理

在页脚加载脚本

指定样式的媒体

排队的工作原理

将脚本或样式排队需要两个步骤。首先你注册它——告诉WordPress它在那里——然后你实际上把它排队，最后在结束body标签之前把它输出到标题中。

模块化涉及两个步骤。有时你想让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’ );}

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

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插件库本身是不会认可你的作品的。