Come creare un tema child in WordPress.
La modifica di un tema in WordPress è una pratica molto utilizzata, ma non tutti sanno che se eseguita su un tema child le modifiche effettuate non andranno perse con l’aggiornamento del tema.
Un tema child eredita tutte le caratteristiche del tema padre, oltre a non perdere i cambiamenti effettuati, con minori possibilità di commettere errori.
Per creare un tema child dovrete seguire questi pochi passi.
Passo 1. Connettersi al sito
Connettetevi tramite il vostro pannello di amministrazione (Plesk, CPanel,ecc..) o tramite FTP al vostro sito.
Passo 2. Creare la cartella del tema child
Navigate fino ad arrivare alla cartella dei temi. Generalmente /wp-content/themes/
Ora create una nuova cartella a chiamatela come volete. Per comodità suggerisco “nomedelvostrotemaChild”.
Passo 3. Creare il foglio di stile “style.css”
Aprite la cartella appena creata. Qui create un nuovo file e lo chiamerete “style.css” .
Passo 4. Editare il “style.css”
Aprite con un qualsiasi editor di testo il file appena creato ( io uso per comodità Notepad++).
Incollate queste poche righe di codice all’interno di file:
/*
Theme Name: WPB Child Theme
Theme URI: http://www.URL-TEMA.com/
Description: A NOMEVOSTROTEMA child theme
Author: Askbruzz
Author URI: https://www.askbruzz.com
Template: NOMEDELVOSTROTEMA
Version: 1.0.0
*/
@import url("../NOMEVOSTROTEMA/style.css");
/* ------------------ Modifiche al tema -------------- */Ora dovrete sostituire la parola “NOMEVOSTROTEMA” con ovviamente il nome del vostro tema e “URL-TEMA” con l’indirizzo internet del vostro tema. Salvate.
- Theme Name: Indica il nome del tema. ⇒ Obbligatorio.
- Theme URI: Indica l’URL della pagina web del tema ⇒ Opzionale.
- Author: Indica il nome dell’autore ⇒ Opzionale.
- Description: Indica la descrizione del tema ⇒ Opzionale.
- Template: Indica il nome della cartella del tema padre. E’ case sensitive, quindi distingue tra lettere maiuscole e minuscole. ⇒ Obbligatorio.
- Version: Indica la versione del tema child. ⇒ Opzionale.
Prestate attenzione perché @import url("../NOMEVOSTROTEMA/style.css"); è case sensitive, ovvero distingue maiuscole da minuscole. Ovvero, twentythirteen è diverso da TwentyThirteen.
Passo 5. Attivazione del tema child
Collegatevi al vostro sito ed entrate nel backend. Andate su Aspetto -> Temi.
Se non ci saranno stati problemi nella creazione e modifica del file “style.css” vi apparirà il tema child appena creato.
Attivatelo.
Aprite un’altra finestra del browser e controllate il vostro sito. Se tutto sarà come prima, la creazione del tema child sarà andata a buon fine.
D’ora in poi tutte le modifiche che vorrete effettuare al vostro tema le andrete ad inserire all’interno del “style.css” appena creato.
Qualche esempio di modifiche possibili con il vostro tema child.
Con il seguente esempio andrete a modificare il colore ed il font utilizzato per i vostri titoli (Titolo 1, Titolo 2, ecc..) all’interno del vostro articolo. In questo specifico esempio il colore sarà bianco ed utilizzerà il font “Open Sans” o “Sans-serif” a seconda di quello disponibile, in ordine da sinistra verso destra.
/* Colore Paragrafi*/
h1, h2, h3, h4, h5, h6 {
color: #ffffff;
font-family: 'Open Sans', sans-serif;
}
Con il seguente esempio andrete a modificare la dimensione dei vari titoli (Titolo 1, Titolo 2, ecc..) all’interno del vostro articolo. Il valore è espresso in pixel.
/* Dimensioneparagrafi*/
h1 { font-size: 42px; line-height: 1.2; }
h2 { font-size: 38px; line-height: 1.2; }
h3 { font-size: 34px; line-height: 1.2; }
h4 { font-size: 30px; line-height: 1.2; }
h5 { font-size: 26px; line-height: 1.2; }
h6 { font-size: 20px; line-height: 1.2; }Con il precedente criterio potrete modificare praticamente tutto. Vi rimando a questo link dove troverete moltissimi tutorial ed esempi sul CSS. La particolarità del sito è che potrete fare pratica direttamente li.
Askbruzz
