Guida rapida alla creazione e alla personalizzazione di un tema figlio di WordPress

Mentre lo sviluppo del tema può sembrare opprimente, i temi figlio sono semplici da impostare ed è un'alternativa molto più rapida allo sviluppo di un tema da zero.

In questo post, condividerò maggiori dettagli sui temi figlio di WordPress e su come crearne e personalizzarne uno in modo efficiente.

Che cos'è un tema figlio di WordPress?

Prima di definire cos'è un tema figlio di WordPress, è importante prima capire cos'è un tema WordPress e da dove WordPress sta traendo informazioni per visualizzare il design di un sito Web.

Secondo il codice di WordPress, "Un tema è una raccolta di file che lavorano insieme per produrre un'interfaccia grafica con un design unificatore sottostante per un blog. Un tema modifica il modo in cui i dati vengono visualizzati senza alterare il software sottostante".

Se il tuo sito WordPress ha un unico tema attivo con tutti i modelli e le risorse richiesti, non c'è distinzione tra il tema padre o figlio.

Tuttavia, se decidi che ti piace davvero un tema che hai trovato, ma desideri apportare alcune modifiche senza creare un tema da zero, puoi creare un tema figlio di WordPress per questo scopo.

Un tema figlio eredita la struttura del tema originale e include solo le personalizzazioni apportate. Invece di sostituire completamente un tema, il tema figlio modifica o aggiunge i file del tema esistente.

In questo modo, quando il tuo sito viene caricato per un visitatore, il design del tema originale viene caricato, ma con le modifiche che hai apportato.

I bambini nella vita reale – e non nel mondo online – dipendono da almeno una figura genitoriale per vivere. Allo stesso modo, un tema figlio dipende dal tema originale per funzionare.

Ecco perché quando usi un tema figlio, il tema originale viene chiamato tema principale.

A differenza di un bambino umano, un tema bambino non è un tema completo in sé e per sé. Ciò significa che il tema principale deve essere installato prima di poter attivare il tema figlio corrispondente.

Il tema del bambino perfetto e quando usarlo

Qualsiasi tema può essere un tema principale, tuttavia, alcuni sono più adatti per questo.

Scegli un tema che ti piace che potrebbe utilizzare alcune piccole personalizzazioni strutturali per soddisfare le tue esigenze, ma che non include le opzioni per realizzare le personalizzazioni che desideri immediatamente.

Ad esempio, il tema Perfect Magazine è stato utilizzato come tema principale per creare il tema figlio Newsliner non solo per modificare alcuni colori nel design, ma anche per rimuovere un banner pubblicitario aggiungendo un carosello di post del blog nella parte superiore della pagina.

Questi tipi di personalizzazioni non sono possibili nelle opzioni di Perfect Magazine, ma non sono abbastanza grandi da giustificare la creazione di un tema nuovo di zecca da zero.

Perché creare un tema figlio?

I temi figlio di WordPress sono importanti per salvare e preservare tutto il lavoro che hai inserito in un sito. Se modifichi direttamente un tema, quindi lo aggiorni con una nuova versione del software, tutte le modifiche e le personalizzazioni andranno perse.

Ecco perché molti proprietari di siti Web scelgono di non aggiornare affatto il tema principale. Tuttavia, è un grave problema di sicurezza poiché il 54% dei siti WordPress violati disponeva di software non aggiornato, che hacker e malware spesso eseguono scansioni per trovare.

Inoltre, gli aggiornamenti spesso contengono correzioni di vulnerabilità, quindi ignorare un aggiornamento significa lasciare il tuo sito completamente aperto agli attacchi.

In alternativa, puoi creare un tema figlio per evitare queste insidie.

Come accennato in precedenza, l'utilizzo di un tema figlio di WordPress può anche accelerare lo sviluppo.

Con i file system e gli elementi essenziali di un sito già configurati, non è necessario iniziare da zero. Puoi costruire su un tema preesistente e sfruttare la funzionalità personalizzandone il design.

Guida introduttiva a un tema figlio di WordPress

Ci sono alcuni elementi chiave necessari per creare un tema figlio:

1. Una cartella della directory dei temi
2. Un file style.css
3. Un file functions.php

Sebbene l'unico file richiesto in un tema figlio sia style.css , il file functions.php è necessario per accodare correttamente il foglio di stile del tema principale.

Quindi, si consiglia vivamente di creare un file functions.php nel tema figlio per evitare errori.

Creazione di un tema figlio di WordPress

Quando crei il tuo tema figlio di WordPress, ci sono quattro passaggi, che sono descritti in dettaglio di seguito: creazione di una cartella di directory, creazione di un foglio di stile, accodamento dei fogli di stile nuovi e principali e attivazione del tema.

Creazione di una cartella di directory

Tutti i temi si trovano nella cartella /wp-content/themes/ dell'installazione di WordPress.

Passa a quella directory e crea una nuova cartella che fungerà da cartella del tema figlio.

In genere, il tema viene rinominato utilizzando il nome del tema principale, ma aggiungendo -child alla fine.

Ad esempio, i due percorsi di file saranno /wp-content/themes/yourtheme/ e /wp-content/themes/yourtheme-child/ .

Inoltre, non dovrebbero esserci spazi nel nome del tema figlio.

Sebbene queste non siano regole rigide e veloci per nominare la tua cartella, specialmente se non stai distribuendo il tema per uso pubblico, è una pratica comune di sviluppo di WordPress in quanto aiuta con l'organizzazione.

Creazione di un foglio di stile

I temi figlio di WordPress vengono spesso utilizzati per modifiche di progettazione abbastanza estese, quindi è necessario uno style.css separato.

Il file conterrà tutte le regole e le dichiarazioni CSS che influiscono sull'aspetto del tuo tema.

Crea un file style.css nella radice della tua nuova cartella del tema figlio. Quindi, inserisci questa intestazione nella parte superiore della pagina:

 /*
 Nome del tema: Venti diciassette bambini
 URI del tema: http://example.com/twenty-seventeen-child/
 Descrizione: Tema dei venti diciassette bambini
 Autore: Jane Doe
 URI dell'autore: http://example.com
 Modello: ventidiciassette
 Versione: 1.0.0
 Licenza: GNU General Public License v2 o successiva
 URI della licenza: http://www.gnu.org/licenses/gpl-2.0.html
 Tag: chiaro, scuro, due colonne, barra laterale destra, layout reattivo, pronto per l'accessibilità
 Dominio di testo: venti diciassette figli
*/

L'intestazione è una parte vitale del file, poiché indica i dettagli di base di WordPress sul tema. Segnala anche che si tratta di un tema figlio con un genitore particolare, come indicato dalla parte Modello .

Gli unici requisiti per l'intestazione sono il nome del tema e il modello . Ma è buona norma compilare il resto.

Assicurati di modificare anche tutti i dettagli richiesti in modo che siano accurati. Ad esempio, l' URI dell'autore e dell'autore nonché i riferimenti a Twenty Seventeen se il tema principale che stai utilizzando è diverso.

La sezione Tag si riferisce alla directory dei temi di WordPress. Se vuoi caricare il tuo tema lì, assicurati di scegliere i tag che riguardano il tuo tema.

Accodamento dei fogli di stile dei temi padre e figlio

Successivamente, è importante assicurarsi che il foglio di stile di ogni tema venga caricato correttamente in un processo chiamato accodamento.

Accodare significa aggiungere un elemento o un elenco di elementi a una coda per l'elaborazione dei dati. In questo caso, la coda è costituita dai file che il tuo sito web deve caricare quando un browser li richiede.

Se dovessi saltare l'accodamento, il tuo sito attirerebbe solo dal foglio di stile del tuo tema figlio e non utilizzerebbe nessuno degli stili forniti dal tema principale.

Potrebbe anche essere importante notare che è possibile accodare il genitore style.css usando il metodo @import . Ma questo non è più raccomandato a causa di problemi di prestazioni.

Per accodare i fogli di stile, devi creare un file functions.php se non l'hai già fatto.

Questo può essere fatto creando un nuovo file e nominandolo functions.php . Quindi. metti questo codice in cima:

 <?php

Assicurati di non includere spazi prima della riga sopra o risulterà in un errore.

Nel file functions.php , aggiungi il codice qui sotto per assicurarti che il tuo sito stia caricando correttamente sia il genitore style.css che il tema figlio style.css nell'ordine corretto:

 add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

funzione my_theme_enqueue_styles() {

    $genitore_; // Questo è 'stile Twentyseventeen' per il tema Twenty Seventeen.

    wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'stile bambino',
        get_stylesheet_directory_uri() . '/stile.css',
        matrice($stile_genitore),
        wp_get_theme()->get('Versione')
    );
}
?>

Assicurati di modificare lo stile genitore memorizzato nella variabile $ parent-style per includere il nome del tuo tema.

Come raccomandato dal Codice di WordPress, questo codice assicurerà che il genitore style.css sia caricato come dipendenza, il che significa che è necessario per il caricamento di style.css del tema figlio.

Attivazione del tema figlio

Dopo aver salvato tutti i tuoi file, vai su Aspetto > Temi per trovare il tuo tema figlio, quindi fai clic sul pulsante Attiva.

Non sarà necessario attivare anche il tema principale. Tuttavia, dovrebbe comunque essere installato e rimanere nella cartella /wp-content/themes/ .

Il testo dell'intestazione nello style.css del tuo tema figlio collegherà i due insieme e chiarirà la relazione per l'installazione di WordPress.

Dopo aver attivato il tema figlio, potrebbe essere necessario salvare di nuovo il menu in Aspetto > Menu , nonché alcuni altri contenuti nelle Opzioni del tema della personalizzazione se si verificano problemi con il design.

Suggerimenti rapidi per la personalizzazione

Prima di iniziare il processo di sviluppo, di seguito sono riportati un paio di suggerimenti sulla personalizzazione del tema figlio di WordPress.

Immagine a tema

Nella pagina Aspetto > Temi , devi includere la tua immagine per il tema.

Se invece vuoi inserire qualcosa per sostituire la casella a scacchi, puoi caricare un file immagine PNG 880 x 660 chiamato screenshot.png .

Metti l'immagine nella radice della cartella del tema del tuo bambino. In questo modo, l'installazione di WordPress saprà usarlo come immagine per il tuo tema.

Sovrascrivere i file del tema principale

Se desideri inserire nuovi file nel tuo tema figlio di WordPress per sovrascrivere i vecchi componenti, copia il file principale sul tema figlio, che puoi quindi personalizzare.

Durante il caricamento del sito, WordPress verificherà se il tema figlio ha file che corrispondono al tema principale. Se ne vengono trovati, sovrascriveranno il file del tema principale originale.

Non ci vuole un villaggio

La creazione di temi figlio di WordPress non deve essere così complicata come potrebbe sembrare. Segui i passaggi precedenti e ti assicuro che le tue modifiche rimarranno intatte. Aiuterà anche il tuo sito a essere un po' più sicuro.

Che tipo di tema per bambini vuoi creare? Sei riuscito a crearlo con successo? Hai avuto problemi durante il processo? Sentiti libero di condividere la tua esperienza nei commenti qui sotto.