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

HTML5: l’importanza del metatag viewport per migliorare la visualizzazione mobile

viewportCosa è il viewport? Si tratta dell’area visibile all’utente di una pagina web. Ovviamente le dimensioni del “viewport” saranno differenti a seconda che si utilizzi uno schermo di un desktop o quello di un tablet o di uno smartphone.

Se non impostiamo il metatag “viewport” (vedremo in seguito come…) il nostro smartphone cercherà di adattare alle dimensioni del suo schermo (320px in posizione verticale per gli smartphone) la pagina caricata che, per naturale eredità è normalizzata per una risoluzione media di uno schermo a 980px di larghezza. Tutto questo per mantenere l’aspetto originale.

Il problema è che la pagina, così scalata, risulta illeggibile!

Leggi tuttoHTML5: l’importanza del metatag viewport per migliorare la visualizzazione mobile

Plesk e QMail: come monitorare la coda dei messaggi

Loghi Plesk e QMail, icona coda messaggi

Loghi Plesk e QMail, icona coda messaggi Monitorare la coda dei messaggi di posta elettronica è sempre un task importante per chi gestisce un server. Basta che venga trafugata una password di qualche utente o che il pc di qualche utente sia affetto da malware che il nostro server comincia a produrre un’infinità di messaggi di spam. Questa situazione è assolutamente da evitare perché, a parte i problemi derivanti dall’effetto “tappo” dato dalla massa dei messaggi in uscita e il conseguente sovraccarico in termini di CPU e di memoria, c’è la severa possibilità che l’indirizzo IP del server venga presto inserito nelle blacklist.
Nel caso il nostro server venga gestito tramite Plesk e il servizio di posta elettronica sia basato su QMail (caso piuttosto diffuso) possiamo utilizzare direttamente il pannello di controllo di Plesk per monitorare ed eventualmente per cancellare i messaggi che stanno affollando pericolosamente la coda. E’ utile, prima di cancellare i messaggi sospetti, analizzare gli header degli stessi per capire da quale account stanno partendo.

Leggi tuttoPlesk e QMail: come monitorare la coda dei messaggi

Come spostare un div con jQuery per rendere un layout responsive

movediv Il problema si pone quando abbiamo a che fare con un layout composto da un div contenitore nel quale ci sono due div disposti in colonne affiancate: la prima colonna a sinistra (il div rosso nella foto accanto) è una sidebar di dimensioni p.e. del 30% e la seconda colonna a destra (che flotta a sinistra), è il contenitore del testo principale (il div verde).

Leggi tuttoCome spostare un div con jQuery per rendere un layout responsive