Temi child WordPress: come creare temi child wordpress

Condividi con gli amici

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:

Parametro Utilizzo Descrizione
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 con gli amici

Questo articolo ha 4 commenti.

  1. 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!

    1. Come già suggerito nell’articolo devi abbandonare definitivamente e sostituire l’istruzione CSS:
      @import url (../parent-theme/style.css);
      Con la funzione presente nel file function.php del tema child:
      add_action( ‘wp_enqueue_scripts’, ‘my_child_theme_scripts’ );
      function my_child_theme_scripts() {
      wp_enqueue_style( ‘parent-theme-css’, get_template_directory_uri() . ‘/style.css’ );
      }
      Tale procedura ha il vantaggio di non rallentare il caricamento delle pagine del tuo sito, questo perché il file functions.php del tema figlio verrà caricato prima di quello del tema padre.

  2. 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 e html. Quindi non ho idea di cosa sia successo…..e di come risolvere il problema.
    Tieni presente che:
    – non ho aggiunto nuovi plugin e non ne ho aggiornato nessuno.
    – non ho fatto alcuna modifica di nessun tipo (in quanto ho solo 45 pagine indicizzate su 257)
    – sono tornato a un backup precedente…..quando tutto funzionava bene…..ma questo problema si è presentato appena ho provato a scrivere un nuovo articolo.
    Anche se fosse una fesseria…….non la risolverei……sono giorni che cerco in rete.
    Il tema è twenty fourteen……..
    Grazie………ciao.

    1. Come primo consiglio che mi sento di darti è quello di acquistare uno spazio web e un dominio (qui: i migliori hosting per WordPress) e di non usare spazi web gratuiti come altervista.org perchè impongono varie limitazioni in cambio del servizio offerto e poi perchè non ottieni gli stessi risultati in termini di SEO e di indicizzazione nei motori di ricerca. Giorgio, WordPress per impostazione predefinita ordina gli articoli in ordine di data di pubblicazione quindi al primo posto trovi sempre l’ultimo articolo pubblicato, ti informo inoltre che se vuoi mettere in primo piano un determinato post (cioè in evidenza e sempre al primo posto rispetto a tutti gli altri) leggi questo articolo: post in evidenza WordPress
      Per poter vedere il bottone “continua a leggere” (ovvero “Continue reading” se il tema non è tradotto in italiano) devi innanzitutto assicurarti che il tema in uso abbia delle proprie IMPOSTAZIONI DI LETTURA dei post WordPress (vedi: theme option presente in “Aspetto” e poi “Personalizza” menu di sinistra della bacheca WordPress o direttamente nella barra admin in “Personalizza” ) e verificare come sono settate; in alternativa per visualizzare il pulsante “Leggi tutto o continua a leggere” potresti usare il tag html “more” oppure inserirlo direttamente dall’editor dei post di WordPress usando l’apposito pulsante “inserisci il tag leggi tutto” presente nella barra degli strumenti e decidere anche il punto esatto dove farlo apparire all’interno del tuo articolo (vedi questa guida: come inserire il tag “Continua a leggere” su WordPress).
      Ti ricordo infine che il pulsante “Continua a leggere o leggi tutto” è visibile solo a pubblicazione avvenuta e solo nella home del blog, cioè nella pagina dove vengono esposti i riassunti di tutti i tuoi post più recenti (e non nella versione completa del post singolo). Se ti interessa tradurre il tema in uso e quindi anche il tag more o pulsante “Continue reading” in italiano leggi questo articolo: come tradurre i temi e i plugin WordPress in italiano.

Lascia un commento

Chiudi il menu
×

Carrello