Come creare un tema figlio di WordPress

Di solito, è quasi impossibile trovare il tema perfetto; ci sono sempre alcune modifiche che devono essere fatte. Quindi, perché non prendere un bel tema predefinito di WordPress, come Twenty Fifteen, e renderlo tuo in modo che appaia e funzioni proprio come desideri? La creazione di un tema figlio ti farà risparmiare un sacco di tempo e mal di testa lungo la strada (fidati di me).

Posso parlare per esperienza diretta. Ho "ereditato" un sito WordPress in cui lo sviluppatore aveva appena fatto a pezzi il tema principale e ricordo ancora quanto fosse frustrante non poter effettivamente aggiornare il tema per paura che sovrascrivesse le personalizzazioni che davano al sito la sua funzionalità. Non sapevo cosa fosse il codice originale e cosa fosse personalizzato, quindi era lì, senza possibilità di aggiornamenti.

La storia, però, ha un lieto fine. All'epoca ero un nuovo utente di WordPress, quindi all'inizio mi ha insegnato che alterare un tema principale non era una buona idea. Quando il sito è stato finalmente riprogettato, la prima cosa da fare è stata prendere le personalizzazioni e inserirle in un tema figlio.

Un tema figlio ti consente di lavorare in una posizione separata senza che il tuo lavoro venga sovrascritto da un futuro aggiornamento del tema genitore. Tecnicamente parlando, quando crei un tema figlio, crei un set separato di file che puoi utilizzare per personalizzare il tema senza influire sul tema principale originale. Se apporti modifiche ai file di un tema principale, tali modifiche verranno sovrascritte al prossimo aggiornamento del tema. Questo è un grosso problema perché gli aggiornamenti possono includere modifiche alle funzionalità, correzioni di bug e importanti misure di sicurezza. È fondamentale mantenere aggiornato il tema principale e utilizzare un tema figlio per eventuali personalizzazioni.

Nozioni di base sul tema del bambino

I temi figlio sono temi separati creati dall'utente che si basano su un tema principale per le sue funzionalità di base. Quando usi un tema figlio, WordPress sa fare riferimento ad esso e cercare qualsiasi funzionalità inclusa. Questo è fantastico perché ti consente di modificare solo le parti del tema padre che devi cambiare, rendendo questo un modo molto efficiente per aggiungere personalizzazioni al tuo sito WordPress.

Per scavare un po' più a fondo, ecco come funzionano i temi figlio a livello di file. WordPress verifica se un file necessario è incluso nel tema figlio. Se è incluso, viene caricato il file del tema figlio. Se non ce n'è uno nel tema figlio, viene caricato il file nel tema principale. L'unica eccezione a questo è il file functions.php, in cui vengono caricate sia la versione genitore che quella figlia. In genere, ci sono informazioni cruciali nel file functions.php. Se WordPress caricasse solo la versione del tema figlio (a meno che tu non abbia copiato tutto), il sito non funzionerebbe correttamente. Per fortuna, WordPress carica entrambi i file, quindi non devi preoccuparti di copiare l'intero file functions.php nel tuo tema figlio.

Ricorda, puoi sempre disattivare il tema figlio e ricorrere all'originale, se necessario. È una strada a senso unico però; non puoi disattivare il genitore e fare affidamento sul tema figlio.

Se stai aggiungendo personalizzazioni a un tema WordPress, è meglio utilizzare un tema figlio. Pronto a crearne uno tuo? Ora esamineremo il processo, passo dopo passo.

Creazione di un tema figlio

Non è così complesso come potrebbe sembrare crearne uno. In effetti, tecnicamente tutto ciò di cui hai bisogno sono solo due file: un file style.css e un file functions.php . La maggior parte dei temi figlio ha più di quello, ma tecnicamente parlando, quelli sono gli unici due richiesti.

Per creare un tema figlio, devi avere WordPress installato insieme a un tema principale che desideri utilizzare.

Crea una directory di temi

Per prima cosa, vai alla directory del tuo tema e crea una cartella per il tuo nuovo tema. Dagli un nome riconoscibile. Per questo esempio, nominerò il mio tema child-example in modo che sia facile da trovare.

Crea il foglio di stile del tema figlio

Il passaggio successivo, molto cruciale, è la creazione del foglio di stile del tema figlio. Crea un file style.css . Tieni presente che deve essere chiamato style.css affinché le cose funzionino correttamente.

Successivamente, dovrai includere alcune informazioni sul tuo tema.

Copia e incolla questo nel style.css file :

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

Può sembrare molto, ma in realtà ce ne sono solo due necessari, che sono Theme Name e Template . Il Theme Name dice a WordPress il nome del tema figlio. Il Template dice a WordPress quale tema dovrebbe considerare come tema principale, il che è molto importante.

La maggior parte degli altri sono abbastanza autoesplicativi, ma ce ne sono un paio che potrebbero aver bisogno di un po' più di chiarimento. Il Text Domain e i Tags potrebbero creare un po' di confusione. Il Text Domain viene utilizzato per tradurre stringhe a fini di internazionalizzazione. Questo è unico per il tuo tema e dovrebbe essere usato ogni volta che usi le funzioni di traduzione. Ci sono molte più informazioni nel Codex e possono essere trovate nell'argomento I18n per sviluppatori WordPress. La sezione Tags è un elenco di tag specifici del tema WordPress. Per questo esempio, ho esaminato il genitore Twenty Fifteen style.css , ho preso i tag da lì e li ho inseriti nel tema figlio.

Utilizza gli stili padre

Ricordi come WordPress cerca prima i file del tema figlio? In questo momento, il tema figlio funziona, ma non sembra molto raffinato perché non hai ancora eseguito alcuno stile. Se lo attivi e ricarichi la pagina, sembrerà un po' disordinato. Probabilmente assomiglierà a questo:

Risolviamo questo problema in modo che ricada sul tema principale e ci sarà almeno uno stile applicato. Utilizzerai comunque il tuo tema figlio per il tuo stile personalizzato, ma prima mostra lo stile genitore.

Per essere sicuri di caricare il foglio di stile del file genitore, dovremo accodarlo nel tema figlio. Avrai bisogno di un file functions.php nel tema figlio per inserire il seguente snippet.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Realizzazione di una personalizzazione CSS

Ora che vengono visualizzati gli stili padre, modifichiamo alcuni CSS per la personalizzazione del tema figlio. Per questo esempio, lo stile di un elemento di sfondo per il contenuto della pagina è un buon modo per vedere il tema figlio in azione. È stato disegnato in bianco nel CSS del tema principale, ma cambiamolo in blu nel tema figlio. Ricorda, gli stili principali vengono caricati per primi e le tue personalizzazioni verranno caricate dopo, quindi saranno quelle che vedremo.

Se sei un utente di Chrome, gli Strumenti per sviluppatori sono molto utili per vedere lo stile e sperimentare nel browser. Vai a Visualizza > Sviluppatore > Visualizza sorgente e seleziona gli elementi della pagina. Gli stili verranno visualizzati a destra. Ho esaminato l'articolo che aveva una classe .hentry con uno sfondo bianco. Ho incollato un valore esadecimale per testarlo prima nel browser.

Per apportare questa modifica, apri il file CSS nel tema figlio e aggiungi le informazioni CSS.

Come puoi vedere, le modifiche allo stile possono essere facilmente apportate nel tema figlio.

Modifica della funzionalità del tuo tema figlio

Regolare lo stile è abbastanza semplice, ma per quanto riguarda altre cose come l'intestazione, il piè di pagina, la barra laterale, ecc.? Diciamo che ci sono alcune modifiche da fare nel footer. Copia e incolla il piè di pagina dal tema principale nel figlio. Il file footer.php può essere aperto nell'editor di testo di tua scelta e modificato. Ho deciso di rimuovere la riga "Proudly powered by WordPress", quindi l'ho eliminata dal file nel mio tema figlio. Questo è ora il file che WordPress caricherà per primo, quindi quella riga di testo non verrà mostrata.

Creare un tema figlio è una buona abitudine da prendere durante la creazione di temi WordPress. Con pochi semplici passaggi, sono facili da creare e mantenere. Mantenere le personalizzazioni separate dai temi principali è utile sia per l'organizzazione sia per mantenere tutto aggiornato, il che farà risparmiare un sacco di mal di testa lungo la strada.