父主题的style.css的版本控制@导入

时间:2014-10-03 作者:bernie

我以《十三个孩子》为基础构建了一个儿童主题,效果很好。将父主题更新到版本1.3后,我注意到样式的奇怪行为,这是由缓存的父主题的style.css.

以下是我的孩子主题的内容style.css (省略标题)

/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url(\'../twentythirteen/style.css\');
所以儿童主题style.css 只导入父主题的style.css.

我还有另一个css文件,其中包含我的子主题的自定义项,我将其放入队列中functions.php:

// Enqueue parent theme\'s style.css (faster than using @import in our style.css)
$themeVersion = wp_get_theme()->get(\'Version\');

// Enqueue child theme customizations
wp_enqueue_style(\'child_main\', get_stylesheet_directory_uri() . \'/css/main.css\',
    null, $themeVersion);
这给了我一个非常好的css url,如下所示:domain.com/wp-content/themes/toutprettoutbon/css/main.css?ver=1.0.1 这样可以确保在更新子主题时重新加载样式表。

现在问题来了@import url(\'../twentythirteen/style.css\'); 完全独立于基础父主题的版本。事实上,父主题可以在不更新子主题的情况下更新,但浏览器仍将使用旧主题的缓存版本../twentythirteen/style.css.

2013年的相关代码style.css:

function twentythirteen_scripts_styles() {
    // ...

    // Add Genericons font, used in the main stylesheet.
    wp_enqueue_style( \'genericons\', get_template_directory_uri() . \'/genericons/genericons.css\', array(), \'3.03\' );

    // Loads our main stylesheet.
    wp_enqueue_style( \'twentythirteen-style\', get_stylesheet_uri(), array(), \'2013-07-18\' );
    // Note usage of get_stylesheet_uri() which actually enqueues child-theme/style.css

    // Loads the Internet Explorer specific stylesheet.
    wp_enqueue_style( \'twentythirteen-ie\', get_template_directory_uri() . \'/css/ie.css\', array( \'twentythirteen-style\' ), \'2013-07-18\' );
}
add_action( \'wp_enqueue_scripts\', \'twentythirteen_scripts_styles\' );
我可以想出几种方法来解决这个问题,但没有一种是真正令人满意的:

每次更新父主题以更改中的版本字符串时,更新我的子主题style.css (例如。@import url(\'../twentythirteen/style.css?ver=NEW_VERSION\');). 这在父主题版本和子主题之间创建了一个不必要且恼人的链接。

在我孩子的functions.php, (1)wp_dequeue_style 包含的子主题style.css 和2)wp_enqueue_style 这个parent 主题的style.css 直接使用版本字符串。这会打乱父主题中排队css的顺序。

使用style_loader_tag 筛选以修改生成的css<link> 标记为style.css 并修改路径以直接指向parent 主题的style.css 使用版本字符串。对于这样一种常见的需求(缓存破坏),似乎相当模糊。

转储父主题的style.css 在我的孩子主题中style.css. 实际上与(1)相同,但要快一点。

制作我的孩子主题style.css 成为父主题的符号链接style.css. 这似乎有点老套。。。

我错过什么了吗?有什么建议吗?

已添加编辑genericicons.cssie.css 父主题中的样式表,以澄清为什么我不能更改@import css语句到wp_enqueue_style 在我的孩子主题中。目前@import “我的孩子”主题中的声明style.css, 我在生成的页面中有以下顺序:

二十三个/通用图标/通用图标。css->按父主题排队,子主题/样式。css->按父主题排队,@导入二十一三个/样式。css

  • Twentyree/css/ie.css->按父主题排队
  • 子主题/css/main。css->按子主题排队style.css 作为的依赖项main.css, 这将成为:

    二十三个/通用图标/通用图标。css->按父主题排队,子主题/样式。css->空,按父主题排队。css->按子主题排队作为main的依赖项。css子主题/css/main。css->按子主题排队请注意,ie.css现在包含在父主题之前style.css. 我不想更改父主题的css文件的排队顺序,因为我不能假定这不会导致css规则的优先级问题。

  • 3 个回复
    最合适的回答,由SO网友:bernie 整理而成

    我的previous answer 过于复杂,可能不尊重父主题的依赖链(请参见其他答案中的注释)。

    下面是另一个更简单的方法,应该效果更好:

    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);
    
    这样做的目的是简单地过滤调用get_stylesheet_uri() 在父主题中,返回它自己的样式表而不是子主题的样式表。然后子主题的样式表将稍后在动作挂钩中排队my_theme_styles.

    SO网友:Otto

    您不必使用@import。实际上,最好不要这样做。使用排队方法可能更好。

    以下是《二一三密码》的相关部分:

    function twentythirteen_scripts_styles() {
    ...
        // Loads our main stylesheet.
        wp_enqueue_style( \'twentythirteen-style\', get_stylesheet_uri(), array(), \'2013-07-18\' );
    ...
    }
    add_action( \'wp_enqueue_scripts\', \'twentythirteen_scripts_styles\' );
    
    以下是您在代码中所做的操作:

    function child_scripts_styles() {
        wp_enqueue_style( \'child-style\', get_stylesheet_directory_uri().\'/css/main.css\', array(\'twentythirteen-style\'), \'YOUR_THEME_VERSION\' );
    }
    add_action( \'wp_enqueue_scripts\', \'child_scripts_styles\' );
    
    如果你的主要。css必须遵循家长的风格。css,那么你只需要让它依赖于它。

    现在,如果子级中也有一个B.css,那么可以相应地设置依赖项:

    function child_scripts_styles() {
        wp_enqueue_style( \'child-B-style\', get_stylesheet_directory_uri().\'/B.css\', array(\'twentythirteen-style\'), \'YOUR_THEME_VERSION\' );
        wp_enqueue_style( \'child-style\', get_stylesheet_directory_uri().\'/css/main.css\', array(\'child-B-style\'), \'YOUR_THEME_VERSION\' );
    }
    add_action( \'wp_enqueue_scripts\', \'child_scripts_styles\' );
    
    使您为每个项目定义的依赖关系实际反映出这些依赖关系的真正含义。如果主要。css必须在B.css之后,然后取决于它。如果B.css必须在父样式之后。css,那么B取决于此。排队系统将为您解决问题。

    如果你没有真正使用孩子的风格。css,那么你根本不必排队。它可以只是一个占位符来保存主题的标题信息。不使用它?不要加载它。

    另外,你到底在做什么,这是如此依赖于订购这里?在大多数情况下,CSS不关心加载顺序。CSS更依赖于选择器的特异性。如果要覆盖某个内容,请使其选择器更具体。它可以是第一个,也可以是最后一个,或者介于两者之间的任何东西,更具体的选择器总是获胜。

    Edit

    阅读您的评论并仔细查看代码,我知道错误在哪里了。第213段代码将“get\\u stylesheet\\u uri()”排入队列,在子主题的情况下,它将是您的子主题的样式。css文件,而不是父文件。这就是为什么@import可以工作,并保持相同的顺序(同样,这也没有你想象的那么重要)。

    在这种情况下,如果您不想使用导入,我建议将父样式排入队列。直接使用css。像这样:

    function child_scripts_styles() {
        wp_enqueue_style( \'parent-style\', get_template_directory_uri().\'/style.css\', array() );
    }
    add_action( \'wp_enqueue_scripts\', \'child_scripts_styles\' );
    
    子主题函数中的代码。php首先运行,因此您自己的wp\\u enqueue\\u脚本将首先运行,这将使父主题的样式排队。父主题本身并没有这样做(因为它实际上是在将您孩子的style.css排入队列)。通过不使它依赖于任何东西,就像父对象一样,那么它就可以正确地放入输出中。请注意,此文件和genericons的顺序。css并不重要,因为最初的“Twentyree样式”没有genericons。css作为列出的依赖项。

    你自己孩子的风格。css将加载,老实说,这是您应该将对子主题的更改放在其中的地方,而不是放在单独的main中。css。没有什么可以阻止您将更改放在那里,但没有真正的理由需要额外的css文件。

    SO网友:bernie

    警告:此解决方案不会respect the parent theme\'s dependencies! 更改父主题的句柄名称会影响父主题中设置的依赖项链。查看我的更简单other answer.

    原始答案

    虽然奥托的答案很好,但我最终在我的孩子主题的函数中得到了这个答案。php

    function my_theme_styles() {
        global $wp_styles;
        $parentOriginalHandle = \'twentythirteen-style\';
        $parentNewHandle = \'parent-style\';
    
        // Deregister our style.css which was enqueued by the parent theme; we want
        // to control the versioning ourself.
        $parentStyleVersion = $wp_styles->registered[$parentOriginalHandle]->ver;
        $parentDeps = $wp_styles->registered[$parentOriginalHandle]->deps;
        wp_deregister_style($parentOriginalHandle);
    
        // Enqueue the parent theme\'s style.css with whatever version it used instead
        // of @import-ing it in the child theme\'s style.css
        wp_register_style($parentNewHandle, get_template_directory_uri() . \'/style.css\',
            $parentDeps, $parentStyleVersion);
    
        // Enqueue our style.css with our own version
        $themeVersion = wp_get_theme()->get(\'Version\');
        wp_enqueue_style($parentOriginalHandle, get_stylesheet_directory_uri() . \'/style.css\',
            [$parentNewHandle], $themeVersion);
    }
    
    // Run this action action the parent theme has enqueued its styles.
    add_action(\'wp_enqueue_scripts\', \'my_theme_styles\', 20);
    
    它维护父主题的style.css 控制子主题的版本时的排序和版本号style.css.

    结束

    相关推荐

    是否使用wp_Register_style在页脚中加载css?

    我知道你可以使用wp_register_script 因为有一个$in_footer 用于执行此操作的参数。然而,没有一个wp_register_style 似乎是这样。是否有办法将CSS以同样的方式排列在页脚中,或者我必须手动硬编码页脚中的文件路径。php文件?