Supporto volontario e collaborativo per Joomla!® in italiano

Personalizzare il template Protostar con i Google Font

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 

integrazione di Google Font in JoomaMolti template e framework professionali includono la possibilità di personalizzare i font del proprio sito web utilizzando i Google Font, una risorsa gratuita che Big G ha messo a disposizione di tutti i webmaster al fine di risolvere l’annoso problema della scelta dei font per i contenuti del proprio sito; senza questa tecnologia, sarebbe molto più complicato poter utilizzare tipi di carattere curati nei nostri progetti web e dovremmo limitarci ai caratteri più elementari (Times, Arial, Verdana, Helvetica, ecc.).

Anche l’ottimo Protostar, il template installato di default in Joomla, ha in minima parte la possibilità di utilizzare la piattaforma Google Font al fine di personalizzare il carattere delle intestazioni (H1, H2, ecc.).

In questo articolo mi propongo di spiegarvi come modificare Protostar perché ci consenta di integrare non un solo tipo di carattere, ma molteplici applicabili a varie parti del testo del nostro sito, ovviamente con le opportune modifiche al CSS.

Come “duplicare” il template Protostar per personalizzare il suo codice senza temere gli aggiornamenti di Joomla

Dovendo in questo tutorial modificare due file del template, index.php e template.css, è opportuno iniziare con una duplicazione dello stesso; tutti sappiamo infatti che le personalizzazioni al template di default di Joomla vengono sovrascritte ad ogni aggiornamento. Premetto che tutte le immagini e le istruzioni si riferiscono ad una installazione locale su XAMPP, saranno dunque necessari comportamenti differenti per riapplicare la procedura ad un sito già online.

Innanzitutto cliccheremo il comando estensioni-gestione template per poi cliccare nella parte sinistra dello schermo la voce template, questo comando ci mostrerà l'elenco dei template installati con le rispettive anteprime in miniatura.

Scorrendo tale elenco sarà possibile individuare il template Protostar; cliccheremo sul suo nome al fine di aprirne la pagina dei "dettagli e file".

Prima parte della fase di duplicazione del template

A questo punto nella parte in alto a sinistra sarà presente il tasto "Copia template" che innesca una reinstallazione automatica, creando anche un doppione della cartella in cui ci sono tutti i file del template, in modo da consentire la modifica di questi file senza modificare quelli originali e quindi senza temere le sovrascritture dovute agli aggiornamenti della versione di Joomla.

Dopo aver cliccato "Copia template", sarà necessario specificare il nome che desideriamo assegnare al duplicato, nel mio caso "protostarduplicato", quindi confermeremo l'operazione di copia e poi cliccheremo "Chiudi".

Prima parte della fase di duplicazione del template

Il passaggio immediatamente successivo consisterà nel rendere predefinito il "protostarduplicato" andando in estensioni-gestione template ma questa volta posizionandoci sulla scheda Stili; qui sarà sufficiente cliccare il tasto a forma di "stellina".

rendiamo predefinito il nostro template protostarduplicato

Non noteremo alcun cambiamento nel lato pubblico, con la differenza che ora avremo la libertà di effettuare qualsiasi modifica o personalizzazione a questo template duplicato, sapendo che i suoi file non verranno mai sovrascritti da eventuali aggiornamenti del CMS.

Integrazione di più caratteri Google Font in Protostar

Eccoci finalmente al dunque! …entrando nella pagina di configurazione di "protostarduplicato", da estensioni-gestione estensioni, poi spostandoci nella scheda Avanzate scopriremo che questo template offre già nativamente la possibilità di scegliere un Google Font da utilizzare indifferentemente per tutte le intestazioni; il nostro obiettivo è invece quello di scegliere tre diversi Font dal sito del servizio offerto da Google: uno per le intestazioni H1 ed H2, uno per le H3 ed uno per i paragrafi normali.

Per il suddetto motivo disattiveremo l’opzione Google Font già attiva, per ricreare il tutto modificando opportunamente alcuni file del template.

disattivazione del google font già attivo in protostar

Ora è il momento di visitare la pagina Google Font e scegliere tre tipi di carattere utili al nostro scopo, i primi due saranno caratteri “handwriting” da utilizzare per le intestazioni, l’ultimo un carattere “serif” utile per i paragrafi di testo.

Nella parte sinistra del sito Google Font, nella sezione “Filters” imposteremo il filtro su “handwriting” in modo da vedere solo i caratteri con effetto calligrafico, tra questi ne sceglieremo due; nel mio esempio ho scelto “Pacifico” e “Dancing Script”, in questa fase è sufficiente annotare i nomi esatti dei font scelti.

Su Google Font scegliamo due caratteri calligrafici

Cambiando nuovamente il filtro in “serif” sceglieremo “Noto Serif” da usare per i paragrafi di testo del sito; anche questa volta provvederemo ad annotare il nome del font.

Su Google Font scegliamo un carattere serif

A questo punto inizieremo la fase di personalizzazione del template… portandoci nella cartella
c:\xampp\htdocs\provafont\templates\protostarduplicato
che contiene il template duplicato con la procedura precedentemente illustrata, apriremo il file index.php usando un editor di codice come Dreamweaver o Notepad++; individuando la riga che contiene il codice <?php // Use of Google Font ?> (dovrebbe essere poco dopo la riga 80) creeremo un rigo vuoto immediatamente prima in cui inserire il seguente codice:

<link href='https://fonts.googleapis.com/css?family=Pacifico|Dancing+Script|Noto+Serif' rel='stylesheet' type='text/css'>

Il tag appena inserito permette al nostro template di andare a prelevare i font dalla libreria dei Google Font e quindi di visualizzarli correttamente anche se essi non sono installati sul computer del nostro lettore; sottolineo che anche se stiamo lavorando in locale è indispensabile un collegamento ad internet aperto perché questo tag funzioni.

Si noti come i nomi dei font sono indicati rispettando maiuscole e minuscole, usando il carattere + al posto dello spazio e separando i nomi dei vari tipi di carattere con un | (pipe); dopo ciò si può salvare e chiudere il file index.php.

Illustrazione delle modifiche nel file PHP

Adesso ci porteremo nella cartella

c:\xampp\htdocs\provafont\templates\protostarduplicato\css

per aprire il file template.css usando un editor di codice, quindi scorreremo il file fino alla fine per aggiungere le seguenti righe di css

h1, h2 { font-family: 'Pacifico'; font-weight:normal; }

h3 { font-family: 'Dancing Script'; }

Modifiche CSS

Queste regole permettono di assegnare i rispettivi font alle intestazioni h1, h2 ed h3; per quando riguarda h1 ed h2 c’è anche la proprietà font-weight per “disattivare” il grassetto su tali intestazioni, trattandosi di un carattere handwriting.

Scorrendo nuovamente il file fino alla riga 190, troveremo la regola CSS che inizia con il selettore BODY; qui cambieremo la proprietà font-family sostituendola con la seguente:

font-family: 'Noto Serif';

Modifiche CSS

Questa modifica imposta il font NOTO SERIF perché venga utilizzato in tutte le parti della pagina web che non sono formattate diversamente, cioè che non hanno una propria regola di CSS, ad esempio i paragrafi all’interno degli articoli appariranno con questo carattere.

Chiudiamo e salviamo tutto, a questo punto aprendo il lato pubblico del nostro sito vedremo i font agire sui nostri testi.

RIsultato finale illustrato nel lato pubblico di Joomla



CommentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Ruggero Marzocca
Alcune informazioni su di me:
Mi occupo di formazione nel campo dell'informatica dal 1999, uso Joomla dal 2008.


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.7.5 Stabile Italiana
Data di rilascio: 17 Agosto 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: