加载子主题CSS的不同方式

时间:2016-11-02 作者:Robin Andrews

我注意到,当我以如下方式加载子主题的CSS时:https://digwp.com/2016/01/include-styles-child-theme/, 我在chrome检查器中为我的CSS规则获取了两个条目,并且必须禁用显示的第二个集合才能更改为第一个集合(例如,通过选中/取消选中规则)。

这是使用以下代码:

function example_enqueue_styles() {

    // enqueue parent styles
    wp_enqueue_style(\'parent-theme\', get_template_directory_uri() .\'/style.css\');

    // enqueue child styles
    wp_enqueue_style(\'child-theme\', get_stylesheet_directory_uri() .\'/style.css\', array(\'parent-theme\'));

}
add_action(\'wp_enqueue_scripts\', \'example_enqueue_styles\');
然而,我在这个论坛上发现了一个不同的版本,它似乎只加载一次CSS,正如我所希望的那样:

function use_parent_theme_stylesheet() {
    // Use the parent theme\'s stylesheet
    return get_template_directory_uri() . \'/style.css\';
}

function my_theme_styles() {
    $themeVersion = wp_get_theme()->get(\'Version\');

    // Enqueue our style.css with our own version
    wp_enqueue_style(\'child-theme-style\', get_stylesheet_directory_uri() . \'/style.css\',
        array(), $themeVersion);
}

// Filter get_stylesheet_uri() to return the parent theme\'s stylesheet 
add_filter(\'stylesheet_uri\', \'use_parent_theme_stylesheet\');

// Enqueue this theme\'s scripts and styles (after parent theme)
add_action(\'wp_enqueue_scripts\', \'my_theme_styles\', 20);

Could someone please explain why the second version works properly and first one repeats the rules?

我还注意到,抄本中的版本似乎也与第一个版本一样。此处链接:https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

我很困惑-两次加载自定义规则的版本是否有问题?看起来确实如此,但后来它被列为“官方版本”(也就是说,它在法典中)。

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

css规则在检查器中出现两次并没有什么错。在许多情况下,您需要第一个版本,同时加载父样式和子样式。毕竟,在这种情况下,您的子样式表只需要具有与父样式表不同的样式。如果两者都存在,浏览器将正确应用子规则。如果父主题样式表不存在,而子主题样式表不完整,则主题将中断。

您给出的第二个版本实际上只加载子样式表。过滤器确保如果主题从样式目录(如图标或辅助样式表)中请求某些内容,则从父目录中检索该内容。如果使用第二个版本,请确保复制完整的父级style.css 并对其进行调整。