Wordpress - 如何在将样式表排入队列时对其进行优先级排序答案

【问题标题】：Wordpress - How to prioritize some stylesheets when enqueueing themWordpress - 如何在将样式表排入队列时对其进行优先级排序
【发布时间】：2017-07-16 12:22:05
【问题描述】：

我正在开发一个 WordPress 主题。

我的主题使用 bootstrap 和另一个框架，以及一些自定义 CSS。

我想知道是否有办法决定要包含的样式表的顺序，以便我的自定义 CSS 总是在供应商的之后加载。

我环顾四周，这个问题基本上和我问的一样（Ordering Wordpress Stylesheets?），但问题是在我看来这不是一个好的和干净的解决方案。

我不想在所有内容上使用重要来覆盖，我不想手动将我的样式添加到 header.php（wp_enqueue_style 函数是有原因的，我想使用它函数）。

阅读文档，唯一可能稍微相关的是deps数组的使用，但我不确定它是否能满足我的需要。

这里是文档或参考的链接：https://developer.wordpress.org/reference/functions/wp_enqueue_style/

我现在将样式表排入队列的方式非常基本：

在我的functions.php中：

function hw_resources()
{
    wp_enqueue_style('fontawesome-css', '/wp-content/themes/hwTheme/assets/css/font-awesome.min.css');
    wp_enqueue_style('bulma-css', '/wp-content/themes/hwTheme/assets/css/bulma.css');
//    wp_enqueue_style('bootstrap-css', '/wp-content/themes/hwTheme/assets/css/bootstrap.css');
    wp_enqueue_style('animate-css', '/wp-content/themes/hwTheme/assets/css/animate.min.css');
    wp_enqueue_style('hw-css', '/wp-content/themes/hwTheme/assets/css/hw.css');
    wp_enqueue_script('hw-js', '/wp-content/themes/hwTheme/assets/js/hw.js', array(), false, false);
}

add_action('wp_enqueue_scripts', 'hw_resources', 0);

包含样式表，但我的 (hw.css) 不是最后一个，因此 Bulma（位于底部）覆盖了我的一些自定义样式。

有什么建议吗？出于这个原因， deps 数组有用吗？如何使用？

谢谢

【问题讨论】：

你应该结合你的样式表来提高页面速度！异步加载也被认为比同步更快..

标签： css wordpress

【解决方案1】：

您可以将bulma.css 设置为hw.css 上的dependency。所以首先你通过wp_register_style注册你的css然后你使用wp_enqueue_style。

像这样：

function hw_resources()
{
 wp_register_style( 'hw-css', get_template_directory_uri() . '/hw.css', array(), '1.0', 'all' );
 wp_register_style( 'bulma-css', get_template_directory_uri() . '/bulma.css', array( 'hw-css' ), '1.0', 'all' );
 wp_enqueue_style('hw-css');
}

add_action('wp_enqueue_scripts', 'hw_resources');

【讨论】：