Come realizzare personalizzazioni con un tema per bambini

Questo tutorial non è per tutti.

Non è necessario essere uno sviluppatore esperto per seguire, ma è necessario un genuino interesse per saperne di più su WordPress e sul funzionamento dei temi.

Se non hai paura di lavorare con un po’ di codice e sporcarti le mani con alcuni file di temi, allora benvenuto a bordo!

In questa guida imparerai come personalizzare il tuo sito WordPress a tuo piacimento utilizzando un tema figlio, ma prima…

Esaminiamo esattamente il motivo per cui dovresti anche usare questa strana cosa chiamata "tema figlio".

Perché usare un tema figlio?

Ripeti dopo di me:

Giuro solennemente di non modificare mai un file di tema.

I nuovi utenti di WordPress che sono interessati a realizzare personalizzazioni con il codice spesso modificano direttamente i file nel loro tema. Questo è un grande no-no.

Come mai?

Una ragione: quando aggiorni il tuo tema, WordPress sovrascriverà il tuo tema esistente con la nuova versione del tema.

Allora perché importa?

Immagina di utilizzare la versione 1.04 del tema Challenger. Hai spostato il menu nel file header.php e aggiunto alcuni nuovi CSS a style.css. Quindi esce la versione 1.05 e vedi la notifica nella tua dashboard.

Quando aggiorni alla v1.05, entrambi i file header.php e style.css verranno sostituiti con quelli della v1.05 di Challenger. Non conterranno le stesse modifiche che hai apportato, quindi il tuo lavoro andrà perso e non c’è modo di recuperarlo. Questo può essere piuttosto scoraggiante se hai speso ore nelle tue personalizzazioni.

Tuttavia, se metti le tue personalizzazioni in un tema figlio Challenger, puoi tranquillamente aggiornare alla versione 1.05 senza perdere nessuna delle tue personalizzazioni perché sono archiviate in modo sicuro nel tema figlio.

Questo diventerà un po’ più chiaro quando passiamo a un esempio reale, quindi andiamo avanti e creiamo un tema figlio ora.

Come creare un tema figlio

Anche se non spiegherò in dettaglio come funziona tutto il codice qui, queste sono le idee e i frammenti di base necessari per iniziare.

Configurazione di base

Inizia creando una cartella vuota sul desktop. Puoi nominarlo come preferisci, ma la convenzione di denominazione standard consiste nell’usare il nome del tema in minuscolo seguito da "figlio" e sostituire gli spazi con trattini.

Ad esempio, un tema figlio per il tema Challenger avrebbe un nome di cartella "challenger-child". Questa cartella conterrà tutti i file del tema figlio.

Hai solo bisogno di un file per creare un tema figlio tecnicamente valido, style.css.

Crea il file style.css

Utilizzando l’editor di codice di tua scelta, crea un nuovo file all’interno della cartella del tema figlio e chiamalo style.css.

Il file style.css è, ovviamente, dove aggiungerai tutti i tuoi CSS per personalizzare il tuo sito. Affinché WordPress riconosca il tuo tema figlio come un tema valido, devi aggiungere un’intestazione del foglio di stile come questa nella parte superiore di style.css:

/*
 Theme Name:   Challenger Child
 Template:     challenger
 Author:       Compete Themes
 Version:      1.0
 Author URI:   https://www.competethemes.com
 Description:  This is a child theme used to customize the Challenger WordPress theme.
 License: GNU  General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

Puoi copiare questa intestazione esatta e usarla per i tuoi temi figlio. Cambia semplicemente il nome del tema con quello che stai personalizzando.

La parte più importante è il valore “Template" che deve essere impostato sul nome del tema genitore. In particolare, il nome utilizzato per la cartella contenente il tema principale.

Con questo in atto, puoi già attivare il tema figlio tramite il menu Aspetto e usarlo. Tuttavia, il tuo sito sarà completamente privo di stile!

Quando viene attivato un tema figlio, WordPress non caricherà più il file style.css del tema principale e dipenderà invece dal tema figlio per farlo.

Ecco come caricare entrambi i fogli di stile…

Crea il file functions.php

Nel tuo editor di codice, crea un secondo file nel tema figlio e chiamalo functions.php.

Quindi, aggiungi il seguente codice al file:

<?php 
function my_theme_enqueue_styles() { 
  $parent_style = 'parent-style'; 
  wp_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' ); 
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '/style.css', array( $parent_style ), wp_get_theme()->get('Version')
  );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Questa funzione dice a WordPress di caricare il file style.css del tema principale e quindi caricare il file style.css del tema figlio dopo. Il caricamento del foglio di stile del tema figlio dopo rende più semplice sovrascrivere i selettori CSS del tema padre.

Come accennato in precedenza, non tratterò questo codice riga per riga, ma puoi trovare una spiegazione più dettagliata di questo frammento nel Codex di WordPress.

Personalizzazione con il tuo nuovo tema figlio

Questo è tutto ciò che devi fare per creare un tema figlio funzionante!

Con l’impostazione del tema figlio, ci sono tre modi in cui puoi personalizzare il tuo sito con esso.

Aggiungi e sovrascrivi gli stili

Puoi aggiungere tutti i nuovi CSS che desideri nel file style.css del tema figlio.

Quando trovi i selettori da utilizzare nel tuo CSS, non controllare il file style.css del tema principale. Tutti i nostri temi utilizzano un "pre-processore CSS", quindi non guardiamo nemmeno quel file! Invece, segui questo processo più intelligente per trovare i selettori CSS e penso che avrai molto più successo nella personalizzazione del tuo sito.

Funzioni di esclusione

Con un tema genitore ben codificato, puoi sovrascrivere qualsiasi funzione trovata nel suo file functions.php.

Ad esempio, ogni funzione in Mission News è racchiusa in un [function_exists()](https://php.net/manual/en/function.function-exists.php)assegno. Ciò significa che puoi copiare la funzione nel file functions.php del tuo tema figlio. Quindi puoi apportare le modifiche che desideri alla funzione lì.

Ignora modelli

Una personalizzazione comune che richiede un tema figlio è il riordino degli elementi. Ad esempio, potresti voler spostare il titolo del post dopo l’immagine in primo piano anziché prima.

Puoi prendere uno qualsiasi dei file modello trovati nel tema principale e inserirne una copia nel tema figlio. Verrà quindi caricata la versione nel tema figlio. Ciò ti consente di aggiungere, riordinare e rimuovere tutti gli elementi che desideri in qualsiasi parte del sito.

Installazione del tema figlio

Una volta che sei soddisfatto delle tue modifiche, puoi installare il tema figlio sul tuo sito.

I temi figlio possono essere caricati proprio come i normali temi WordPress, quindi ci vogliono solo un minuto o due per attivarli sul tuo sito. Segui questo tutorial per installare il tema del tuo bambino:

Come installare un tema figlio di WordPress?

Se sei totalmente nuovo a tutto questo, ecco un paio di strumenti gratuiti per aiutarti.

Innanzitutto, se non disponi di un editor di codice, controlla Visual Studio Code. È semplice ma flessibile. È anche totalmente gratuito e con esso vengono realizzati molti software professionali. È quello che uso per creare temi qui a Compete Themes.

In secondo luogo, creare un sito WordPress locale (offline) è un ottimo modo per provare il codice senza influire sul tuo vero sito web live. Mentre ho usato e consigliato MAMP in passato, Local di Flywheel è così dannatamente facile e semplice da usare che lo adoro. È quello che uso per lo sviluppo del tema ed è anche gratuito.

I tuoi aggiornamenti sono al sicuro

Tornando all’esempio di prima…

Quando si aggiorna il tema Challenger (o qualsiasi tema) l’intera directory "challenger" viene sostituita, il che non avrà alcun impatto sul tema figlio perché ora ha la propria directory nella cartella "challenger-child".

Con il tuo tema figlio in posizione, puoi tranquillamente apportare tutte le personalizzazioni che desideri e mantenere aggiornato il tuo tema principale.

Se non conosci CSS e PHP, potrebbe volerci un po’ di tempo per ottenere le personalizzazioni nel modo desiderato, ma con un tema figlio hai un’ottima base su cui lavorare. Ricorda di seguire questi passaggi per trovare i selettori CSS da utilizzare e qualsiasi personalizzazione dello stile che fai sarà piuttosto semplice.