WordPress child theme: Cosa sono e come si creano

Pubblicato il Marzo 6, 2019

Scritto da Matteo Feduzi

Personalizzazioni, Wordpress

creare un tema child su Wordpress

Benvenuto in questo nuovo articolo, oggi vedremo cosa sono e come si creano i child theme su WordPress in pochi semplici passi.

Gli sviluppatori di WordPress hanno infatti pensato di realizzare dei temi secondari che ereditassero in automatico le classi del tema padre.

Questi vengono chiamati in italiano temi figli e permettono di essere modificati senza andare ad influenzare il tema padre.

Pronto? Partiamo!

Perché dovresti utilizzare un tema figlio su WordPress?

Un tema figlio, come detto precedentemente, permette di apportare delle modifiche al proprio sito senza dover influenzare il tema padre.

Questo, inoltre, garantisce il salvataggio di tutte le modifiche apportare al codice sorgente che altrimenti al prossimo aggiornamento del tema principale andrebbero perse.

L’aggiornamento del tema principale infatti rigenera il codice precedente con l’aggiunta delle modifiche apportate dall’update.

Ovviamente non perderai nessuna modifica se avrai realizzato queste ultime in un tema child.

Come funzionano i child theme di WordPress?

Un tema figlio non viene aggiornato quando è presente un update perché risiede in una directory diversa da quella del tema padre.

Inoltre, il tema figlio, dovrà obbligatoriamente possedere i file style.css e functions.php per ereditare le classi correttamente.

Potrai aggiungere al suo interno anche altri file che sostituiranno i file del tema padre ma i due file sopra citati dovranno esserci sempre per far si che il tema figlio funzioni correttamente.

Utilizzando i file .css e .php pertinenti, è possibile modificare qualsiasi cosa, dai parametri di stile e di layout, alla codifica e agli script effettivi utilizzati nel tema secondario, anche se tali script non sono presenti nella directory del tema principale.

Devi pensare al tema figlio come una sovrapposizione del tema principale. Quando un visitatore carica il tuo sito Web, WordPress carica prima il tema figlio e poi successivamente eredita gli stili e le funzioni mancanti dal tema principale.

Di conseguenza, la maggior parte della codifica in background continua a essere estratta dalla directory padre ma viene modificata in base ai parametri del tema secondario prima che il contenuto venga visualizzato nella pagina.

Di cosa avrai bisogno per creare un child theme

Prima di proseguire con la guida avrai bisogno delle seguenti informazioni:

  • Accesso all’area admin di WordPress.
  • Accesso al file manager (raccomandato) o FTP.

Creare un child theme su WordPress

Tranquillo, la creazione di un tema figlio non è poi così complicata, ti basterà seguire i passaggi riportati qui sotto.

La prima cosa da fare è creare una directory per il tema figlio al seguente percorso /wp-content/themes all’interno della directory del sito scelto.

È meglio mantenere una buona organizzazione delle directory aggiungendo -child come nella foto qui sotto.

cartella padre e figlio di un tema wordpress per child theme

Per creare una nuova directory dovrai utilizzare il file manager (per esempio su Siteground se utilizzi questo hosting) oppure tramite FTP (per esempio FileZilla).

L’esempio che segue utilizza il file manager di Siteground ed è basato sul tema offerto da OptimizePress (SmarthTheme).

Ora assicurati di aver creato la directory child al seguente indirizzo wp-content/themes/tema-child

Non utilizzare spazi, potrebbero causare errori all’interno del file manager, ti consiglio di utilizzare quindi il trattino al posto degli spazi (-).

1. Accedi al tuo servizio di hosting e vai su cPanel > Gestione file.

2. Ora dovresti trovarti nella directory public_html prosegui andando su /wp-content/themes del sito in cui vuoi creare il tema figlio.

3. Ora clicca su Crea nuova cartella e inserisci in questa directory il nome figlio come per esempio nomesito-child come nell’immagine sopra.

4. Adesso accedi nella cartella del tema figlio appena creata.

5. Clicca sul pulsante Nuovo file e crea il file style.css.

6. Inserisci il seguente codice all’interno del file .css appena creato.

/* 
  Theme Name: op Smart Theme 
  Theme URL: http://nomedominio.it 
  Description: op Smart Theme Child Theme 
  Author: Matteo 
  Author URL: http://nomedominio.it 
  Template: opSmartTheme 
  Version: 1.0.5.1 
  Text Domain: opSmartTheme-child 
*/ Il codice CSS va qui sotto

7. Assegna un nome al tuo nuovo tema e modifica tutti gli altri valori in modo che corrispondano al tema e al nome del dominio. Il campo più importante è il campo Template perché indica a WordPress il tema principale su cui si basa il tema figlio. Al termine, fai clic su Salva.

8. Aggiungi un file functions.php nella stessa cartella. Qui non dovrai aggiungere nessun file del tema padre. Dovrai aggiungere delle funzioni solo nel caso in cui ti possano servire e che siano modifiche riguardanti il tema figlio.

9. Ora entra su WordPress e vai su Aspetto > Temi e attiva il tema figlio appena creato.

10. Visita il tuo sito web e vedrai il tuo tema con alcuni problemi. Non fatevi prendere dal panico, perché il file functions.php non sta caricando ancora il CSS dal tema principale.

11. Dall’area admin di WordPress, vai su Aspetto > Editor e scegli functions.php.

12. WordPress ha una funzione per caricare il CSS dai temi principali. Copia e incolla il seguente codice sul file functions.php del tema figlio:

<?php 

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

?>

13. Fai clic su Aggiorna file nella parte inferiore della pagina per salvare le modifiche.

14. Visita di nuovo il tuo sito web. Noterai che il CSS è stato caricato correttamente e il tuo tema figlio appare esattamente come il tema padre.

Come puoi vedere la creazione di un tema child non è poi così complicata!

Questa guida ti è servita o hai delle domande? Lascia un commento qui sotto per farmelo sapere!

Un abbraccio,

Matteo.

+ Mostra Indice

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *