부모 테마의 style.css의 버전 가져 오기

문맥

나는 스물 열세를 기반으로 어린이 테마를 만들었습니다. 부모 테마를 버전 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 파일의 대기열 순서를 변경하고 싶지 않습니다.

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

main.css가 부모의 style.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' );

각 항목에 대해 정의한 종속성이 실제로 해당 종속성을 반영하도록하십시오. main.css가 B.css 뒤에 와야하는 경우 그에 따라 다릅니다. B.css가 부모의 style.css를 따라야하는 경우 B는 그에 따라 달라집니다. 대기열 시스템이 자동으로 정렬합니다.

그리고 실제로 child 's style.css를 사용 하지 않으면 전혀 큐에 넣을 필요가 없습니다 . 테마의 헤더 정보를 담는 자리 표시 자일 수 있습니다. 사용하지 않습니까? 로드하지 마십시오.

또한, 당신이하고있는 일은 정확히 여기 주문에 달려 있습니까? CSS는 대부분의 상황에서로드 순서를 신경 쓰지 않습니다. CSS는 선택기의 특수성에 더 의존합니다. 무언가를 무시하려면 선택기를 더 구체적으로 만드십시오. 더 구체적인 선택기가 항상 이길 수 있습니다.

편집하다

귀하의 의견을 읽고 코드를 자세히 살펴보면 실수가 어디에 있는지 알 수 있습니다. 23 개 코드는 하위 테마의 경우 상위 파일이 아닌 하위 테마의 style.css 파일 인 "get_stylesheet_uri ()"를 큐에 넣습니다. 그렇기 때문에 @import가 작동하고 동일한 순서를 유지합니다 (다시 생각하는 것처럼 거의 중요하지 않음).

이 경우 가져 오기를 사용하지 않으려면 부모의 style.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' );

자식 테마의 functions.php의 코드가 먼저 실행되므로 자신의 wp_enqueue_scripts가 먼저 실행되고 부모 테마의 style.css를 큐에 넣습니다. 부모와 같은 것에 의존하지 않으면 출력에 올바르게 입력됩니다. 이 파일과 genericons.css의 순서는 중요하지 않습니다. 원래의 "thirdteen-style"에는 genericons.css가 나열된 종속성이 없기 때문입니다.

자신의 자녀의 style.css가로드되고 정직하게 여기에서 별도의 main.css가 아닌 자식 테마에 대한 변경 사항을 배치해야합니다. 거기에 변경 사항을 적용하는 데 방해가되는 것은 아니지만 추가 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);

아이디어는 단순히 get_stylesheet_uri()상위 테마에서 호출을 필터링 하여 하위 테마 대신 자체 스타일 시트를 리턴하는 것입니다. 그런 다음 하위 테마의 스타일 시트는 나중에 action hook에서 큐에 넣습니다 my_theme_styles.

경고

이 솔루션은 부모 테마의 종속성을 존중 하지 않습니다 ! 부모 테마의 핸들 이름을 변경하면 부모 테마에 설정된 종속성 체인에 영향을줍니다. 내 훨씬 더 간단한 다른 답변을 참조하십시오 .

정답

오토의 대답은 꽤 좋지만 아이 테마의 함수에서 이것으로 끝났습니다.

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.