Menu

af1.it

Scrivo sul mio blog

  | 

Child themes di WordPress per personalizzare il tema

7 minuti
aggiornato il
Le istruzioni basilari del foglio di stile per il child theme di WordPress: grazie al child theme si possono portare modifiche al tema in uso in modo da non perderle quando vengono eseguiti gli aggiornamenti del CMS e del tema

Le istruzioni basilari del foglio di stile per il child theme di WordPress

Il Child theme di WordPress è una directory aggiuntiva (da creare), che contiene i files necessari a mantenere la personalizzazione (data dall'utente) al tema principale utilizzato, anche quando si esegue il periodico update del tema stesso. In caso contrario, se si è eseguita una personalizzazione anche minima del tema utilizzato (colore link, sfondo, etc.) questa verrà perduta ogni qualvolta si esegue il periodico update del tema utilizzato in quanto i vecchi file verrebbero sovrascritti da quelli più recenti.

Utilità del Child Theme di WordPress

Quando si va ad installare un tema di WordPress, molto spesso si ha l'esigenza, o solo il desiderio, di personalizzare il tema stesso con colori, logo, diciture, etc. diversi dal predefinito (default). Nonostante la miriade di temi, plugin, widget a disposizione (e tutto gratuitamente), tutti di qualità, controllati e curati nel dettaglio anche dal punto di vista grafico, soprattutto per chi ha un po' di dimestichezza con la programmazione modificare qualcosa è quasi scontato.

Nessun problema, questo è uno dei vantaggi di un CMS (Content Management System), nella fattispecie di WordPress. La cosa importante, per evitare che al primo aggiornamento le modifiche di personalizzazione vengano perse, è utile creare un Child theme, ovvero una directory figlia della directory genitore (Parent theme).

Avere un directory Child Theme permette inoltre di sapere con precisione quali modifiche abbiamo portato, cosa che torna molto utile se il codice implementato è abbondante, senza andare a correggere, a ritoccare i file originali del tema.

Dal momento che per quanto riguarda la sicurezza è bene sempre aggiornare WordPress, sia per quanto riguarda la versione di WP che quella del tema, ogni volta che sono disponibili versioni di aggiornamento, entrati in area riservata viene immediatamente notificato; potremo procedere senza preoccupazione alcuna ad aggiornare la versione del tema in quanto le modifiche apportate in precedenza saranno salvate (e non sovrascritte) nella directory Child Theme che avremo creato.

Esempio: ipotizziamo che il tema utilizzato sia Twenty Twelve, e si desidera apportare modifiche al file style.css per modificare lo stile grafico secondo le nostre esigenze.

Un nuovo file style.css per il Child Theme di WordPress

Si crea una directory denominata: twentytwelve-child e si esegue l'upload in wp-content > themes. Ovvero nella directory dei temi.

Nulla vieta di chiamare come si desidera la nuova directory, tuttavia per non fare confusioni inutili, impedendo magari anche il corretto funzionamento del CMS, è più logico aggiungere semplicemente Child (figlio) al nome della Parent directory (genitore), che in questo esempio ricordiamo ancora è twentytwelve, quindi twentytwelve-child il nome della directory che contiene i file con cui personalizzare il tema.

Il file style.css è l'unico file che serve se si desidera modificare stile e colori del tema, l'unico file che occorre per creare il Child theme, gli altri sono opzionali secondo le diverse necessità. Si crea quindi un nuovo file chiamato style.css e si inseriscono queste righe di codice all'inizio:


/*
Theme Name: Twenty Twelve Child
Theme URI: http://example.com/
Description: Child theme for Twenty Twelve
Author: Il tuo nome
Author URI: http://example.com/about/
Template: twentytwelve
Version: 0.1.0
*/

Queste righe permettono a WordPress di interpretare le istruzioni, dove:

Theme Name, la prima riga stabilisce che la directory in cui è contenuto il file è figlia di Twenty Twelve, e quindi prende il nome di Twenty Twelve Child;

Theme URI, l'url del sito;

Description, descrive che questo tema (sebbene contenga anche il solo file style.css) è figlio del tema Parent (Twenty Twelve);

Author, il nome dell'autore con cui verrà identificato il tema in area di amministrazione di WordPress;

Author URI, l'url della eventuale pagina di presentazione dell'autore (se presente);

Template, il nome del tema Parent, il nome esatto della directory (attenzione a maiuscole e minuscole);

Version, la versione del tema Parent.

Theme Name e Template sono righe di codice indispensabili in quanto identificano il nome del tema Parent e quello della rispettiva directory.

Altra riga di codice che non può mancare è la seguente:


@import url("../twentytwelve/style.css");

Ancora ricordiamo che il tema oggetto in questo esempio è Twenty Twelve, quindi se si utilizza un tema diverso nella riga sopra occorre sostituire il nome della directory (twentytwelve) con quello in uso (esempio: nome_directory_tema).

La riga sopra istruisce il nuovo file style.css creato, di adottare tutti i criteri di stile dall'altro file omonimo che si trova nella Parent directory. Il file style.css che andrà inserito nella Child directory sostituirà quello della Parent directory; ecco perché con questa riga di codice diamo istruzione di adottare lo stile presente nel file style.css presente nella Parent directory.

Questo codice va inserito prima di qualsiasi modifica di stile che si intende apportare, in caso contrario non funzionerebbe perché viene interpretato in maniera sequenziale.

Quindi nel nuovo file style.css all'inizio si avranno queste righe di codice:


/*
Theme Name: Twenty Twelve Child
Theme URI: http://example.com/
Description: Child theme for Twenty Twelve
Author: Il tuo nome
Author URI: http://example.com/about/
Template: twentytwelve
Version: 0.1.1
*/

@import url("../twentytwelve/style.css");

Si esegue l'upload di twentytwelve-child in wp-content > themes (sempre per l'esempio in questione), ovvero si carica nella Child Theme il nuovo file style.css, poi in area di amministrazione:

WordPress Bacheca > Aspetto > Temi > Il tuo nome (il nome assegnato ad Author) e si attiva il tema.

Da questo momento sarà il nuovo file appena creato a comandare lo stile grafico del sito, e tutte le relative modifiche che si desidera eseguire le si scriveranno in questo file, ricordiamo di avere sempre copia di ogni file in locale (sul dispositivo in uso).

Aggiungendo il codice appropriato al file style.css si potrà modificare lo stile del template per quanto riguarda tutto ciò che è relativo al css.

Modificare il tema utilizzato con il Child Theme

A questo punto, creata la directory Child Theme con il nuovo file che impone lo stile css (Cascade Style Sheet), si possono inserire altri file modificati che andranno a sostituire, a sovrascrivere, quelli della Parent directory.

Se si desidera modificare l'intestazione del CMS modificando il file header.php altro non si fa che creare un nuovo file header.php (i file originali lasciamoli tali e quali e conserviamo sempre una copia di backup) dove si interviene con le modifiche desiderate per personalizzare il proprio sito, o blog.

Ogni file che si andrà ad inserire nella Child directory di fatto avrà la precedenza su quello omonimo contenuto nella Parent directory. Fatta eccezione per il file functions.php di sui tratteremo dopo.

Se si desidera aggiungere codice ad un determinato file già esistente nella Parent directory, è possibile crearne uno nuovo omonimo con la funzione di php include, a cui poi si aggiunge quanto si desidera, evitando di copiare tutto il codice.

Chi è più esperto può creare nuovi file che non esistono di default nella Parent directory e aggiungere funzioni per personalizzare il proprio CMS.

Il file functions.php è l'unico file che non viene sovrascritto se presente anche nella Child directory, per impostazione di WordPress viene tenuto in considerazione per primo quello presente nella Parent directory.

Quindi, se si intende aggiungere una o più nuove funzioni, è comunque possibile creare un nuovo file (vuoto) functions.php da inserire nella Child directory, e aggiungere le funzioni che si desidera, evitando di copiare tutto il codice presente nell'omonimo file della Parent directory.

Questa è la pagina di WordPress dove viene spiegato nel dettaglio, tutto e di più, riguardo al Child Theme Child Themes « WordPress Codex, inclusi altri link a specifiche pagine dove sono illustrate tutta una serie di funzioni anche per gli sviluppatori.

 

                 

 

Felice Amadeo: autore di af1.it

af1.it è mantenuto dalla mia passione.
Se vuoi sostenere af1.it dai il tuo contributo.
PayPal.me af1it

Se qualche articolo ti è piaciuto e vuoi dare un contributo, ti ringrazio.

Tanti anni fa, quando c'erano ancora le lire, un bravo artista di strada, terminata la sua esibizione di giocoliere disse alla folla intorno: se il mio spettacolo vi è piaciuto, dimostratemelo, se non vi è piaciuto scrivetelo su “un deca…”

(un deca, le vecchie 10.000 lire…)
So smile & stay in touch !!!

 

 

af1.it usa cookie tecnici anche di terzi per le statistiche visite e per annunci pubblicitari.
Per sapere come negare il consenso leggi l'informativa estesa.
Cliccando su Va bene, scorrendo la pagina o continuando la navigazione acconsenti all'uso dei cookie.
Leggi informativa estesa

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi