Ciao!

Temi child WordPress: cosa sono, cosa servono e come crearne uno in 5 minuti

Che cos’è un tema child WordPress?

Child significa “bambino” o “figlio” nella lingua inglese. Un tema Child di WordPress è un tema che ingloba tutte le funzionalità, tutti gli stili CSS e tutte le pagine .php di un tema principale di WordPress chiamato “parent“ (il tema genitore).

ESEMPIO: Utilizzando tutte le funzionalità, gli stili e i file .php, del tema principale di WordPress Twenty Fifteen, possiamo andare a creare il tema child con il nome Twenty Fifteen Child.

Cosa server un tema Child di WordPress?

Un tema child per WordPress consente di eliminare, modificare e aggiungere funzionalità ad un tema parent principale senza dover intaccare nessun file dello stesso. L’utilizzo di un tema child è altamente consigliata per preservare tutte le nostre personalizzazioni del tema originale mantenendo in alterata la possibilità di effettuare aggiornamenti del tema parent. Gli aggiornamenti dei temi, soprattutto quelli a pagamento, sono molto importanti principalmente per tre aspetti:

  • aggiornano il sistema di sicurezza del template usato
  • correggono eventuali bug del tema
  • aggiungono e/o modificano funzionalità del tema

Come si crea un tema Child di WordPress?

I passaggi per creare un tema Child di WordPress sono molti semplici e richiedono pochissimi minuti di tempo. Andiamo a vedere nel dettaglio tutte le operazioni da eseguire per creare un tema Child:

  • Step 1 – Guardiamo i temi principali installati nella nostra versione di WordPress che è la numero 4.4.2. in italiano. Seguiamo il percorso wp-content/themes

themes-wordpress-child

  • Step 2 – Scegliamo come tema parent il tema twentyfifteen
  • Step 3 – Andiamo a creare un cartella all’interno del percorso wp-content/themes una cartella con il nome twentyfifteen_child

themes-wordpress-child-2

  • Step 4 – L’unico requisito fondamentale per un tema Child è il foglio di stile style.css. Inseriamo nella directory appena creata un foglio di stile

themes-wordpress-child-3

  • Step 5 – Apriamo il nostro foglio di stile con qualsiasi editor html e nell’intestazione del file incolliamo questo codice:

/*
Theme Name: Twenty Eleven Theme Child
Theme URI: https://www.matteopancani.it
Description: Il mio primo tema child!
Author: Matteo Pancani
Author URI: https://www.matteopancani.it
Template: twentyfifteen
Version: 1.0

General comments/License

*/

Spiegazione codice style.css:

Riga 1 – Nome del nostro tema Child (figlio)
Riga 2- URL del sito
Riga 3 – Descrizione del tema Child
Riga 4 – Nome dell’autore del tema Child
Riga 5 – URL del sito dell’autore del tema Child
Riga 6 – Nome del tema parent (padre)
Riga 7 – Versione del tema Child

 

  • Step 6 – Aggiungiamo la prima riga di codice nel nostro foglio di stile appena creato. Apriamo il foglio di stile e sotto a */ inseriamo questo: @import url(../twentyfifteen/style.css);. Risultato del nostro foglio di stile:

/*
Theme Name: Twenty Eleven Theme Child
Theme URI: https://www.matteopancani.it
Description: Il mio primo tema child!
Author: Matteo Pancani
Author URI: https://www.matteopancani.it
Template: twentyfifteen
Version: 1.0

General comments/License

*/

@import url(../twentyfifteen/style.css);

 

Con questa operazione abbiamo importato il foglio di stile del tema parent twentyfifteen nel nostro foglio di stile all’interno della cartella twentyfifteen_child del nostro tema figlio.

Tutto ciò che hai inserito nel tuo foglio di stile “figlio” sovrascrive gli stili del tema principale. Vuoi cambiare il tipo di carattere del menu, il colore dei link, ecc? Nessun problema. Ora è possibile farlo facilmente nel tema figlio senza la preoccupazione che venga sovrascritto da un aggiornamento al tema principale. A questo punto avete un tema “child” di lavoro che può essere attivato nel menu di amministrazione di WordPress.

Se si desidera uno screenshot di presentazione è possibile copiare lo screenshot originario nella directory del tema “figlio”o crearne uno nuovo. L’unico requisito richiesto è che il file immagine venga denominato“screenshot.jpg” e avere come dimensioni 300px per 250px.

themes-wordpress-child-4