이 포스팅은 내가에서 가져온 스타일 시트 대기열에 포함 방법 주위의 최근 변경에 관한 발견 한 몇 가지 질문이 나타납니다 이 스레드 와 스레드를 .
내가 겪은 문제는 일반적인 사용 사례 시나리오에서 WP 4.0 설치시 특별히 어린이 테마로 준비된 널리 사용되는 잘 관리 된 부모 테마를 사용하여 발생했습니다. 내 자식 테마의 functions.php 만 포함 wp_enqueue_style으로 기능 분과에 설명을 .
아래 참조 된 코드는이 테마에만 적용되지만 대부분은 상위 테마에서 사용하는 현재 코딩 규칙을 사용합니다. 또한 내 관심 분야는 현재 야생에있는 많은 수의 기존 부모 테마에서 복제 할 수 있습니다. 또한, 이러한 제기되는 질문은 사용중인 상위 테마에 관계없이 범용 수준에서 적용 할 수 있습니다.
문제 1 : 투 큐잉
권장 설정 :
부모 테마는 wp_enqueue_scripts후크를 사용하여 스타일과 스크립트를 큐에 넣고 있으며 관련 부분은 다음과 같습니다.
add_action('wp_enqueue_scripts', 'parent_theme_function_name');
function parent_theme_function_name() {
wp_register_style( 'avia-style' , $child_theme_url."/style.css", array(), '2', 'all' );
wp_enqueue_style( 'avia-base');
if($child_theme_url != $template_url) { wp_enqueue_style( 'avia-style'); }
}내 자식 테마 functions.php는 최근 코덱 변경에 따라 스타일을 큐에 넣습니다.
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
}참조 코드에서 사용 된 다음 ID를 참고하십시오.
id='dm-parent-style-css'내 자식 테마 함수에 의해 큐에있는 부모 테마의 스타일 시트입니다.id='avia-style-css'부모 테마 함수가 큐에 넣은 내 자식 테마의 스타일 시트입니다.id='dm-child-style-css'내 자녀 테마 기능에 의해 큐에 넣은 내 자녀 테마의 스타일 시트입니다.
결과 :
언뜻보기에 <head>는 다음 순서로 표시되었습니다.
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />플러그인을 설치 한 후 대기열 순서가 다음과 같이 변경되었습니다.
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->궁극적으로 플러그인 후에로드 할 자식 테마의 CSS가 필요하므로 자식 테마의 함수에 우선 순위 번호를 추가해야했습니다 (우선 순위 번호에 대한 이전 토론 참조) .
그러나 내 기능은 부모 테마의 CSS 만 대기열에 넣기 때문에 이제 부모 테마 CSS가 끝으로 이동하여 자식 테마의 CSS가 이전보다 훨씬 나빠질 수 있습니다.
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />이제 자식 테마 스타일을 대기열로 다시 가져 와서 줄의 맨 앞으로 이동 하여 자식 테마 CSS에 대한 두 개의 대기열에 넣는 문제 (새로운 용어? lol)를 유발해야 합니다 .
더 이상 사용되지 않는 설정 :
자식 테마의 수정 된 기능 :
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}결과 :
다음 순서로 생산 <head>:
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />내 기능에 자식 스타일 시트를 포함 시키면 두 번 큐에 넣었지만 IMHO 는 부모 테마가 자식 스타일 시트를 제대로 큐에 넣을 것이라는 가정 하에 코딩보다 선호 됩니다. 각 대기열 스타일에 할당 된 ID를 기반으로 WP Core의 항목이 아닌 상위 테마가 해당 항목을 대기열에 넣는 것으로 보입니다.
내 Shivm :
나는 이것이 권장되는 수단이라고 거의 제안하지 않지만 (그리고이 솔루션에서 신음 할 것보다 더 많은 코딩 경험을 가진 개발자는 확실하다고 확신하지만) 나는 내 자신의 대기열에서 부모 테마의 ID (자식 테마의 스타일을 대기열에 넣는 데 사용)를 대기열에서 제외했습니다. 내 자식 테마의 기능 파일에 다음과 같이 표시됩니다.
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_dequeue_style( 'avia-style' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}결과 :
이것은 당면한 문제를 해결하여 다음과 같은 결과를 낳았습니다.
<!-- Multiple individual parent theme styles here -->
<!-- Plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />물론 이것은 부모 테마가 사용하는 ID를 알아야합니다. 표준 자식 테마 개발 방법론으로 사용하려면 좀 더 일반적인 것이 필요합니다.
문제 2 : 재배치 된 자식 스타일 시트
(이것이 다른 스레드에서 나오지 않았다고 생각하기는 어렵지만,보고있을 때 특정 것을 보지 못했습니다 ... 그것을 놓친 경우 자유롭게주의하십시오.)
나는 결코 기본 사용하지 않는 style.css것이 분명히있을 수있다, 그러나 내 모든 실제 스타일은 / CSS / 디렉토리에 .CSS 축소 된 파일로 SCSS에서 컴파일 - 내 테마 스타일의 자식 테마 루트 디렉토리에 있습니다. 나는 이것이 어린이 테마 개발을위한 보편적 인 수준에서 "예상 된 표준" 이 아니라는 것을 알고 있지만 , 내가 알고있는 가장 심각한 WordPress 개발자는 비슷한 것을합니다. 물론 이것은 부모 테마가 대기열에 넣었는지 여부 에 관계없이 내 스타일 시트에 수동으로 해당 스타일 시트를 대기열에 포함 시켜야합니다 .
요약하면 ...
- 자식 테마 표준의 관점에서 부모 테마가 자식 테마 스타일을 올바르게 포함한다고 가정하는 것이 안전합니까?
- 하위 테마 스타일이 플러그인에 의해 덮어 쓰기 시작될 때 우선 순위를 제거하면 WordPress 커뮤니티의 일부에 더 많은 혼동이 발생할 수 있습니다. 우리는 테마가 스타일을 덮어 쓸 것으로 예상하지만 플러그인으로는 그다지 많지 않습니다.
- 실제 하위 테마 스타일에 대해 사용자 정의 스타일 시트를 사용하는 경우 (사전 정의 된 스타일로 배치
style.css하려는 경우) 해당 파일을 수동으로 큐에 넣어야합니다. 광범위한 개발자의 연속성을 유지하는 관점에서 가능한 중복 여부에 관계없이 자식 스타일 시트를 수동으로 큐에 넣는 것이 바람직하지 않습니까?