Un’elegante ed efficace alternativa alla direttiva CSS @import per i child theme WP

L’utilizzo dei Child Theme è, come abbiamo visto una delle più importanti feature di WordPress che ci consente di estendere a nostro piacimento le funzionalità del tema e il suo aspetto grafico.

A meno di non voler riscrivere daccapo uttte le regole CSS ( ipotesi quanto meno poco probabile) la direttiva da utilizzare è la

        @import url(../parent-theme/style.css);

che carica le direttive CSS del tema padre mantenendone quindi layout, caratteristiche tipografiche etc; tuttavia questa direttiva è piuttosto lenta, vediamo perchè.

Occorrono circa 200 ms ~ per caricare il tema figlio e 250 ms ~ per il tema padre; un browser moderno tuttavia impiega 250 ms per entrambi visto che li carica in parallelo, ma con la direttiva @import questo non è vero. Citando google

Prima che un browser possa mostrare una pagina all’utente, deve analizzarla. Se durante l’analisi il browser rileva uno script esterno non asincrono o di blocco, deve interrompersi e scaricare la risorsa. Tale operazione comporta ogni volta un ulteriore roundtrip di rete, che genera un ritardo nella prima visualizzazione della pagina.

Quindi anzichè i 250 ms previsti occorreranno 450 ms ~ per caricarli entrambi.

Un tipico esempio di file style.css per il tema figlio è:

/**
 * Theme Name: My Child Theme
 * Template: parent-theme
 */
@import url(../parent-theme/style.css);
/* My Child Theme CSS */

possiamo però migliorare le performance delle nostre pagine con l’uso del file functions.php e le action:

// più rapido di  @import
add_action( 'wp_enqueue_scripts', 'includi_css_padre' );
function includi_css_padre() { 
     wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' ); 
} 

In questo modo quindi, con l’utilizzo della funzione wp_enqueue_style() possiamo eliminare la regola @import dal file style.css e non siamo obbligati a dichiarare dipendenze dal tema padre in quanto il file “functions.php” viene caricato prima del tema padre nel suo complesso.
Unica avvertenza:  eventuale uso nel tema padre di  action con priorità inferiore a 10 nel qual caso occorre aggiustare le priorità della add_action. Allora la soluzione ottimale:

// più rapido di  @import
add_action( 'wp_enqueue_scripts', 'includi_css_padre',11 );
function includi_css_padre() { 
     wp_dequeue_style('parent-theme-css', get_template_directory_uri() . '/style.css' );
     wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' ); 
} 

In questo modo garantiamo che le direttive del tema figlio sovrascrivano quelle del tema padre, ma attenzione alle ridondanze eccessive.

Quasi garantito un +1  di PageSpeed