Temas filho Problemas com prioridade ao CSS sem usar! Important


9

Mudei meu site WordPress para usar temas filhos, mas o estilo do tema pai tem prioridade sobre qualquer alteração que eu fizer no CSS do tema filho. Eu posso contornar isso usando !important, no entanto, esta é uma solução irregular e os temas filhos devem funcionar como o primeiro recurso do site.

Por exemplo, no meu site , a borda que inclui .wp-captioné da mesma cor do plano de fundo usando a !importanttag, mas não funcionará sem ela.

Isso tem a ver com o arquivo functions.php?

Este é o conteúdo do meu arquivo PHP:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

1
como você está adicionando o style.css do seu tema filho?
Milo

Eu estou usando o sistema que WordPress recomenda utilizar neste post: codex.wordpress.org/Child_Themes
Dharkov

parece que a folha de estilo do tema filho é carregada muito cedo, você está enfileirando-a ou adicionando a tag de link diretamente ao cabeçalho? deve ser enfileirado para aparecer após a folha de estilo pai, para que você possa usar os mesmos seletores de CSS para substituir o pai sem! especificidade importante ou superior. veja a resposta de rambillo abaixo.
Milo

Respostas:


18

Tente enfileirar o CSS do seu tema filho da seguinte maneira:

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/styles/child-style.css', array( 'parent-style' ) );
}

Observe algumas coisas:

1) PHP_INT_MAX como prioridade, para que isso funcione nos últimos

2) get_stylesheet_directory_uri () vs. get_template_directory_uri (), que apontará para a pasta de modelos do tema filho em vez dos pais.

Também adicionei uma subpasta, /styles/porque mantenho meu CSS normalmente em uma subpasta do meu tema.

3) seguido por array( 'parent-style' )para fazer o CSS filho ter o CSS pai como uma dependência, o que tem o efeito de colocar o tema pai primeiro na cabeça e o CSS do tema filho depois dele. Por isso, tudo o que também aparecer no tema filho que já está no tema pai substituirá a versão do tema pai.


Muito obrigado, a nova matriz funciona perfeitamente e também é mais limpa e clara.
Dharkov

ainda não está funcionando .. tão estranho. 40 minutos e 20 tutoriais, pelo menos, no vigésimo sexto tema. Não é possível obter estilos para substituir. body, select { color: red !important; font-size:200% !important; }
roberthuttinger

Vá em frente e poste um codepen, e daremos uma olhada.
Rambillo

2
O PHP_INT_MAX resolveu no meu caso. Força o CSS da criança a ser carregado após o dos pais.
mefiX 18/10/16

roberthuttinger você já resolveu esse problema?
gjnave 19/04

2

Resposta do TLDR: o primeiro parâmetro de cada um wp_enqueue_style()não deve ser deixado como 'estilo pai' e 'estilo filho'. Eles devem ser renomeados para corresponder ao nome do tema pai e seu filho.

Problema

Se você não renomear os parâmetros, o tema filho será enfileirado uma segunda vez, resultando em regras aparecendo duas vezes no Firebug e alterando valores no errado, sem nenhum efeito aparente, o que pode fazer você pensar que suas regras filho não são ' t substitui o pai.

A expectativa

A página do Codex em Temas filho diz corretamente que, se você não fizer nada, o CSS filho será vinculado automaticamente. Faz, mas apenas isso. O fluxo de trabalho CSS é um pouco diferente: você deseja substituir, não substituir. É lógico (funciona como os outros arquivos de tema), mas eles poderiam ter anotado.

Solução

Renomeie os parâmetros. Faço isso abaixo para obter (um pouco) mais controle; observe que você deve substituir vinte e dezesseis e vinte e dezesseis filhos pelos nomes de seu tema e tema filho:

function theme_enqueue_scripts() {
    //FIRST
    wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );

    //...custom queueing of .js and .css for Javascript plugins and such here

    //LAST
    wp_enqueue_style( 'twentysixteen-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'twentysixteen-style' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

(Observe também que você não controla a ordem dos links de alguns (todos?) Plug-ins WP nesta ação. Eles são vinculados depois.)

Seletor-caça feliz;)


Parece-me que esta é a resposta correta porque está usando corretamente a estrutura do Wordpress sem forçar nada.
quase

0

Você pode usar um seletor mais específico no CSS do seu tema filho, para que ele tenha precedência.

Então, em vez de:

.wp-legenda {
     fundo: # 2d2d2d! important;
}

Usar:

.entry .wp-legenda {
     fundo: # 2d2d2d;
}

Você também precisará enfileirar a folha de estilo do tema filho em seu arquivo functions.php, caso ainda não o esteja.

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

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.