문맥

나는 스물 열세를 기반으로 어린이 테마를 만들었습니다. 부모 테마를 버전 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.

스물셋 열에있는 관련 코드 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' );

이 문제를 해결하는 몇 가지 방법을 생각할 수 있지만 실제로 만족스러운 것은 없습니다.

1. style.css(예 :)에서 버전 문자열을 변경하기 위해 상위 테마가 업데이트 될 때마다 내 하위 테마를 업데이트하십시오 @import url('../twentythirteen/style.css?ver=NEW_VERSION');. 이것은 부모 테마 버전과 자식 사이에 불필요하고 성가신 링크를 만듭니다.

2. 내 아이의에서 functions.php, 1) wp_dequeue_style에 포함 된 자식 테마의 style.css및 2) 부모 테마의 버전 문자열과 직접. 부모 테마에서 대기열에있는 CSS의 순서를 엉망으로 만듭니다.wp_enqueue_stylestyle.css

3. style_loader_tag필터를 사용하여 생성 된 CSS <link>태그를 style.css수정하고 상위 테마의 style.cssWITH 버전 문자열을 직접 가리 키도록 경로를 수정하십시오 . 이러한 일반적인 요구 (캐시 무효화)에 대해서는 다소 모호한 것 같습니다.

4. 부모 테마 style.css를 내 자식 테마에 덤프하십시오 style.css. 실제로 (1)과 동일하지만 조금 더 빠릅니다.

5. 내 자녀 테마 style.css를 부모 테마의 심볼릭 링크로 만드십시오 style.css. 이것은 꽤 해킹처럼 보입니다 …

내가 놓친 것이 있습니까? 어떤 제안?

편집하다

자식 테마에서 CSS 문을 변경할 수없는 이유를 명확히하기 위해 부모 테마에 시트를 추가 genericicons.css하고 ie.css스타일 @import을 지정 wp_enqueue_style했습니다. 현재 @import내 자식 테마에 문 style.css이 있으면 생성 된 페이지 에이 순서가 있습니다.

1. twentythirteen / genericons / genericons.css-> 부모 테마에 의해 대기열에 추가됨
2. child-theme / style.css-> 부모 테마, @imports twentythirteen / style.css에 의해 대기열에 추가됨
3. twentythirteen / css / ie.css-> 부모 테마에 의해 대기열에 추가됨
4. child-theme / css / main.css-> 자식 테마에 의해 대기열에 추가됨

부모님을의 style.css종속성으로 대기열에 넣으면 다음 main.css과 같이됩니다.

1. twentythirteen / genericons / genericons.css-> 부모 테마에 의해 대기열에 추가됨
2. child-theme / style.css-> 비어 있고 부모 테마로 대기열에 추가됨
3. twentythirteen / css / ie.css-> 부모 테마에 의해 대기열에 추가됨
4. twentythirteen / style.css-> main.css의 종속성으로 자식 테마에 의해 큐에 추가됨
5. child-theme / css / main.css-> 자식 테마에 의해 대기열에 추가됨

ie.css는 이제 부모 테마의 앞에 포함되어 있습니다 style.css. CSS 규칙의 우선 순위에 문제가 발생하지 않는다고 가정 할 수 없기 때문에 부모 테마의 CSS 파일의 대기열 순서를 변경하고 싶지 않습니다.

답변

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' );

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' );

function child_scripts_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css', array() );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

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);

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);