Esta postagem traz algumas perguntas que encontrei relacionadas às alterações recentes dos métodos de enfileiramento de folhas de estilo apresentadas neste tópico e neste tópico .
Os problemas que encontrei surgiram em um cenário geral de casos de uso, usando um tema pai amplamente usado e bem mantido, especificamente preparado para o tema filho em uma instalação do WP 4.0. O functions.php do meu tema filho contém apenas a wp_enqueue_stylefunção conforme detalhado no Codex .
Observe que, embora o código mencionado abaixo seja específico para esse tema, grande parte dele usa convenções de codificação atuais usadas pelos temas principais. Além disso, minhas áreas de preocupação provavelmente são duplicáveis em um grande número de temas principais estabelecidos atualmente em estado selvagem. Além disso, as questões levantadas são aplicáveis em nível universal, independentemente de qual tema pai esteja sendo usado.
EDIÇÃO 1: Twoqueueing
A configuração recomendada:
O tema pai está enfileirando estilos e scripts usando o wp_enqueue_scriptsgancho, a parte relevante é a seguinte:
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'); }
}
Meu tema filho functions.phpenfileira estilos por alterações recentes do codex:
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' );
}
Observe os seguintes IDs, conforme usados pelo código referenciado:
id='dm-parent-style-css'é a folha de estilo do tema pai, conforme enfileirada pela função de tema filhoid='avia-style-css'é a folha de estilo do meu tema filho, conforme enfileirado pela função de tema paiid='dm-child-style-css'é a folha de estilo do meu tema filho, conforme enfileirado pela função de tema filho
Os resultados:
À primeira vista, estava tudo bem, com o <head> mostrando a seguinte ordem:
<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' />
Depois de instalar um plug-in, a ordem de enfileiramento agora mudou da seguinte maneira:
<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 -->
Por fim, preciso que o css do meu tema filho seja carregado após qualquer plug-in, portanto fui forçado a adicionar um número de prioridade à função no meu tema filho (consulte a discussão anterior sobre o número de prioridade) .
Como minha função enfileira apenas o css do tema pai, no entanto, o resultado é que agora o css do tema pai é movido para o final, deixando o css do tema filho em uma situação ainda pior do que antes.
<!-- 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' />
Agora sou forçado a recorrer também ao enfileiramento do estilo do tema filho, para garantir que ele seja movido de volta para a frente da linha, causando o problema mencionado acima de enfileirar (novo termo? Lol) o CSS do tema filho.
A Instalação Descontinuada:
Função revisada no tema filho:
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' );
}
Os resultados:
Produzindo a seguinte ordem no <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' />
Mesmo que a inclusão da folha de estilo filho em minha função tenha feito com que ela fosse enfileirada duas vezes, o IMHO é preferível à codificação sob a suposição de que o tema pai enfileirará adequadamente nossa folha de estilo filho para nós. Com base nos IDs atribuídos a cada estilo enfileirado, parece que o tema pai enfileira-o, e nada no WP Core.
Meu Shivm:
Embora eu dificilmente sugira que este seja o meio recomendado (e tenho certeza de que os desenvolvedores com mais experiência em codificação do que eu gemerão com esta solução), desenfileirei o ID do tema pai (usado para enfileirar o estilo do tema filho) logo acima do meu próprio enfileiramento no arquivo de funções do meu tema filho, como mostrado:
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' );
}
Os resultados:
Isso resolveu os problemas em questão, resultando em:
<!-- 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' />
Obviamente, isso exigia o conhecimento do ID usado pelo tema pai - algo mais genérico seria necessário para ser usado como metodologia padrão de desenvolvimento de tema filho.
EDIÇÃO 2: folhas de estilo filho realocadas
(Parece difícil acreditar que isso não tenha surgido em outro tópico, embora eu não tenha visto nenhum específico ao procurar ... se eu perdi, sinta-se à vontade para chamar a atenção.)
Eu nunca uso o padrão style.cssno diretório raiz do tema filho para meus estilos de tema - obviamente ele precisa estar lá, mas todos os meus estilos reais são compilados no SCSS como um arquivo .css reduzido em um diretório / css /. Embora eu perceba que essa não é "a norma esperada" em um nível universal para o desenvolvimento de temas filho, os desenvolvedores mais sérios do WordPress que conheço fazem algo semelhante. Obviamente, isso requer enfileirar manualmente essa folha de estilo em minha função, independentemente de o tema pai enfileirá-la ou não.
Para resumir tudo ...
- É seguro incluir a suposição de que os temas pai enfileiram adequadamente os estilos de tema filho, do ponto de vista dos padrões de tema filho?
- A remoção da prioridade poderia criar mais confusão para parte da comunidade do WordPress, quando os estilos de tema filho começarem a ser substituídos por um plug-in. Esperamos que os temas sobrescrevam estilos, mas não tanto com plug-ins.
- Ao usar uma folha de estilo personalizada para os estilos de tema filho reais (como deveria colocá-los no predefinido
style.css), enfileirar manualmente esse arquivo se torna necessário. Em termos de manutenção da continuidade em um amplo espectro de desenvolvedores, não faria sentido incentivar o enfileiramento manual da folha de estilo filho, independentemente da possível duplicação?