Nonostante la loro potenza e la facilita’ d’uso, i child theme sono abbastanza sconosciuti agli utenti di WordPress. Avrei voluto conoscerli la prima volta che mi sono dovuto cimentare con i temi: ne ho trovati di molto belli ma ognuno di loro aveva alcuni problemi.Questa guida e’ stata originariamente scritta da Demetris e pubblicata su op111.net. Tradotta ed adattata con l’aiuto dell’ autore il quale ha fornito tutti i file originari.
Nonostante la loro potenza e la facilita’ d’uso, i child theme sono abbastanza sconosciuti agli utenti di WordPress. Avrei voluto conoscerli la prima volta che mi sono dovuto cimentare con i temi: ne ho trovati di molto belli ma ognuno di loro aveva alcuni problemi. Alcuni avevano una scelta dei caratteri discutibile, altri un interlinea non gradevole, una larghezza che impediva una corretta lettura e via dicendo.
Tali manchevolezze sono facili da risolvere: con una conoscenza elementare dell’ HTML e dei CSS ed una guida di riferimento, si possono capire i riferimenti nei CSS, cambiare alcuni valori e salvare le modifiche. Questo modo di lavorare non e’ il massimo: dobbiamo tenere traccia dei cambiamenti apportati, ricordarcene e riapplicarli nel momento in cui WordPress o il tema vengono aggiornati.
La soluzione sono i child theme.
Se vi ritrovate in quello che ho scritto qui sopra, questa e’ la guida giusta. Non sara’ un corso di CSS ma una guida, con alcuni esempi, su come creare un child theme per modificare qualcosa del vostro tema preferito. Con un po’ di esperimenti potrete andare ben oltre gli esempi base che vedremo tra poco: riuscirete in men che non si dica a cambiare drasticamente l’aspetto del vostro tema di WordPress. E tutto questo solo utilizzando CSS, senza toccare il codice HTML e PHP.
CONTENUTI
- Come funziona un child theme in WordPress
- Come facciamo a modificare un tema senza modificarlo?
- Cosa ci serve per per fare un child theme
- Assembliamo un child theme: il framework
- Usiamo Firebug
- Aggiungiamo proprieta’ CSS al nostrochild theme
- Mettiamo tutto insieme ed attiviamo il child theme
- Note
- Link agli strumenti ed alle risorse
1. Come funziona un child theme in WordPress
- Creiamo un child theme: bastano una directory ed un file css.
- Potremmo anche aggiungere un file functions.php (anche se andremmo fuori tema).
- Il child theme, nel suo file CSS, dichiara chi e’ il suo “genitore”, cioe’ il tema dal quale vengono prelevati i template. Il child theme eredita tutti i file contenuti nel genitore ad eccezione del foglio di stile (il quale puo’ essere esplicitamente importato con @import). A questo punto, il child theme:
- si attiva come qualunque altro tema, dal pannello di amministrazione;
- si comporta esattamente come il tema genitore, in tutto e per tutto. Per esempio, se il genitore ha una pagina di configurazione, la avra’ anche il child theme;
- L’aspetto e’ identico a quello del genitore, gli unici cambiamenti sono quelli che apportiamo, dal piu’ grande al piu’ impercettibile.
- Non dobbiamo più preoccuparci di tenere traccia delle modifiche apportate, poiche’ non le abbiamo apportate al tema principale.
2. Come facciamo a modificare un tema senza modificarlo?
Per lo stile, questo e’ possibile proprio per la logica dei CSS. In questo particolare caso, noi importiamo come base il foglio di stile del tema genitore e poi lo andiamo a sovrascrivere dove e quando serve. Se un valore e’ in conflitto con uno preesistente, l’ultimo che viene trovato ha la precedenza. Riporto direttamente dalle Specifiche CSS 2.1:
[I]f two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself. — FONTE
Vediamo un esempio. Il CSS genitore indica:
body <span style="color: #0a0;">{</span> <span style="color: #000; font-weight:900;">color</span><span style="color: #0a0;">:</span> <span style="color: #c0c;">#333333</span><span style="color: #0a0;">;</span> <span style="color: #0a0;">}</span>
Significa testo grigio su fondo bianco. E se noi preferissimo il nero? Facile: nel foglio di stile del child theme inseriamo:
body <span style="color: #0a0;">{</span> <span style="color: #000; font-weight:900;">color</span><span style="color: #0a0;">:</span> <span style="color: #c0c;">#000</span><span style="color: #0a0;">;</span> <span style="color: #0a0;">}</span>
Le due dichiarazioni sono in conflitto. Hanno ambedue gli stessi valori ma con una semplice differenza: quella del genitore viene importata mentre quella del child theme e’ nel foglio di stile stesso e dunque viene applicata!
3. Cosa ci serve per per fare un child theme
NECESSARI
- Accesso FTP al nostro sito (i siti ospitati su WordPress.com non lo offrono) ed un client FTP;
- Un semplice editor di testo (meglio se di codice);
- Un tema genitore. Negli esempi useremo Basic2Col: wangenweb.com/wordpress/themes/basic2col — sicuramente riuscirete a seguire il discorso anche usando un tema a vostra scelta (dovrete solo cambiare dei valori nel foglio di stile).
RACCOMANDATI
- Firebug, una estensione per Firefox;
- una guida all’ HTML e ai CSS;
- uno stumento di validazione dei CSS (utilissimo per trovare gli errori: potete usare l’estensione per Firefox Web Developer).
Prima di continuare, date un’ occhiata ai link in fondo alla pagina: contengono i link agli strumenti raccomandati, risorse e alcune buone guide. E’ essenziale avere sotto mano una guida ai CSS e all’ HTML mentre proviamo a seguire questa guida.
4. Assembliamo un child theme: il framework
4.1. Passo A
Apriamo l’editor di testo, creiamo un nuovo file ed incolliamoci il seguente codice:
<span style="color: #808080; font-style: italic;">/* Theme Name: Kid Theme URI: http://www.altamentedecorativo.com/ Description: [ct] per Basic2Col Author: Danny Author URI: http://www.altamentedecorativo.com/ Template: basic2col Version: 0.1 . This work is released under the GNU General Public License 2: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html . */</span> <span style="color: #a1a100;">@import url("../basic2col/style.css");</span>
Sistemiamo i due URI (Uniform Resource Identifiers) e il nome dell’ autore, salviamolo come style.css.
NOTE
- Il nome del CSS —style.css— e’ importante. Il nostro child theme non verra’ riconosciuto da WordPress senza che un file con questo nome non sia presente nella cartella del child theme.
- La parte tra
/*e*/e’ come WordPress identifica il tema, e lo mostra nel pannello di amministrazione. Questa parte viene ignorata dai browser poiche’ qualunque cosa inserita tra/*e*/viene considerato un commento. Templatee’ importante, poiche’ dichiara quale e’ il tema genitore. Il tema genitore va dichiarato usando il nome della sua cartella esattamente come quello contenuto in wp-contents/themes/, stando attenti alle maiuscole. Non usare il nome del tema, possono spesso essere diversi.@importdeve precedere tutte le altre regole. Se la inseriamo dopo, il tema non verra’ riconosciuto da WordPress e quindi non importato.
4.2. PASSO B
Assicuriamoci che il tema genitore sia nella cartella wp-contents/themes/. Se cosi’ non fosse, copiamolo dentro.
Nella stessa cartella, wp-content/themes, creiamo una nuova e chiamiamola kid (o qualunque altro nome).
Creiamo una cartella (clicca per ingrandire)
Tecnicamente, il nostro child theme e’ pronto. Possiamo caricare sul server il file style.css nella directory kid e attivare il child theme dal pannello di controllo di WordPress. Controllate: apparira’ esattamente identico al tema genitore poiche’ non abbiamo apportato alcuna modifica.
Iniziamo ad aggiungere regole al foglio di stile del nostro child theme. Trovare le regole ed i valori che ci servono puo’ essere un lavoro duro e noioso. Ecco che ci viene in aiuto FireBug.
5. Usiamo Firebug
Installiamo Firebug in Firefox: getfirebug.com. Vediamo nei prossimi tre passi come usarlo per ispezionare i CSS e trovare le informazioni che ci servono. E modificale dal vivo.
Clicchiamo con il destro su un oggetto in una pagina e selezioniamo Inspect Element. Qui, sto cercando la regola ed il valore di un carattere a larghezza fissa:
Stile del carattere (clicca per ingrandire)
Un pannello si apre con tutte le informazioni che ci possono servire: adesso possiamo ispezionare:
Ispezioniamo il codice con Firebug (clicca per ingrandire)
Clicchiamo su un valore e modifichiamolo. Una volta ottenuto il risultato ottimale, copiamo il valore ed incolliamolo nel nostro style.css.
Cambiamo il bordo on Firebug (clicca per ingrandire)
Premendo ESC cancelliamo le modifiche, mentre premendo INVIO le apportiamo fino a quando la pagina non verra’ ricaricata. Questo significa che possiamo modificare ed ispezionare gli oggeti in una pagina, uno dopo l’altro, e vedere il risultato in tempo reale, senza modificare il nostro codice.
6. Aggiungiamo proprieta’ CSS al nostro child theme
Il tema genitore usato come esempio e’ Basic2Col. Lo ho scelto poiche’ e’ uno di quei temi creati con i child theme in mente, e dunque e’ facile lavorarci sopra. wangenweb.com/wordpress/themes/basic2col
6.1. Cambiamo lo stile dei link
Immaginiamo di voler cambiare il rosso scuro dei link in Basic2Col visto che preferiamo il verde. Clicchiamo col destro su un link per ispezionare le sue proprieta’:
Il valore del colore rosso scuro (clicca per ingrandire)
Firebug ci mostra che il codice del rosso scuro e’ #660000 — oppure, in decimale rgb(102,0,0).
NOTA. I fgli di stile accettano sia valori esadecimali che RBG. In RGB possiamo usare sia valori assoluti che valori percentuali. Accettano anche alcuni nomi di colori. Quindi, white, #ffffff (o lo shortcode #fff), rgb(255,255,255) e rgb(100%,100%,100%) sono la stessa cosa e la sintassi e’ giusta per ognuno.
Clicchiamo con il destro sul valore ed iniziamo a scrivere. Nello screenshot il codice scelto e’ un verde con la stessa saturazione e luminosita’: #006600.
Cambiamo il colore in verde (clicca per ingrandire)
Firebug aggiorna automaticamente la visualizzazione mentre il valore viene immesso.
Provando più verdi, la nostra scelta cade su quello iniziale: #006600. Aggiungiamo questo codice al nostro style.css:
a<span style="color: #33f;">:link</span><span style="color: #0a0;">,</span> a<span style="color: #33f;">:visited </span><span style="color: #0a0;">{</span> <span style="color: #000; font-weight:900;">color</span><span style="color: #0a0;">:</span> <span style="color: #c0c;">#006600</span><span style="color: #0a0;">;</span> <span style="color: #0a0;">}</span>
Adesso non lo sappiamo ancora ma attivando il nostro child theme, i link non cambiano più colore una volta che ci passiamo sopra (se vi interessano i dettagli sul motivo, vedete i link in fondo alla pagina). Per ereditare dal tema genitore le impostazioni per i link attivi o per quelli dove passiamo sopra, cerchiamo dove si trova la regola e aggiungiamola al nostro foglio del child theme, dopo la regola per i link e i link visitati:
a<span style="color: #33f;">:hover</span><span style="color: #0a0;">,</span> a<span style="color: #33f;">:active </span><span style="color: #0a0;">{</span> <span style="color: #000; font-weight:900;">color</span><span style="color: #0a0;">:</span> <span style="color: #c0c;">#666666</span><span style="color: #0a0;">;</span> <span style="color: #0a0;">}</span>
6.2. Aggiungiamo un font
I link adesso hanno uno stile; un’ altra cosa che di solito vorrete cambiare sono i font. Vediamo quali font usa Basic2Col. Clicchiamo con il destro sopra del testo per ispezionarlo:
Ispezioniamo il testo (clicca per ingrandire)
La prima cosa che notiamo e’ che il paragrafo eredita alcuni stili per i font, incluso font-family, da body, per il quale sono specificati dieci font, in ordine di preferenza. Per provare un font differente, scriviamo il suo nome prima di ogni altro, stando attenti ad aggiungere una virgola (se il font ha spazi nel nome bisogna inserirlo fra doppi apici: “nome del font”). Nello screenshot sto provando un font ClearType Microsoft, uno dei cosiddetti font “C†:
Cambiamo il carattere (clicca per ingrandire)
Se siamo soddisfatti del risultato, incolliamo il codice nel nostro style.css:
body <span style="color: #0a0;">{</span> <span style="color: #000; font-weight:900;">font-family</span><span style="color: #0a0;">:</span> Candara<span style="color: #0a0;">,</span> <span style="color: #f00;">"Lucida Sans Unicode"</span><span style="color: #0a0;">,</span> <span style="color: #f00;">"Lucida Sans"</span><span style="color: #0a0;">,</span> <span style="color: #f00;">"Trebuchet MS"</span><span style="color: #0a0;">,</span> <span style="color: #f00;">"Lucida Grande"</span><span style="color: #0a0;">,</span> <span style="color: #f00;">"Bitstream Sans Vera"</span><span style="color: #0a0;">,</span> Verdana<span style="color: #0a0;">,</span> Arial<span style="color: #0a0;">,</span> Tahoma<span style="color: #0a0;">,</span> Helvetica<span style="color: #0a0;">,</span> Sans-Serif<span style="color: #0a0;">;</span> <span style="color: #0a0;">}</span>
6.3. Nascondiamo un elemento
Proviamo qualcosa di diverso. Nei due esempi precedenti abbiamo modificato i valori di proprieta’ gia’ presenti e le abbiamo sovrascritte. Ora proviamo ad aggiungere una nuova dichiarazione ad una regola.
Il campo di ricerca di Basic2Col ha un titolo “cercaâ€. Non credo sia necessario: e’ chiaro a cosa serva quel campo: lo dice anche il pulsante accanto. E’ possibile nasconderlo e guadagnare spazio senza modificare il tema genitore a livello di codice HTML/Php? Si!
Ispezionando l’elemento scopriamo che il selettore che ci serve e’:
<span style="color: #c0c;">#searchform</span> label
che significa: label ma solamente se si trova all’interno del div identificato come searchform. Clicchiamo sulla sua dichiarazione, premiamo Tab per aggiungere una nuova linea e scriviamo display, premiamo ancora tab e scriviamo none — vediamo lo screenshot:
Nascondiamo un titolo (clicca per ingrandire)
Il titolo del box di ricerca e’ scomparso!
Fatto, ma qualcosa non quadra ora. Senza il suo titolo, il box non e’ esattamente allineato. Dobbiamo muoverlo un po’ a sinistra: non e’ difficile, ma per brevita’ evitiamo questo passaggio (immaginiamo di non averlo notato). Aggiungiamo il seguente codice nel nostro style.css:
<span style="color: #c0c;">#searchform</span> label <span style="color: #0a0;">{</span> <span style="color: #000; font-weight:900;">display</span><span style="color: #0a0;">:</span> <span style="color: #993333;">none</span><span style="color: #0a0;">;</span> <span style="color: #0a0;">}</span>
Per ora siamo soddisfatti. Se comunque in futuro vorremo cambiare qualcosa, ci bastera’ riaprie il nostro style.css, aggiungere altre modifiche e ricaricarlo sul server.
Vediamo ora a che punto siamo.
7. Mettiamo tutto insieme ed attiviamo il child theme
In pochi minuti abbiamo costruito quattro regole CSS: due per i link, una per i font e l’ultima per nascondere un elemento dalla visualizzazione. Se inseriamo tutto nel nostro foglio di stile, apparira’ simile al codice qui sotto:
<span style="color: #808080; font-style: italic;">/* Theme Name: Kid Theme URI: http://www.altamentedecorativo.com/ Description: [ct] for Basic2Col Author: Danny Author URI: http://www.altamentedecorativo.com/ Template: basic2col Version: 0.1 . This work is released under the GNU General Public License 2: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html . */</span> <span style="color: #a1a100;">@import url("../basic2col/style.css");</span> a<span style="color: #33f;">:link</span><span style="color: #0a0;">,</span> a<span style="color: #33f;">:visited </span><span style="color: #0a0;">{</span> <span style="color: #000; font-weight:900;">color</span><span style="color: #0a0;">:</span> <span style="color: #c0c;">#006600</span><span style="color: #0a0;">;</span> <span style="color: #0a0;">}</span> a<span style="color: #33f;">:hover</span><span style="color: #0a0;">,</span> a<span style="color: #33f;">:active </span><span style="color: #0a0;">{</span> <span style="color: #000; font-weight:900;">color</span><span style="color: #0a0;">:</span> <span style="color: #c0c;">#666666</span><span style="color: #0a0;">;</span> <span style="color: #0a0;">}</span> body <span style="color: #0a0;">{</span> <span style="color: #000; font-weight:900;">font-family</span><span style="color: #0a0;">:</span> Candara<span style="color: #0a0;">,</span> <span style="color: #f00;">"Lucida Sans Unicode"</span><span style="color: #0a0;">,</span> <span style="color: #f00;">"Lucida Sans"</span><span style="color: #0a0;">,</span> <span style="color: #f00;">"Trebuchet MS"</span><span style="color: #0a0;">,</span> <span style="color: #f00;">"Lucida Grande"</span><span style="color: #0a0;">,</span> <span style="color: #f00;">"Bitstream Sans Vera"</span><span style="color: #0a0;">,</span> Verdana<span style="color: #0a0;">,</span> Arial<span style="color: #0a0;">,</span> Tahoma<span style="color: #0a0;">,</span> Helvetica<span style="color: #0a0;">,</span> Sans-Serif<span style="color: #0a0;">;</span> <span style="color: #0a0;">}</span> <span style="color: #c0c;">#searchform</span> label <span style="color: #0a0;">{</span> <span style="color: #000; font-weight:900;">display</span><span style="color: #0a0;">:</span> <span style="color: #993333;">none</span><span style="color: #0a0;">;</span> <span style="color: #0a0;">}</span>
Il risultato potra’ apparire visivamente diverso in base all’editor che usiamo. In Notepad++ sara’ così:
Il nostro style.css (clicca per ingrandire)
Carichiamo il nostro file nella cartella del child theme, e attiviamolo. (Il child theme attualmente non ha la sua miniatura: possiamo aggiungerla nella cartela e WordPress la riconoscera’ automaticamente).
Se nell’ anteprima il tema apparira’ esattamente come il genitore, svuotiamo la cache del nostro browser e ricarichiamo la pagina.
Se tutto sembra a posto nell’anteprima, possiamo attivarlo. Bene, il nostro primo child theme e’ nato!
8. Note
Se conoscete qualche altra risorsa interessante lasciate un commento, grazie!
9. Link
9.1. Temi Genitori
Quasi ogni tema di WordPress puo’ essere un buon tema genitore, ma ce ne sono alcuni studiati appositamente:
- Thematic Framework per WordPress
- Thematic di Ian Stewart.
- www.plaintxt.org/themes/sandbox
- Sandbox diAndy Skelton eScott Wallick. La madre di tutti i temi genitore.
- themehybrid.com/themes/hybrid
- Hybrid di Justin Tadlock.
9.2. Strumenti, Software
- cyberduck.ch
- Cyberduck: client FTP gratuito ed open source per Mac OS X.
- fireftp.mozdev.org
- FireFTP: estensione per Firefox
- getfirebug.com
- Estensione per Firefox.
- jigsaw.w3.org/css-validator
- Servizio di validazione dei CSS.
- notepad-plus.sourceforge.net
- Notepad++ e’ un editor di testo e codice gratuito ed open source per Windows.
- Notepad2 e’ piu’ semplices: www.flos-freeware.ch/notepad2.html
- smultron.sourceforge.net
- Smultron: editor di testo e codice gratuito ed open source per Mac OS X.
- www.mozilla.com/firefox
- Non c’e’ via di uscita, solo Firefox ci puo’ aiutare!
9.3. Tutorial, Riferimenti
- codex.wordpress.org/Theme_Development
- C’e’ una breve sezione sui child theme.
- themeshaper.com/how-to-protect-your-wordpress-theme-against-upgrades
- L’autore di Thematic Framework per WordPress spiega come fare un child theme.
- themeshaper.com/functions-php-wordpress-child-themes
- Ian Stewart spiega come usare funzioni Php personalizzate nei nostri child theme.
- www.htmldog.com
- “La miglior guida pratica a Xhtml e CSSâ€, di Patrick Griffiths.
- www.htmldog.com/reference/cssproperties
- Proprieta’ CSS su HTML Dog: “informazioni a proposito di tutte le proprieta’ valide nei CSS 2.1â€.
- www.htmldog.com/reference/htmltags
- HTML tags at HTML Dog: “informazioni a proposito di tutte le proprieta’ valide in strict XHTMLâ€.
9.4. Ulteriori letture
- meyerweb.com/eric/css/link-specificity.html
- Eric Meyer spiega perche’ l’ordine in cui inseriamo le regole dei link e’ importante.
- www.w3.org/TR/CSS21
- Le specifiche CSS 2.1.
Articolo originariamente scritto da Demetris e pubblicato su op111.net. Thank you for you help Demetris!
Tradotto ed adattato con l’esplicito consenso dell’ autore.
[wordcloud]
2 Commenti
Grazie, Danny!
I added links in the original page.
Grazie. Ho creato il file css e l’ho messo nella cartella tiny-forge_child, che si trova a sua volta nella cartella themes, dove è presente anche la cartella tiny-forge.
Quando vado nel pannello di amministrazione mi dice quanto segue:
Tema corrotto
I seguenti temi risultano installati ma sono incompleti. I temi devono avere un foglio di stile e un template.
Nome Descrizione
Tiny Forge Theme Child Il tema padre è mancante. Installare il tema padre “tiny_forge”.
Quali passaggi mancano?
iul tema padre è nella cartella themes. Grazie
Un Trackback
[…] Italian/Italiano […]