Problemi di priorità CSS nei temi child senza utilizzare !important

Question

Problemi di priorità CSS nei temi child senza utilizzare !important

12 feb 2015, 00:18:52

Visualizzazioni: 34.6K

Voti: 11

Ho modificato il mio sito WordPress per utilizzare i temi child, ma lo stile del tema genitore ha la priorità su qualsiasi modifica che faccio nel CSS del tema child. Posso aggirare il problema usando !important, tuttavia questa è una soluzione approssimativa e i temi child dovrebbero funzionare come prima risorsa del sito.

Per esempio, nel mio sito, il bordo che include .wp-caption ha lo stesso colore dello sfondo usando il tag !important, ma non funziona senza di esso.

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

Questo è il contenuto del mio file PHP:

// Aggiunge gli stili del tema
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Dharkov

113

css child theme

Commenti

come stai aggiungendo il tuo style.css del child theme?

Milo

12 feb 2015 02:18:15

Sto utilizzando il sistema che WordPress raccomanda in questo post: http://codex.wordpress.org/Child_Themes

Dharkov

12 feb 2015 03:06:00

sembra che il tuo foglio di stile del child theme venga caricato molto presto, lo stai accodando (enqueueing) o stai aggiungendo direttamente il tag link nell'header? dovrebbe essere accodato per apparire dopo il foglio di stile del tema genitore, così puoi usare gli stessi selettori CSS per sovrascrivere il genitore senza !important o specificità maggiore. vedi la risposta di rambillo qui sotto.

Milo

12 feb 2015 03:35:29

Tutte le risposte alla domanda

Commenti

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

Dharkov

13 feb 2015 19:36:52

ancora non funziona.. così strano. 40 minuti e almeno 20 tutorial sul tema twentysixteen. Non riesco a sovrascrivere gli stili. body, select { color: red !important; font-size:200% !important; }

roberthuttinger

8 mar 2016 20:53:37

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

rambillo

10 mar 2016 08:02:17

PHP_INT_MAX ha risolto nel mio caso. Forza il caricamento del CSS del child dopo quello del parent.

mefiX

18 ott 2016 22:41:19

roberthuttinger sei riuscito a risolvere questo problema?

Cognibuild

19 apr 2020 04:49:05

TLDR risposta: il primo parametro di ogni wp_enqueue_style() non dovrebbe essere lasciato come 'parent-style' e 'child-style'. Devono essere rinominati per corrispondere al nome del tema genitore e del suo child.

Problema

Se non rinomini i parametri, potresti ottenere che il tema child venga accodato una seconda volta, il che può portare a regole CSS che appaiono due volte in Firebug e modificare valori nella versione sbagliata senza alcun effetto apparente, facendoti credere erroneamente che le tue regole child non sovrascrivano quelle del parent.

L'aspettativa

La pagina Codex sui Child Themes dice correttamente che se non fai nulla, il CSS del child viene collegato automaticamente. Questo avviene, 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 aggiungere una nota.

Soluzione

Rinomina i parametri. Io lo faccio come sotto per ottenere un (piccolo) maggiore controllo, nota che dovresti sostituire twentysixteen e twentysixteen-child con i nomi del tuo tema e child theme:

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

    //...accodamento personalizzato di .js e .css per plugin Javascript e simili qui

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

(Nota anche che non hai controllo sull'ordine di collegamento di alcuni (tutti?) plugin WP in questa azione. Vengono collegati dopo.)

Buona caccia ai selettori ;)

Henrik Erlandsson

502

8 apr 2016 17:02:01

Commenti

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

quasi

8 dic 2019 15:09:07

Puoi utilizzare un selettore più specifico nel CSS del tuo child theme in modo che abbia la precedenza.

Quindi invece di:


.wp-caption {
     background: #2d2d2d !important;
}

Usa:


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

Assicurati anche di accodare il foglio di stile del tuo child theme nel file functions.php se non l'hai già fatto.

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

Twodogstar

1

12 feb 2015 02:06:55

La soluzione proposta da Rambillo non ha funzionato per me. Ho fatto così e ora va bene:

function my_theme_enqueue_styles() {
        wp_enqueue_style( 'name-child-style', get_stylesheet_directory_uri() . '/style.css' );
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', PHP_INT_MAX );

Azodium

101

11 feb 2022 17:08:51

rambillo 357 · Accepted Answer · 2015-02-12T03:17:34Z

Prova a mettere in coda il CSS del tuo child theme in questo modo:

// Carica lo stile del tema genitore seguito dallo stile del child/tema personalizzato
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' ) );
}

Nota alcune cose:

1) PHP_INT_MAX come priorità in modo che questo codice venga eseguito per ultimo

2) get_stylesheet_directory_uri() rispetto a get_template_directory_uri() che punterà alla cartella del template del child theme invece che a quella del genitore.

Ho aggiunto anche una sottocartella /styles/ perché normalmente tengo i miei CSS in una sottocartella del tema.

3) seguito da array( 'parent-style' ) per fare in modo che il CSS del child abbia come dipendenza il CSS del genitore, il che ha l'effetto di mettere prima il tema genitore nell'head e il CSS del child theme subito dopo. Per questo motivo, qualsiasi cosa sia presente nel child theme che è già nel tema genitore sovrascriverà la versione del tema genitore.