样式表入队顺序和最佳实践

时间:2018-10-03 作者:Ruden Ruven

我想做以下工作:

根据我的喜好自定义一个主题,以便在多个站点和安装上使用。所以我可以进行“全局”更改(通过自己的插件?)

然后我想有一个特定于站点的样式表(子主题样式。css?)

我的问题是,插件的样式表在主主题css和子主题css之后加载。我怎样才能完成这个订单?

主要的cssplugin。csschild公司。css

还是有更好的方法?

非常感谢。

1 个回复
SO网友:ManzoorWani

您可以简单地使插件css依赖于主题css,而子主题css依赖于插件css。

function wpdocs_custom_scripts() {

    // example theme style
    wp_enqueue_style( \'theme-style\', \'#\' );

    // Plugin css
    wp_enqueue_style( \'plugin-style\', \'#\', array( \'theme-style\' ) ); // see "theme-style" passed in $deps param,

    // Child theme css
    wp_enqueue_style( \'child-style\', \'#\', array( \'plugin-style\' ) ); // see "plugin-style" passed in $deps param,
}
add_action( \'wp_enqueue_scripts\', \'wpdocs_custom_scripts\' );
这样,它们将按以下顺序加载

<link rel=\'stylesheet\' id=\'theme-style-css\'  href=\'#\' type=\'text/css\' />
<link rel=\'stylesheet\' id=\'plugin-style-css\'  href=\'#\' type=\'text/css\' />
<link rel=\'stylesheet\' id=\'child-style-css\'  href=\'#\' type=\'text/css\' />
Another Approach:您还可以使用中的priority参数wp_enqueue_scripts. 使优先级降低,以便更早加载。像这样

function wpdocs_custom_theme_scripts() {
    // theme style
    wp_enqueue_style( \'theme-style\', \'#\' );
}
add_action( \'wp_enqueue_scripts\', \'wpdocs_custom_theme_scripts\', 9 );

function wpdocs_custom_plugin_scripts() {
    // Plugin css
    wp_enqueue_style( \'plugin-style\', \'#\' );
}

add_action( \'wp_enqueue_scripts\', \'wpdocs_custom_plugin_scripts\', 10 );

function wpdocs_custom_child_scripts() {
    // Child theme css
    wp_enqueue_style( \'child-style\', \'#\' );
}
add_action( \'wp_enqueue_scripts\', \'wpdocs_custom_child_scripts\', 11 );

结束

相关推荐

纯css将admin_bar子节点的子节点数“浮动”到右侧

我添加了一个admin\\u bar节点。该节点中的每个项都有数量可变的子项。我想在项目标题右侧显示每个“浮动”项目的子项目数(项目标题和子项目数之间有一些空格),如所示:我可以做到以下几点:PHPadd_action( \'admin_bar_menu\', \'add_my_admin_bar_node\' ); function add_my_admin_bar_node() { global $wp_admin_bar; $args = arra