Wordpress Child Theme: Aggiornare tema Wp senza perdere le modifiche

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

WordPress Child Theme: aggiornare un tema wordpress senza perdere le modifiche
21 Ottobre 2019 - by Web, Web Development, Wordpress

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!

Share this post? Facebook Twitter Linkedin

2 Comments

  1. giorgio mazzolini

    01 Lug 2020 - 17:44

    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

    • Mauro

      01 Lug 2020 - 17:54

      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 🙂

Add your Comment