Question

在父主题中，样式以这种方式排序 - bootstrap.min，font-awesome，zzz-style。当我激活子主题时，主要样式css跳到顶部并且布局中断。 zzz-style，bootstrap.min，font-awesome，zzz-child-style。

// enqueue the parent theme stylesheet

wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css');
wp_enqueue_style('zzz-style',  get_stylesheet_uri());


// enqueue the child theme stylesheet

function zzz_child_scripts() {  
        wp_enqueue_style( 'zzz-child-style', get_template_directory_uri(). '/style.css' );     
}

add_action( 'wp_enqueue_scripts', 'zzz_child_scripts');

订购样式表的最佳方式是什么？

Answer 1

wp_enqueue_style允许您设置样式表的依赖项，以帮助您确定加载顺序。 Here are the docs

// enqueue the parent theme stylesheet

wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css', array('bootstrap'));
wp_enqueue_style('zzz-style',  get_template_directory_uri() . '/style.css', array('bootstrap'));


// enqueue the child theme stylesheet

function zzz_child_scripts() {  
        wp_enqueue_style( 'zzz-child-style', get_stylesheet_uri(), array('zzz-style') );     
}

add_action( 'wp_enqueue_scripts', 'zzz_child_scripts');

在第5行（包括zzz-style）中，注意array('bootstrap')参数。这告诉WordPress在 zzz-style之后加载bootstrap 。

注意：CSS样式表排序与遵守适当的CSS cascading rules无关紧要。

在Wordpress中订购样式表儿童主题分解

1 个答案: