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


28

문맥

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


5
를 사용하지 말고 @import부모 테마의 스타일 시트를 자신의 스타일 시트종속성으로 설정하십시오 .
fuxia

나는 그것이 최선의 방법이 아니다 알고 있지만 여기가 좋습니다 : codex.wordpress.org/Child_Themes
버니

또한 제안한 것을 수행해도 문제가 해결되지 않습니다. 부모 테마 style.css는 현재와 같은 위치에 포함되지 않습니다. 부모에는 다른 CSS 파일이 포함되어 style.css있으며 내 CSS 테마와 CSS 사이에 있어야합니다 .
bernie

3
코덱을 완전히 무시하십시오. 잘못된 정보로 가득합니다. dependency 매개 변수를 사용하면 스타일 시트가 올바른 순서로 포함됩니다.
fuxia

내 편집 내용을 참조하십시오.
bernie

답변:


19

@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 파일을 가질 이유가 없습니다.


나는 @imports가 최선의 방법이 아니라고 전적으로 동의합니다 . 보다 정확한 정보는 "편집"섹션을 참조하십시오. CSS 주문과 관련하여 특별한 요구 사항이 없습니다. CSS 규칙 우선 순위에 문제를 일으킬 수있는 부모 테마의 CSS 파일의 내부 순서를 수정하고 싶지 않습니다.
bernie

명확히하기 위해 B.css (현재 문제의 ie.css로 변경됨)는 내 자식 테마의 일부가 아니라 실제로 부모 테마의 일부입니다.
bernie

2
스타일이 ie.css 스타일을 따르려면 원하는 스타일을 사용하십시오. 그 이름은 "twentythirteen-ie"입니다. 순서는 선언 한 의존성에 의해 전적으로 관리되지만 CSS를 사용하면 문서에서 실제 순서는 일반적으로 중요하지 않으므로 지나치게 신경 쓰지 않는 이유는 확실하지 않습니다.
Otto

2
다른 접근법을 포함하도록 내 대답을 편집했습니다.
Otto

그래, 난 CSS 주문을 유지하기 위해 "필요"로 쫓겨 난 것 같아. 부모 테마에 순서가 정말로 중요한 경우에는 종속성에 명시해야합니다.
bernie

9

이전 답변 은 지나치게 복잡하고 부모 테마의 종속성 체인을 존중하지 않을 가능성이 있습니다 (다른 답변의 참고 사항 참조).

훨씬 더 잘 작동하는 또 다른 훨씬 간단한 방법이 있습니다.

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.


레코드의 경우 : 1) 코드는 이전 @import버전 을 사용하는 것과 똑같은 html을 생성하며 성능에는 전혀 영향을 미치지 않으며 서버에 두 개의 별도 style.css 요청이 있습니다. 2)이 답변은 모든 의존성을 떨어 뜨립니다. 함께 ... 3) 여기서 무엇을 get_template_directory_uri하고 있는지 확인할 수 있습니다 get_template_stylesheet_uri: core.trac.wordpress.org/browser/tags/4.8/src/wp-includes/… 다시 말하지만, 대부분의 코드는 필요하지 않습니다.
bg17aw

1
@ bg17aw using 은 테마 버전에 따라 wp_enqueue_style생성하는 URL에 캐시 무효화 쿼리 문자열을 자동으로 추가합니다 ?ver=2013-07-18. 이것은 @import진술에 의해 수행되지 않습니다 .
bernie

2

경고

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

정답

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

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.


5
가장 인기있는 블로그 소프트웨어는 기존 테마의 CSS를 조정하기 위해 20 줄 이상의 코드가 필요하다는 생각이 들었습니다. 나는 그것이 직업 안전이라고 생각한다.
Carl G

나는 다음과 같이 변경 [$parentNewHandle]해야했다array($parentNewHandle)
Carl G

@CarlG : 내가 사용한 배열 구문 (괄호)은 PHP 5.4에서 소개되었습니다.
bernie

지지자에게 :이 문제를 해결하는 다른 답변을 참조하십시오.
bernie

그것은 모두 큰 오해이며, 그 어느 것도 필요하지 않습니다. 사실, 오래된@import 방법도 잘 작동합니다. 두 방법을 비교하십시오. 부모 테마에 대한 자식 테마의 종속성에 대해서는 그럴 필요가 없습니다. 아이 style.css는 항상 부모님을 따라로드됩니다. 적어도 내 테스트에서. 잘못이 입증 된 것을 좋아합니다.
bg17aw
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.