Come creare un tema per bambini WordPress in 4 semplici passaggi

Pubblicato: 2015-11-25
Tema WordPress per bambini
Segui @Cloudways

I temi figlio, come suggerisce il nome, sono un tema che deriva funzionalità da un tema genitore. La modifica diretta del tema WordPress non è consigliata in alcuni casi, ad esempio quando il tema potrebbe essere aggiornato. Se viene applicato un nuovo aggiornamento di un tema, potresti perdere la personalizzazione che hai fatto.

Per mantenere le personalizzazioni e anche continuare a ricevere gli aggiornamenti dei temi, si consiglia di creare un tema figlio di WordPress del tema principale che si desidera utilizzare. La creazione di un tema figlio ha un altro vantaggio, ovvero il tema principale rimane intatto e libero da qualsiasi modifica.

I temi figlio esistono in una cartella diversa rispetto a un tema padre e il tema figlio dipende dalle funzionalità del tema padre a meno che non venga modificato. Se stai utilizzando un tema figlio sul tuo sito Web, il core di WordPress controllerà prima i file del tema figlio. Se non viene modificato, WordPress eseguirà i file del tema principale.

Per comprendere completamente il concetto di temi figlio in WordPress, creeremo un tema figlio del tema WordPress predefinito Twenty Fifteen e apporteremo alcune modifiche per ottenere l'idea alla base dei temi figlio.

Per creare un tema figlio di WordPress, seguiremo questi passaggi:

  • Crea una cartella e chiamala venticinquenne. L'aggiunta di -child è considerata una buona pratica.
  • Crea style.css con le informazioni del tema figlio e il file functions.php
  • Importa il modello Twenty Fifteen in style.css
  • Accoda i fogli di stile tramite un file functions.php
  • Modifica file modello come single.php

Passaggio 1: crea una cartella di temi figlio e aggiungi style.css

Il primo passo è creare una nuova cartella per il nostro tema figlio. Chiamalo venti-quindici-figli per ricordare facilmente dove risiede il nostro tema figlio.

Per fare ciò, connettiti al tuo server utilizzando un client FTP come FileZilla e vai a /public_html/wp_content/themes e crea una nuova cartella chiamata venticinquenne

In questa nuova directory creare un file style.css e incollarvi le seguenti informazioni.

 /*
Nome del tema: Twenty Fifteen Child
URI del tema: https://wordpress.org/themes/twentyfifteen/
Autore: il team di WordPress
URI dell'autore: https://wordpress.org/
Modello: ventiquindici
Descrizione: Tema per bambini di TwentyFifteen
Versione: 1.3
Licenza: GNU General Public License v2 o successiva
URI licenza: http://www.gnu.org/licenses/gpl-2.0.html
Tag: nero, blu, grigio, rosa, viola, bianco, giallo, scuro, chiaro, due colonne, barra laterale sinistra, layout fisso, layout reattivo, pronto per l'accessibilità, sfondo personalizzato, colori personalizzati, personalizzato intestazione, menu personalizzato, stile editor, immagini in primo piano, microformati, post-formati, supporto in lingua rtl, post appiccicoso, commenti in thread, pronto per la traduzione
Dominio del testo: ventiquindici figli
Questo tema, come WordPress, è concesso in licenza con licenza GPL.
Usalo per creare qualcosa di interessante, divertirti e condividere ciò che hai imparato con gli altri.
*/

Le righe più importanti da modificare sono "Nome tema" , "Dominio testo" e "Modello" . Poiché il nome del tema non può essere lo stesso di Twenty Fifteen, e nel modello, diciamo a WordPress che questo tema è il tema figlio di Twenty Fifteen, dovremmo chiamare i file dalle cartelle Twenty Fifteen se non esistono nella cartella Twenty Fifteen cartella. Inoltre, il dominio di testo dovrebbe essere diverso e unico per ogni tema che hai con la tua installazione di WordPress.

Ora, se andiamo alla nostra dashboard di amministrazione di WordPress → Aspetto → Tema , vedremo che è apparso Twenty Fifteen Child. Possiamo applicare quel tema sul nostro sito.

Poiché style.css è presente nella directory del tema figlio. WordPress caricherà quello style.css e non lo style.css del tema principale. Ogni altro file come index.php , page.php , functions.php verrà caricato dal tema principale.

Poiché non abbiamo stili definiti nel file style.css del tema figlio, dovremo importare gli stili. La migliore pratica consigliata sul codex di WordPress è accodare i fogli di stile utilizzando il file functions.php.

Passaggio 2: accodare i fogli di stile utilizzando functions.php

A differenza di altri file, la teoria alla base del file functions.php nei temi figlio di WordPress è: WordPress prima carica functions.php del tema figlio e inizializza le funzioni in esso, in seguito eseguirà anche functions.php del tema padre.

Come ho detto prima, il modo migliore per importare i fogli di stile è metterli in coda attraverso il file functions.php .

Crea il file functions.php nella directory del tuo tema figlio e aggiungi il seguente codice.

 <?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
funzione enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Questo chiamerà il foglio di stile " style.css " dal file dei temi padre. Se vuoi modificare qualcosa nei fogli di stile, puoi aggiungere quelle regole nel file style.css del tema figlio.

Passaggio 3: modifica il file style.css del tema figlio

Nei temi figlio di WordPress puoi facilmente modificare i fogli di stile definendo le regole in style.css nella cartella del tema figlio. Ad esempio, se vogliamo cambiare il colore dell'ancora, tutto ciò che dobbiamo fare è aggiungere il seguente codice nel file style.css del nostro tema figlio

 un {
colore: # D54E21;
decorazione del testo: nessuna;
}

Quello che succede qui è che la regola style.css del tema figlio per "a" sovrascrive style.css del tema padre, il resto rimane intatto.

Passaggio 4: modifica un file modello di single.php

Possiamo facilmente modificare i singoli file modello nei temi figlio. Ad esempio, se vogliamo modificare single.php, dobbiamo copiare quel file dalla cartella del tema principale e incollarlo nella cartella del tema figlio.

Supponiamo di voler rimuovere la sezione dei commenti dalle pagine dei singoli post. Dopo aver copiato il file nella nostra cartella del tema figlio, possiamo modificarlo e rimuovere la seguente sezione dei commenti.

 // Se i commenti sono aperti o abbiamo almeno un commento, carica il modello di commento.
if (comments_open() || get_comments_number() ):
commenti_modello();
finisci se;

Quello che succede qui è che WordPress controlla la cartella del tema figlio per single.php , se esiste nella directory lo caricherà da lì, altrimenti tornerà alla cartella del tema principale.

Proprio così, possiamo modificare qualsiasi singolo file modello nei nostri temi. Questo approccio è generalmente buono perché mantiene intatto il nostro tema principale e aggiorna il tema principale senza perdere la nostra personalizzazione.