Temi secondari Problemi di priorità CSS senza usare! Important

Ho cambiato il mio sito WordPress per utilizzare i temi figlio, ma lo stile del tema principale ha la priorità su qualsiasi modifica apportata al CSS tema figlio. Posso aggirarlo usando !important, tuttavia questa è una soluzione irregolare e i temi figlio dovrebbero funzionare come prima risorsa del sito.

Ad esempio, nel mio sito , il bordo che include .wp-captionè dello stesso colore dello sfondo usando il !importanttag, ma non funzionerà senza di esso.

Questo ha a che fare con il file Functions.php?

Questo è il contenuto del mio file PHP:

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

css child-theme

— Dharkov
fonte

come stai aggiungendo style.css a tema tuo figlio?

— Milo,

Sto usando il sistema che WordPress consiglia in questo post: codex.wordpress.org/Child_Themes

— Dharkov

sembra che il foglio di stile del tema figlio venga caricato molto presto, lo stai accodando o stai aggiungendo il tag di collegamento direttamente all'intestazione? dovrebbe essere accodato per apparire dopo il foglio di stile genitore, quindi puoi usare gli stessi selettori CSS per sovrascrivere il genitore senza! specificità importante o superiore. vedi la risposta di rambillo sotto.

— Milo,

Risposte:

Prova ad accodare il CSS del tuo tema figlio in questo modo:

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

Notare alcune cose:

1) PHP_INT_MAX come priorità, in modo che ciò duri per ultimo

2) get_stylesheet_directory_uri () vs. get_template_directory_uri () che indicherà la cartella del modello del tema figlio anziché i genitori.

Ho aggiunto una sottocartella anche lì /styles/perché mantengo normalmente il mio CSS in una sottocartella del mio tema.

3) seguito da array( 'parent-style' )per rendere il CSS figlio avere il CSS padre come dipendenza, il che ha l'effetto di mettere il tema padre al primo posto nella testa e il CSS tema figlio che lo segue. Per questo motivo, qualunque cosa appaia anche nel tema figlio già presente nel tema principale sovrascriverà la versione del tema principale.

— rambillo
fonte

Grazie mille, il nuovo array funziona perfettamente ed è anche più pulito e più chiaro.

— Dharkov,

ancora non funziona .. così strano. 40 minuti e 20 tutorial almeno sul tema ventisei sedici. Impossibile ottenere gli stili da sostituire. body, select { color: red !important; font-size:200% !important; }

— roberthuttinger

Vai avanti e pubblica un codice, e daremo un'occhiata.

— Rambillo,

Il PHP_INT_MAX l'ha risolto nel mio caso. Forza il caricamento del css del bambino dopo quello del genitore.

— mefiX,

roberthuttinger hai mai risolto questo problema?

— Gjnave,

Risposta TLDR: il primo parametro di ciascuno wp_enqueue_style()non deve essere lasciato come "stile genitore" e "stile figlio". Dovrebbero essere rinominati in modo che corrispondano al nome del tema principale e al relativo figlio.

Problema

Se non rinominate i parametri, otterrete il tema secondario accodato una seconda volta che può comportare la comparsa di due regole in Firebug e la modifica di valori in quello errato senza alcun effetto apparente, il che potrebbe indurvi a pensare che le regole del bambino non siano " t sovrascrive il genitore.

L'attesa

La pagina Codex su Temi secondari indica correttamente che se non si fa nulla, il CSS figlio viene automaticamente collegato. Lo fa, ma solo quello. Il flusso di lavoro CSS è un po 'diverso: vuoi sovrascrivere, non sostituire. È logico (funziona come gli altri file del tema) ma avrebbero potuto avere una nota.

Soluzione

Rinomina i parametri. Lo faccio come di seguito per ottenere (un po ') più controllo, nota che dovresti sostituire twentis sedici e twentisedici figli con i nomi del tuo tema e del tema figlio:

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

(Si noti inoltre che non si ottiene il controllo dell'ordine dei collegamenti di alcuni (tutti?) Plugin WP in questa azione. Vengono collegati dopo.)

Buona caccia-selettore;)

— Henrik Erlandsson
fonte

Mi sembra che questa sia la risposta corretta perché utilizza correttamente il framework Wordpress senza forzare nulla.

— quasi

Puoi utilizzare un selettore più specifico nel CSS del tema figlio in modo che abbia la precedenza.

Quindi invece di:

.wp-caption {
     sfondo: # 2d2d2d! importante;
}

Uso:

.entry .wp-caption {
     sfondo: # 2d2d2d;
}

Dovresti anche essere sicuro di accodare il foglio di stile del tema figlio nel tuo file Functions.php se non lo sei già.

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

— Twodogstar
fonte