como enfileirar minha folha de estilo filho / s * após * cada folha de estilo pai / instrução?

11

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

No meu processo de desenvolvimento, descobri que existem alguns desafios para as pessoas que escrevem temas infantis quando se trata de controlar estilos.

Acabei de descobrir que meu arquivo principal style.css é carregado antes de qualquer outro link ou declaração da folha de estilo em <head>, e isso explica por que eu estava tendo problemas para substituir alguns dos estilos Parent.

um estudo mais aprofundado do problema mostra que várias folhas de estilo e estilos principais podem ser enfileirados no <head> em três lugares; add_action('wp_print_styles',,, add_action('wp_enqueue_scripts',e então add_action('wp_head',.

para simplificar, estou planejando criar duas folhas de estilo. a primeira folha principal 'style.css' incluiria apenas o @import url()comando, necessário para carregar a folha de estilo principal da Oenology.

a segunda folha de estilo conteria minhas regras filho. para garantir que ele seja carregado depois de todas as outras regras, eu o enfileirarei usando add_action( 'wp_head',.

isso soa razoável? ou existe uma maneira melhor (mais correta) de fazer isso?

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

Atualizar

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

Saúde,
Gregory

child-theme  css  parent-theme 
— Gregory
fonte

Respostas:

21

Apenas para sua informação, essa pergunta provavelmente se aproxima de muito localizada , pois é específica para o Tema de Enologia.

Dito isto, é aqui que acho que você está tendo um problema: a Enologia enfileira duas folhas de estilo:

  1. style.css, diretamente no cabeçalho do documento (portanto, antes de wp_head() ser disparado)

  2. {varietal}.css, em 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 "capa", enfileira com prioridade 11, para garantir que a folha de estilo base seja style.csscarregada primeiro e a folha de estilo varietal seja carregada em segundo , a fim de causar a cascata correta.

Portanto, se você precisar substituir a folha de estilo varietal , basta enfileirar sua segunda folha de estilo após a folha de estilo varietal; ou seja, com uma prioridade de pelo menos 12ou maior.

Editar

Para fornecer uma resposta mais geral, para a pergunta mais geral:

Para substituir um enfileiramento da folha de estilo do Tema pai, você precisa saber duas coisas:

  1. O gancho de ação no qual a folha de estilo está 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 executadas adequadamente em qualquer lugar entre o initgancho e os wp_print_scripts/ wp_print_stylesganchos. (O gancho semanticamente correto no qual executar wp_enqueue_*()funções está atualmente wp_enqueue_scripts.) Esta lista inclui as seguintes ações (entre outras; esses são apenas os suspeitos comuns):

  • init
  • wp_head
  • wp_enqueue_scripts
  • wp_print_scripts/wp_print_styles

(Note-se que wp_enqueue_scripts, wp_print_stylese wp_print_scripts todo o fogo dentro de wp_head, com uma prioridade específica .

Portanto, para substituir uma folha de estilo do tema pai, é necessário fazer o seguinte:

  • Desfileire a folha de estilo Tema-pai, viawp_dequeue_style( $handle )
  • Remova o retorno de chamada do Tema pai que enfileira o estilo, viaremove_action( $hook, $callback )

  • Use a cascata CSS para substituir a folha de estilo Parent-Theme, conectando sua wp_enqueue_style()chamada à folha de estilo Child-Theme no mesmo gancho com uma prioridade mais baixa ou em um gancho posterior .

    Para esta última opção, se o Tema pai 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} )`
— Chip Bennett
fonte
obrigado Chip. Na verdade, posso usar wp_enqueue_scripts e um alto ordinal para fazer com que minha folha de estilo filho seja carregada por último. no entanto, ainda existem três declarações de estilo diferentes após a declaração da folha de estilo filho. 2 deles são produzidos pelo próprio WP !!! e 1 é produzido pela Oenology por meio da função add_custom_image_header () do wp.
— Gregory
a declaração de estilo body.custom-background é produzida pelo próprio WP, mas parece que posso especificar uma cor de plano de fundo personalizada definindo 'BACKGROUND_COLOR'. É estranho que uma regra básica de CSS precise ser definida por meio de uma constante WP personalizada.
— Gregory
1
último comentário Chip. esta questão não é muito localizada. muitos temas usariam todos os ganchos disponíveis para enfileirar ou imprimir estilos, e os desenvolvedores de temas filhos precisam saber como substituir esses estilos sem necessariamente desabilitá-los. Felicidades.
— Gregory
O problema que vejo com isso é que o child_theme_enqueue_style carregará o estilo filho com uma prioridade mais alta, mais abaixo no wp_head MAS duplicará a folha de estilo filho - o Wordpress carregará automaticamente a folha de estilo filho em sua prioridade normal e, em seguida, carregue novamente, mais abaixo com a nova prioridade. Embora atinja o resultado de substituir todas as outras folhas de estilo, ele cria uma folha de estilo duplicada na página.
— Php-b-grader
2

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 no wp_head, então tive que repetir o 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.

O WP precisa de um sistema de enfileiramento de estilo melhor. todo estilo, seja um link de arquivo ou um estilo embutido, deve ser passado pelo mesmo gancho, permitindo que a Prioridade determine sua ordem. opcionalmente para fins de depuração, seria útil se o gancho também emitisse os valores de prioridade de cada estilo, talvez na forma comentada.

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 duas, conforme explicado em a questão. Não estou mais usando o gancho wp_head (), mas sim o gancho adequado e padrão wp_enqueue_scripts () com um alto ordinal para garantir que minha folha de estilo seja carregada por último.

folha de estilo padrão do tema Meu 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 a minha folha de estilo, e terei de usar as regras css de alta especificidade para substituir as regras que me dizem respeito ou procurar ganchos para desativá-los, em particular a regra body.custom-background.

Obrigado a todos por seus comentários.

Saúde,
Gregory

— Gregory
fonte
1

Você sempre deve usar wp_enqueue_style()para carregar sua folha de estilo e essas funções devem ser conectadas ao gancho wp_enqueue_scripts com execuções na cabeça . Eu suspeito que você não estava conectando lá, daí o seu problema. (No WP 3.3, se wp_enqueue_style()estiver conectado a qualquer outra coisa, ele lança um aviso com o WP_Debug ativado).

— mrwweb
fonte
@ A resposta de Chip é melhor que a minha e ele é indiscutivelmente mais qualificado para discutir o tema de Enologia;) É este o caso em que devo excluir minha resposta mesmo que seja correta?
— Mrwweb
Não, eu deixaria sua resposta. Está correto e aborda uma parte específica da pergunta.
— Chip Bennett
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.