Come accodare i fogli di stile Child *dopo* ogni foglio di stile/dichiarazione Parent?
Sto utilizzando il ben strutturato tema Oenology di Chip Bennett come tema Parent per il mio tema Child.
Durante il processo di sviluppo, ho scoperto che ci sono alcune sfide per chi sviluppa temi Child quando si tratta di controllare gli stili.
Ho appena scoperto che il mio file style.css principale viene caricato prima di ogni altro collegamento o dichiarazione di foglio di stile nel <head>, e questo spiega perché avevo difficoltà a sovrascrivere alcuni degli stili Parent.
Un ulteriore studio del problema mostra che vari fogli di stile e stili Parent possono essere accodati nel <head> in tre punti; add_action('wp_print_styles',
, add_action('wp_enqueue_scripts',
, e poi add_action('wp_head',
.
Per mantenere le cose semplici, ho intenzione di creare due fogli di stile. Il primo foglio 'style.css' principale includerebbe solo il comando @import url()
, necessario per caricare il foglio di stile principale di Oenology.
Il secondo foglio di stile conterrebbe le mie regole Child. Per assicurarmi che venga caricato dopo tutte le altre regole, lo accoderei usando add_action( 'wp_head',
.
Questo approccio sembra ragionevole? O c'è un modo migliore (più corretto) per farlo?
A proposito, qualcuno sa cosa significa '/parent-theme/style.css?MRPreviewRefresh=723'?
Aggiornamento
wp_enqueue_style() non sembra funzionare in wp_head().
Saluti,
Gregory

Per tua informazione, questa domanda probabilmente rasenta il troppo localizzato, in quanto è specifica per il Tema Oenology.
Detto questo, ecco dove penso tu abbia un problema: Oenology carica due fogli di stile:
style.css
, direttamente nell'intestazione del documento (quindi prima chewp_head()
venga eseguito){varietal}.css
, suwp_enqueue_scripts
, con priorità11
, infunctions/dynamic-css.php
:/** * Carica il Foglio di Stile Varietale */ function oenology_enqueue_varietal_style() { // definisce il foglio di stile varietale global $oenology_options; $oenology_options = oenology_get_options(); $varietal_handle = 'oenology_' . $oenology_options['varietal'] . '_stylesheet'; $varietal_stylesheet = get_template_directory_uri() . '/varietals/' . $oenology_options['varietal'] . '.css'; wp_enqueue_style( $varietal_handle, $varietal_stylesheet ); } // Carica il Foglio di Stile Varietale su wp_print_styles add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );
Il foglio di stile varietale, che applica la "skin", viene caricato con priorità 11
, per garantire che il foglio di stile base, style.css
, venga caricato prima, e il foglio di stile varietale venga caricato dopo, in modo da causare la corretta cascata.
Quindi, se hai bisogno di sovrascrivere il foglio di stile varietale, semplicemente carica il tuo secondo foglio di stile dopo quello varietale; ovvero con una priorità di almeno 12
o superiore.
Modifica
Per fornire una risposta più generale, alla domanda più generale:
Per sovrascrivere un foglio di stile del Tema Genitore, hai bisogno di sapere due cose:
- L'action hook in cui viene caricato il foglio di stile
- La priorità con cui la callback viene aggiunta all'hook
Le funzioni di caricamento (wp_enqueue_script()
/wp_enqueue_style()
) possono essere eseguite correttamente in qualsiasi momento tra l'hook init
e gli hook wp_print_scripts
/wp_print_styles
. (L'hook semanticamente corretto per eseguire le funzioni wp_enqueue_*()
è attualmente wp_enqueue_scripts
.) Questa lista include le seguenti azioni (tra le altre; queste sono solo le solite sospette):
init
wp_head
wp_enqueue_scripts
wp_print_scripts
/wp_print_styles
(Nota che wp_enqueue_scripts
, wp_print_styles
, e wp_print_scripts
vengono eseguiti tutti all'interno di wp_head
, con una specifica priorità.
Quindi, per sovrascrivere un foglio di stile del Tema Genitore, devi fare una delle seguenti:
Rimuovere il caricamento del foglio di stile del Tema Genitore, tramite
wp_dequeue_style( $handle )
Rimuovere la callback del Tema Genitore che carica lo stile, tramite
remove_action( $hook, $callback )
Usare la cascata CSS per sovrascrivere il foglio di stile del Tema Genitore, agganciando il caricamento del foglio di stile del Tema Figlio
wp_enqueue_style()
allo stesso hook con una priorità inferiore o a un hook successivo.Per quest'ultima opzione, se il Tema Genitore usa:
add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority );
...allora il Tema Figlio dovrebbe usare:
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} );

grazie Chip. Posso effettivamente utilizzare wp_enqueue_scripts con una priorità alta per fare in modo che il foglio di stile del Child theme venga caricato per ultimo. Tuttavia, ci sono ancora 3 diverse dichiarazioni di stile dopo la mia dichiarazione del foglio di stile del Child theme. 2 di queste sono generate da WP stesso!!!, e 1 è generata da Oenology tramite la funzione add_custom_image_header() di WP.

la dichiarazione di stile body.custom-background è generata da WP stesso, ma sembra che io possa specificare un colore di sfondo personalizzato definendo 'BACKGROUND_COLOR'. Strano che una regola CSS di base debba essere impostata tramite una costante personalizzata di WP.

ultimo commento Chip. questa domanda non è troppo localizzata. Molti temi utilizzerebbero tutti gli hook disponibili per accodare o stampare stili, e gli sviluppatori di Child theme hanno bisogno di sapere come sovrascrivere quegli stili senza necessariamente disabilitarli. saluti.

Il problema che vedo con questo approccio è che child_theme_enqueue_style caricherà il foglio di stile del child theme con una priorità più alta, più in basso nel wp_head MA duplicherà il foglio di stile del child - Wordpress caricherà automaticamente il foglio di stile del child con la sua priorità normale e poi lo caricherà nuovamente più in basso con la nuova priorità. Sebbene raggiunga il risultato di sovrascrivere tutti gli altri fogli di stile, crea un duplicato del foglio di stile nella pagina.

l'unico modo per garantire che i miei stili avessero l'ultima parola nella cascata era includerli alla fine di <head> tramite l'hook wp_head. wp_enqueue non funziona all'interno di wp_head quindi ho dovuto echo il link direttamente:
function gregory_enqueue_stylesheets() {
$base = get_stylesheet_directory_uri();
echo '<link rel="stylesheet" href="'.$base.'/style-gregory.css" type="text/css" media="all">';
return;
}
add_action( 'wp_head', 'gregory_enqueue_stylesheets', 18 );
finalmente, posso impostare i miei stili con relativa facilità, e senza usare alti livelli di specificità, o la regola !important che dovrebbe essere usata solo come ultima risorsa.
WP ha bisogno di un sistema migliore per il caricamento degli stili. ogni stile, sia un link a un file che uno stile inline, dovrebbe passare attraverso lo stesso hook permettendo alla Priorità di determinarne l'ordine. opzionalmente, per scopi di debug, sarebbe utile se l'hook mostrasse anche i valori di Priorità di ogni stile magari in forma commentata.
Aggiornamento
Sono riuscito a mantenere il controllo degli stili nel mio Child theme preservando la cascata originale del Parent theme (che usa un foglio di stile principale, un sub-foglio di stile e alcune dichiarazioni di stile) dividendo il mio foglio di stile in due come spiegato nella domanda. Non sto più usando l'hook wp_head(), ma usando invece il corretto e standard hook wp_enqueue_scripts() con un valore alto per assicurarmi che il mio foglio di stile venga caricato per ultimo.
il foglio di stile predefinito del mio Child theme:
/*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/
@import url("/wp-content/themes/oenology/style.css");
la funzione per caricare il mio foglio di stile principale:
function gregory_enqueue_stylesheets() {
$base = get_stylesheet_directory_uri();
wp_enqueue_style( 'style-gregory', $base.'/style-gregory.css' );
return;
}
add_action( 'wp_enqueue_scripts', 'gregory_enqueue_stylesheets', 18 );
ci sono però alcune dichiarazioni di stile generate da WP (cioè non dal tema genitore) che vengono dichiarate dopo il mio foglio di stile, e dovrò valutare se usare regole CSS ad alta specificità per sovrascrivere quelle che mi interessano, o cercare hook per disabilitarle, in particolare la regola body.custom-background.
grazie a tutti per i vostri commenti.
saluti,
Gregory

Dovresti sempre utilizzare wp_enqueue_style()
per caricare il tuo foglio di stile e questa funzione dovrebbe essere agganciata all'hook wp_enqueue_scripts che viene eseguito nell'head. Sospetto che tu non lo stessi agganciando lì, da qui il tuo problema. (A partire da WP 3.3, se wp_enqueue_style()
è agganciato a qualsiasi altra cosa, genera un Notice con WP_Debug attivato).

La risposta di @Chip è migliore della mia e lui è senza dubbio più qualificato per discutere del tema dell'enologia ;) È un caso in cui dovrei eliminare la mia risposta anche se è più o meno corretta?
