Come creare un tema figlio in WordPress (passo dopo passo)

Hai mai aggiornato il tuo tema WordPress solo per scoprire che tutte le modifiche personalizzate che avevi apportato al tema stesso erano andate perse? Un tema WordPress Child è la soluzione per evitare questo problema e in questo articolo ti mostreremo esattamente come crearne uno.

Muoviamoci!

Che cos'è un tema figlio di WordPress

Un tema figlio di WordPress non è considerato un tema completo come quelli che si trovano nella directory dei temi di WordPress. Invece, dipende completamente da un altro tema (chiamato Parent Theme) per poter essere attivato e funzionare correttamente.

Quando attivato, eredita tutte le funzionalità, le caratteristiche e il codice del suo tema principale senza apportare modifiche ai file del tema principale.

WordPress servirà il codice del tema principale eccetto le parti che sono sovrascritte dal tema figlio che verranno servite dalla cartella del tema figlio. Il risultato di ciò significa che quando il tema padre viene aggiornato, tutte le modifiche/aggiunte e così via apportate al tema figlio non vanno perse.

Creazione di un tema figlio (passo dopo passo)

Prima di procedere, assicurati di:

• Hai accesso ai file del tuo sito Web tramite un client FTP (come WinSCP o Filezilla)
• Hai un editor di testo disponibile (come notepad ++) .

Per iniziare, attiveremo un tema predefinito che viene anche chiamato Tema principale. In questo esempio sarà il tema Twenty Twenty. Se andiamo al front-end del nostro sito Web, vedremo qualcosa del genere:

Ora creiamo e attiviamo un tema figlio "Twenty Twenty".

Aggiungi la Directory

Per prima cosa, dobbiamo creare una nuova directory 'twentytwenty-child'' all'interno di /wp-content/themes. Nota che la cartella figlio può essere nominata come preferisci purché non usi spazi o segni di punteggiatura.

Aggiungi il file style.css

Successivamente, dobbiamo creare un file style.css e aggiungere le intestazioni del tema appropriate. Prima di procedere diamo un'occhiata allo style.css del tema genitore .

Vediamo dove si riflettono queste informazioni nell'area di amministrazione.

Innanzitutto, apri i dettagli del tema su Aspetto> Temi e dai un'occhiata più da vicino alla colonna di destra.

Se confrontiamo questo con il foglio di stile, vedremo da dove vengono estratti i vari elementi di queste informazioni.

Dobbiamo iniziare ad aggiungere alcune di queste informazioni al nostro foglio di stile del tema figlio. Le informazioni minime richieste che devono essere inserite come intestazioni sono il 'Nome del tema' e il 'Modello'.

 /* Theme Name: Twenty Twenty - Child Template: twentytwenty */

• Nome del tema: il nome desiderato del tuo tema figlio che verrà visualizzato nel back-end di WordPress.
• Modello: dovrebbe essere identico al nome della directory del tema principale. È l'intestazione più importante per il tema figlio poiché in realtà dice a WordPress quale tema è il genitore e quindi definisce la dipendenza. Senza di esso, il tuo tema figlio non funzionerà.

Una volta attivato il tema figlio, quello che vedrai nel backend è questo:

È inoltre possibile inserire le seguenti informazioni facoltative:

• Versione (versione del tema)
• Richiede almeno (versione WP minima richiesta affinché il tema funzioni correttamente)
• Richiede PHP (versione minima di WP PHP affinché il tema funzioni correttamente)
• Descrizione (dettagli relativi al tema)
• Tag (tag del tema)
• Autore (nome dello sviluppatore del tema)
• eccetera.

A questo punto, se apri il front-end del tuo sito web potresti scoprire che è rotto e assomiglia a questo:

Questo è del tutto normale in quanto il foglio di stile (style.css) a cui fa riferimento WordPress ora proviene dal tema figlio e questo foglio di stile è vuoto, a parte le informazioni che hai inserito sopra. Puoi iniziare il tuo stile da zero o caricare lo stile del tema principale e iniziare da lì. Se desideri importare il foglio di stile del tema principale, puoi farlo in due modi.

Opzione uno: importa il foglio di stile padre nel modo classico

Tutto quello che devi fare è semplicemente aggiungere questa riga al file style.css del tuo tema figlio:

 @import url('../twentytwenty/style.css');

Questo comando dice a WordPress dove cercare per recuperare il file CSS originale da. Ora, se aggiorni la tua home page, sembra che torni alla normalità. Qualunque cosa tu aggiunga ora in style.css sovrascriverà lo stile padre importato. Prova ad esempio ad aggiungere una dimensione del carattere diversa per il titolo h2 "Hello world!".

Aggiorna la pagina e guarda l'ispettore elementi delle schede dello sviluppatore.

Noterai che il valore aggiunto viene conteggiato e il valore predefinito (stile genitore) "font-size: 6.4rem;" è stato ignorato.

Quello che devi prendere in considerazione è che l'uso di questo metodo ha un'influenza negativa sulla velocità del tuo sito poiché i file sono costretti a caricarsi uno dopo l'altro e non in parallelo. Più in particolare, il browser deve scaricare, analizzare ed eseguire il primo file prima che venga "informato" della necessità di scaricare il secondo file.

Per questo motivo, non è più consigliabile importare il file padre style.css in questo modo.

Opzione due: importa il foglio di stile padre nel modo giusto

Per importare il file genitore style.css 'nel modo giusto' dobbiamo prima aggiungere un file functions.php vuoto all'interno della cartella del tuo tema figlio.

Una volta fatto, aprilo con il tuo editor e aggiungi un tag PHP di apertura (<?php), dopodiché puoi aggiungere il seguente codice PHP:

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

Se controlli ora gli strumenti di sviluppo del tuo browser, noterai che i risultati sono gli stessi del modo "tradizionale" descritto nell'opzione uno sopra, tranne che ora è molto più veloce.

Qualche ulteriore nota sul codice PHP:

• Lo 'parent-theme-style' è il nome dell'handle e deve essere univoco
• get_template_directory_uri() . '/style.css' get_template_directory_uri() . '/style.css' indica a WordPress la posizione di origine della posizione padre style.css
• get_template_directory_uri() recupera l'URI della directory del modello per il nostro tema principale. Nel nostro caso restituisce "http://mywebsite.onpressidium.com/wp-content/themes/twentytwenty"

Aggiungi funzionalità al tema del tuo bambino

Ora che hai creato un tema figlio puoi iniziare ad aggiungere alcune funzionalità aggiuntive. Diamo prima un'occhiata a come faresti per modificare il file functions.php nel tuo tema figlio e come funziona in pratica.

Child Theme functions.php

A differenza del file style.css , quando inserisci functions.php nel tema figlio, il codice functions.php del tema genitore sarà ancora in esecuzione. Qualunque cosa tu aggiunga nel functions.php del figlio verrà eseguita in aggiunta al contenuto functions.php del genitore.

Ad esempio, vediamo come possiamo modificare il testo "Leggi di più" per la visualizzazione dei post:

Passaggio uno: crea una categoria di post di prova:

Passaggio due: crea due nuovi post in questa categoria. Aggiungiamo alcuni contenuti di esempio. A questo punto, se visiti la pagina della categoria vedrai questo:

In questo esempio, vogliamo cambiare il testo "Continua a leggere" visualizzato nel pulsante che carica l'intero post.

Facciamo un passo indietro per capire come viene visualizzato questo testo. In WordPress, per modificare una determinata funzione, utilizziamo i filtri.

In questo esempio, per ottenere ciò che vogliamo, dobbiamo personalizzare il filtro "the_content_more_link" che è inizialmente introdotto nel file principale wp-includes/post-template.php nella riga 369 in questo modo:

 $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

Questo è attualmente sovrascritto dal tema padre ventiventi nel suo file function.php (riga 571) da questo pezzo di codice:

 function twentytwenty_read_more_tag( $html ) { return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

Quindi, se vuoi cambiare il testo "Continua a leggere" nel pulsante, questo può essere sovrascritto nel functions.php del tuo tema figlio se aggiungi questo pezzo di codice:

 function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );

L'hook ''the_content_more_link'' è comune tra quei file, nel qual caso prevale sempre l'hook del bambino.

Quindi aggiorna la pagina e voilà:

Come personalizzare i modelli PHP

Lo screenshot sopra mostra il contenuto del modello del tema ventitré per la visualizzazione della categoria del post. Quindi, come possiamo cambiarne il design o aggiungere/rimuovere informazioni usando il tema figlio?

Ecco come puoi farlo:

1. Trova il file php correlato
2. Copia il file appropriato nella cartella del tema figlio e modifica
3. Personalizzalo come meglio credi

Il primo e più comune problema qui è che dobbiamo trovare quale file php contiene l'output che vogliamo modificare. Qualcosa che ti aiuterà sicuramente a orientarti in questo è la gerarchia dei modelli di WordPress.

In poche parole, gli unici file effettivamente richiesti da un tema WordPress sono i file index.php e style.css. I file e le cartelle extra sono in realtà file chiamati dall'interno di index.php . Sono i frammenti di ciò che alla fine vedrai come output del file index.php .

Per quanto riguarda il tema Twenty Twenty, se visualizziamo il suo file index.php , possiamo vedere nella riga 79 che, quando il contenuto è uno o più post, vengono utilizzati i file php nella directory template-parts/.

 if ( have_posts() ) { $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

Nel nostro caso dovremo copiare il file content.ph p dall'interno della sottocartella del tema template-parts.

Inoltre, assicurati di copiare solo i file PHP che intendi personalizzare. Non copiare tutti i file PHP nel tema principale.

NOTA: la struttura delle cartelle dovrebbe essere la stessa nel tema figlio affinché le modifiche si riflettano sul front-end.

Quindi, prima creiamo la sottocartella 'template-parts' e vi inseriamo una copia di content.php .

Ora puoi aprire il file nel tuo editor e personalizzarlo.

Prova a cambiare qualcosa di banale all'inizio per assicurarti che tutto funzioni bene, ad esempio, cambia una classe div e aggiorna il tuo frontend per controllare i risultati.

Personalizza il modello di categoria di post

Abbiamo già due post nella categoria "categoria test". Ora puoi creare un menu di elementi "'Categoria post"' e collegarlo alla "categoria di test". Se fai clic sulla nuova voce di menu, dovresti vedere la pagina di visualizzazione della categoria del post.

Ora puoi modificare ulteriormente il file content.php e cambiare la visualizzazione della categoria dei post nel tuo stile. Come suggerimento, trova i riferimenti dei file extra inclusi come nella riga 23:

 get_template_part( 'template-parts/featured-image' );

Ciò significa che il file che restituisce l'immagine in primo piano è template-parts/featured-image.php

Quindi, puoi copiare il file nella directory del tema figlio e modificarlo. Fantastico!

Conclusione

Un tema figlio consente agli utenti di modificare il layout, lo stile e la funzionalità del tema principale senza perdere la possibilità di aggiornare il tema principale. Frequentemente, i web designer sono riluttanti ad aggiornare il tema del loro sito web perché sanno che se lo fanno, perderanno le modifiche apportate direttamente nel tema principale. Questo è un problema serio in quanto è importante mantenere aggiornato il tema in quanto lo sono i plug-in e il core di WordPress. L'utilizzo di un tema figlio sin dall'inizio rimuove questo problema e consente di aggiornare il tema principale come richiesto senza timore di sovrascrivere tutte le modifiche apportate al tema nel suo insieme.