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?
fonte
Respostas:
QUESTÃO 1
Regra geral, sim. Mas você nunca deve assumir . A maioria dos desastres e falhas ao vivo se deve a suposições ou fatos com base em uma suposição
FATOS SEM PRESSUPOSTOS
O functions.php de um tema filho é carregado primeiro e, em seguida, o functions.php dos pais. Isso garante que a folha de estilo principal do tema pai seja carregada antes da folha de estilo principal do tema filho a partir do código atualizado no codex
Vamos olhar para o tema incluído, vinte e doze. A mágica acontece aqui
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );. É assim que a folha de estilo principal é enfileirada. Quando o tema estiver ativo como tema pai, o style.css será carregado a partir do tema pai eget_stylesheet_uri()será apontado para o style.css do diretório pai.Quando você alterna para um tema filho,
get_stylesheet_uri()"altera" seu caminho para apontar para o style.css do tema filho, o que significa que agora, em vez dewp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );carregar o style.css pai, ele carrega o style.css filhoTodos os outros estilos do tema pai são carregados normalmente, na ordem em que foram escritos
POTHOLES
Estilos embutidos e folhas de estilo adicionados diretamente ao seu modelo de cabeçalho. Eu fiz alguns testes sobre esse assunto. Se a folha de estilo pai não estiver na fila usando
wp_enqueue_scriptse carregada diretamente no cabeçalho, a folha de estilo principal do tema filho será carregada primeiro. Como solução alternativa aqui, eu já recomendei copiar o header.php do pai para o tema filho e remover essas chamadas. Você precisará enfileirar os estilos de tema pai e filho e quaisquer outras folhas de estilo que foram carregadas diretamente no header.php conforme descrito na função obsoleta do OPEu me deparei com isso uma ou duas vezes em que estilos (e scripts) são carregados diretamente no cabeçalho e, por causa disso, a chamada para
wp_headé omitida. Isso fará com que a ação do enfileiramento falhe silenciosamente, portanto seus estilos simplesmente não serão exibidos.Conjunto de prioridades erradas. Não é necessário definir prioridades ou ações pai e filho quando você conecta suas funções de enfileiramento. Quando ambos têm a mesma prioridade padrão, aplica-se a regra de primeiro a chegar, primeiro a ser servido. Isso garantirá que a ordem de carregamento esteja correta
NOTA PARA AUTORIZAR OS AUTORES DO TEMA
O método aceito apropriado para adicionar estilos e scripts a um tema é através do
wp_enqueue_scriptsgancho de ação. Nunca adicione estilos e scripts diretamente ao modelo de cabeçalho e não defina nenhuma prioridade em sua ação ao conectar sua funçãoSempre carregue também a folha de estilo principal da seguinte maneira:
Isso garantirá que a folha de estilo principal da criança seja carregada quando um tema filho estiver em uso
SUA RESPONSABILIDADE COMO AUTOR DE TEMA INFANTIL
Tome seu tempo e trabalhe com o tema principal. Conheça o tema principal, verifique se você está confortável com as estruturas do tema e como as funções e ganchos são usados no tema. Você não pode criar um tema filho bem-sucedido se não tiver conhecimento interno de como o tema pai funciona. É de sua responsabilidade garantir que estilos e scripts sejam carregados corretamente para que seu código funcione conforme o esperado.
Sempre mantenha o autor do tema pai alerta de qualquer código que não lhe agrade. Por exemplo, se o autor adicionou seus estilos diretamente ao cabeçalho, alertá-lo e conscientizá-lo de que essa é a maneira errada de fazê-lo, e peça a ele que corrija isso em uma versão futura.
QUESTÃO 2
Infelizmente, não existe um método direto para se proteger contra isso. O fato aqui é que os estilos de plug-in nunca devem substituir estilos de tema padrão sem o consentimento do usuário final. Na minha opinião, isso é apenas uma prática ruim ou negligência do autor do plugin. Sugiro que, em um caso como esse, entre em contato com o autor do plug-in e o alerte sobre isso
Você também sempre tem a opção de desenfileirar e cancelar o registro de um estilo (e script) que não precisa, ou do qual precisa alterar a prioridade e re-enfileirar e registrar novamente como no código acima (o que é perfeitamente adequado). Apenas uma observação na sua shivm , é uma prática recomendada remover a fila e cancelar o registro de um estilo e script.
QUESTÃO 3
Eu não acho que exista uma resposta direta em preto e branco para esse problema. Eu responderia dizendo: faça o que lhe agrada, desde que dentro de uma determinada diretriz que rege a ação.
As folhas de estilo não existem para adicionar funcionalidade, mas para adicionar experiência visual ao usuário. Os estilos também são enviados diretamente no estado em que são processados. Wordpress não desempenha nenhum papel aqui.
Com base nesse fato, eu realmente não vejo nenhuma bandeira vermelha ameaçadora ao carregar uma folha de estilo duas vezes. No entanto, isso pode custar alguns milissegundos. Para ser sincero, além disso, não tenho muita certeza de como as duplicatas são tratadas nos navegadores diferentes. Isso é algo que você, como leitor, pode testar
IMHO, duplicatas nunca são boas e sempre devem ser evitadas. Sugiro que, se você realmente deseja enfileirar manualmente a folha de estilo principal da criança por qualquer motivo, use seu código em sua shivm . Retire da fila e cancele o registro da duplicata adicionada por padrão e, em seguida, retire a fila da folha de estilo normalmente.
Apenas uma coisa a lembrar, as funções de enfileiramento e registro têm um
$dependancyparâmetro que você também pode usar. Portanto, é fácil carregar uma folha de estilo secundária e torná-la dependente da folha de estilo principal do tema filhoEM CONCLUSÃO
Desde a recente atualização do codex, o feedback foi incrível e eu gostaria de agradecer o feedback de todos sobre isso. Gostaria de incentivar todos a participar de qualquer tipo de feedback para essa pergunta em particular. Se você tem algo a acrescentar ou comentar, por favor.
fonte