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
|
1 |
@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 è:
|
1 2 3 4 5 6 |
/** * 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:
|
1 2 3 4 5 |
// 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:
|
1 2 3 4 5 6 |
// 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
Leave A Comment