como enfileirar minha folha de estilo / s filhos * depois de * cada folha de estilo / instrução pai?

9

Estou usando o tema de enologia bem escrito de Chip Bennett como o pai do meu próprio tema infantil.

No meu processo de desenvolvimento, descobri que há alguns desafios para as pessoas que escrevem temas para crianças quando se trata de controlar estilos.

Acabei de descobrir que meu arquivo principal style.css é carregado antes de todos os outros links ou instruções da folha de estilo no < head & gt ;, e isso explica por que eu estava tendo problemas para substituir alguns dos estilos pai.

um estudo mais aprofundado do problema mostra que várias folhas de estilo e estilos pai / mãe podem ser enfileirados na tag < head > em três lugares; add_action('wp_print_styles', , add_action('wp_enqueue_scripts', e, em seguida, add_action('wp_head', .

para manter as coisas simples, planejo criar duas folhas de estilo. a primeira folha principal 'style.css' incluiria apenas o comando @import url() , necessário para carregar a folha de estilo principal da Enologia.

a segunda folha de estilo conteria as regras do meu filho. Para ter certeza de que é carregado após todas das outras regras, eu colocaria a fila usando add_action( 'wp_head', .

isso soa razoável? ou existe uma maneira melhor (mais correta) de fazê-lo?

btw, alguém sabe o que '/parent-theme/style.css ? MRPreviewRefresh = 723 ' significa?

Atualizar

wp_enqueue_style () não parece funcionar em wp_head ().

felicidades,
Gregory

    
por Gregory 05.05.2012 / 19:18

3 respostas

17

Apenas para FYI, essa questão provavelmente faz fronteira com muito localizado , pois é específico para o tema Enologia.

Dito isso, aqui é onde eu acho que você está tendo um problema: enologia enfileira duas folhas de estilo:

  1. style.css , diretamente no cabeçalho do documento (assim antes wp_head() é acionado)
  2. {varietal}.css , a wp_enqueue_scripts , com prioridade 11 , em 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 );
    

A folha de estilo varietal, que aplica a "skin", enfileira na prioridade 11 , para garantir que a folha de estilos de base, style.css , carregue primeiro , e a folha de estilo varietal carregue segundo , para causar a cascata correta.

Então, se você precisa sobrescrever a varietal folha de estilo, basta enfileirar sua segunda folha de estilo depois da folha de estilo varietal; ou seja, com uma prioridade de pelo menos 12 ou maior.

Editar

Para fornecer uma resposta mais geral, à pergunta mais geral:

Para substituir um enfileiramento de folha de estilos do tema pai, você precisa saber duas coisas:

  1. O gancho de ação no qual a folha de estilo é enfileirada
  2. A prioridade na qual o retorno de chamada é adicionado ao gancho

As funções de enfileiramento ( wp_enqueue_script() / wp_enqueue_style() ) podem ser corretamente executadas em qualquer lugar entre os ganchos init e wp_print_scripts / wp_print_styles . (O gancho semanticamente correto no qual executar wp_enqueue_*() funções é atualmente wp_enqueue_scripts .) This lista inclui as seguintes ações (entre outras; são apenas as suspeitas usuais):

  • init
  • wp_head
  • wp_enqueue_scripts
  • wp_print_scripts / wp_print_styles

(Observe que wp_enqueue_scripts , wp_print_styles e wp_print_scripts todo o fogo dentro de wp_head , em uma prioridade específica .

Assim, para substituir uma folha de estilo do tema pai, você precisa seguir um destes procedimentos:

  • Desacoplar a folha de estilo do tema pai, por wp_dequeue_style( $handle )
  • Remova o callback do tema principal que enfileira o estilo, através de remove_action( $hook, $callback )
  • Use a cascata de CSS para substituir a folha de estilo Pai-Tema, conectando a chamada de wp_enqueue_style() da folha de estilos de tema filho ao mesmo gancho com uma menor prioridade ou em um gancho posterior .

    Para esta última opção, se o tema principal usar:

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

    ... então o tema filho usaria:

    'add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )'
    
por Chip Bennett 09.05.2012 / 18:27
1

Você deve sempre usar wp_enqueue_style() para carregar sua folha de estilo e que as funções devem ser ligado ao gancho wp_enqueue_scripts com é executado na cabeça . Eu suspeito que você não estava ligando lá, daí o seu problema. (A partir do WP 3.3, se wp_enqueue_style() estiver conectado a qualquer outra coisa, ele lança um Aviso com o WP_Debug ativado).

    
por mrwweb 09.05.2012 / 17:22
1

a única maneira de garantir que meus estilos tivessem a palavra final na cascata era incluí-los no final de < head > através do gancho wp_head. O wp_enqueue não funciona dentro do wp_head, então tive que fazer o eco do link diretamente:

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

finalmente, posso definir meus estilos com relativa facilidade e sem usar altos níveis de especificidade, ou a regra importante que deve ser usada apenas como último recurso.

WP precisa de um sistema de enfileiramento de estilo melhor. O estilo every , seja um link de arquivo ou um estilo in-line, deve ser passado pelo mesmo gancho, permitindo que a Prioridade determine seu pedido. opcionalmente, para fins de depuração, seria útil se o hook também exibisse os valores de Prioridade de cada estilo, talvez no formulário comentado.

Atualizar

Consegui manter o controle dos estilos no meu tema Filho, mantendo a cascata original do tema Pai (que usa uma folha de estilo principal, uma sub-folha de estilo e algumas instruções de estilo) dividindo minha folha de estilo em dois como explicado na pergunta. Não estou mais usando o gancho wp_head (), em vez de usar o gancho wp_enqueue_scripts () padrão e adequado com um ordinal alto para garantir que minha folha de estilo seja carregada por último.

folha de estilo padrão do meu tema filho:

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

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

a função para enfileirar minha folha de estilo principal:

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

No entanto, existem algumas declarações de estilo geradas pelo WP (ou seja, não o tema pai) que são declaradas após minha folha de estilo, e terei que observar as regras css de alta especificidade substituir as regras que me dizem respeito, ou procurar por ganchos para desabilitá-las, em particular a regra body.custom-background.

obrigada a todos por seus comentários.

felicidades,
Gregory

    
por Gregory 06.05.2012 / 04:32