在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_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插件库本身将不会批准您的工作。
评论留言