Attendi ...

Child-themes per WordPress

WordPress, oltre ad essere il CMS più popolare sul web, è famoso per la grande quantità di temi personalizzati tra cui scegliere, che permettono di dare al nostro sito o blog l'aspetto che più ci piace. Tutti i sistemi CMS sono in grado di personalizzare l'aspetto delle pagine web, ma ciò richiede spesso la conoscenza di qualche linguaggio di programmazione o la configurazione di alcuni files XML. Con WordPress (WP) è tutto molto più facile. Oggi vedremo come personalizzare in pochi minuti un tema senza compromettere il tema originale. Ci basterà conoscere le nozioni più elementari di CSS... e il coraggio di mettere le mani dentro le cartelle di WP.

Child themes

Quando modifichiamo un tema già esistente, creando una nostra versione del tema, si parla della creazione di child themes (temi figlio). Un child theme è un tema che eredita tutte le caratteristiche del tema “padre”, tranne quelle che noi vogliamo personalizzare.

La procedura per creare un child theme è davvero semplice

  1. Apriamo la cartella wp-content/themes della nostra installazione di WP. Qui dentro dovremmo trovare tutti i temi che abbiamo installato
  2. Creiamo una nuova cartella, assegnando un nome a nostro piacimento. A titolo d'esempio assumeremo di creare una cartella di nome prova, e daremo lo stesso nome al child theme che ci apprestiamo a creare
  3. Creiamo all'interno della cartella un file di testo vuoto, che deve chiamarsi obbligatoriamente style.css

Apriamo adesso il file style.css e copiamo al suo interno il seguente testo

/*

Theme Name: Prima prova di Theme Child

Theme URI: http: //example.com/

Description: Personalizzazione del tema Twenty Eleven

Author: Mario Rossi

Author URI: http://example.com/about/

Template: twentyeleven

Version: 1.0

*/

La maggior parte di questi attributi sono opzionali. E' comunque buona norma compilare tutti i campi, perché renderà più facile riconoscere e ritrovare il nostro tema nell'interfaccia di amministrazione di WP.

Gli attributi che dobbiamo obbligatoriamente specificare sono

  • Theme Name: qui mettiamo il nome del tema che vogliamo creare, ad esempio “Prima prova di Theme Child”
  • Template: qui mettiamo il tema (già installato) che vogliamo estendere, o meglio usare come base di partenza

Dopo averlo creato, il file style.css conterrà solamente l'intestazione vista sopra, racchiusa tra i simboli /* e */, che indicano l'inizio e la fine di un commento CSS. Questo ci dice che l'intestazione non riguarda l'aspetto del nuovo tema, ma solo la sua definizione: entriamo ora nel vivo dell'argomento iniziando a personalizzare il nuovo tema.

Se siamo esperti di CSS, e vogliamo cambiare ogni dettaglio del tema padre, possiamo definire il file style.css come ci pare e piace. Questo dovrebbe capitare di rado, perché il vantaggio di un theme child è la possibilità di personalizzare qua e là, sfruttando però l'impostazione già esistente (il tema padre). E' più probabile che vorremmo cambiare solo qualche dettaglio, o almeno muovere i primi passi assumendo come default il tema padre. Aggiungiamo quindi la direttiva (subito dopo l'intestazione)

	@import url("../twentyeleven/style.css");

che dice al nostro foglio style.css di utilizzare, per default, l'aspetto del tema padre. Ciò offre tra l'altro il vantaggio di potere aggiornare gli aspetti generali del tema figlio quando aggiorniamo il tema padre. Dopo la direttiva import possiamo iniziare ad inserire le nostre regole CSS, ad esempio

.entry-header > .entry-title {

COLOR: green;

}

salviamo il file style.css e impostiamo il nuovo tema, agendo sul pannello AspettoTemi di WP. Visualizzando un articolo dovremmo ritrovare il tema familiare Twenty Eleven, ma con i titoli degli articoli in verde. Finché qui tutto facile... l'unica difficoltà dovrebbe essere: come scegliere i selettori (e le proprietà) CSS da modificare? In altre parole: come faccio a sapere che per cambiare il colore del titolo devo modificare la classe CSS entry-title, come nell'esempio qui sopra?

Esistono molte risposte a questa domanda. Se conosciamo bene l'HTML e il CSS ci basterà dare un'occhiata ai templates e al file style.css del tema padre, per capire cosa vogliamo modificare. Oppure potremmo usare uno strumento di debug del browser, come ad esempio il plugin Firebug per Firefox. In ogni caso ricordiamoci che il “dove mettere le mani” dipende dal tema padre, per cui se cambiamo il tema padre dovremo svolgere le nostre indagini da capo. Ad esempio, per cambiare il titolo nel tema Wu Wei, la proprietà da cambiare dovrebbe essere

h1 {

COLOR: green;

}

e non la entry-title come nel caso precedente. Prima di iniziare a lavorare sul theme child è quindi vivamente consigliato scegliere con cura il tema padre, studiarne gli aspetti fondamentali e verificare che faccia davvero al caso nostro. Solamente a questo punto varrà la pena creare un nuovo theme child e dare libero sfogo alla nostra creatività!

22.02.2012

Ti potrebbero interessare

WordPress: aggiornarlo è fondamentale per Sicurezza e Prestazioni

Aggiornare WordPress è fondamentale

Mantenere sempre aggiornato il proprio sito web WordPress è di fondamentale importanza per diversi motivi:

Sicurezza: le versioni più recenti di WordPress spesso includono correzioni di sicurezza per vulnerabilità che sono state scoperte nelle versioni precedenti. Mantenere il software aggiornato aiuta a proteggere il tuo sito da minacce di sicurezza e a prevenire potenziali [...]
26.01.2024
Dettagli

Indirizzo Email e Sito Internet personali

Il potere di Indirizzo Email e Sito Internet Personali

L'importanza, anche per una persona di avere un indirizzo email e un sito internet con il proprio nome

Viviamo in un'era digitale in cui la presenza online è diventata essenziale per connettersi con il mondo circostante. Uno degli strumenti fondamentali per affermare la propria identità digitale è rappresentato dall'indirizzo email e dal sito internet [...]

10.01.2024
Dettagli

PHP 8.3 disponibile sui nostri piani

A partire dal mese di Dicembre abbiamo iniziato ad introdurre su tutti i nostri servizi di Hosting Linux, Hosting WordPress, Hosting Multidominio e Cloud Hosting, la possibilità di utilizzare anche l'ultima versione stabile di PHP 8.3.

Come di consueto, dal proprio pannello di amministrazione è possibile modificare in autonomia la versione di PHP utilizzata per il proprio dominio o [...]

01.12.2023
Dettagli