Temi child WordPress: come creare temi child wordpress

By  /  Seguimi su:            

Temi Child WordPress (o temi figli): cosa sono e come crearli.

Un child theme o tema child di WordPress (o  tradotto “tema figlio“) è un tema che eredita le funzionalità di un altro tema, chiamato “tema genitore“. Utilizzare un child theme è il modo più semplice e sicuro per modificare un tema esistente, perché permette di aggiungere nuove features o di modificare l’aspetto del tema genitore senza sovrascrivere direttamente i file originali.

Perché utilizzare un child theme?

Tra i motivi fondamentali che spingono all’uso dei child theme c’è al possibilità di utilizzare temi di terze parti e personalizzare il tema in base alle nostre particolari esigenze senza modificare direttamente il core del tema genitore (originale), con la sicurezza di non perdere le modifiche fatte al template di WordPress dopo ogni aggiornamento del tema padre.

In questo caso il vantaggio della procedura di creazione di un tema child WordPress si presenta quando dobbiamo aggiungere una funzionalità comune a tutti i siti e possiamo farlo modificando solo il tema child o figlio.

Inoltre, si tratta di un ottimo sistema per comprendere la gerarchia dei file e poter sviluppare un proprio tema personalizzato facilitando la fase di sviluppo. In assenza di child theme, modificare semplicemente il codice del tema padre rappresenterebbe una soluzione sì percorribile, ma di dubbia efficacia; questo perché, come anticipato, al primo aggiornamento del tema le modifiche apportate andrebbero perse.

Ma come si crea un tema child WordPress o child theme?

Come creare un tema child di WordPress (o child theme)

Impostare un child theme è un’operazione piuttosto semplice, utilizzando un qualsiasi software per la gestione dei file via FTP, è sufficiente creare una cartella nella directory dei temi WordPress (../wp-content/themes) alla quale possiamo assegnare il nome twentyfourteen-child (il nome è indicato a titolo di esempio, potrà quindi essere assegnato un qualsiasi altro nome).

All’interno della cartella i file veramente indispensabili sono: style.css e function.php. Il primo file, tramite la sua intestazione, servirà per indicare a WordPress a quale tema padre il child theme deve fare riferimento. Il secondo, invece, ad importare gli stili.

L’intestazione del file style.css può contenere diverse informazioni ed essere simile alla seguente:

/*
 Theme Name:  Twenty Fourteen Child
 Theme URI:   http://example.com/twenty-fourteen-child/
 Description: Twenty Fourteen Child Theme
 Author:      John Doe
 Author URI:  http://example.com
 Template:    twentyfourteen
 Version:     1.0.0
 Tags:        light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/

La sintassi /* e */ è fondamentale (obbligatoria) perché indica a WordPress l’apertura e la chiusura dell’intestazione (header).

Fra le informazioni di esempio solo due sono strettamente necessarie: Theme Name, perché serve ad assegnare il nome del child theme, e Template, perché serve ad assegnare il tema al quale fare riferimento, indicando il nome della directory del tema padre (il nome della directory è case sensitive, quindi fa distinzione tra lettere maiuscole e minuscole).

Per quanto riguarda gli altri elementi, il loro utilizzo e il ruolo svolto da ciascuno di essi, è possibile fare riferimento allo schema proposto di seguito:

ParametroUtilizzoDescrizione
Theme URI(opzionale)URI al tema figlio.
Description(opzionale)Descrizione.
Author(opzionale)Nome dell’autore.
Author URI(opzionale)Pagina web dell’autore.
Version(opzionale)Versione del child theme.
Tags(opzionale)Etichette per la classificazione del tema.

Dopo la creazione del file CSS (style.css) occorre creare file function del tema.

Creazione del  file functions.php

  1. Apri l’editor di testo di Windows (blocco note) e inserisci il codice che trovi qui di seguito, ed infine, salva il file con nome ed estensione function.php ricordandoti di usare l’opzione salva come “tutti file”:

<?php
add_action( ‘wp_enqueue_scripts’, ‘carica_stili_parent’ );
function carica_stili_parent’ () {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}
?>

Infine, per far sapere a WordPress quale sia il file style.css del tema parent da caricare, dovrai creare file functions.php nella cartella del tema child.

A questo punto, se l’intestazione è stata compilata correttamente, il child theme è pronto per essere attivato. Accedendo nell’area amministrazione sotto la voce “Aspetto” > “Temi”, lo si potrà trovare fra i temi installati e disponibili. Sarà quindi sufficiente cliccare su “attiva” per iniziare a utilizzarlo.

Volendo aggiungere una immagine di anteprima personalizzata, è possibile creare un file immagine chiamato screenshot.png e posizionarlo nella directory del tema child. In alternativa è sufficiente copiare e incollare il file screenshot.png dalla directory del parent theme.

Inizialmente il tema figlio, sarà una semplice copia speculare del tema padre per il fatto che ancora non sono state inserite particolari personalizzazioni che potrebbero essere sia di tipo “estetico”, con la definizione di nuove regole di stile, oppure funzionali con la definizione di nuove istruzioni (function in php).

Le nuove regole di stile possono essere inserite direttamente in style.css di seguito all’istruzione di import del CSS del tema padre. Per esempio, volendo modificare il colore dei titoli rispetto al tema padre possiamo aggiungere una regola apposita.

Le regole del tema figlio avranno la precedenza su quelle equivalenti del tema padre, sovrascrivendole.

Come installare un Tema Child WordPress con un solo click

Se la guida che ti ho precedentemente illustrato sulla creazione di temi child WordPress ti sembra difficile qui di seguito trovi il miglior plugin WordPress per creare temi child con un solo click in modo facile e sicuro: Child Theme Configurator.

Con il plugin Child Theme Configurator riuscirai a configurare un tema child WordPress in un istante e a trovare anche facilmente le parti del tema parent (genitore) che vuoi modificare.

Conclusione su: come creare un tema child WordPress

In questa guida abbiamo visto cosa sono i temi child WordPress e come creare temi child WordPress. 
Spero di esserti stato di aiuto e di averti fatto comprendere perché usare i child theme potrebbe essere una mossa veramente intelligente e fondamentale nello sviluppo di un sito o blog WordPress.

Se vuoi lasciare la tua opinione sull’argomento puoi farlo nell’apposito box dei commenti.

Condividi sui social

Sostieni anche tu Creare Blog e Siti Web Wordpress con una piccola donazione con PayPal!

Donazioni sicure con PayPal
come creare un blog Wordpress

Ideatore e fondatore di Creare Blog e Siti Wordpress. Consulente Wordpress per aziende e professionisti che desiderano promuovere i loro servizi o prodotti sul web attraverso un blog, sito web o ecommerce.

Estensioni per Woocommerce

Prendi subito le estensioni premium che ti servono ad ampliare le funzionalità del tuo ecommerce con Woocommerce usufruendo dello sconto del 30% solo per oggi!

WooCommerce

Page Builder Wordpress

Se stai impazzendo per capire come creare pagine web avanzate dall'aspetto grafico accattivante e coinvolgente è perchè non usi uno di questi strumenti!

4
Rispondi con un commento

2 Comment threads
2 Discussione risposte
0 Followers
 
La maggior parte ha commentato
Discussione più calda
3 Autori dei commenti
  Segui i nuovi commenti  
più nuovi più vecchi più votati
Notificami
Gabriel

Ciao ottima guida!
Voglio creare un child theme per inserire i microdata ma ho un solo dubbio. Usare un child theme importando i file css ecc… non si rischia di aumentare le richieste http / query e di conseguenza di aumentare il consumo delle risorse del server e di rallentare il sito?
Grazie mille!

Giorgio

Ciao…posso esporti un problema ‘banale’ In breve: ho inserito 3 articoli nel mio blog (se ne legge un pezzo…clicchi su ‘continue reading’ e vai su un’altra pagina con l’articolo intero). Così, (tutto bene) era fino a una settimana fa. Ora facendo l’identica procedura per un nuovo articolo succede questo: 1) l’articolo non viene più messo sopra gli altri in prima pagina. 2) viene visualizzato in una nuova pagina ..non capisco dove e perchè. 3) non viene neanche spezzato dal ‘continue reading’ Per me era tutto semplice…….ho assemblato il sito usando i video trovati in rete. Non so niente di css… Leggi il resto »

WooCommerce