부모 스타일 시트 / 문구마다 * 후에 * 자녀 스타일 시트를 대기열에 넣는 방법은 무엇입니까?

11

Chip Bennett의 잘 작성된 Oenology 테마를 내 자식 테마의 부모로 사용하고 있습니다.

개발 과정에서 스타일을 제어 할 때 Child 테마를 작성하는 사람들에게는 어려움이 있음을 발견했습니다.

방금 내 주요 style.css 파일이 <head>의 다른 모든 스타일 시트 링크 또는 명령문보다 먼저로드된다는 것을 발견했으며, 이것이 일부 부모 스타일을 재정의하는 데 문제가 발생한 이유를 설명합니다.

문제에 대한 추가 연구에 따르면 다양한 부모 스타일 시트와 스타일이 <head>에 세 곳에서 대기 할 수 있습니다. add_action('wp_print_styles',,, add_action('wp_enqueue_scripts',그리고 add_action('wp_head',.

간단하게하기 위해 두 개의 스타일 시트를 만들 계획입니다. 첫 번째 기본 'style.css'시트에는 @import url()Oenology의 기본 스타일 시트를로드하는 데 필요한 명령 만 포함됩니다 .

두 번째 스타일 시트에는 내 자식 규칙이 포함됩니다. 다른 모든 규칙 후에로드되도록 확인하려면을 사용하여 대기열에 넣습니다 add_action( 'wp_head',.

이것이 합리적으로 들립니까? 아니면 더 나은 (보다 정확한) 방법이 있습니까?

btw, 누구 '/parent-theme/style.css ? MRPreviewRefresh = 723 '의 의미를 알고 있습니까?

최신 정보

wp_enqueue_style ()이 wp_head ()에서 작동하지 않는 것 같습니다.

건배,
그레고리

child-theme  css  parent-theme 
— 그레고리
소스

답변:

21

참고로,이 질문은 아마도 Oenology 테마와 관련이 있기 때문에 너무 현지화 되어 있습니다.

즉, 여기 에 문제가 있다고 생각 합니다. Oenology는 두 가지 스타일 시트를 큐에 넣습니다.

  1. style.css, 문서 헤드에 직접 (따라서 이전 wp_head() 에 해고 됨)

  2. {varietal}.css,에서 wp_enqueue_scripts, 우선 순위 11,에 functions/dynamic-css.php:

    /**
 * Enqueue Varietal Stylesheet
 */
function oenology_enqueue_varietal_style() {

// define varietal stylesheet
global $oenology_options;
$oenology_options = oenology_get_options();
$varietal_handle = 'oenology_' . $oenology_options['varietal'] . '_stylesheet';
$varietal_stylesheet = get_template_directory_uri() . '/varietals/' . $oenology_options['varietal'] . '.css';

wp_enqueue_style( $varietal_handle, $varietal_stylesheet );
}
// Enqueue Varietal Stylesheet at wp_print_styles
add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );

"스킨"을 적용하는 varietal 스타일 시트는 우선 순위가 높은 순서로 대기열에 포함 11되어 기본 스타일 시트가 먼저style.css 로드 되고 varietal 스타일 시트가 두 번째로 로드 되어 올바른 캐스케이드가 발생하도록합니다.

당신이 재정의해야한다면, 품종 스타일 시트를, 단순히 두 번째 스타일 시트 대기열 후 품종 스타일 시트를; 즉, 적어도 우선 순위를 갖는 것 12.

편집하다

보다 일반적인 질문에보다 일반적인 답변을 제공하려면 :

부모 테마 스타일 시트 대기열을 재정의하려면 다음 두 가지를 알아야합니다.

  1. 동작 후크 스타일 시트가 대기열되는
  2. 우선 콜백 후크에 첨가되는

인큐 기능 ( wp_enqueue_script()/ wp_enqueue_style())은 후크와 / 후크 사이의 어느 곳에서나 올바르게 실행할 수 있습니다 . ( 함수 를 실행하는 의미 상 올바른 후크 는 현재 입니다.) 이 목록에는 다음 조치가 포함됩니다 (다른 조치 중에서도 일반적인 용의자 임).initwp_print_scriptswp_print_styleswp_enqueue_*()wp_enqueue_scripts

  • init
  • wp_head
  • wp_enqueue_scripts
  • wp_print_scripts/wp_print_styles

( , 및 내부 의 모든 화재 는 특정 우선 순위에 있음 wp_enqueue_scripts에 유의하십시오 .wp_print_styleswp_print_scripts wp_head

따라서 부모 테마 스타일 시트를 대체하려면 다음 중 하나를 수행해야합니다.

  • 다음을 통해 부모 테마 스타일 시트를 대기열에 넣지 마십시오 .wp_dequeue_style( $handle )
  • 다음을 통해 스타일을 큐에 넣는 부모 테마 콜백 을 제거하십시오.remove_action( $hook, $callback )

  • Child-Theme 스타일 시트 wp_enqueue_style()호출을 우선 순위가 낮은 동일한 후크 또는 이후 후크 에 연결하여 CSS 캐스케이드를 사용하여 상위 테마 스타일 시트 를 대체 하십시오 .

    이 마지막 옵션의 경우, 상위 테마가 다음을 사용하는 경우 :

    `add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority )`

    ... 어린이 테마는 다음을 사용합니다.

    `add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )`
— 칩 베넷
소스
고마워 칩. 실제로 wp_enqueue_scripts 및 높은 서수를 사용하여 Child 스타일 시트를 마지막으로로드 할 수 있습니다. 그러나 내 Child 스타일 시트 문 뒤에 여전히 3 개의 다른 스타일 문이 있습니다. 그중 2 개는 WP 자체에 의해 출력되고 1은 wp의 add_custom_image_header () 함수를 통해 Oenology에 의해 출력됩니다.
— Gregory
body.custom-background 스타일 문은 WP 자체에서 출력되지만 'BACKGROUND_COLOR'을 정의하여 사용자 정의 배경색을 지정할 수있는 것으로 보입니다. 기본 CSS 규칙을 사용자 정의 WP 상수를 통해 설정해야한다는 것이 이상합니다.
— Gregory
1
마지막 코멘트 칩. 이 질문은 너무 현지화 되지 않았습니다 . 많은 테마는 사용 가능한 모든 후크를 사용하여 스타일을 큐에 넣거나 인쇄합니다. Child 테마 개발자는 해당 스타일을 반드시 비활성화하지 않고 해당 스타일을 재정의하는 방법을 알아야합니다. 건배.
— Gregory
내가 가진 문제는 child_theme_enqueue_style이 더 높은 우선 순위로 자식 스타일을로드하고 wp_head 아래로 내려 가면서 자식 스타일 시트를 복제한다는 것입니다. Wordpress는 자발적으로 자식 스타일 시트를 정상적인 우선 순위로로드 한 다음 다시로드합니다. 새로운 우선 순위로 더 내려갑니다. 다른 모든 스타일 시트를 재정의 한 결과를 달성하는 동안 페이지에 중복 스타일 시트가 작성됩니다.
— php-b-grader
2

내 스타일이 캐스케이드에서 마지막으로 말한 것을 보장하는 유일한 방법은 wp_head 훅을 통해 <head> 끝에 스타일을 포함시키는 것입니다. wp_enqueue는 wp_head 내에서 작동하지 않으므로 링크를 직접 반향해야했습니다.

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    echo '<link rel="stylesheet" href="'.$base.'/style-gregory.css" type="text/css" media="all">';
    return;
}
add_action( 'wp_head', 'gregory_enqueue_stylesheets', 18 );

마지막으로, 높은 수준의 특이성 또는 최후의 수단으로 만 사용해야하는 중요한 규칙을 사용하지 않고 비교적 쉽게 내 스타일을 설정할 수 있습니다.

WP는 더 나은 스타일의 대기열 시스템이 필요합니다. 파일 링크이든 인라인 스타일이든 모든 스타일은 우선 순위가 순서를 결정할 수 있도록 동일한 후크를 통과해야합니다. 선택적으로 디버깅 목적으로 후크가 주석 처리 된 형식으로 각 스타일의 우선 순위 값을 출력하는 경우 유용합니다.

최신 정보

스타일 시트를 두 개로 분할하여 부모 테마 (주 스타일 시트, 하위 스타일 시트 및 몇 가지 스타일 문을 사용)의 원래 단계를 유지하면서 자식 테마의 스타일을 계속 제어 할 수있었습니다. 질문. 더 이상 wp_head () 후크를 사용하지 않고 대신 스타일 시트가 마지막으로로드되도록 높은 서수로 적절한 표준 wp_enqueue_scripts () 후크를 사용합니다.

내 자녀 테마의 기본 스타일 시트 :

/*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/

@import url("/wp-content/themes/oenology/style.css");

내 주요 스타일 시트를 큐에 넣는 기능 :

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    wp_enqueue_style( 'style-gregory', $base.'/style-gregory.css' );
    return;
}
add_action( 'wp_enqueue_scripts', 'gregory_enqueue_stylesheets', 18 );

그러나 내 스타일 시트 뒤에 언급 된 WP 생성 스타일 문 (예 : 부모 테마가 아닌)이 몇 개 있습니다. 높은 특이성 CSS 규칙을 사용하여 관심있는 규칙을 재정의하거나 찾아야합니다. 특히 body.custom-background 규칙을 사용하지 않도록 설정합니다.

귀하의 의견에 감사드립니다.

건배,
그레고리

— 그레고리
소스
1

당신은해야한다 항상 사용하는 wp_enqueue_style()스타일 시트를로드하고 그 기능은에 푹해야 wp_enqueue_scripts의 와 후크 머리에 실행됩니다 . 나는 당신이 그것을 거기에 연결하지 않았기 때문에 의심합니다. (WP 3.3 wp_enqueue_style()부터 다른 것에 연결되어 있으면 WP_Debug가 켜진 상태로 통지를 던집니다).

— mrwweb
소스
@ Chip의 대답은 내 것보다 낫고 Oenology 주제를 논의하기 위해 아마도 더 자격이 있습니다.
— mrwweb
아니요, 당신의 대답을 남길 것입니다. 정확하고 질문의 특정 부분을 다룹니다.
— Chip Bennett
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.