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

Questo post fa apparire alcune domande che ho incontrato relative alle recenti modifiche ai metodi di accodamento dei fogli di stile presentate in questa discussione e in questa discussione .

I problemi che ho riscontrato sono emersi in uno scenario di casi d'uso generale, utilizzando un tema principale ampiamente utilizzato e ben mantenuto che è specificamente tema figlio pronto su un'installazione di WP 4.0. Le funzioni.php di My child theme contengono solo la wp_enqueue_stylefunzione descritta nel Codice .

Si noti che mentre il codice indicato di seguito è specifico di questo tema, gran parte di esso utilizza le convenzioni di codifica correnti utilizzate dai temi principali. Inoltre, le mie aree di interesse sono molto probabilmente duplicabili su un gran numero di temi genitoriali consolidati attualmente in libertà. Inoltre, le domande che sorgono sono applicabili a livello universale, indipendentemente dal tema principale utilizzato.

NUMERO 1: Twoqueueing

L'impostazione consigliata:

Il tema principale è accodare stili e script usando l' wp_enqueue_scriptshook, la parte pertinente è la seguente:

add_action('wp_enqueue_scripts', 'parent_theme_function_name');
function parent_theme_function_name() {
    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 tema Mio figlio functions.phpaccoda gli stili per le recenti modifiche al codice:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
    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 principale, come accodato dalla funzione tema di mio figlio
id='avia-style-css' è il foglio di stile del tema di mio figlio, accodato dalla funzione tema genitore
id='dm-child-style-css' è il foglio di stile del tema di mio figlio, accodato dalla funzione del tema di mio figlio

I risultati:

A prima vista, tutto andava bene, con <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' />
<!-- Multiple individual parent theme styles here -->
<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 aver installato un plugin, l'ordine di accodamento ora è 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' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->

Alla fine, ho bisogno di caricare i CSS del mio tema figlio dopo qualsiasi plugin, quindi sono stato costretto ad aggiungere un numero di priorità alla funzione nel tema di mio figlio (vedi la discussione precedente relativa al numero di priorità) .

Poiché la mia funzione accoda solo i CSS del tema principale, il risultato è che ora il CSS del tema principale viene spostato alla fine, lasciando i CSS del mio tema figlio in una situazione ancora peggiore di prima.

<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<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 ad accodare anche il mio stile di tema del mio bambino, per assicurarmi che venga spostato indietro nella parte anteriore della linea, causando il suddetto problema di duequeueing (nuovo termine? Lol) il tema del bambino css.

L'installazione obsoleta:

Funzione rivista in tema figlio:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
    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>:

<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<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 l'inclusione del foglio di stile figlio nella mia funzione ha provocato l' accodamento di due volte, IMHO è preferibile rispetto alla codifica presupponendo che il tema genitore accluda correttamente il nostro foglio di stile figlio per noi. Sulla base dell'ID assegnato a ogni stile accodato, sembra che il tema genitore lo accoda, non nulla in WP Core.

My Shivm:

Sebbene difficilmente suggerirei che questo sia il mezzo raccomandato (e sono sicuro che gli sviluppatori con più esperienza di codifica di me stesso gemeranno a questa soluzione), ho dequementato l'ID del tema del genitore (usato per accodare lo stile del tema del mio bambino) proprio sopra il mio accenno nel file delle funzioni di mio figlio come mostrato:

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

I risultati:

Ciò ha risolto i problemi in questione, risultando in:

<!-- Multiple individual parent theme styles here -->
<!-- Plugin styles -->
<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, ciò richiedeva la conoscenza dell'ID utilizzato dal tema principale: sarebbe necessario qualcosa di più generico da utilizzare come metodologia di sviluppo del tema figlio standard.

PROBLEMA 2: fogli di stile figlio trasferiti

(Sembra difficile credere che questo non sia emerso in un altro thread, anche se non ho visto quelli specifici quando guardavo ... se l'ho perso, sentiti libero di portarlo alla mia attenzione.)

Non uso mai il valore predefinito style.cssnella directory principale del tema figlio per i miei stili di tema - ovviamente deve essere presente, ma tutti i miei stili effettivi vengono compilati da SCSS come file .css minimizzato in una directory / css /. Anche se mi rendo conto che questa non è "la norma prevista" a livello universale per lo sviluppo di temi per bambini, gli sviluppatori di WordPress più seri che conosco fanno qualcosa di simile. Questo, ovviamente, richiede l'accodamento manuale di quel foglio di stile nella mia funzione, indipendentemente dal fatto che il tema genitore lo abbia accodato o meno.

Per riassumere tutto ...

È sicuro includere il presupposto che i temi dei genitori racchiudano correttamente gli stili dei temi dei bambini, dal punto di vista degli standard dei temi dei bambini?
La rimozione della priorità potrebbe potenzialmente creare più confusione per parte della comunità di WordPress, quando gli stili di tema figlio iniziano a essere sovrascritti da un plugin. Ci aspettiamo che i temi sovrascrivano gli stili, ma non così tanto con i plugin.
Quando si utilizza un foglio di stile personalizzato per gli stili di tema figlio reali (come si suppone di inserirli nel predefinito style.css), 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 figlio indipendentemente dal possibile duplicato?

— dMcClintock
fonte

Sono sicuro che c'è un dibattito su come strutturare la relazione bambino-genitore-tema. Non penso che sia sicuro assumere qualcosa sul tema genitore. Personalmente preferisco caricare manualmente gli stili in un tema figlio. Ma quelle sono le decisioni che devi prendere sulla natura del tema del bambino e comunicarlo chiaramente. Se i temi figlio sono solo per semplici modifiche visive, probabilmente il genitore che carica il foglio di stile del bambino sta bene. Ma se il tema principale è un framework, allora andrei verso il tema secondario caricando i fogli di stile.

— Seamus Leahy,

DOMANDA 1

È sicuro includere il presupposto che i temi dei genitori racchiudano correttamente gli stili dei temi dei bambini, dal punto di vista degli standard dei temi dei bambini?

Regola generale, sì. Ma non dovresti mai supporre . La maggior parte delle catastrofi e dei fallimenti nella vita sono dovuti a ipotesi o fatti basati su un'ipotesi

FATTI SENZA ASSUNZIONI

Prima viene caricata la funzione.php di un tema figlio, quindi la funzione.php del genitore. Ciò garantisce che il foglio di stile principale del tema padre sia caricato prima del foglio di stile principale del tema figlio dal codice aggiornato nel codice
Vediamo il tema in bundle, dodici. La magia accade qui wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );. Ecco come viene accodato il foglio di stile principale. Quando il tema è attivo come tema principale, style.css verrà caricato dal tema principale come get_stylesheet_uri()verrà indirizzato alla directory principale style.css.
Quando si passa a un tema figlio, get_stylesheet_uri()"cambia" il suo percorso in modo che punti allo stile.css del tema figlio, il che significa ora che invece che wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );carica il style.css padre, ora carica lo style.css figlio
Tutti gli altri stili del tema principale vengono caricati come di consueto nell'ordine in cui sono stati scritti

BUCHE

Stili e fogli di stile incorporati che vengono aggiunti direttamente al modello di intestazione. Ho fatto alcuni test su questo problema. Se il foglio di stile principale non viene accodato utilizzando wp_enqueue_scriptse caricato direttamente nell'intestazione, viene caricato prima il foglio di stile principale del tema figlio. Per ovviare a questo problema, in precedenza ho consigliato di copiare il header.php del genitore sul tema figlio e di rimuovere quelle chiamate. Dovrai quindi accodare sia gli stili del tema padre e figlio e tutti gli altri fogli di stile che sono stati caricati direttamente in header.php come descritto nella funzione deprezzata OP
Mi sono imbattuto in questo caso una o due volte in cui gli stili (e gli script) sono caricati direttamente nell'intestazione, e per questo motivo la chiamata a wp_headviene omessa. Questo ti farà fallire silenziosamente l'azione di accodamento, quindi i tuoi stili semplicemente non verranno mostrati.
Priorità sbagliate impostate. Non è necessario impostare le priorità delle azioni padre e figlio quando si agganciano le funzioni di accodamento. Quando entrambi hanno la stessa priorità predefinita, si applica la regola di primo arrivato, primo servito. Ciò garantirà che l'ordine di caricamento sia corretto

NOTA PER GLI AUTORI A TEMA DEI GENITORI

Il metodo accettato corretto per aggiungere stili e script a un tema è tramite il wp_enqueue_scriptsgancio di azione. Non aggiungere mai stili e script direttamente nel modello di intestazione e non impostare alcuna priorità nell'azione quando si aggancia la funzione

Carica sempre anche il foglio di stile principale come segue:

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

Ciò assicurerà che il foglio di stile principale del bambino sia caricato quando è in uso un tema figlio

LA TUA RESPONSABILITÀ COME AUTORE A TEMA PER BAMBINI

Prenditi il tuo tempo e lavora attraverso il tema principale. Conosci il tema del tuo genitore, assicurati di sentirti a tuo agio con le strutture del tema e come vengono utilizzate funzioni e hook nel tema. Non è possibile creare un tema figlio di successo se non si ha una conoscenza interna di come funziona il tema principale. È tua responsabilità assicurarti che gli stili e gli script siano caricati correttamente affinché il tuo codice funzioni come previsto.
Rendi sempre avvisato l'autore del tema genitore di qualsiasi codice di cui non sei soddisfatto. Ad esempio, se l'autore ha aggiunto i suoi stili direttamente all'intestazione, avvisalo e informalo che questo è il modo sbagliato di farlo e chiedigli di correggerlo in una versione futura

DOMANDA 2

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

Sfortunatamente non esiste un metodo diretto per safegaurd contro questo. Il punto di fatto qui è che gli stili di plugin non dovrebbero mai sovrascrivere stili di temi predefiniti senza il consenso dell'utente finale. Secondo me, questa è solo una cattiva pratica o negligenza dell'autore del plugin. Suggerirei che, in un caso come questo, contatta l'autore del plugin e avvisalo

Hai sempre anche la possibilità di dequeue e annullare la registrazione di uno stile (e script) di cui non hai bisogno, o di cui hai bisogno per cambiare la priorità di e riqualificare e ri-registrarli come nel tuo codice sopra (che è perfettamente bene). Solo una nota sul tuo shivm , è buona norma dequeue e annullare la registrazione di uno stile e di una sceneggiatura.

DOMANDA 3

Quando si utilizza un foglio di stile personalizzato per gli stili di temi figlio effettivi (come si suppone che li inserisca in 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 figlio indipendentemente dal possibile duplicato?

Non credo che ci sia una risposta in bianco e nero diretta a questo problema. Risponderei dicendo: fai quello che ti fa sentire a condizione che rientri in una determinata linea guida che regola l'azione.

I fogli di stile non sono lì per aggiungere funzionalità, ma sono lì per aggiungere esperienza visiva all'utente. Gli stili vengono anche inviati direttamente così come sono al browser dove vengono elaborati. Wordpress non svolge alcun ruolo qui.

Sulla base di questo fatto, non vedo davvero alcuna minaccia di bandiere rosse nel caricamento di un foglio di stile due volte. Questo potrebbe costare qualche millisecondo in termini di prestazioni. Ad essere onesti, a parte questo, non sono davvero sicuro di come vengano gestiti i duplicati su diversi browser. Questo è qualcosa che tu come lettore puoi provare e provare

IMHO, i duplicati non sono mai buoni e dovrebbero sempre essere evitati. Vorrei suggerire che se vuoi davvero accodare manualmente il foglio di stile principale del bambino per qualsiasi motivo, dovresti usare il tuo codice nel tuo shivm . Dequeue e annulla la registrazione del duplicato aggiunto per impostazione predefinita e quindi rielaborando il foglio di stile normalmente.

Solo una cosa da ricordare, le funzioni accodamento e registrazione hanno un $dependancyparametro che puoi anche usare. Quindi è facile caricare un foglio di stile secondario e renderlo dipendente dal foglio di stile principale del tema figlio

IN CONCLUSIONE

Dal recente aggiornamento del codice, il feedback è stato sorprendente e vorrei ringraziare il feedback di tutti su questo. Vorrei incoraggiare tutti a partecipare a qualsiasi tipo di feedback su questa domanda in particolare. Se hai qualcosa da aggiungere o commentare, per favore fallo.

— Pieter Goosen
fonte

Pieter, grazie per la tua risposta approfondita. Sono stato sommerso oggi, ma ho alcuni pensieri basati su quello che hai detto che spero di aggiungere più tardi questa sera.

— dMcClintock,

Per favore fallo. Mi piacerebbe davvero sentire altri pensieri su questo. La mia risposta è la mia opinione basata sul mio test, quindi sicuramente non è l'alfa e l'omega. In attesa di una tua intuizione :-)

— Pieter Goosen,