Scelta e utilizzo dei temi - Guida...

8

Scelta e utilizzo dei temi

Un manuale come questo non poteva che terminare con una serie di esempi pratici che possano servire come guida per lo sviluppo di siti Web adatti alle diverse esigenze e situa-zioni. Negli esempi di questo e dei capitoli successivi si utilizzeranno soltanto temi cui è possibile accedere gratuitamente, compreso il tema con sistema di impaginazione visuale Divi (wpaz.it/022) che sarà usato per un progetto di restyling che permetta di comprende-re la flessibilità di utilizzo di uno strumento di composizione della pagina con interfaccia visuale.Questo primo capitolo vi guiderà nella scelta di un tema, esplorando la struttura e le caratteristiche dei temi in generale e di quelli professionali in particolare, provando poi a individuare le soluzioni più interessanti fra quelli gratuiti, tanto sul sito ufficiale di WordPress (e di conseguenza accessibili dall’installatore di temi del CMS), quanto messi a disposizione da sviluppatori professionisti che realizzano anche temi commerciali.L’obiettivo è prima di tutto capire come selezionare il tema adatto al vostro particolare progetto, dopodiché si cercherà di capire il meccanismo che sta alla base della configu-razione di un tema, con degli esempi pratici in cui saranno impostati i singoli elementi.

8.1 Scelta del tema

Come si sceglie un tema per WordPress? La domanda può sembrare vaga o addirittura banale, anche perché la prima risposta che viene in mente è che il tema va scelto in funzione degli obiettivi che il sito si propone, cioè del contenuto che volete presentare a partire dalla home page.È proprio la home, infatti, che determina lo stile grafico di un tema, anche se lo si ritroverà ovviamente nelle pagine interne e in particolare nei diversi template di cui il tema è dotato.

wordpress bdb 2.indb 269 28/08/14 17:50

Capitolo estratto dal libro "WordPress - Guida Completa"Per info su questo e altri libri dedicati a WordPress visitate il link seguente: http://bitly.com/wplibriNota: nel testo sono presenti vari link che potete digitare nella barra degli indirizzi del browserper raggiungere le rispettive risorse descritte nel capitolo.

Capitolo 8

270

Qualunque sia la fonte cui attingerete per scegliere il vostro tema, potrà aiutarvi una

classificazione di massima basata sulla terminologia utilizzata dai siti dove è possibile

acquistare o scaricare gratuitamente i temi per WordPress e per altri CMS. Va da sé che

utilizzare una ricerca con parola chiave specifica (per esempio “pub” oppure “music”)

può offrire qualche spunto in più, quindi è sempre utile servirsi dell’eventuale opzione di

ricerca libera quando presente, come nel caso di Theme Forest (Figura 8.1).

Figura 8.1 – Il menu di selezione delle categorie utilizzate dal popolare sito di temi

professionali Theme Forest (wpaz.it/020); si notino le voci del menu WordPress e, nella barra

laterale a destra, l’elenco delle categorie cliccando sulle quali vengono visualizzate anche le

sotto-categorie.

Si tratta, ovviamente, di una classificazione di massima basata sull’esplorazione e

sull’analisi delle raccolte commerciali e gratuite presenti sul Web, e come scoprirete

contiene diverse modalità di identificazione dei temi, alcune delle quali possono essere

presenti in uno stesso tema. Ogni sito che offra collezioni di temi potrà servirsi di clas-

sificazioni specifiche e arbitrarie, come può essere per esempio quella di Theme Forest

(wpaz.it/020), che nel suo menu di selezione delle tipologie dei temi per WordPress (Fi-

gura 8.1) include categorie molto specifiche, ma anche fin troppo ampie, come potrete

verificare provando a selezionarne qualcuna a caso.

Ecco una guida di massima alle tipologie e terminologie utilizzate nella classificazione

dei temi, che è bene conoscere poiché si ritrovano, anche abbinate, in quasi tutte le

collezioni reperibili su Web e in particolare nella vastissima selezione di Theme Forest.

Abbiamo escluso la tipologia “blog” poiché molto riconoscibile e in ogni caso inclusa in

ogni altro tema non esclusivamente dedicato a tale funzione:



271

1. classificazione per categoria/settore di attività

questa classificazione viene utilizzata per tutti i temi identificati dall’attività che

andranno a rappresentare, per esempio: nozze, agenzie viaggi, ristoranti e hotel,

associazioni religiose e no profit, agenzie immobiliari e così via. Per individuare

temi progettati per queste specifiche categorie potrebbe essere utile conoscere

il termine in inglese corrispondente (per es. “real estate” per le agenzie immobi-

liari, “wedding” per i temi di nozze e via dicendo).

2. classificazione per applicazione specifica

in questo caso non si tratta di un settore o di una categoria commerciale o profes-

sionale, bensì di una vera e propria “applicazione”: ne fanno parte i temi per siti

di e-commerce, di annunci, le guide (directory) contenenti elenchi di risorse, i siti

basati su mappe geografiche o topografiche, quelli con domande e risposte (Q&A

o FAQ), quelli per il pre-lancio di un prodotto o di una startup.

3. magazine

questi temi rappresentano un’evoluzione del concetto di blog e si avvicinano,

come suggerisce il nome, alla grafica di una rivista, con strutture anche com-

plesse basate su aree suddivise per argomento, di varie dimensioni e miniature

di anteprima delle foto abbinate a ogni contenuto.

4. business e corporate

si tratta della categoria più ampia e utilizzata in assoluto, in quanto ne fanno parte

quei temi generici che si adattano perfettamente alla presentazione di un’azienda

o di una qualsiasi attività professionale in genere. I temi di questa categoria pos-

sono presentare anche caratteristiche descritte nei punti successivi, come “one

page, multipurpose” e ovviamente “responsive”.

5. one page

sempre più spesso i temi professionali sono proposti con una struttura, “layout”,

della home a sviluppo verticale in cui si susseguono elementi eterogenei e dina-

mici che suggeriscono la sequenza di una presentazione o di una “landing page”;

questa tendenza grafica è da tenere in conto poiché cerca di superare la struttura

delle home page tradizionali, offrendo maggiore spazio e possibilità per l’inseri-

mento degli elementi di comunicazione.

6. multipurpose (con o senza visual composer)

quando un tema viene definito multipurpose (multiuso), significa che il suo layout

è progettato in modo da adattarsi a diversi schemi soprattutto per la home page,

rivelandosi quindi adatto a siti di vario genere; in alcuni casi non si tratta solo del-

la possibilità di scegliere un layout, ma addirittura si trova incorporato nel tema

un sistema di impaginazione visuale, “visual composer”, che estende ancora di

più le possibilità di progettazione.


Capitolo 8

272

7. gallery e portfolio

quando un tema viene classificato con il termine “gallery” e/o “portfolio”, signifi-

ca che la sua struttura è pensata per visualizzare principalmente un layout di tipo

grafico simile a una galleria di immagini; si tratta di temi particolarmente adatti

ai fotografi o altri artisti o professionisti della comunicazione creativa e digitale,

ma vengono utilizzati anche per i cosiddetti “siti vetrina”. Questi due termini indi-

cano anche, in molti casi, semplicemente le due tipologie di template presenti nel

tema, che non definiscono, quindi, la struttura della home page.

8. “masonry” e “metro”

due tipologie di layout che si possono ritrovare tanto nei temi tipo magazine (si

veda il punto 3) quanto in quelli del punto precedente, quindi può riferirsi ancora

una volta semplicemente ai layout inclusi in un tema e utilizzati per la parte blog

o per gallery e portfolio. La caratteristica di questi layout è quella di creare au-

tomaticamente un mosaico dove i diversi elementi non hanno necessariamente

le stesse dimensioni e proporzioni, ma si dispongono a mosaico ordinatamente;

difatti, il termine “masonry” si riferisce all’arte muraria mentre con “metro” si

richiama la famosa interfaccia ideata da Microsoft per i suoi sistemi operativi

mobili e desktop.

9. responsive

questa caratteristica, ormai considerata fondamentale nei temi, come abbiamo

già visto, riguarda la capacità di adattarsi a schermi diversi e in particolare a

quelli dei dispositivi mobili; sicuramente è bene verificare se un tema è “respon-

sive” prima di adottarlo, per non rischiare di trovarvi tagliati fuori dal sempre più

ampio pubblico che naviga da smartphone e tablet.

10. full screen

alcuni temi sono basati su un’immagine di sfondo che diventa anche l’elemento

grafico principale e che non viene in questo caso coperta da altri oggetti; nei temi

“full screen” in genere il menu viene posizionato lateralmente (spesso a sinistra)

e in alcuni casi è anche “a scomparsa”, in altre parole può essere espanso e con-

tratto. Si tratta di temi adatti a chi deve visualizzare immagini importanti e di un

certo impatto, come artisti, designer e fotografi, ma può anche essere utilizzato

per altri fini.

11. retina ready

il termine “retina” è stato introdotto da Apple per indicare i display ad alta riso-

luzione utilizzati sui suoi dispositivi mobili e portatili, di conseguenza un tema

“retina ready” si riferisce alla capacità di utilizzare due diversi tipi di immagini

adattandosi agli schermi con definizione più alta senza che le foto appaiano sfo-

cate.



273

Le caratteristiche e classificazioni appena elencate, tuttavia, sono solo uno dei modi per

identificare un tema e capire se è adatto alle vostre esigenze: un altro punto cruciale,

tanto per la scelta quanto per l’utilizzo che ne farete, sono gli elementi del layout, che

singolarmente o nel loro insieme determinano estetica e funzionalità di un sito, come

vedremo nel prossimo paragrafo.

Figura 8.2 – Alcuni dei temi presenti nella collezione di Elegant Themes (wpaz.it/014); si

notino alcuni degli stili descritti nell’elenco precedente, come “magazine” nei due temi

Magnificient e The Source oppure quello “gallery” nel tema Notebook.

8.2 Layout dei temiUn altro parametro importante da tenere in considerazione quando si sceglie un tema

è la struttura che lo caratterizza e in particolare gli elementi che la compongono, con

particolare riferimento al template utilizzato per la home page e agli eventuali strumen-

ti di impaginazione visuale o shortcode, per quei temi o applicazioni che ne fanno uso.

Familiarizzando con questi elementi strutturali, potrete imparare a configurarli e utiliz-

zarli nei temi con cui vi troverete a lavorare per i vostri progetti Web, pertanto sarà bene

dedicargli una piccola rassegna, servendovi degli esempi forniti dalle demo dei diversi

temi professionali. Purtroppo le demo dei temi gratuiti su WordPress sono impostate

come blog e non consentono di valutare tutti gli aspetti di una home page vera e propria,

che è parzialmente desumibile solo dalla miniatura di anteprima.


Capitolo 8

274

Prima, però, è importante aprire una parentesi: spesso le immagini utilizzate nella ver-

sione dimostrativa di un tema distolgono l’attenzione dalla sua struttura e dai suoi sin-

goli elementi, ma col tempo si può imparare a riconoscerli e valutarli singolarmente.

Figura 8.3 – Il tema King Size (wpaz.it/132) con il suo layout “full screen”; si noti la barra

di navigazione verticale e l’utilizzo di splendide immagini per lo slider a schermo intero, che

per il suo utilizzo richiederà la disponibilità di foto di ottima qualità e definizione per dare

i risultati migliori.

Non lasciatevi incantare dalla bellezza che le immagini usate dagli sviluppa-tori per le versioni dimostrative attribuiscono ai loro temi, piuttosto cercate di immaginare cosa potrete e dovrete utilizzare al posto di tali immagini, a meno di non servirvi di foto stock dello stesso tipo. Il fatto di corredare le demo con fotografie e illustrazioni di alto impatto comunicativo è una strategia molto comune, che serve ovviamente a valorizzare il tema stesso: l’estetica globale potrebbe subire un cambiamento anche decisivo quando vi ritroverete a utiliz-zare immagini diverse all’interno dei singoli elementi del layout.

nota

Gli elementi che seguono sono in genere presenti nella home page dei temi e in parte

hanno il compito di mettere in evidenza particolari contenuti, ma come vedremo posso-

no essere inseriti anche nelle altre pagine del sito quando il tema lo permette oppure

quando è presente un sistema di shortcode o un vero e proprio “visual builder”:

1. testata e barra di navigazione del menu

la ritrovate nella quasi totalità dei temi in quanto contiene generalmente il logo

e il menu principale, a volte affiancato da un menu secondario; quest’ultimo può



275

essere in alcuni casi verticale anziché orizzontale (come abbiamo visto al punto 10 del precedente elenco) oppure può essere predisposto per un layout di naviga-zione complesso in grado di contenere molte voci distribuite su colonne e corre-date da immagini, “megamenu”.

2. slider

dall’inglese “slide” (diapositiva), è in genere l’area predisposta per visualizzare im-magini in una sequenza automatica e/o manuale nella parte alta del tema sulla home page, immediatamente sotto la testata, ma può essere inserito anche in altre aree e nelle pagine interne: le slide fanno quasi sempre riferimento a contenu-ti interni del sito che si vogliono mettere in evidenza e vengono collegate con un link alle rispettive pagine o articoli, rappresentando in un certo senso una “call to action”, che spinge alla lettura del contenuto. Lo slider può essere a larghezza pie-na, con testo sovrapposto alle immagini, oppure ridotta per affiancare del testo, in molti casi con immagini scontornate; può contenere anche solo quest’ultimo oppu-re dei video anche in background, in sostituzione o in abbinamento alle immagini, oppure elementi animati anche complessi composti di testo e/o grafica, e così via. In alcuni casi lo slider viene incorporato nel tema utilizzando uno dei due più famosi plugin di questo tipo, Slider Revolution (wpaz.it/130) e Layer Slider (wpaz.it/131), en-trambi distribuiti commercialmente, ma spesso integrati nei temi professionali con accordi di licenza fra gli sviluppatori. A differenza degli slider incorporati nel codice del tema, un plugin come Slider Revolution offre anche la possibilità di disporre e animare in modo diverso i singoli elementi di testo e grafica in ogni singola slide con un notevole impatto visuale.

3. blurb (o service)

il termine “blurb” indica, nel mondo editoriale, sia la fascetta pubblicitaria che si trova intorno alla copertina di un libro, sia il riquadro promozionale (detto “soffiet-to editoriale”) inserito in quarta di copertina e contenente una breve descrizione volta a evidenziare le qualità del libro stesso.È pertanto considerato un elemento da collocare in bella vista come “strillo pubblicitario” nella home page (Figura 8.4): ne troviamo in genere tre o quattro affiancati e collocati spesso al di sotto dello slider, composti quasi sempre da un titolo seguito da un testo, con o senza un’immagine in miniatura di anteprima; questi elementi sono anche detti “servi-ce” perché spesso mettono in evidenza i servizi più importanti di un’azienda.

4. carousel e gallery

si tratta di un mosaico di immagini, spesso corredate da un testo, che può anche comparire in sovraimpressione, collegate a dei contenuti interni al sito. Il termine “carousel” (giostra) indica la caratteristica dello scorrimento orizzontale, anche automatico, con il quale è possibile disporre molte immagini sulla stessa riga,


Capitolo 8

276

bypassando i limiti della larghezza del layout. Alcuni slider utilizzano un elemen-

to di tipo carousel come nel tema Envisioned (wpaz.it/134).

5. barre laterali (sidebar) e colonne

il layout di un tema può essere costituito sia da un unico elemento, sia da più colon-

ne, nel secondo caso aggiungendo una o due barre laterali al corpo centrale oppure

suddividendo in vere e proprie colonne l’area principale stessa; tipico nei temi ma-

gazine, descritti al punto 3 dell’elenco precedente. Questa struttura si può avere,

come sempre, tanto nella home page quanto nelle pagine interne, in particolare se

il tema offre uno strumento di impaginazione (Figura 8.5), sebbene la struttura sia

in genere composta da un’area principale affiancata da una sidebar.

6. piè di pagina (footer)

la parte inferiore del layout di un tema è in genere quella che contiene le informa-

zioni di copyright del proprietario e/o dello sviluppatore o designer, ecc., ma può

anche contenere un menu secondario oppure estendersi in altezza per ospitare

altri elementi, di solito usando “un’area widget”, descritta al punto 9.

7. elementi a espansione (toggle/accordion)

si utilizzano per evitare di affollare con troppi contenuti una pagina; in genere

interna, ma può trattarsi anche della home in alcuni casi, e sono formati da un

riquadro che si espande e contrae verticalmente al click del mouse, rivelando o

nascondendo il contenuto; in genere nella parte superiore del riquadro, quella

sempre visibile, è presente un testo/titolo che anticipa la natura del contenuto

temporaneamente nascosto.

8. schede (tabs)

progettate per svolgere la stessa funzione degli elementi a espansione, “toggle”,

le schede ricordano le rubriche di indirizzi o gli schedari, in quanto sono compo-

ste da un riquadro sormontato, o affiancato, nella versione verticale, da etichette

che fanno da pulsanti e rivelano le diverse schede contenute all’interno dell’ele-

mento.

9. area widget

un’area orizzontale o verticale molto flessibile in quanto permette di visualizzare

una serie di widget a vostra scelta fra quelli disponibili; il genere di area widget

più diffuso è la barra laterale presente in quasi ogni tema, mentre a seconda del

tema utilizzato potete trovarne di aggiuntive, posizionate sia verticalmente ai lati

del tema, sia orizzontalmente in varie aree generalmente nella home page.

10. testimonial

introdotto con il diffondersi delle cosiddette landing page, l’elemento dei testi-

monial è in genere formato da un riquadro in cui scorrono o si susseguono in al-



277

tro modo (per es. con dissolvenze) testimonianze o recensioni volte a valorizzare l’argomento del sito, in genere sotto forma di frasi seguite da un nome e a volte accompagnate da una foto ritratto in miniatura.

11. call to action

anche questo elemento fa parte delle landing page e del marketing, ed è in genere composto da una frase seguita da un pulsante (Figura 8.4) che induce, come dice il nome, il pubblico all’azione: un acquisto, una richiesta di contatto, una registrazio-ne a una newsletter e via dicendo; le call to action possono essere anche parte di altri elementi, come lo slider o le “hero section” (si veda il punto successivo).

12. hero section

simile alla call to action, è in sostanza un’area orizzontale a larghezza piena che con-tiene di solito un’immagine, un testo e un pulsante; se viene utilizzata un’immagine di sfondo può ricordare anche un genere di slide in cui è presente una call to action.

13. listini comparati (pricing table)

tipici dei siti che offrono abbonamenti o altre formule di acquisto su più livelli e fasce di prezzo, si utilizzano per compararne le caratteristiche ed evidenziare in molti casi la formula più conveniente e/o popolare; hanno la forma di colonne, in genere tre o quattro, contenenti il nome e l’elenco delle caratteristiche di ogni of-ferta, seguite dal prezzo e dal pulsante d’acquisto, spesso nello stesso elemento.

Quelli elencati sono, naturalmente, solo gli elementi più comuni che si possono ricono-scere all’interno del layout di un tema, mentre molti altri vengono introdotti col passare del tempo e consentono di aggiungere funzionalità di comunicazione diverse e varietà stilistica alla struttura della home page. Alcuni elementi, inoltre, possono essere pre-senti in forme diverse anche nello stesso tema (Figura 8.4), come nel caso dei blurb che vengono ritrovati più volte nella home e con un formato che ricorda altri elementi (per esempio i widget o le gallerie).La disposizione degli elementi è legata alla struttura in colonne, che nei temi dotati di un sistema di impaginazione, visuale o basato su shortcode, viene decisa da voi, ma nella maggior parte dei temi standard è quasi sempre prestabilita ed è comunque basata su un’area principale più ampia che ospita tutti gli elementi in successione oppure, in qualche caso, affiancati su due aree adiacenti nella stessa riga. È, infatti, questa suddi-visione in righe e colonne, vale a dire in aree orizzontali intere o suddivise in due o più sezioni (Figura 8.4), che dovete tener presente sia nella fase di progettazione del vostro sito, sia nella scelta del tema più adatto o meglio ancora nella composizione del layout attraverso uno strumento che ve lo consenta.


Capitolo 8

278

Figura 8.4 – Il tema professionale per hotel Welcome Inn di ThemeFuse (wpaz.it/133); si notino

i tre “blurb” al di sotto dello slider e parzialmente sovrapposti e, più sotto, gli altri due seguiti

da una “call to action”.

Figura 8.5 – Alcuni schemi per la scelta del numero di colonne da assegnare a una specifica

area orizzontale del layout nel “visual page builder” di cui è dotato il tema Divi (wpaz.it/013);

si noti la suddivisione proporzionale delle colonne.

L’elemento che si presenta nelle forme più svariate è sicuramente lo slider, sia per gli

effetti di dissolvenza e animazione, a volte addirittura tridimensionali, sia per la sua

struttura e per la forma di navigazione: quest’ultima, infatti, può essere rappresentata

da frecce poste ai due lati, da una serie di pallini o di miniature nella parte bassa o ad-

dirittura da un vero e proprio menu di navigazione (Figura 8.6).



279

Figura 8.6 – Un esempio di slider affiancato da un menu di navigazione dei contenuti in

evidenza nel tema per parrocchie Evangelist (wpaz.it/135); il tema può essere in realtà

riconvertito anche per un utilizzo diverso da quello religioso.

Ogni sviluppatore utilizza per i suoi temi strumenti di configurazione diversi e personali, quindi non troverete mai le stesse impostazioni in due temi sviluppati da persone o team differenti: vedrete questa situazione sia nei temi disponibi-li sul sito ufficiale di WordPress (wpaz.it/019) e nell’installatore di temi, sia in un sito di temi commerciali di vari autori come il popolare ThemeForest (wpaz.it/020). Ben diverso è il caso di più temi sviluppati dalla stessa persona o dallo stesso team, come quelli presenti su siti come Elegant Themes (wpaz.it/025), CSS

Igniter (wpaz.it/995), ThemeFusion (wpaz.it/136) o Tesla Themes (wpaz.it/023): in questi casi troverete un pannello di configurazione comune e sarà più facile, una volta che avrete familiarizzato con la sua interfaccia utilizzando uno dei temi, impostare le opzioni anche per gli altri della serie, seppure diversi come layout.

nota

Ora che avete un’idea dei singoli elementi potete servirvi di questa conoscenza di base

per pianificare il formato che i vostri contenuti avranno nella home page del sito e indi-

viduare, secondo questo criterio, il tema più adatto alle vostre esigenze.

Per fare qualche esempio, volendo individuare fra i temi gratuiti di WordPress, cioè

quelli caricabili direttamente dal backend, dei modelli che permettano di creare un sito

“aziendale” classico, dove sia presente uno slider e dei blurb, potreste provare a uti-

lizzare la parola chiave “slider” nel campo di ricerca della schermata Aggiungi Tema.

In questo modo potrete individuare, fra le anteprime, i temi che presentano uno slider

standard sotto il quale sono eventualmente presenti dei blurb. Nei risultati visualizzati


Capitolo 8

280

troverete temi dall’aspetto molto professionale come Attitude, Spacious, Fruitful, Tempe-

ra o Theron Lite, che possono sicuramente rappresentare una soluzione adatta a un sito

standard di tipo professionale.

Figura 8.7 – Il pulsante Dettagli & Anteprima, che compare quando passate il puntatore

del mouse su una miniatura di anteprima nell’elenco dei temi visualizzati dalla schermata

Aggiungi Tema di WordPress e che permette di visualizzare le informazioni relative al tema

stesso e una sua anteprima in tempo reale, ma spesso limitata dal formato blog (Figura 8.8).

Come abbiamo già avuto modo di appurare, l’anteprima dei temi offerta da WordPress è

purtroppo basata su un’impaginazione stile blog (Figura 8.8), quindi prende in conside-

razione solo questo template del tema e non consente di avere un’anteprima della home

page, che nel caso dei siti è fondamentale. Potete superare questa limitazione imparando

a individuare, quando disponibile, il link alla demo creata dagli sviluppatori stessi, che po-

trete desumere dai dettagli del tema ottenuti cliccando sul pulsante Dettagli & Anteprima

che compare quando portate il puntatore del mouse sulla miniatura di un tema (Figura 8.7).

La funzione Dettagli & Anteprima attivabile sulle miniature dei temi visualiz-zati nella schermata di ricerca Aggiungi Tema del backend è fondamentale per capire quanto sia professionale un tema. Sarà, infatti, nella sua scheda infor-mativa, che potrete scoprire, per esempio, se si tratta di un tema responsive, se offre diversi layout per le pagine, se è disponibile la traduzione per la vo-stra lingua e che tipo di personalizzazioni prevede. Inoltre, nella stessa scheda troverete anche il voto che gli utenti hanno dato al tema, sicuramente indice inequivocabile della sua qualità.

nota



281

Figura 8.8 – Una tipica scheda di informazioni ottenuta cliccando sul pulsante

Dettagli & Anteprima che compare nelle miniature dei temi di WordPress (Figura 8.7); si noti

come l’anteprima a destra non rifletta assolutamente la miniatura in alto a sinistra, essendo

basata su un layout stile blog.

Il modo migliore per ottenere un’anteprima reale di un tema è, quindi, identificare lo svi-

luppatore e risalire al suo sito: le informazioni relative sono in genere presenti proprio

nelle info di dettaglio del tema (Figura 8.8) oppure nel suo piè di pagina. Nel caso del tema

Attitude, per esempio, nel piè di pagina che trovate scorrendo l’anteprima visualizzata

nell’area a destra dei dettagli, è presente il link al sito di Theme Horse (wpaz.it/137), dove

in mezzo a una serie di temi commerciali ci sono anche due temi gratuiti fra cui, appunto,

Attitude: cliccando sulla sua miniatura raggiungerete come sempre la pagina informativa

con le caratteristiche del tema e con il pulsante Live Preview, che mostrerà finalmente

un’anteprima reale della home page. Anche per il tema Tempera il link al sito, anzi, al blog

ufficiale dello sviluppatore CryoutCreations (wpaz.it/138) è nel piè di pagina, mentre la

demo del tema è accessibile dal menu alla voce WordPress. Nel caso di Spacious, invece,

il link all’anteprima diretta del tema sul sito dello sviluppatore ThemeGrill (wpaz.it/139)

è presente proprio nel testo dei dettagli e basterà copiarlo e incollarlo nella barra degli

indirizzi del browser.

Esaminando attentamente i dettagli di ogni tema e il piè di pagina nell’anteprima di

WordPress non sarà difficile, quindi, risalire al sito ufficiale e vedere l’anteprima corretta

e completa della home e delle pagine interne. Quando si tratta di temi particolarmente

professionali, inoltre, l’anteprima conterrà anche delle voci di menu che permettono di

verificare eventuali funzionalità incluse nel tema, come la presenza di layout alternativi

per le pagine o di variazioni cromatiche, “color scheme” o skin, per il tema, oppure la di-

sponibilità di font alternativi o di shortcode, tanto per fare qualche esempio significativo.


Capitolo 8

282

Nella scelta di un tema con slider, è importante fare attenzione a come il testo è utilizzato all’interno delle singole slide, in quanto potreste ritrovarvi di fronte alla necessità di adattare le immagini per non penalizzarne la leggibilità. Temi come Spacious o Tempera, per esempio, usano un riquadro scuro semitraspa-rente (overlay) visualizzando il testo in negativo, mentre Attitude mostra il te-sto, sempre di colore bianco, in riquadri con sfondo opaco di vario colore. Come si può facilmente intuire, questo genere di soluzioni è sempre da preferire alla sovraimpressione diretta del testo sulle immagini.

nota

Ma torniamo ora all’utilizzo dei temi: come dicevamo, ogni sviluppatore correda i suoi

temi di un particolare sistema di configurazione e, per quanto esistano degli standard

che molti sviluppatori si sforzano di rispettare, può capitare di trovarsi disorientati pas-

sando da un tema all’altro.

Per fare un esempio, lo slider viene in genere configurato in due modi diversi, cioè inse-

rendo per ogni slide i dati relativi all’immagine, al titolo, al testo e alla pagina da colle-

gare (Figura 8.9) oppure facendo semplicemente riferimento a una pagina che possieda

una “immagine in evidenza”: in questo secondo caso sarà il tema stesso a estrapolare

l’immagine, usandola nella slide insieme al titolo e al testo, in genere solo la parte ini-

ziale, della pagina stessa, collegandola alla slide.

Figura 8.9 – La configurazione dello slider nelle impostazioni del tema Spacious raggiungibile

dalla voce Theme Options che il tema aggiunge alla sezione Aspetto di WordPress; si notino

i campi presenti per ogni slide in cui inserire le informazioni su foto, titolo, testo descrittivo e

link alla pagina da visualizzare (quest’ultimo non visibile nell’immagine per motivi di spazio) e,

in alto, le schede di configurazione degli altri elementi del tema.



283

Rispetto allo slider presente in un tema commerciale, quello dei temi gratuiti di solito consente un numero limitato di slide e non ha la funzione di tronca-mento automatico del testo. Di conseguenza, se intendete usare temi gratuiti, dovrete in genere fare attenzione a usare testi della stessa lunghezza per tutte le slide e accontentarvi del numero di slide previste dallo sviluppatore.

nota

Anche l’inserimento dei blurb o di altri elementi della home page funziona spesso con

due diverse modalità: alcuni temi permettono di attivare e configurare questi elemen-

ti direttamente nella loro schermata di configurazione, altri invece si servono di aree

widget predisposte e richiedono la configurazione e l’inserimento di veri e propri widget

associati al tema e installati insieme a quest’ultimo, che visualizzeranno poi questi ele-

menti una volta collocati nell’area predisposta e configurati.

La diversità di configurazione fra i singoli temi gratuiti rende impossibile pre-vedere e illustrare tutte le modalità di utilizzo con cui ci si può trovare a lavora-re una volta scelto un particolare tema, quindi dedicheremo un progetto prati-co a un tema a caso, scelto fra quelli che offrono i risultati estetici e strutturali più professionali.

nota

Nel capitolo che segue si proverà a realizzare un sito con il tema Spacious, facendo ri-

ferimento a tutto quanto già illustrato nei capitoli precedenti e partendo dal sito di base

realizzato nel quarto capitolo.

8.3 Creazione di un sito con un tema gratuitoIl tema Spacious, già esaminato nel capitolo precedente, possiede tutte le caratteristi-

che adatte per consentivi di sviluppare un sito dall’aspetto professionale e adatto alla

maggior parte delle situazioni.

In questo capitolo partiremo da quanto visto nel quarto capitolo per capire come si può

configurare un tema gratuito per ottenere un risultato simile a quello offerto da molti

temi commerciali. Cominciate con l’individuare il tema Spacious usando l’installatore

interno di WordPress e attivatelo.

Una delle prime impostazioni che seguono l’attivazione di un tema è il caricamento del

logo per la testata, che in questo caso può essere caricato usando la prima scheda,

Header, della schermata Theme Options! richiamata dalla nuova voce omonima aggiun-

ta dal tema alla sezione Aspetto di WordPress. Oltre a caricare il file grafico per il logo

usando il pulsante Upload potrete usare una delle quattro possibilità sottostanti per sce-

gliere se visualizzarlo da solo (Header Logo Only) o assieme al titolo del sito in formato


Capitolo 8

284

testo, Both, se visualizzare solo quest’ultimo, Header Text Only, oppure se evitare di visualizzare entrambi, Disable. Nella stessa schermata trovate anche due opzioni per posizionare un’eventuale immagine della testata sopra o sotto la barra di navigazione del menu principale.

Quando, nella cartella languages di un tema, manca il file della lingua italiana, potrete facilmente aprire con PoEdit il file POT oppure uno dei file lingua esi-stenti e tradurre le parole che vi interessano salvando poi i due file PO e MO e caricandoli nella cartella languages; come abbiamo visto nel quinto capitolo. Nel caso di Spacious sicuramente bisognerà tradurre la frase “Read more” utilizzata nei pulsanti e nei link della home; potete tradurla con “Continua…”.

nota

La scheda di configurazione successiva, Design, permette di scegliere fra le due diverse modalità di layout, fluido o rigido, le loro dimensioni e la presenza e disposizione delle bar-re laterali, sia per il layout predefinito, sia per quello delle singole pagine e articoli, post. Potrete poi selezionare il colore principale (per associarlo per esempio al vostro logo) e lo schema cromatico, Color Skin, con testo scuro su fondo bianco o testo chiaro su fondo scuro per l’intero sito. È previsto anche un campo per il codice CSS personalizzato, che può tornare utile se volete modificare elementi del tema senza ricorrere a un child theme e a modifiche dirette del codice. La scheda Additional riguarda l’utilizzo della classica “favicon”, cioè l’icona che viene visualizzata a sinistra dell’indirizzo del sito nel browser.Una volta configurati gli elementi appena descritti oppure anche prima di impostarli, potrete dedicarvi alla creazione della home page usando gli altri elementi che il tema mette a disposizione.Rispetto al sito creato con il tema di base Twenty Eleven nel quarto capitolo, per Spacious avrete bisogno di impostare una home page vuota per allestirla utilizzando gli elementi che il nuovo tema mette a disposizione: create quindi una nuova pagina, che chiamerete “Home” e rendetela predefinita usando le impostazioni presenti nella schermata Impo-

stazioni Lettura di WordPress.Usando il pannello Attributi Pagina selezionate il modello Business Template, lascian-do attiva l’opzione Default Layout nel pannello seguente, Select Layout: a questo punto potete cominciare a impostare il contenuto della home page usando le opzioni del tema e gli elementi che mette a disposizione.Prima di tutto configurate lo slider cliccando sulla voce Theme Options, che il tema ha aggiunto alla sezione Aspetto di WordPress e selezionando la scheda Slider (Figura 8.9) per accedere alle relative impostazioni: prima di tutto lo attiverete mettendo la spunta sulla casella dell’opzione Check to activate slider, quindi configurerete ognuna delle slide usando i campi successivi; potete configurarne fino a un massimo di cinque.



285

Figura 8.10 – La scelta del modello Business Template per la home; si noti come

il contenuto della pagina sia completamente assente e come, in basso a destra, sia possibile

selezionare anche dei layout di cui è in questo caso attivo quello predefinito, Default Layout.

Per ogni slide potrete inserire un’immagine, cliccando sul pulsante Upload di fianco

al campo Image Upload #n; dove n è il numero della slide; e caricando o selezionando

l’immagine con la solita procedura: un titolo, un testo descrittivo e un link a un conte-

nuto; tipicamente una pagina. Fate attenzione alla lunghezza del testo descrittivo in

quanto testi troppo lunghi causano uno spostamento del pulsante che contiene il link,

portandolo al di fuori dallo slider.

Se nella documentazione del tema mancano le informazioni necessarie, nel preparare le immagini per lo slider o per altri elementi della home come i blurb potrebbe essere una buona strategia recuperare quelle utilizzate nella demo del tema, in modo da avere un’idea del formato più adatto ed evitare che le immagini siano tagliate o ridimensionate arbitrariamente oppure che gli elementi che le contengono non vengano posizionati e visualizzati nel modo corretto.

nota

Una volta configurato e provato lo slider caricando la home page del sito, passate ai tre

blurb sottostanti, visibili anche nella miniatura di anteprima del tema, accedendo alla

schermata Widget di WordPress per posizionarli e configurarli (Figura 8.11).


Capitolo 8

286

Figura 8.11 – Un particolare della schermata Widget di WordPress dopo l’installazione e

attivazione del tema Spacious; si notino i cinque nuovi widget aggiunti a quelli predefiniti e la

sigla TG che ne precede il nome per identificarli in relazione allo sviluppatore, ThemeGracious.

Questo tema inserisce cinque nuovi widget (Figura 8.11) fra cui si trova TG: Services che

è quello grazie al quale potrete inserire e visualizzare i tre blurb sotto lo slider: que-

sto elemento andrà collocato in una delle nuove aree widget aggiunte dal tema (Figura

8.12), chiamata Business Top Sidebar, che corrisponde all’area immediatamente sotto

lo slider nelle pagine cui è stato assegnato il modello Business Template.

Una volta inserito, il widget TG: Services richiede la selezione delle pagine da associare

ai diversi blurb, potete inserirne tre oppure sei, nel secondo caso saranno disposti su

due righe, per poterne utilizzare il titolo, la parte iniziale del testo e l’immagine in evi-

denza: ricordatevi di caricare quest’ultima in ognuna delle pagine scelte e di utilizzare

un’immagine del formato adatto, possibilmente usando elementi grafici con sfondo tra-

sparente perché si adattino anche a uno sfondo colorato.

Per inserire l’elemento che contiene lo slogan e la call to action vi servirete invece del

widget omonimo, cioè TG: Call to Action Widget, che potrete collocare sia nella stessa

area utilizzata per il widget precedente, facendo in modo che sia visualizzato subito

dopo, sia nell’area Business Bottom Sidebar, che corrisponde alla terza di quelle di-

sponibili sotto lo slider. Fra poco sarà utilizzata la seconda, collocata in mezzo alle due

appena citate.

La configurazione del widget per la call to action prevede l’inserimento di due diverse fra-

si, che saranno visualizzate su due righe e con dimensioni di testo differenti (Figura 8.12),

nei due campi Call to Action Main Text e Call to Action Additional Text e di un testo e un

link per il pulsante rispettivamente nel campo Button Text e Button Redirect Link.

Nella parte centrale della home, trovate due aree widget, chiamate rispettivamente Bu-

siness Middle Left Sidebar e Business Middle Right Sidebar, nelle quali potete vedere,

nella demo del tema sul sito ufficiale (wpaz.it/139), un’anteprima di un contenuto e due



287

testimonials: per inserire questi elementi userete i widget TG: Featured Single Page e

TG: Testimonial (Figura 8.12).

Figura 8.12 – La configurazione del widget TG: Services del tema Spacious una volta inserito

nell’area widget Business Top Sidebar; si notino le tre pagine create nel quarto capitolo

selezionate per essere associate ai rispettivi blurb.

Il widget TG: Featured Single Page permette, come suggerisce il nome, di mettere in evi-

denza una specifica pagina nella home del sito e richiede, oltre alla scelta della pagina

fra quelle esistenti, l’inserimento di un titolo; quindi non utilizza quello della pagina cui

fa riferimento. Se non si seleziona l’opzione Remove Featured Image, sarà utilizzata

anche l’immagine in evidenza impostata per la pagina scelta, che potrà seguire o pre-

cedere il titolo, a seconda dell’opzione scelta fra le due finali, in caso contrario non sarà

visualizzata ovviamente alcuna immagine.

Il widget TG: Testimonial, invece, permette di inserire l’omonimo elemento di marketing,

utilizzando una copia del widget per ogni testimonial e inserendo al suo interno il te-

sto (Testimonial Description) e l’autore (Name), associando a quest’ultimo un attributo

(Byline) identificativo che può essere una località, una fonte (per es. un periodico nel

caso di un giornalista), un’azienda e così via. Potrete inserire anche un titolo, che può

essere limitato anche solo al primo di questi widget e sarà utilizzato per tutto il riquadro

dei testimonial.

Per finire, potete usare il widget TG: Featured Widget per visualizzare le immagini in

evidenza, affiancate, di tre pagine a scelta precedute da un titolo e testo introduttivo alla

loro sinistra (Figura 8.12), per esempio nella zona inferiore della home collocandole

nell’area widget Business Bottom Sidebar.


Capitolo 8

288

Figura 8.12 – Un particolare della home page del tema Spacious estratto dalla sua anteprima

sul sito dello sviluppatore (wpaz.it/139); si noti una porzione della call to action in alto,

la pagina associata al widget GT: Featured Single Page al centro affiancata dai testimonial e,

in basso, le tre immagini in evidenza delle pagine associate al widget GT: Featured Widget con

il titolo e il testo personalizzato alla loro sinistra.

Sono presenti anche quattro aree widget per il piè di pagina, una per la testata, che sarà

visualizzata in alto a sinistra, e due rispettivamente per la barra laterale dei due modelli

Contact Page, utilizzabile per la pagina dei contatti, ma priva di un modulo predefinito,

quindi bisognerà usare un plugin come Contact Form 7, ed Error 404, la pagina visua-

lizzata quando non viene trovato alcun contenuto. Non bisogna dimenticare, inoltre, che

per ogni pagina è possibile scegliere, oltre al layout standard, anche due con barra la-

terale rispettivamente a destra e a sinistra e due senza barre laterali con possibilità di

usare tutta la larghezza dello schermo oppure centrare il contenuto.

Il tema Spacious permette anche di creare delle pagine con visualizzazione degli artico-

li, post, secondo diversi stili, come si vede nella demo sul sito originale usando le voci

del menu Blog: per ottenere questo tipo di impaginazione basta associare a una pagina

vuota uno dei quattro modelli predefiniti preceduti dalla parola “Blog”; ricordiamo che

la foto di anteprima, anche in questo caso, corrisponde all’immagine in evidenza di ogni

singolo articolo.


Scelta e utilizzo dei temi - Guida...

Documents

Transcript of Scelta e utilizzo dei temi - Guida...