WordPress Child Theme: aggiornare un tema wordpress senza perdere le modifiche

Wordpress Child Theme

Oggi vedremo insieme quella che probabilmente è una delle pratiche più utili e sicure per tutti coloro che vogliono personalizzare il proprio sito wordpress, scopriamo insieme come aggiornare un tema wordpress senza perdere i dati grazie all’ausilio del WordPress Child Theme!

Cos’è il WordPress Child Theme

Il Child Theme di Wordpresa [¹] è un tema “figlio” che eredita tutte le caratteristiche principali del tema “padre”. La sostanziale differenza è che, quando il tema padre viene aggiornato i file sorgenti del tema vengono sovrascritti, andando a perdere tutte le personalizzazioni (sia php che css) effettuate sul tema.

In questo caso ci corre in aiuto il nostro Child Theme, che ci consente di aggiornare un tema wordpress senza perdere i dati e le personalizzazioni effettuate.

Dove troviamo il Child Theme

Dato il grande utilizzo di questo strumento la maggior parte dei template wordpress acquistati tramite piattaforme come theme forest mettono a disposizione già una cartella per caricare il nostro tema figlio sul sito. In questo caso con poco sforzo avrete la possibilità di installare il tema “figlio” senza dover eseguire nessuna procedura (ricordare di uplodare anche il tema padre, altrimenti il child theme non si potrà attivare), ma non preoccupatevi, nel caso in cui non avete a disposizione questa cartella o se non ricordate come reperirla ecco come creare il child theme.

Come si crea un child theme

Nel caso in cui il vostro tema non disponga di un Child Theme, allora potrete crearne facilmente uno! Probabilmente questa è l’ipotesi più comune, quella in cui ci si ritrova a dover utilizzare un Tema Figlio per aggiornare un tema wordpress senza perdere le modifiche già effettuate.

Nella mia esperienza mi è già capitato di imbattermi molte volte in queste tipologie di siti, quindi non preoccuparti, è una cosa che capita spesso, armiamoci di buona volotà e mettiamoci al lavoro.

Creiamo la cartella del nostro tema figlio

Con lo stesso procedimento che abbiamo effettuato per installare wordpress tramite FTP colleghiamoci al nostro server con l’ausilio di Filezilla e rechiamoci nella cartella wp-content -> theme. Da qui creiamo una cartella con il nome del tema padre, ad esempio Twentynineteen-child e andiamo a creare al suo interno dei file fondamentali per la sua funzione.

Il File style.css

Uno dei file più utili per il nostro WordPress Child Theme è sicuramente lo style.css, al suo interno potremo inserire tutte le regole CSS per personalizzare il nostro tema. Al momento però, per far si che tutto funzioni correttamente, dovremo inserire delle stringhe obbligatorie e necessarie per il funzionamento del tema figlio.

/*
Theme Name: Twenty Nineteen Child
Description: Child Theme del tema Twenty Nineteen
Author: Mauro De Falco
Author URI: http://www.tuosito.it/
Template: twentynineteen
Version: 0.1
*/

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

le righe obbligatorie sono composte da:

  • Theme Name: Scriviamo e dichiariamo il nome del nostro tema figlio, il nome apparirà nella sezione Temi del nostro pannello amministrazione di WordPress.
  • Template: qui andremo ad indicare il nome del tema padre, riprendendolo in modo preciso dal nome della cartella che troviamo sul server (il percorso sarà sempre wp-contet -> themes.
  • @import url: in questo campo andremo ad inserire il percorso del file style.css del tema padre, in modo che il tema figlio possa andare ad ereditare tutto lo stile CSS che contiene. Bisogna far attenzione a scrivere correttamente questa stringa, con gli apici e i due punti antecedenti al nome della cartella. Ti consiglio di sostituire solamente il nome della cartella del tema padre per facilitare il tutto.

Ci sono, inoltre, ulteriori campi che possiamo inserire nella creazione del file style.css, questi campi però sono totalmente opzionali:

  • Description: Andremo a creare una descrizione del nostro tema figlio.
  • Author: qui possiamo indicare chi è il creatore del tema figlio.
  • Author URI: se vogliamo possiamo inserire il sito web del creatore del wordpress child theme
  • Version: 0.1: Possiamo specificare anche la versione del tema figlio.

L’anteprima del tema

In questo momento se andassimo nel menu di amministrazione del nostro sito WordPress e successivamente in Aspetto -> Temi, noteremo come il nostro Tema Figlio sia effettivamente presente tra i temi selezionabili, ma che non presenta un file di anteprima. Per caricarla basterà inserire un immagine, quella che più rappresenta il tema, nella cartella del child theme creata prima (nel nostro esempio twentynineteen-child) e nominarla con il nome “screenshoot.png”

Modificare il file style.css

Il nostro wordpress child theme adesso è perfettamente funzionante, possiamo effettuare qualsivoglia modifica al file css. Per farlo non dovremo far altro che recarci nella cartella del file figlio (nel nostro caso twentynineteen-child) aprire il file style.css ed andare ad inserire le nostre regole css per la personalizzazione del tema.

Una nuova funzione

I vari aggiornamenti di wordpress portano sempre con se delle novità e dei nuovi metodi per effettuare le stesse operazioni. In questo caso la stessa guida di WordPress ci consiglia di importare il foglio di stile del tema padre non più tramite @import url nel nostro file css, ma andando a modificare il file function.php.

Come abbiamo fatto per il file style.css andiamo a creare all’interno della cartella del nostro child theme il file function.php ed andiamo ad incollare il seguente codice:

<?php

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

Questo metodo, oltre a velocizzare il caricamento dell’import del file css del tema padre permette di risolvere un problema di duplicazione noto, e di aumentare le funzioni del nostro tema. Infatti ci basterà aggiungere il codice php all’interno del nostro file function.php del tema figlio e il gioco sarà fatto.

Cosi potremo mantenere le modifiche effettuate al nostro sito aggiornando tranquillamente il tema padre!

Salvare le modifiche apportate al tema padre

Nel caso in cui avessimo già effettuato delle modifiche al tema padre possiamo apportare le modifiche al tema figlio, questa cosa ci permette di aggiornare il tema wordpress senza perdere le modifiche effettuate.

Modificare i file .php

Nel caso in cui dovessimo effettuare delle modifiche ai file Php ci basterà copiare il file nello stesso percorso del tema padre all’interno del tema figlio. (Esempio, il file header.php del tema padre si trova nella root della cartella, noi dovremo copiarlo ed incollarlo all’interno della root del nostro tema child).

Una volta effettuato questo semplice procedimento non ci sarà altro che effettuare le modifiche che dobbiamo apportare e salvare il file. In questo modo le modifiche che prima erano a carico del tema padre (e quindi che sarebbero andate perse con un aggiornamento del tema) saranno salvate in caso di update!

Installare il Child Theme di WordPress tramite un Plugin

Child Theme Configurator

Child Theme configurator è un velocissimo modo per creare il tuo tema child wordpress in pochisismo passaggi e in modo ancora più facile.

Il Plugin funziona in maniera molto intuitiva. Dopo aver analizzato il tuo tema wordpress in uso determinerà automaticamente la creazione del tema Child andando ad impostare nome autore, descrizione e tutti i campi descritti precedentemente.

Un modo facile e veloce per creare il proprio tema child di WordPress con la possibilità di:

  • modificare e copiare i file di templete del tema padre (i famosi file .php di cui abbiamo già discusso)
  • determinare automaticamente il set up ottimale per creare il tuo WordPress Child Theme
  • cambiare direttamente alcuni aspetti CSS del tema padre

Cosa aspetti? Prova subito Child Theme Configurator.

 

WordPress Child Theme: Perchè usarlo?

Mi sono imbattuto la prima volta nel Child Theme durante l’update di un tema Avada. Il consulente precedente aveva effettuato moltissime modifiche ai file del tema andando ad aggiungere personalizzazioni importantissime per il mio cliente, aggiornare il tema Padre sarebbe stato una follia, avrei perso tutto.

Con delle ricerche ho trovato la soluzione la problema, proprio il WordPress Child Theme. Ho creato il tema figlio, spostato tutte le personalizzazioni su quest’ultimo e successivamente aggiornato il tema e tutto è rimasto perfettamente funzionante!

Da quel giorno ho inizato ad usare i Child Theme in qualsiasi occasione, anche durante la creazione di un WordPress da zero, e consiglio di farlo anche a te, perchè è utilissimo per diversi motivi:

  • permette di mantenere le personalizzazioni del tema css anche quando lo aggiorni
  • permette di aggiornare il tema senza perdere le modifiche
  • permette di aggiungere funzionalità al function.php e modifiche a tutti i file sorgente del tema senza preoccuparti di successivi aggiornamenti
  • sei tranquillo perchè sarai sempre aggiornato, non avrai quindi problemi di sicurezza, che rimane un passaggio fondamentale per tutti i siti web.

Cosa aspetti? Se non hai già installato il tema child sul tuo sito provvedi subito e creane uno!

, ,

28 risposte

  1. Avatar giorgio mazzolini
    giorgio mazzolini

    Ho letto attentamente la descrizione sulla creazione del tema child e il functions.php, ho provato ad esaminare un sito a cui vorrei apportare modifiche ma non ho capito se i blocchi di istruzioni che modifico online e che copio dove devo inserirli nel file child o nel functions perché diventino live, grazie se può darmi consigli

    1. Ciao Giorgio, grazie del commento!
      Per apportare le modifiche devi inserire i file modificati all’interno del child theme.

      Ti faccio un esempio:
      Se stai modificando il file header.php dovrai copiare il file header.php nella cartella del child theme (utilizzando lo stesso percorso della cartella padre) e li applicare le modifiche.
      Se invece ti riferisci alla creazione di un tema child utilizzando il nuovo metodo del function.php allora il file deve essere creato all’interno della cartella figlio (quindi il child theme).

      Fammi sapere se ho risposto correttamente alla tua domanda, altrimenti non esitare a contattarmi nuovamente 🙂

  2. Avatar Giovanni
    Giovanni

    Mi sono accorto di aver costruito il siro sul tema child, ho attivato il tema padre, ma non è esattamente uguale a quello che avevo costruito sul tema child. Posso continuare lavorando sul child? Per aggiornare il tema padre cosa posso fare?
    Grazie

    1. Ciao Giovanni, grazie del commento!
      Certo puoi e ti consiglio vivamente di continuare a lavorare sul child, è proprio la procedura giusta.
      L’aggiornamento del tema padre rimane molto semplice, in Aspetto -> Temi, vedrai quando il tema padre necessità di un aggiornamento, quando questo accade clicca su aggiorna tranquillamente. (Dovresti vedere la notifica dell’aggiornamento anche in Bacheca->Aggiornamenti)

  3. Avatar Giovanni
    Giovanni

    Mauro ti ringrazio per la risposta.
    Quindi quando vado in Temi trovo il tema padre e il tema child. Il Tema child è l’unico che risulta attivato, quindi continuo così?

    1. Esatto.
      È proprio il modo corretto di procedere

  4. Ciao Mauro complimentissimi per l’articolo , sto creando da zero un nuovo sito con wordpress ed ho installato un tema (flatsome) che aveva già di default sia il child theme e il tema principale , ho effettuato tutte le modifiche sul child theme avendolo attivato ma oggi quando ho fatto l’aggiornamento del tema padre ho visto scomparire tutte le modifiche effettuate sul child theme ed si è praticamente resettato , sto quindi facendo un restore per ritornarlo al giorno precedente

    come faccio a risolvere la situazione? cosa sbaglio?

    grazie mille

    1. Ciao Marco, grazie per i complimenti!
      Probabilmente c’è qualche problema nella realizzazione del tema child.

      I percorsi dei file modificati erano uguali a quello del tema figlio?
      Hai inserito il codice correttamente nel function.php del tema child?
      Grazie

  5. Ciao Mauro , grazie per la risposta , purtroppo non ti so dire in quanto ho installato il tema e considerando che il tema child era già di default ho cominciato a personalizzarlo solo nella parte aspetto->personalizza senza modificare nulla per via codice , aggiornando il tema inoltre ho visto che si sono resettati anche le impostazioni del tema

    grazie mille a te Mauro

    1. Guarda è molto strano, soprattutto perché in genere il codice CSS inserito in personalizza viene inserito proprio la perché non viene sovrascritto negli update.

      Quando hai aggiornato il tema padre hai lasciato attivo comunque il tema figlio?

      P.s. Flatsome se non ricordo male è un tema a pagamento, hai provato a chiedere agli sviluppatori?

  6. si è un tema a pagamento ma hanno solo il supporto della community in quanto per un’assistenza diretta è a pagamento

    quando ho aggiornato il tema padre quello figlio era attivo

    1. È molto strano, hai avuto questo probelma anche in altre occasioni?

  7. Grazie per l’articolo. Avrei bisogno di un chiarimento, poiché vorrei modificare una parte della home page di un sito con il tema child. Il file.php della home page del tema padre devo copiarlo solo nella cartella tema child e lavorarci al suo interno o devo copiare il codice del file e inserirlo all’interno del file functions.php del tema child?

    1. Ciao Fede, e benvenuta sul sito!

      Se stai modificando la homepage in .php è probabile che tu stia lavorando sul file front-page.php. Per apportare modifiche a questo file copiato con lo stesso percorso del tema padre all’interno del tema child ed effettua li le modifiche. Non c’è bisogno del function.php se hai già creato il tuo child.

      Ti faccio un esempio:
      Il file front-page.php si trova nella root del tuo tema padre, dovrai copiare quel file all’interno della root del tema figlio e apportare li le modifiche che vuoi effettuare.

      P.s. il discorso è completamente diverso nel caso in cui tu stia realizzando una homepage con pagebuilder o con gutenberg, in quel caso puoi effettuare le modifiche direttamente con questi tool, non perderai le modifiche aggiornando il tema.

  8. Avatar Federica
    Federica

    Grazie per l’immediata risposta. Sì, effettivamente al momento stavo facendo le modifiche con wp bakery, ma vorrei inserire alcuni elementi proprio nel codice html. Quindi è diverso il discorso?
    E in generale consigli di fare le modifiche direttamente nel file o va comunque bene utilizzare questi tipi di plugin?

  9. Avatar Federica
    Federica

    Sì, infatti al momento stavo facendo delle modifiche con Wpbakery ma volevo inserire un elemento, poiché il plugin non me lo permette, volevo farlo via codice. Il discorso in questo caso è completamente diverso? Non va usato lo stesso metodo?
    Un ultima domanda, tu consigli di usare questi tipi di plugin o è meglio fare le modifiche direttamente nel file.php?
    Grazie per il tuo tempo!

    1. Per inserire del codice tramite WpBakery puoi utilizzare il widget HTML o il widget Code, se il codice che vuoi inserire è Php puoi utilizzare il plugin “Php Snippet” per creare uno shortcode del tuo codice PHP e inserire come blocco testo con WpBakery, non è necessario utilizzare il tema Child.

      In genere questi tipi di plugin facilitano molto la creazione di una pagina, ma in generale, per la massima autonomia, personalizzazione e sicurezza, sempre meglio creare il proprio tema e sviluppare le pagine via codice.

      Fammi sapere se ho risposto correttamente!

  10. Avatar Federica
    Federica

    Ho fatto delle prove e si è come dici tu, tra l’altro il plugin è compreso nel tema che avevo scelto.
    Ora però ho un problema, il plugin si è buggato mentre stavo facendo delle modifiche, non si vedono più delle section, e non riesco a ripristinare il tutto.
    Effettivamente è più sicuro modificare le pagine via codice.
    Vorrei quindi usare il codice ma non trovo il file che denomina la homepage.

    1. Visual Composer deve essere aggiornato? forse è questo il problema.
      Comunque solitamente i temi non vengono rilasciati con la front-page.php perchè, usando la frontpage non hai la possibilità di rendere dinamico il contenuto oppure usare builder vari.

      Se il sito verrà sempre aggiornato da te e ti senti confident con il codice vai di front-page.php (e magari approfondisci la parte di realizzazioni temi custom per wordpress se ne hai voglia, te lo consiglio, inzia da qui magari, spiega la front-page: https://developer.wordpress.org/themes/functionality/custom-front-page-templates/) altrimenti prova a risolvere il bug relativo al builder, renderai più facile la vita a chi verrà dopo di te.

  11. Avatar Federica
    Federica

    Ti ringrazio per tutti i consigli! Ora provo entrambe le cose.

  12. Il mio dubbio è questo: sul mio sito ho creato il tema child e l’ho attivato. Ora posso aggiornare tranquillamente il tema padre senza perdere le modifiche fatte sul tema child. Ma a quel punto devo andare a modificare anche il tema child o viene aggiornato in automatico anche il child? Grazie e buon lavoro.

    1. Ciao Vincenzo!
      Se hai fatto tutto correttamente aggiorna senza problemi il tema padre. Il tema Child non necessita di nessun aggiornamento, è “solo” il contenitore delle tue modifiche, non verrà mai aggiornato dal creatore del tema. Un po’ come se fosse un tuo piccolo tema personale 🙂

  13. Grazie mille per la celere risposta. Saluti

  14. Ciao Mauro, complimenti per la chiarezza del tuo articolo. Sto iniziando la costruzione di un sito e-commerce ed ho installato il tema storefront e il plugin woocommerce. Non ho intenzione di fare modifiche sul tema, ma solo di adoperare plugin estensivi per ottenere nuove funzionalità. Mi conviene prima installare i plugin aggiuntivi e poi generare il child-theme? O viceversa? In generale: il tema child protegge da possibili problemi quando nella vita di un sito si tolgono o inseriscono nuovi plugin? Ti ringrazio e di nuovo complimenti.

    1. Ciao Francesco, grazie per i tuoi complimenti!

      In genere io preferisco sempre partire dal tema (quindi andrei prima a configurare il tema child).

      Il Child Theme non ha come prerogativa quella di proteggere il sito da plugin, ma in generale, se lavori con buoni plugin, non dovresti aver nessuna tipologia di problema.

  15. Grazie per la celerità e chiarezza della risposta. Buone feste natalizie e di fine anno.

  16. Buongiorno

    ho creato il tema figlio utilzzando un plugin e sembra essere tutto ok.
    Vorrei modificare un file php per rimuovere una sezione del tema padre e inserirne una custom.
    Ho creato la stesso percorso del file nel tema figlio ma se faccio la modifica il sito non si aggiorna.
    Se faccio la stessa modifica sul tema padre funziona

    A cosa può essere dovuto?

    Grazie

    1. Ciao Leo, e grazie del tuo commento.

      Prima domanda banale, hai selezionato il tema child come tema attivo?

      Quando attivi il tema child tutto funziona correttamente? Altre modifiche al file (magari nel functions.php o nello style.css) funzionano?

      Può essere che la generazione del tema figlio tramite plugin abbia creato qualche problema, puoi farlo manualmente?

Rispondi