Problemi nell'accodamento dei fogli di stile del tema padre e figlio con il metodo rivisto del Codex

Question

Problemi nell'accodamento dei fogli di stile del tema padre e figlio con il metodo rivisto del Codex

9 nov 2014, 17:12:04

Visualizzazioni: 17.6K

Voti: 9

Questo post solleva alcune questioni che ho incontrato riguardo i recenti cambiamenti nei metodi di accodamento dei fogli di stile discussi in questo thread e quest'altro thread.

I problemi che ho riscontrato sono emersi in uno scenario di uso comune, utilizzando un tema padre ampiamente utilizzato e ben mantenuto, specificamente pronto per temi child su un'installazione WP 4.0. Il file functions.php del mio tema child contiene solo la funzione wp_enqueue_style come dettagliato nel Codex.

Si noti che mentre il codice di riferimento è specifico per questo tema, gran parte di esso utilizza convenzioni di codifica attuali usate dai temi padre. Inoltre, le mie aree di preoccupazione sono probabilmente replicabili su un gran numero di temi padre attualmente in uso. Inoltre, le questioni sollevate sono applicabili a livello universale, indipendentemente dal tema padre utilizzato.

PROBLEMA 1: Doppio accodamento

La Configurazione Raccomandata:

Il tema padre accoda stili e script usando l'hook wp_enqueue_scripts, la parte rilevante è la seguente:

add_action('wp_enqueue_scripts', 'parent_theme_function_name');
function parent_theme_function_name() {
    // Registra lo stile del tema
    wp_register_style( 'avia-style' ,  $child_theme_url."/style.css", array(),  '2', 'all' );
    wp_enqueue_style( 'avia-base');
    if($child_theme_url !=  $template_url) { wp_enqueue_style( 'avia-style'); }
}

Il mio tema child functions.php accoda gli stili secondo le recenti modifiche del codex:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
    // Accoda lo stile del tema padre
    wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
}

Nota i seguenti ID utilizzati dal codice di riferimento:

id='dm-parent-style-css' è il foglio di stile del tema padre, accodato dalla funzione del mio tema child
id='avia-style-css' è il foglio di stile del mio tema child, accodato dalla funzione del tema padre
id='dm-child-style-css' è il foglio di stile del mio tema child, accodato dalla funzione del mio tema child

I Risultati:

A prima vista, tutto sembrava a posto, con il <head> che mostrava il seguente ordine:

<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multipli stili individuali del tema padre qui -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />

Dopo l'installazione di un plugin, l'ordine di accodamento è cambiato come segue:

<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multipli stili individuali del tema padre qui -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Stili fastidiosi del plugin -->

Alla fine, ho bisogno che il css del mio tema child si carichi dopo qualsiasi plugin, quindi sono stato costretto ad aggiungere un numero di priorità alla funzione nel mio tema child (vedi discussione precedente riguardo il numero di priorità).

Poiché la mia funzione accoda solo il css del tema padre, tuttavia, il risultato è che ora il css del tema padre viene spostato alla fine, lasciando il css del mio tema child in una situazione ancora peggiore di prima.

<!-- Multipli stili individuali del tema padre qui -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Stili fastidiosi del plugin -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />

Ora sono costretto a ricorrere all'accodamento anche dello stile del tema child, per assicurarmi che torni in prima linea, causando il problema menzionato in precedenza del doppio accodamento del css del tema child.

La Configurazione Deprecata:

Funzione rivista nel tema child:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
    // Accoda gli stili del tema padre e child
    wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}

I Risultati:

Producendo il seguente ordine nel <head>:

<!-- Multipli stili individuali del tema padre qui -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Stili fastidiosi del plugin -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />

Anche se includere il foglio di stile child nella mia funzione ha causato il suo doppio accodamento, IMHO questo è preferibile rispetto a programmare sotto l'assunzione che il tema padre accoderà correttamente il nostro foglio di stile child per noi. Basandosi sugli ID assegnati a ogni stile accodato, sembra che sia il tema padre ad accodarlo, non qualcosa nel Core di WP.

La Mia Soluzione:

Sebbene non suggerirei che questo sia il metodo raccomandato (e sono sicuro che gli sviluppatori con più esperienza di codifica di me storceranno il naso a questa soluzione), ho disaccodato l'ID del tema padre (usato per accodare lo stile del mio tema child) proprio sopra il mio accodamento nel file functions del mio tema child come mostrato:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
    // Accoda lo stile del tema padre
    wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
    wp_dequeue_style( 'avia-style' );
    // Accoda lo stile del tema child
    wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}

I Risultati:

Questo ha risolto i problemi in questione, risultando in:

<!-- Multipli stili individuali del tema padre qui -->
<!-- Stili del plugin -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />

Ovviamente, questo ha richiesto di conoscere l'ID utilizzato dal tema padre - sarebbe necessario qualcosa di più generico per essere utilizzato come metodologia standard di sviluppo del tema child.

PROBLEMA 2: Fogli di stile child ricollocati

(Sembra difficile credere che questo non sia emerso in un altro thread, anche se non ne ho visti di specifici durante la ricerca... se me ne sono perso qualcuno, sentitevi liberi di farmelo notare.)

Io non uso mai il style.css predefinito nella directory root del tema child per i miei stili - ovviamente deve essere lì, ma tutti i miei stili effettivi sono compilati da SCSS come file .css minificato in una directory /css/. Sebbene mi renda conto che questo non sia "la norma prevista" a livello universale per lo sviluppo di temi child, la maggior parte degli sviluppatori WordPress seri che conosco fa qualcosa di simile. Questo, ovviamente, richiede di accodare manualmente quel foglio di stile nella mia funzione indipendentemente dal fatto che il tema padre lo abbia accodato o meno.

Per riassumere...

È sicuro includere l'assunzione che i temi padre accodino correttamente gli stili del tema child, dal punto di vista degli standard dei temi child?
Rimuovere la priorità potrebbe potenzialmente creare più confusione per parte della comunità WordPress, quando gli stili del tema child iniziano a essere sovrascritti da un plugin. Ci aspettiamo che i temi sovrascrivano gli stili, ma non tanto con i plugin.
Quando si usa un foglio di stile personalizzato per gli stili effettivi del tema child (invece di metterli nel style.css predefinito), diventa necessario accodare manualmente quel file. In termini di mantenimento della continuità attraverso un ampio spettro di sviluppatori, non avrebbe senso incoraggiare l'accodamento manuale del foglio di stile child indipendentemente dal possibile duplicato?

dMcClintock

181

child theme wp enqueue style parent theme codex

Commenti

Sono sicuro che ci sia un dibattito su come strutturare la relazione tra tema genitore e tema figlio. Non credo sia sicuro dare per scontato qualsiasi cosa riguardo al tema genitore. Personalmente, preferisco caricare manualmente gli stili in un tema figlio. Ma queste sono decisioni che devi prendere riguardo alla natura del tema figlio e comunicarle chiaramente. Se i temi figlio sono solo per semplici modifiche visive, allora probabilmente va bene che sia il genitore a caricare il foglio di stile del figlio. Ma se il tema genitore è un framework, allora opterei per far caricare i fogli di stile al tema figlio.

Seamus Leahy

9 nov 2014 18:31:01

Tutte le risposte alla domanda

Commenti

Pieter, grazie per la tua risposta dettagliata. Oggi sono stato sommerso di lavoro ma ho alcune riflessioni basate su ciò che hai detto che spero di aggiungere più tardi questa sera.

dMcClintock

11 nov 2014 01:07:06

Per favore fallo. Mi piacerebbe davvero sentire altri punti di vista su questo. La mia risposta è la mia opinione basata sui miei test, quindi non è certo l'alfa e l'omega. Non vedo l'ora di sentire le tue intuizioni :-)

Pieter Goosen

11 nov 2014 07:02:53

Pieter Goosen 55.4K · Answer 1 · 2014-11-10T08:31:20Z

DOMANDA 1

È sicuro assumere che i temi genitore includano correttamente gli stili del tema figlio, dal punto di vista degli standard dei temi figli?

Come regola generale, sì. Ma, non dovresti mai assumere. La maggior parte dei disastri e dei fallimenti in produzione sono dovuti ad assunzioni o fatti basati su un'assunzione

FATTI SENZA ASSUNZIONI

Il functions.php di un tema figlio viene caricato per primo, poi il functions.php del genitore. Questo garantisce che il foglio di stile principale del tema genitore venga caricato prima del foglio di stile principale del tema figlio, come indicato nel codice aggiornato nel codex
Diamo un'occhiata al tema incluso, twentytwelve. La magia avviene qui wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );. Questo è il modo in cui viene incluso il foglio di stile principale. Quando il tema è attivo come genitore, style.css verrà caricato dal tema genitore poiché get_stylesheet_uri() punterà allo style.css della directory genitore.
Quando passi a un tema figlio, get_stylesheet_uri() "cambia" il suo percorso per puntare allo style.css del tema figlio, il che significa che ora wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() ); invece di caricare lo style.css del genitore, carica lo style.css del figlio
Tutti gli altri stili del tema genitore vengono caricati normalmente nell'ordine in cui sono scritti

TRABOCCHETTI

Stili inline e fogli di stile aggiunti direttamente al tuo template header.php. Ho fatto alcuni test su questo problema. Se il foglio di stile del genitore non viene incluso usando wp_enqueue_scripts e viene caricato direttamente nell'header, allora il foglio di stile principale del tema figlio viene caricato per primo. Come soluzione alternativa, in passato ho consigliato di copiare l'header.php del genitore nel tema figlio e rimuovere quelle chiamate. Dovrai poi includere sia gli stili del tema genitore che del figlio e qualsiasi altro foglio di stile caricato direttamente nell'header.php come descritto nell'OP funzione deprecata
Mi è capitato una o due volte che stili (e script) venissero caricati direttamente nell'header, e a causa di ciò la chiamata a wp_head venisse omessa. Questo farà fallire silenziosamente l'azione di enqueue, quindi i tuoi stili semplicemente non appariranno.
Priorità impostate male. Non è necessario impostare priorità nelle azioni del genitore o del figlio quando agganci le tue funzioni di enqueue. Quando entrambi hanno la stessa priorità predefinita, si applica la regola "first come, first served". Questo garantirà che l'ordine di caricamento sia corretto

NOTA PER GLI AUTORI DI TEMI GENITORE

Il metodo corretto e accettato per aggiungere stili e script a un tema è attraverso l'hook wp_enqueue_scripts. Mai aggiungere stili e script direttamente nel template header, e non impostare alcuna priorità nella tua azione quando agganci la tua funzione

Carica sempre il foglio di stile principale come segue:

wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

Questo garantirà che il foglio di stile principale del figlio venga caricato quando è in uso un tema figlio

LA TUA RESPONSABILITÀ COME AUTORE DI TEMI FIGLIO

Prenditi il tempo per esaminare il tema genitore. Conosci il tuo tema genitore, assicurati di avere familiarità con le strutture del tema e con come vengono utilizzate funzioni e hook nel tema. Non puoi creare un tema figlio di successo se non conosci a fondo il funzionamento del tema genitore. È tua responsabilità assicurarti che stili e script vengano caricati correttamente affinché il tuo codice funzioni come previsto.
Segnala sempre all'autore del tema genitore qualsiasi codice con cui non sei soddisfatto. Ad esempio, se l'autore ha aggiunto i suoi stili direttamente nell'header, segnalaglielo e fagli presente che questo è il modo sbagliato di procedere, chiedendogli di correggerlo in una versione futura

DOMANDA 2

Rimuovere la priorità potrebbe potenzialmente creare più confusione per parte della comunità WordPress, quando gli stili del tema figlio iniziano a essere sovrascritti da un plugin. Ci aspettiamo che i temi sovrascrivano gli stili, ma non così tanto i plugin

Purtroppo non esiste un metodo diretto per proteggersi da questo. Il fatto è che gli stili dei plugin non dovrebbero mai sovrascrivere gli stili predefiniti del tema senza il consenso dell'utente finale. Secondo me, questa è solo una cattiva pratica o negligenza da parte dell'autore del plugin. Suggerirei che in un caso del genere, contattare l'autore del plugin e informarlo

Hai anche sempre l'opzione di dequeue e deregistrare uno stile (e script) di cui non hai bisogno, o per cui devi cambiare la priorità e poi ri-enqueuearli e re-registrarli come nel tuo codice sopra (che va benissimo). Solo una nota sul tuo shivm, è buona pratica fare sia dequeue che deregister per stili e script.

DOMANDA 3

Quando si utilizza un foglio di stile personalizzato per gli stili effettivi del tema figlio (invece di inserirli nel predefinito style.css), diventa necessario includerlo manualmente. In termini di mantenere la continuità tra una vasta gamma di sviluppatori, non avrebbe senso incoraggiare l'inclusione manuale del foglio di stile del figlio indipendentemente dal possibile duplicato?

Non credo ci sia una risposta diretta bianco o nero a questo problema. Risponderei dicendo: fai ciò con cui ti trovi a tuo agio, purché sia all'interno di una certa linea guida che governa l'azione.

I fogli di stile non servono ad aggiungere funzionalità, ma a migliorare l'esperienza visiva dell'utente. Gli stili vengono anche inviati così come sono al browser dove vengono elaborati. WordPress non ha alcun ruolo in questo.

Basandoci su questo fatto, non vedo davvero bandiere rosse minacciose nel caricare un foglio di stile due volte. Questo potrebbe costare qualche millisecondo in termini di prestazioni però. Ad essere onesti, a parte questo, non sono sicuro di come i duplicati vengano gestiti tra diversi browser. Questo è qualcosa che tu come lettore puoi andare a testare

IMHO, i duplicati non sono mai buoni e dovrebbero sempre essere evitati. Suggerirei che se vuoi davvero includere manualmente il foglio di stile principale del figlio per qualsiasi motivo, dovresti usare il tuo codice nel tuo shivm. Dequeuea e deregistra il duplicato aggiunto di default e poi re-includi il foglio di stile normalmente.

Solo una cosa da ricordare, le funzioni enqueue e register hanno un parametro $dependancy che puoi usare. Quindi è facile caricare un foglio di stile secondario rendendolo dipendente dal foglio di stile principale del tuo tema figlio

IN CONCLUSIONE

Dall'ultimo aggiornamento del codex, il feedback è stato fantastico e vorrei ringraziare tutti per i commenti su questo argomento. Vorrei incoraggiare tutti a partecipare con qualsiasi tipo di feedback su questa domanda in particolare. Se hai qualcosa da aggiungere o commentare, per favore fallo.