Temas filho Problemas com prioridade ao CSS sem usar! Important

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

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.

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

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