如何正确加载此子主题样式表?或者如果它是正确的,为什么我的子主题外观与父主题不匹配?

时间:2018-05-27 作者:tim.rohrer

我读过Codex article 关于儿童主题,以及众多StackExchange问答;是的,但我还没弄明白。其影响是,“我的孩子”主题与“家长”主题的样式不同,因此无法使用。

我用的是主题Nisarg 作为父级,并使用nisarg-child 同时在其中创建适当的标题style.css. 此图纸中没有样式。

如果父对象处于活动状态,则style.css 负载:

<link rel="stylesheet" id="nisarg-style-css" href="https://mydomain/wp-content/themes/nisarg/style.css?ver=4.9.6" type="text/css" media="all">

一切都是应该的。

如果我激活子主题,并使用下面的代码作为function.php, 我得到三个style.css 已加载:

<?php

function my_theme_enqueue_styles() {

    $parent_style = \'nisarg\';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . \'/style.css\' );
    wp_enqueue_style( \'nisarg-child-style\', 
        get_stylesheet_directory_uri() . \'/style.css\',
        array( $parent_style ),
        wp_get_theme()->get(\'Version\')
    );

}

add_action( \'wp_enqueue_scripts\', \'my_theme_enqueue_styles\' );
?>
三种情况:

<link rel="stylesheet" id="nisarg-css" href="https://mydomain/wp-content/themes/nisarg/style.css?ver=4.9.6" type="text/css" media="all">
<link rel="stylesheet" id="nisarg-child-style-css" href="https://mydomain/wp-content/themes/nisarg-child/style.css?ver=1.0.0" type="text/css" media="all">
<link rel="stylesheet" id="nisarg-style-css" href="https://mydomain/wp-content/themes/nisarg-child/style.css?ver=4.9.6" type="text/css" media="all">
如果这是正确的,我的外表就不是。

因为父主题也有wp_enqueue_style( \'nisarg-style\', get_stylesheet_uri() ); 在its中functions.php, 我也试过approach from this question. 这确实会导致加载每个父样式表和子样式表的单个副本,但我的主题仍然无法正确显示:

<link rel="stylesheet" id="nisarg-css" href="https://mydomain/wp-content/themes/nisarg/style.css?ver=4.9.6" type="text/css" media="all">
<link rel="stylesheet" id="nisarg-style-css" href="https://mydomain/wp-content/themes/nisarg-child/style.css?ver=4.9.6" type="text/css" media="all">
如果此加载看起来正确,我缺少什么?是什么导致这两个主题在外观上存在差异?我该如何修复它?

1 个回复
最合适的回答,由SO网友:cybmeta 整理而成

我想你需要申报bootstrap 父样式表排队时的依赖关系(bootstrap.css由父主题排队)。

父主题不声明依赖项,而是排队样式。引导后的css。css,所以它“只是”工作。但是,当您更改排队顺序时,依赖关系就会被打破。使用的第三个参数wp_eneuque_style() 要声明依赖项,WordPress将处理顺序,而不管代码中的顺序如何。

add_action( \'wp_enqueue_scripts\', \'my_theme_enqueue_styles\' );
function my_theme_enqueue_styles() {

    wp_enqueue_style(
        \'nisarg\', // Handler/key
        get_parent_theme_file_uri( \'style.css\' ), // URL
        [\'bootstrap\'] // Dependencies (bootstrap is enqueued by parent them)
    );

    wp_enqueue_style(
        \'nisarg-child-style\',  // Handler/key
        get_stylesheet_uri(), // URL
        [\'nisarg\'], // Dependencies
        wp_get_theme()->get(\'Version\') // version
    );

}

结束