WordPress: cosa è un tema figlio (child theme) e perché utilizzarlo

di Mario Spada

WordPress è in assoluto il più diffuso CMS al mondo e detiene il 40% delle installazioni sui siti web che utilizzano piattaforme CMS (cfr: http://trends.builtwith.com/cms).

Anche per questo è disponibile sul Web una scelta di temi sia commerciali che open source veramente vasta. L’utilizzo di temi già preimpostati con la più svariata tipologia di layout grafico e strutturale, semplifica in modo sostanzioso il lavoro delle Web Agency. Quasi sempre però, una volta scelto il tema, è necessario intervenire sia sul CSS (il foglio stile) che sui template (i modelli strutturali) per adattarli alle proprie esigenze del progetto del sito web.

Per questa esigenza WordPress ci viene incontro mettendoci a disposizione i Child Themes (temi figlio) che ereditano dal Parent Theme (tema genitore) tutte le caratteristiche del modello scelto, permettendo però di sovrascriverle senza doverle modificare. Questo gioca un ruolo determinante nella riduzione dei tempi di sviluppo, e non è poco, visto che ormai per rimanere con i prezzi nel mercato, è necessario abbassare drasticamente i costi di sviluppo.

Quale è il vantaggio? Sta nel fatto che in informatica, la manutenzione del codice gioca un ruolo determinante nella sicurezza e nella sopravvivenza stessa dell’applicazione e se il tema scelto è stato prodotto da sviluppatori seri, verranno costantemente rilasciate nel tempo versioni aggiornate. Ora se noi abbiamo modificato direttamente il codice del nostro tema, non sarà possibile applicare gli aggiornamenti senza sovrascrivere e dunque perdere, le nostre modifiche. Se abbiamo invece derivato un tema figlio, sarà possibile aggiornare senza preoccupazioni il tema padre e mantenere quindi sicuro ed affidabile tutto il nostro lavoro.

Come creare un tema figlio di WordPress:

Il primo passo è di creare una directory nella cartella dei temi con il nome del nostro tema figlio, per esempio (utilizziamo come tema genitore “twentythirteen” che arriva già incluso nel pacchetto di WordPress):

wp-content
|
---themes
     |
     --- twentythirteen
     |
     --- twentythirteen-child

Creiamo dunque la cartella “twentythirteen-child” (N.B.: deve esistere la cartella del tema padre: “twentythirteen” con tutto il suo contenuto originale.)

Il secondo e fondamentale passo è quello di inserire nella cartella appena creata “twentythirteen-child” un file style.css con la seguente struttura di righe iniziali:


/*
Theme Name: Twenty Thirteen Child
Theme URI: http://example.com/
Description: Tema Child per il tema Twenty Thirteen
Author: Qui il vostro nome
Author URI: http://example.com/about/
Template: twentythirteen
Version: 0.1.0
*/

Questo è il solo file obbligatorio per far funzionare un tema figlio e le righe obbligatorie che determinano il funzionamento di un tema figlio sono: Theme Name e Template.

Adesso il nostro tema figlio è già funzionante ma non ha alcun foglio stile, se vogliamo ereditare quello del padre (consigliabile se non lo si vuole riscrivere interamente…) abbiamo due strade:

  1. Si importa direttamente il foglio stile del padre con @import all’interno del CSS del figlio (sconsigliato)
  2. Si aggiunge del codice nel file functions.php del tema figlio (consigliato!)

Ora è necessario spiegare che mentre il file “style.css” del nostro tema figlio sovrascrive quello del padre, il codice scritto nel file “functions.php” creato nella cartella del tema figlio viene aggiunto a quello del tema padre.

La soluzione 1 è più semplice perché non ci obbliga a creare un nuovo file “functions.php” all’interno del nostro tema figlio, ma è sconsigliato per motivi di prestazioni. Come spiegato in questo articolo, il parsing dei fogli stile eseguito dai browser sarebbe estremamente più lento.

La soluzione 2 richiede che vengano inserite le seguenti righe di codice nel file “functions.php” che deve essere creato ex-novo nella cartella del nostro tema figlio:


add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 0 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

In pratica facciamo caricare separatamente il foglio stile del padre direttamente da WordPress nell’head delle pagine e il CSS del figlio verrà caricato sempre per ultimo.

Infine una nota sull’utilizzo nel tema figlio dei riferimenti al percorso dei file:

Mentre normalmente nei temi viene utilizzata la funzione: get_template_directory_uri() per ottenere il percorso relativo dei file presenti nel tema, nel caso dei temi figli è necessario utilizzare: get_stylesheet_directory() che restituisce il percorso del foglio stile del tema figlio e dunque anche dei file presenti in questa cartella.

Sul sito del Codex di WordPress (da dove ho reperito gran parte di queste informazioni) c’è anche la spiegazione di come impostare l’internazionalizzazione (i18n) per le traduzioni dei file eventualmente presenti nei temi figli: https://codex.wordpress.org/it:Temi_Child#Internazionalizzazione

Riferimenti:

Utilizzare Bootstrap Studio per realizzare template WordPress

Oggi il mercato nel mondo del Web richiede che vengano realizzati template grafici accattivanti in tempi brevissimi, perché la disponibilità dei clienti ad investire grossi budget è sempre più limitata e la competizione con le grandi aziende che offrono soluzioni automatizzate “fai da te” incide in maniera determinante.

Normalmente le Web Agency acquistano template già pronti, adattandoli alle richieste del cliente, esistono centinaia di siti specializzati che offrono template moderni e completamente personalizzabili a prezzi abbordabili, fra i $40 e gli $80.

La domanda che mi sono fatto è: “esiste uno strumento economico per realizzare velocemente template unici per WordPress senza ricorrere all’acquisto di software preconfezionato?

Per verificare questa ipotesi, mi sono avvalso della collaborazione di una collega: Maria Rumori che ha portato brillantemente a termine un mio corso di Web Design e successivamente ha completato un tirocinio all’interno della Web Agency dove lavoravo.

Durante il tirocino abbiamo pensato di utilizzare un tool appositamente progettato per creare template HTML5 / CSS3 basato su Bootstrap, questo tool si chiama Bootstrap Studio e ha un costo di licenza base di $29 per verificare la possibilità di rispondere alla domanda che mi ero fatto.

Maria ha ideato un design volutamente semplice ma fresco e accattivante realizzandolo interamente con Bootstrap Studio, progettando tutte le pagine standard che devono essere presenti in ogni tema WordPress: Home, single, page, archive, ecc.

Una volta esportato l’HTML e tutti gli asset necessari, mi sono occupato di applicare il codice PHP necessario al funzionamento del tema in WordPress. Per questa operazione ho scelto di utilizzare un tema “naked” che fosse quanto più possibile adattabile ma allo stesso tempo contenesse già quel minimo di struttura per non dover riscrivere da zero le caratteristiche base dei temi WP. Il tema che ho scelto è disponibile su GitHub a questo indirizzo: https://github.com/edouardl/minimal-blank-theme

La trasformazione è stata piuttosto semplice anche se ha richiesto una serie di aggiustamenti che hanno portato via alcuni giorni di lavoro. In definitiva la soluzione adottata è senz’altro valida per progetti piuttosto piccoli, per progetti più complessi suggerisco strumenti più sofisticati come ad esempio: Pinegrow

Ringrazio Maria per la collaborazione e spero che la nuova veste di questo blog piaccia ai lettori!

 

WordPress: come caricare per ultimo il CSS del tema figlio

Wordpress e CSS In WordPress è importante utilizzare i temi figli, cioè dei temi personalizzabili derivati da un tema genitore dal quale ereditano tutte le caratteristiche (layout, CSS, ecc).
L’utilizzo di un tema figlio permette di personalizzare il layout agendo sui template e sul CSS senza modificare in alcun modo il tema genitore.
Il metodo corretto per generare un tema figlio è descritto in questo articolo.

Leggi tuttoWordPress: come caricare per ultimo il CSS del tema figlio

WordPress: uno shortcode per elencare le pagine figlie con titolo, link e miniatura

StagioniIn questo breve articolo vi voglio mostrare come creare uno shortcode utilizzabile sia nel contenuto delle pagine che nell’area widget, per mostrare l’elenco delle pagine figlie di una data pagina, con il titolo, il link e la miniatura dell’immagine in evidenza.

Leggi tuttoWordPress: uno shortcode per elencare le pagine figlie con titolo, link e miniatura

WordPress: un widget per mostrare le miniature di una galleria di foto nella sidebar

Wordpress: un widget per mostrare le miniature di una galleriaQuesto widget è veramente semplicissimo, serve a mostrare in un riquadro le miniature (thumbnails) 64×64 pixel di una qualsiasi galleria di foto (photogallery) nativa di WordPress. L’installazione è immediata, basta includere nel file “functions.php” del tema attivo, il file con il codice che illustrerò qui sotto. Nell’area Aspetto -> widget sarà disponibile il widget: “MS Gallery Thumbs Widget”, è sufficiente trascinarlo nell’area dove lo si desidera posizionare e impostare nell’ordine:

Leggi tuttoWordPress: un widget per mostrare le miniature di una galleria di foto nella sidebar

WordPress: un plugin per caricare video YouTube in modo veloce, leggero e responsive

YouTube video player in WordPress
YouTube video player in WordPress

Elaborando i concetti espressi in questo articolo: “Come inserire un video YouTube in una pagina web in modalità responsive e leggera”  che ho scritto per il Blog della Cooperativa Elzevira, ho pensato che potesse essere utile proporre questa modalità di caricamento dei video di YouTube anche con un plugin per WordPress.

In pratica si tratta di caricare i video di YouTube senza pre-caricare il player, in modo di velocizzare in maniera drastica il caricamento della pagina. Viene caricata solo l’immagine di copertina del video e viene sovrapposto il simbolo “play” del video. Questa operazione si rivela particolarmente utile quando i video nella pagina sono parecchi.

Solo al momento del click sul simbolo “play” viene caricato il player e mostrati eventualmente i controlli e le altre informazioni.

Leggi tuttoWordPress: un plugin per caricare video YouTube in modo veloce, leggero e responsive