Child Theme - Come fare un Figlio del tema WordPress

Un tema figlio ti consente di modificare piccole parti dell’aspetto del tuo sito pur preservando l’aspetto e la funzionalità del tuo tema. Per capire come funzionano i child theme è innanzitutto importante capire la relazione tra i temi parent e child.

Che cos’è un tema Parent?

Un tema principale è un tema completo che include tutti i file modello e le risorse di WordPress richiesti per il funzionamento del tema. Tutti i temi, esclusi i temi Child, sono considerati temi Parent.

Che cos’è un tema child?

Come indicato nella panoramica, un tema figlio eredita l’aspetto del tema principale e tutte le sue funzioni, ma può essere utilizzato per apportare modifiche a qualsiasi parte del tema. In questo modo, le personalizzazioni vengono mantenute separate dai file del tema principale. L’utilizzo di un tema figlio ti consente di aggiornare il tema principale senza influire sulle personalizzazioni che hai apportato al tuo sito.

Tema Child ecco a cosa serve:

rende le tue modifiche portabili e replicabili;
mantiene la personalizzazione separata dalle funzioni del tema principale;
consente l’aggiornamento dei temi WordPress principali senza distruggere le modifiche apportate;
ti permette di trarre vantaggio dallo sforzo e dai test fatti nel tema principale;
risparmi sui tempi di sviluppo poiché non stai ricreando la ruota; E
sono un ottimo modo per iniziare a conoscere lo sviluppo del tema.

INFO

Se stai effettuando personalizzazioni estese, oltre agli stili e ad alcuni file di temi, la creazione di un tema principale potrebbe essere un'opzione migliore rispetto a un tema figlio. La creazione di un tema principale consente di evitare problemi con il codice deprecato in futuro. Questo deve essere deciso caso per caso.

Come creare un tema child su WordPress

La creazione di un tema figlio in WordPress richiede solo pochi passaggi. Di seguito tratteremo ciascuno in modo approfondito in modo che tu possa seguirli. Questa demo utilizzerà il tema WordPress predefinito Twenty Twenty-One come esempio, ma i passaggi di base si applicheranno a qualsiasi tema WordPress.

In generale, sono necessari solo due file per creare un tema child di base:

style.css
fuctions.php

In questa sezione, ti mostreremo come creare manualmente un tema figlio in WordPress. Tuttavia, se vuoi risparmiare un po’ di tempo, ci sono anche alcuni strumenti/strategie per automatizzare il processo. Li condivideremo nella prossima sezione.

Anche se usi uno di questi altri metodi, leggere il metodo manuale è comunque utile perché ti aiuterà a capire meglio come funzionano i temi child.

Passaggio 1: crea una cartella del tema figlio.

Innanzitutto, ti consigliamo di creare una cartella in cui puoi posizionare tutti i file modello e le risorse del tuo tema figlio.

Per ora, puoi creare questa cartella sul tuo computer locale. Più avanti in questo tutorial imparerai come installare il tema figlio sul tuo sito aggiungendo i file a una cartella Zip e installandoli tramite la dashboard di WordPress.

Assegna un nome a questa cartella utilizzando il nome della cartella del tema principale e aggiungi “-child” alla fine. Quindi, se stavi creando un tema figlio di Twenty Twenty-One, chiameresti la cartella “twentytwentyone-child”.

Passaggio 2: crea un foglio di stile per il tema figlio.

Successivamente, dovrai creare il file “style.css” all’interno della cartella del tema figlio, che conterrà tutte le regole e le dichiarazioni CSS per il tema figlio.

Questo file è anche quello che usi per dire a WordPress quale tema genitore usare, quindi è abbastanza importante.

Per creare il file, puoi utilizzare qualsiasi editor di testo di base (ad es. Blocco note) o il tuo editor di codice preferito (ad es. Sublime Text).

Ancora più importante, dovrai aggiungere un commento di intestazione richiesto nella parte superiore del file affinché il foglio di stile funzioni effettivamente.

Questo commento contiene informazioni di base sul tema figlio, incluso il fatto che si tratta di un tema figlio con un particolare tema genitore.

Devi solo includere due elementi:

Nome del tema. Questo è il nome del tema figlio. Potrebbe essere il nome del tuo sito o semplicemente qualcosa come “[nome del tema] Bambino”. Per il nostro esempio, scriveremo “wp-assistenza Twenty Twenty-One”.
Modello. Questo è il nome della directory che contiene il tema principale. È una parte importante di ciò che collega il tema figlio al tema genitore.

Per il tema Twenty Twenty-One, questo è “twentytwentyone”. Per altri temi, in genere sarà il nome del tema, ma potrebbe essere una buona idea ricontrollare. Puoi farlo guardando nella cartella wp-content/themes o scaricando il tuo tema e aprendo il file Zip.
Ancora una volta, i due elementi di cui sopra sono necessari al 100% per il funzionamento del tema child.

Tuttavia, sei libero di includere altre informazioni, tra cui una descrizione, il nome dell’autore, la versione e i tag. Questi influenzeranno il modo in cui il tuo tema figlio viene visualizzato nella dashboard -> Aspetto> Temi e possono anche essere utili se hai intenzione di pubblicare o vendere il tuo tema child.

Ti consigliamo di includere anche un numero di versione, in quanto ciò renderà più semplice l’accodamento dei fogli di stile del tuo tema.

Ecco un esempio di un commento di intestazione completo per un tema figlio Twenty Twenty-One:

*/
Description: Twenty Twenty One Child Theme


Author: Marco Cavalieri


Author URI: https://esempiofiglio.it


Template: twentytwentyone


Version: 2.0.0


License: GNU General Public License v2 or later


License URI: http://www.gnu.org/licenses/gpl-2.0.html


Tags: two-column, responsive-layout


Text Domain: twentytwentyonechild

/*

Notare le barre e gli asterischi. Questi significano che questo codice sarà “commentato” in CSS, quindi WordPress non tenterà di eseguirlo.

Puoi aggiungere CSS personalizzati in un secondo momento, quando sei pronto per iniziare a personalizzare il tema figlio.

Per ora, fai clic su Salva in modo che questo foglio di stile venga salvato nella directory del tema figlio.

Passaggio 3: Accoda i fogli di stile dei temi padre e figlio.

Ora è il momento di accodare i fogli di stile dei temi genitore(parent) e figlio(child). Questo garantirà due cose:

Che il child theme erediti lo stile del suo parent theme. Quindi, quando attivi il tuo tema figlio, non stai solo guardando un mucchio di testo senza stile.
Che il foglio di stile del tema figlio venga caricato prima di quello del tema principale, senza sovrascriverlo. In questo modo, una volta aggiunti CSS personalizzati e modificati in altro modo il tema figlio, queste modifiche aumenteranno o sostituiranno determinati stili e funzioni del tema principale.

Sfortunatamente, questo passaggio può essere un po’ più complicato, perché il codice che devi usare dipenderà in parte da come è codificato il tuo tema principale.

Per la maggior parte dei temi, dovresti essere in grado di utilizzare questo codice:

<?php


add_action( 'wp_enqueue_scripts', 'wp-assistenza_blog_theme_enqueue_styles' );


function hubspot_blog_theme_enqueue_styles() {


wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );


}


?>

Tuttavia, se questo codice non funziona, il tuo tema potrebbe essere codificato in modo diverso o potrebbe non seguire le convenzioni del codice di WordPress. In tal caso, puoi consultare il Codex di WordPress o provare uno degli altri metodi che condivideremo più avanti in questo post.

Passaggio 4: installa e attiva il tema figlio.

Dopo aver creato i due file necessari – “style.css” e “functions.php” – hai tutto ciò di cui hai bisogno per un tema child di base.

Per impacchettare il tema figlio in un file che puoi installare tramite la dashboard di WordPress, devi comprimere la cartella del tema figlio come file Zip.

Sia su Windows che su macOS, dovresti essere in grado di farlo facendo clic con il pulsante destro del mouse sulla cartella sul tuo computer locale e selezionando l’opzione per comprimere come file Zip.

Ecco come appare su macOS.

Ora puoi installare questo file Zip proprio come faresti con qualsiasi altro tema WordPress.

Per caricare il file, vai alla dashboard di WordPress e fai clic su Aspetto > Temi > Carica tema. Quindi, utilizza il selettore di file per selezionare il file Zip appena creato e fai clic su Installa ora.

Una volta caricato, dovresti vedere un messaggio da WordPress che ti informa che richiede un tema principale e che conferma che il tema principale è installato.

Se tutto sembra a posto, fai clic sul pulsante Attiva.

Buone notizie: il tuo tema child è ora attivo! Dovresti vedere i dettagli corretti quando apri il tema nella dashboard.

Nota: per controllare la miniatura dell’immagine visualizzata per il tuo tema, puoi caricare un’immagine denominata screenshot.jpg o screenshot.png nella cartella del tema child. Questo è totalmente facoltativo; rende solo la tua dashboard più bella.

L’unico problema che resta in questo momento è che il tuo tema figlio appare esattamente come il tuo tema principale. Per risolvere questo problema, è il momento di personalizzare.

Passaggio 5: personalizza il tema figlio

Ci sono tre modi principali in cui puoi utilizzare il tema figlio per personalizzare il tema principale:

CSS personalizzato.
Frammenti di codice in functions.php.
File modello personalizzati.

CSS personalizzato

Per personalizzare il tema figlio, probabilmente inizierai aggiungendo CSS al file style.css nella directory del tema figlio. È uno dei modi più semplici per apportare modifiche al tuo tema.

Sia che tu voglia personalizzare la combinazione di colori, il riempimento, la tipografia o altri elementi di design fondamentali del tema principale, aggiungi semplicemente il codice al foglio di stile del tuo tema figlio sotto il commento dell’intestazione. Questo codice sostituirà il codice nel foglio di stile del tema principale.

functions.php

Per modificare la funzionalità del tema genitore, invece, è necessario aggiungere funzioni al file functions.php nella directory del tema figlio.

Ad esempio, se desideri consentire agli scrittori e ad altri utenti di formattare i loro post in modi diversi, puoi utilizzare la funzione add_theme_support().

Per consentire loro di formattare i post come note, collegamenti, una galleria di immagini, citazioni, una singola immagine o un video, devi aggiungere quanto segue al tuo file functions.php nella tua directory del tema figlio:

dd_theme_support( ‘post-formats’, array ( ‘aside’, ‘gallery’, ‘quote’, ‘image’, ‘video’ ) );

Puoi inserire tutte le funzioni che desideri tra i tag PHP di apertura e chiusura del tuo file.

File Custom Template

Infine, puoi anche utilizzare il tuo tema child per modificare direttamente i modelli del tuo tema principale, come il modello per i singoli post del blog o per l’intestazione del tuo sito.

Tuttavia, ciò richiederà una solida conoscenza di PHP e HTML, poiché lavorerai direttamente con questi linguaggi. Vorrai anche capire la gerarchia dei temi WordPress.

Child Theme – Come fare un Figlio…del tema!