Sei sulla pagina 1di 362

WordPress

La guida completa
Bonaventura Di Bello

WordPress
La guida completa

EDITORE ULRICO HOEPLI MILANO


Copyright © Ulrico Hoepli Editore S.p.A. 2014
via Hoepli 5, 20121 Milano (Italy)
tel. +39 02 864871 – fax +39 02 8052886
e-mail hoepli@hoepli.it
www.hoepli.it
Seguici su Twitter: @Hoepli_1871
Tutti i diritti sono riservati a norma di legge
e a norma delle convenzioni internazionali
ISBN EBOOK 978-88-203-6478-6
Realizzazione: Maurizio Vedovati – Servizi editoriali (info@iltrio.it)
Redazione: Marinella Luft
Impaginazione e copertina: Sara Taglialegne
Realizzazione digitale: Promedia, Torino
Sommario
Perché questo libro
Capitolo 1: Hosting, installazione e configurazione
1.1 Oltre il blog
1.2 Dominio e hosting
1.3 Il database MySQL
1.4 Installazione automatica di WordPress da cPanel
1.5 Creazione del database MySQL
1.6 Installazione di WordPress su hosting
1.7 Installazione di WordPress “in locale”
1.8 L’area amministrativa (backend)
Capitolo 2: Contenuti e navigazione
2.1 Pagine e strumenti di composizione
2.2 Impostazioni di pubblicazione
2.3 Attributi pagina
2.4 Menu e altri elementi di navigazione
2.5 Articoli
2.6 Permalink
2.7 Gestione di gruppo per pagine e articoli
2.8 Immagini
2.9 Video
2.10 Audio
2.11 Altri formati di file
Capitolo 3: Struttura e layout
3.1 Anatomia di un tema
3.2 Temi gratuiti
3.3 Temi commerciali
3.4 Impostazioni e personalizzazione
3.5 Widget
3.6 Editor e child theme
3.7 Strumenti per la creazione di layout e temi
Capitolo 4: Sviluppo di un sito di base
4.1 Dopo l’installazione
4.2 Scelta e personalizzazione del tema
4.3 Creazione pagine e menu
4.4 Modifiche al codice del tema
4.5 Inserimento di una mappa di Google
4.6 Inserimento di un modulo contatti
4.7 Creazione di un’area blog o news
Capitolo 5: Traduzioni e multi-lingua
5.1 Traduzione di WordPress e dei relativi temi e plugin
5.2 Traduzione automatica dei contenuti di un sito
5.3 Siti multi-lingua con WPML
Capitolo 6: Promozione del sito
6.1 Ottimizzare i contenuti per il pubblico
6.2 Ottimizzare i contenuti per i motori
6.3 Plugin aggiuntivi per la SEO
6.4 WordPress e social media
6.5 Interazione e fidelizzazione
Capitolo 7: Manutenzione e sicurezza
7.1 Cartelle, file e database
7.2 Backup
7.3 Ripristino e migrazione
7.4 Sicurezza
7.5 Accesso a contenuti e backend
7.6 Protezione dallo spam
7.7 Aggiornamenti
7.8 Ottimizzazione
Capitolo 8: Scelta e utilizzo dei temi
8.1 Scelta del tema
8.2 Layout dei temi
8.3 Creazione di un sito con un tema gratuito
Capitolo 9: Creare un layout con Divi
9.1 Installazione e primi passi
9.2 Aree ed elementi
9.3 Sviluppo di un sito con Divi
Appendice: WordPress 4
10.1 Le novità di WordPress 4
Risorse utili
Un regalo per i lettori
Indice analitico
Informazioni sul Libro
Circa l’autore
Perché questo libro
In seguito alla pubblicazione di “Webmaster con WordPress” e al successivo “Guadagnare
su Internet con WordPress” (che ampliava e integrava gli argomenti trattati nel primo) ho
ricevuto numerose recensioni e moltissimi messaggi privati che hanno evidenziato, in
diversi casi, l’esigenza di un’ulteriore guida sulla creazione di siti Web professionali con
WordPress, che affrontasse l’argomento con un approccio diverso e più lineare.
Piuttosto che riproporre, quindi, una semplice “edizione aggiornata” di uno dei due
volumi già pubblicati, ho preferito realizzare un manuale nuovo che, oltre a riferirsi alle
versioni più recenti di WordPress e di ogni suo componente aggiuntivo, potesse offrire un
percorso graduale. Partendo da zero ed esplorando dapprima ogni aspetto fondamentale di
WordPress, il manuale condurrà chiunque alla realizzazione di un sito Web degno di
essere definito “professionale”, senza tralasciare alcun elemento essenziale. Ma cosa si
intende, di preciso, con “sito Web professionale”?
Prima di tutto possiamo definire “professionale” un sito che rispetti gli standard estetici
e strutturali più moderni, e non dia l’impressione di essere stato realizzato dieci anni fa o
anche più. Non dimentichiamo, inoltre, l’efficacia della comunicazione in relazione alla
scelta dei testi, delle immagini e di tutti gli altri elementi che andranno a costituirne la
struttura oltre che i contenuti. Ma “professionale” è anche un sito che risulti ottimizzato da
un punto di vista SEO e possa quindi posizionarsi al meglio nei risultati delle ricerche su
Google e altri motori, e ciò comprende anche un’ottimizzazione dal punto di vista dei
tempi di caricamento.
Professionale, infine, deve essere anche il lavoro svolto per sviluppare e gestire il sito, il
che presuppone che il webmaster conosca e applichi le tecniche di manutenzione e
sicurezza più adatte a mantenere stabile e protetto il sito stesso, preservandone l’integrità
nel tempo.
Essendo questo nuovo manuale una guida completa per acquisire la padronanza di
WordPress e delle sue svariate potenzialità e applicazioni, potrebbe capitarvi di incontrare
argomenti che già conoscete abbastanza approfonditamente da non richiedere ulteriore
documentazione: in tal caso il consiglio è di passare oltre e proseguire con gli argomenti
successivi, seguendo un percorso logico e graduale nell’utilizzo del CMS, senza
dimenticare di consultare nuovamente il libro ogni volta che si presentasse l’occasione di
capire meglio uno specifico aspetto dell’uso di WordPress. Lo spazio a disposizione è
come sempre insufficiente a inserire in un solo volume tutto quanto si vorrebbe illustrare,
ma ho voluto considerare questa guida come un punto di partenza fondamentale per chi
vuole padroneggiare WordPress, sperando di poter dedicare successive pubblicazioni ai
diversi aspetti che meritano un approfondimento.
Tutti i riferimenti a risorse Web contenuti in questa nuova guida saranno indicati con un
formato breve, per semplificarne la digitazione, e associati a un link che, essendo
configurato sul blog ufficiale del libro (wpaz.it), potrà eventualmente essere aggiornato e
corretto nel tempo, qualora la risorsa collegata venisse a mancare. In questo modo sarà
possibile assicurare ai lettori dei riferimenti sempre aggiornati ed efficaci di
approfondimento e chiarimento rispetto ai contenuti del volume.
Sono questi i presupposti e gli obiettivi alla base della nuova guida, con l’augurio che
possiate trarne il massimo tanto nello sviluppo di un unico sito Web per scopi personali,
quanto nel vero e proprio lavoro da webmaster per i siti dei vostri clienti. Vi invito a
utilizzare il sito wpaz.it come opportunità di interazione e approfondimento ulteriore
durante e dopo la lettura del libro.
1
Hosting, installazione
e configurazione
Come ho già precisato nell’introduzione, in questa nuova guida a WordPress non troverete
un elenco dei motivi per cui adottare WordPress nella creazione di un sito. Oltre ad averli
già ampiamente elencati e dettagliati nel mio primo libro, basta una semplice ricerca su
Google su: “perché usare WordPress”, per individuare almeno una dozzina di articoli in
cui tali vantaggi sono esposti in modo chiaro e dettagliato.

nota
WordPress è un CMS (Content Management System, in altre parole sistema di
gestione dei contenuti) ed è quindi progettato per gestire contenuti anche ricchi e
complessi oltre che dinamici (aggiornati o modificati con frequenza), che vanno al di
là di quelli di un sito tradizionale realizzato con strumenti come l’HTML o Flash,
ormai sempre meno utilizzati nello sviluppo Web. Per quanto complesso nella sua
struttura interna, tuttavia, ha un’interfaccia utente intuitiva, che semplifica il lavoro
sia al webmaster sia all’eventuale utente finale, che dovrà occuparsi semplicemente
di creare e gestire i contenuti dopo lo sviluppo del sito o del blog.
I vantaggi dell’utilizzo di WordPress, rispetto ad altri CMS, li scoprirete “sul campo”
mettendo in pratica le indicazioni e i consigli che trovate in queste pagine.
Cominciamo dalle basi, per coloro che ancora non conoscono questo meraviglioso
strumento di sviluppo per il Web chiamato WordPress.
1.1 Oltre il blog
Molte persone, parlando di WordPress, fanno ancora confusione fra il CMS WordPress,
inteso come strumento di sviluppo per siti e blog da ospitare sul proprio spazio Web, e
l’omonima piattaforma di blogging WordPress.com, che pur essendo basata sul medesimo
CMS è nata, invece, per ospitare blog e siti degli utenti iscritti e si presenta con una
versione gratuita di base e una serie di opzioni extra a pagamento.
Se il vostro obiettivo è di familiarizzare semplicemente con gli strumenti di WordPress
e non ve la sentite di acquistare un vostro spazio Web, ma preferite cominciare con
qualcosa di gratuito, potete muovere i primi passi registrandovi su WordPress.com e
creando uno o più siti o blog. Ciò non vi permetterà di sfruttare appieno le potenzialità del
CMS, in quanto WordPress.com pone delle limitazioni volte a preservare la sicurezza della
piattaforma, ma potrete in ogni caso esplorare le funzionalità principali ed esercitarvi nel
realizzare velocemente e facilmente un sito oppure un blog, come vedremo nel quarto
capitolo.
Figura 1.1 - La home page in italiano di WordPress.com: completando l’indirizzo con
l’inserimento di una parola a scelta e cliccando sul pulsante Crea sito Web è possibile
registrarsi e cominciare subito a creare un blog basato su WordPress
È importante specificare quali sono, a questo punto, gli svantaggi, ma sarebbe più giusto
definirli come “limiti”, che derivano dall’utilizzare la versione gratuita della piattaforma
WordPress.com rispetto a una vera e propria installazione di WordPress su uno spazio di
“hosting” personale, in genere acquistato insieme a un nome di dominio. Personalmente
suggerisco di registrare subito un nome di dominio di secondo livello associato a uno
spazio Web e relativi servizi presso un provider italiano o estero, come vedremo in pratica
fra poco, piuttosto che utilizzare i servizi a pagamento di WordPress.com in alternativa a
quello gratuito di base; sia per una maggiore libertà di azione, sia per il vantaggio
economico che ne deriva.

nota
I nomi di dominio di secondo livello associati alle estensioni principali (es.
nomedominio.it oppure nomedominio.com) sono acquistabili da chiunque, e spesso
associati a uno spazio Web e altri servizi come l’email, a un prezzo che supera di
poco i dieci euro. Proprio per questo motivo è sempre più difficile trovare dei domini
di secondo livello disponibili e capita frequentemente di scoprire che qualcun altro ha
già registrato il nome che avevate scelto.
Ecco una serie di motivi per cui non vale la pena scegliere un servizio gratuito come
quello di WordPress.com per creare un sito o un blog professionale:
• dominio di terzo livello
non potrete registrare, almeno nella versione gratuita, un dominio di secondo livello
che è sinonimo di professionalità nella creazione di un sito o blog
• limitazione nell’uso dei temi
potrete utilizzare soltanto i temi grafici disponibili di serie sulla piattaforma e non
caricarne uno dall’esterno; inoltre vi sarà impossibile intervenire sul codice del tema
per applicare eventuali modifiche e personalizzazioni
• limitazione nell’uso dei plugin
è assolutamente impossibile installare un qualsiasi plugin (quindi anche widget),
infatti la voce plugin manca del tutto nel pannello di gestione
• nessun accesso all’hosting
non potrete avere alcun controllo sullo spazio di hosting, per esempio per aggiungere,
rimuovere, caricare o scaricare file e cartelle del sito
• utenti limitati
non si possono creare direttamente nuovi utenti in quanto questi ultimi vanno
“invitati” (massimo 10) e, se non fossero già registrati, dovranno creare a loro volta
un account su WordPress.com.
Una strada alternativa per cominciare a muovere i primi passi con WordPress può essere la
registrazione presso Altervista.org, un’altra piattaforma gratuita che, a differenza di
WordPress.com, permette una certa libertà nell’utilizzo delle funzioni del CMS,
eliminando tutte le limitazioni sopra elencate tranne la prima.
Figura 1.2 – La pagina di Altervista.org (wpaz.it/008) che permette di registrarsi e creare
un blog usando WordPress, è raggiungibile cliccando sul menu crea blog della home page
it.altervista.org. Scegliendo l’opzione crea sito si avrà la possibilità di selezionare
WordPress per installarlo in automatico, mentre selezionando crea blog l’installazione di
WordPress sarà automaticamente inclusa nel processo.

nota
Piattaforme come WordPress.com e Altervista.org permettono di scegliere, nella
versione gratuita, soltanto nomi di dominio di terzo livello, nella forma
“dominio.wordpress.com” oppure “dominio.altervista.org” (come accade con
piattaforme di blogging altrettanto famose come “Blogger” di Google). Si tratta,
quindi, di una scelta più che altro amatoriale, da non adottare per un sito o blog
professionale.
Nel quarto capitolo vedremo come realizzare rapidamente un blog e un sito con
WordPress e sarà possibile utilizzare anche una delle due piattaforme appena descritte
qualora non si voglia acquistare, in questa prima fase di esercitazione, un dominio e un
hosting presso un provider Web. Le informazioni su come acquistare dominio e hosting
sono invece fornite nel prossimo paragrafo.
1.2 Dominio e hosting
Un sito Web professionale non può prescindere, come dicevamo, dall’utilizzo di un
dominio di secondo livello, possibilmente con estensione standard (.it o .com) e da un vero
e proprio hosting personale. Entrambi i servizi possono essere acquistati facilmente con
una spesa in genere inferiore ai 15 euro per le soluzioni di tipo condiviso, “shared
hosting”, e sono offerti da vari “provider” (fornitori di servizi e hosting) italiani e stranieri.
Lo shared hosting, vale a dire uno spazio “ritagliato” all’interno di un server (reale o
virtuale) sul quale sono ospitati siti di altri utenti, è la soluzione più economica e di
conseguenza più popolare fra chi decide di realizzare un sito per conto proprio, ma anche
da molti webmaster che creano siti per clienti a prezzi competitivi. Ben diverso è
“l’hosting dedicato”, dove il sito è ospitato su un server: quest’ultimo può essere un vero e
proprio computer, seppure costruito in un formato “modulare” per essere inserito in
“rastrelliere” (in inglese “rack”, strutture che vanno a formare le cosiddette “server farm”),
oppure trattarsi di una “macchina virtuale” (VPS, Virtual Private Server) ospitata a sua
volta all’interno di una macchina reale come quelle appena descritte. Questo secondo tipo
di hosting ha dei costi annuali ben più elevati, che vanno da poche centinaia di euro a oltre
mille o duemila euro. La scelta di un tipo di hosting piuttosto che un altro sarà
strettamente legata alle esigenze del sito e del suo proprietario e al budget disponibile per
il progetto di sviluppo, ma anche e soprattutto al numero di accessi (traffico) giornalieri e
all’importanza e complessità del sito e dei suoi contenuti.
Oltre a differenze di prezzo più o meno lievi nei diversi pacchetti di hosting, ciò che
rende preferibile un provider rispetto a un altro sono le funzionalità del servizio e la
semplicità d’uso degli strumenti a disposizione. Nel corso degli anni ho potuto testare i
servizi di hosting condiviso offerti da vari provider italiani e stranieri, abbandonandone
alcuni nel tempo a causa della scarsa praticità di utilizzo o della qualità dell’assistenza
tecnica e commerciale ai clienti.
Uno dei provider italiani che utilizzo maggiormente da alcuni anni è DominiOK
(wpaz.it/010), mentre per quanto riguarda i provider esteri mi servo di HostGator
(wpaz.it/009): entrambi hanno in comune un pratico e completo pannello di gestione
dell’hosting, “cPanel”, che permette non solo di configurare facilmente tutti i servizi, ma
anche di installare e tenere aggiornato, come vedremo fra poco, WordPress (o un altro
CMS fra quelli previsti) in modo completamente automatizzato.
Figura 1.3 – La home page del sito dominiok.it, su cui è possibile registrarsi per
acquistare un dominio di secondo livello e ottenere gratuitamente un hosting di base con
caselle email e pannello di gestione completo.

nota
Le due applicazioni più famose per l’installazione (e rimozione) automatizzata di
WordPress sono “Softaculous” e “Fantastico”, presenti rispettivamente nel cPanel di
DominiOk.it e di HostGator.com. Installando WordPress per mezzo di questi
strumenti si attiverà un servizio che permette di ricevere un avviso ogni volta che il
CMS viene aggiornato oppure, se non si è scelto l’aggiornamento automatico, a ogni
disponibilità di una nuova versione di WordPress.
Ogni singolo riquadro del cPanel è dedicato a un diverso tipo di strumenti, dalla gestione
di file e cartelle presenti nel vostro spazio di hosting, alla creazione di database e relativi
utenti oppure di caselle per la posta elettronica. Alcuni di questi strumenti sono disponibili
tanto in versione manuale quanto nella più comoda versione guidata, “wizard”, ma in
entrambi i casi possono essere padroneggiati in breve tempo anche da chi non ha una
grande esperienza tecnica.
L’attivazione di un hosting Web è preceduta sempre dalla registrazione del nome di
dominio e, in genere, conviene registrare il dominio presso lo stesso provider che fornisce
lo spazio e gli altri servizi. Nel caso di DominiOk.it, per esempio, dopo avere scelto e
acquistato il dominio desiderato e avere ricevuto la conferma della registrazione, in genere
entro un’ora, a volte addirittura dopo qualche minuto, basta accedere di nuovo al proprio
account e attivare l’hosting gratuito di base.

Figura 1.4 – Il cPanel di DominiOK.it, sono visibili due dei tanti pannelli di strumenti
grazie ai quali è possibile gestire facilmente (spesso con procedure guidate) ogni aspetto
dell’hosting e dei domini.

Figura 1.5 – La sezione di DominiOk.it dove è possibile attivare l’hosting gratuito per i
domini registrati; si noti il link Gestione Hosting Gratuito in basso a destra e i link
Attiva in corrispondenza dei domini per i quali lo stato di attivazione è Disattivato.
Altri provider attivano uno spazio Web in modo automatico, contestualmente alla
registrazione del dominio, a volte dichiarando tale spazio (così come il traffico o “banda”)
come illimitato, salvo poi bloccare i siti degli utenti che dovessero assorbire troppe risorse.
Nel caso di DominiOk.it lo spazio offerto nell’hosting gratuito di base equivale a 500MB,
ma è possibile espanderlo (insieme alle altre caratteristiche dell’hosting) acquistando uno
dei pacchetti commerciali superiori, qualora se ne presentasse l’esigenza.

nota
Uno spazio di 500MB è in genere sufficiente per la maggior parte dei siti Web,
mentre potrebbe col tempo esaurirsi qualora il sito preveda dei contenuti dinamici
sotto forma di blog, soprattutto per il caricamento di numerose immagini. Tuttavia,
l’ottimizzazione di queste ultime, come vedremo nel terzo e sesto capitolo, aiuta non
solo a evitare sprechi di spazio, ma anche a velocizzare il sito per migliorare
l’esperienza dei visitatori e l’indicizzazione da parte dei motori di ricerca.
Fin qui abbiamo parlato ovviamente di soluzioni economiche, basate soprattutto sul
cosiddetto hosting condiviso. Ciò comporta, come si può dedurre, una limitazione nelle
prestazioni e nelle risorse disponibili; tuttavia per moltissimi siti che non presuppongono
un alto traffico giornaliero, anche un hosting condiviso può essere sufficiente ed è infatti
la soluzione preferita da chi comincia a muoversi nel mondo dello sviluppo Web oppure
da chi intenda realizzare un sito per conto proprio e non vuole investire subito in un
hosting più costoso.
Nessuno vieta, in ogni caso, di acquistare pacchetti con caratteristiche (e costi)
superiori, nei casi in cui il provider lo consenta, oppure addirittura di “traslocare” (come
vedremo nel settimo capitolo) su un hosting diverso qualora non si fosse più soddisfatti
della qualità del servizio di quello scelto inizialmente.
Per chi volesse, invece, cominciare in grande, può essere interessante il noleggio di un
VPS ovvero di un server basato su una macchina virtuale invece che su un computer vero
e proprio: in questo caso, a fronte di un costo che si aggira in genere su poche centinaia di
euro l’anno, si ottengono prestazioni di livello nettamente superiore, a volte quasi
paragonabili a quelle di un server reale (il cosiddetto “server dedicato”).

nota
Qualunque sia l’offerta di hosting che si decida di adottare, è importante che sia
basata su hosting Linux (e non Windows), in quanto più adatto a ospitare WordPress.
Il sistema operativo del server non è percepito dall’utente che lo utilizza, poiché di
solito (e soprattutto nel caso di hosting condiviso) quest’ultimo avrà semplicemente a
che fare con l’interfaccia del pannello di gestione e non con il sistema operativo del
computer che funge da server. Non lasciatevi quindi fuorviare da questo aspetto e
ricordate di scegliere sempre un hosting Linux.
Figura 1.6 – Una panoramica dei prezzi di una soluzione di hosting basata su VPS dal sito
di DominOK.it (wpaz.it/010), in questo caso sul server virtuale è installato il cPanel che
rende la gestione molto più semplice anche per chi ha meno esperienza, di conseguenza i
costi (che sono annuali) sono maggiori rispetto alla versione senza cPanel, “unmanaged”.
La procedura per registrare un dominio e associare lo spazio Web e i vari servizi è quindi
abbastanza semplice, soprattutto nel caso di un hosting condiviso, e consiste nei seguenti
passi:
• registrazione sul sito del provider
il primo passo è sempre la creazione di un account presso uno dei provider italiani o
stranieri (questi ultimi consigliabili solo per siti destinati a un pubblico estero)
• ricerca del dominio libero
nella pagina di registrazione dei domini ogni provider offre in genere un sistema di
verifica della disponibilità di un dominio, quindi utilizzatelo per scoprire se il nome
che volete registrare è ancora libero
• acquisto del dominio
questo passaggio prevede anche la compilazione di una serie di campi per i dati
personali (o aziendali) da associare al dominio che si intende registrare; una volta
acquistato il dominio si riceverà una conferma via email della sua registrazione
• attivazione dell’hosting
se l’hosting non è automaticamente creato e associato al dominio appena registrato,
basterà accedere nuovamente al proprio account presso il provider e richiederne
l’attivazione
• ricezione dei dati di accesso all’hosting
l’accesso al pannello di hosting può essere anche separato rispetto a quello del
proprio account sul sito del provider; in tal caso, insieme alla conferma di attivazione
dell’hosting, si riceveranno anche i dati di accesso al pannello.

nota
Mentre provider come Aruba o TopHost costringono gli utenti a gestire tutti i domini
e relativi servizi direttamente dall’account utente generale, altri come DominiOk.it
assegnano a ogni dominio/hosting un accesso separato. Non si tratta di un particolare
secondario, poiché, soprattutto nel caso ci si trovi a gestire dei siti per vari clienti a
cui si debba fornire l’accesso, un account separato per ogni dominio/sito si traduce in
una maggiore sicurezza e privacy ed elimina i problemi che potrebbero sorgere da un
accesso condiviso.

Figura 1.7 – Il risultato della ricerca per il dominio sitiprofessionali.it dal sito di
DominiOK, si noti come i domini non disponibili siano affiancati da un link (whois/www)
che permette di conoscere i dati di chi li ha registrati, sempre che la privacy non sia stata
protetta.
Nella scelta dell’hosting, infine, è fondamentale che fra i servizi offerti sia presente
almeno un database MySQL, che, come vedremo nel prossimo paragrafo, è uno dei due
requisiti fondamentali per installare WordPress e creare un blog o un sito. In genere le
offerte di hosting prevedono alcuni database o addirittura permettono di crearne a
piacimento, secondo il provider, ma fra questi ultimi c’è chi (come Aruba.it) fornisce tali
database come servizio aggiuntivo, richiedendo un costo extra e una gestione separata, che
si rivela meno pratica e flessibile rispetto a una gestione autonoma dei database da parte
dell’utente.
1.3 Il database MySQL
Per creare un blog o un sito con WordPress non è sufficiente avere a disposizione uno
spazio Web in cui collocare, come vedremo più avanti, le cartelle e i file del CMS.
Occorre, infatti, che sia presente un database, cioè uno spazio online dedicato, in grado di
ospitare i contenuti e le impostazioni del CMS.

nota
Il termine “database” (base di dati) indica in genere un contenitore nel quale vengono
inserite e organizzate delle informazioni in forma strutturata per consentirne una
gestione efficiente. Un elenco telefonico, per esempio, è un database di nomi e
numeri di telefono ordinato per località e alfabeticamente. WordPress utilizza i
database nel popolare formato MySQL e, come vedremo in questo paragrafo,
possono essere creati e utilizzati anche in maniera semplice e automatizzata e non
prevedono necessariamente una conoscenza tecnica della struttura, anche se
quest’ultima è auspicabile per chi desiderasse acquisire una maggiore padronanza e
sicurezza nell’uso del CMS.
Secondo l’hosting scelto, il o i database disponibili possono essere già configurati oppure
devono essere creati. Come abbiamo visto nelle pagine precedenti, alcuni provider offrono
un pannello di gestione in cui è presente uno strumento automatizzato di installazione dei
CMS: in questo caso la creazione del database e la sua associazione a WordPress avviene
in maniera del tutto automatica e non ci si deve preoccupare degli aspetti tecnici del
MySQL o della configurazione che precede l’installazione del CMS. Tuttavia, avere una
conoscenza di come ciò avviene e saperlo fare manualmente significa essere in grado di
gestire con maggior sicurezza ed efficienza molti degli aspetti tecnici dello sviluppo dei
siti con WordPress. Alla luce di ciò, nelle prossime pagine scopriremo le diverse modalità
manuali di creazione del database, oltre a quelle per collegarlo a WordPress per avviarne
l’installazione e cominciare a lavorare sul vostro sito.

nota
Qualora si decidesse di muovere i primi passi nell’uso di WordPress preferendo una
soluzione pronta come la registrazione e creazione di un blog/sito su WordPress.com
oppure Altervista.org non ci si dovrà preoccupare, ovviamente, di aspetti tecnici
come la creazione del database o l’installazione di WordPress, poiché quest’ultimo
sarà provvisto pronto per l’uso. Le indicazioni fornite in questo paragrafo sono quindi
destinate soltanto a chi desiderasse installare da sé WordPress e imparare a gestirne i
diversi aspetti.
Anche se si scegliesse di utilizzare l’installazione automatizzata di WordPress, descritta
nei prossimi due paragrafi, potrebbe comunque rivelarsi necessario fornire, durante il
procedimento, due informazioni fondamentali per la creazione del database, cioè il nome
dello stesso e il suo prefisso: si tratta di due parametri che saranno poi passati a WordPress
per consentire la comunicazione fra il CMS e il database stesso ed è importante sceglierli
in maniera appropriata in modo da rendere meno vulnerabile il sito o il blog agli attacchi
informatici (nel settimo capitolo affronteremo in maniera approfondita questo aspetto).
1.4 Installazione automatica di WordPress da cPanel
Alcuni pannelli di gestione dello spazio Web mettono a disposizione degli strumenti per
l’installazione automatica di WordPress: i più famosi sono Softaculous e Fantastico (o
Fantastico Deluxe), presenti nel popolare cPanel, che ritrovate per esempio nell’hosting di
DominiOK.it.
Usando lo strumento di gestione Softaculous, i dati relativi al database MySQL,
descritti nel paragrafo precedente, saranno richiesti in aggiunta a quelli standard. Con
Fantastico Deluxe, suo equivalente, sarà necessario inserire solo i dati fondamentali,
ovvero la cartella di installazione, nome utente e password dell’amministratore di
WordPress (admin) insieme al suo indirizzo email e il titolo e il sottotitolo (motto) del sito.

Figura 1.8 – La pagina di partenza dello strumento di gestione Fantastico Deluxe


visualizzata dopo aver scelto WordPress fra i CMS installabili; si noti il link New
Installation per procedere a una nuova installazione e, al di sotto, la sezione Current
installations con il link Remove per eliminare le installazioni di WordPress esistenti.
Riepilogando, ecco tutte le voci da compilare nel caso di un’installazione per mezzo di un
tool automatizzato come Fantastico Deluxe o Softaculous; alcune di queste voci potranno
essere modificate, più o meno facilmente in seguito, ma è opportuno impostarle bene già
nella fase iniziale:
• protocollo (protocol)
alcuni tool consentono di scegliere fra l’indirizzo con www o senza (es.
www.nomesito.it oppure semplicemente nomesito.it) e fra il normale http e quello
protetto (https); normalmente si selezionerà il sito nella forma http://www.nomesito.it
a meno che non sussistano esigenze particolari.
• dominio o sotto-dominio associato (domain)
se il vostro account di hosting prevedesse la gestione di più domini o sotto-domini,
troverete un menu in cui specificare su quale di questi volete installare WordPress.
• cartella di installazione (directory)
a volte in questo campo viene suggerito “wp”, ma a meno che non vogliate installare
WordPress in una sotto-cartella del sito principale (per es. nomesito.it/wp oppure
nomesito.it/blog) è importante che questo campo resti vuoto, affinché WordPress
venga installato sull’indirizzo principale del sito, che si presuppone non contenga
altro prima dell’installazione.
• nome del database
quasi sempre viene suggerito, nella forma wpXXX dove XXX corrisponde a un
numero, tuttavia il nome del database può essere personalizzato con una qualsiasi
combinazione di lettere e numeri per un massimo di 7 caratteri.
• prefisso del database (prefix)
i nomi delle tabelle, i singoli elementi, in un database di WordPress sono precedute
da un prefisso che normalmente è costituito dalle sole due lettere wp; come vedremo
nel capitolo dedicato alla sicurezza, tuttavia, questo prefisso va evitato e bisogna
scegliere una combinazione di lettere più complessa, per esempio “wp_a32f43_”; si
noti il segno di sottolineato da includere sempre alla fine del prefisso anche se è già
presente nell’insieme di lettere e numeri.
• nome dell’amministratore del sito (admin)
normalmente viene suggerito admin come nome utente per l’amministratore di
WordPress, tuttavia è importantissimo personalizzare anche questo in modo da
ridurre le vulnerabilità del sito.
• password dell’amministratore del sito
ancora più importante, a proposito della sicurezza, è la scelta della password
dell’amministratore, che deve utilizzare una combinazione di lettere, maiuscole e
minuscole, numeri e altri caratteri, che non sia facile da indovinare.
• indirizzo email dell’amministratore
in questo campo va inserito un indirizzo di riferimento che servirà in seguito a
WordPress per inviare segnalazioni riguardanti lo stato del sito e dei suoi componenti
oppure, nel caso ci si dimenticasse la password, per ricevere un link utile a
ripristinarla.
• nome del sito (title)
questo è il titolo del sito, che in genere viene visualizzato nella parte alta della
pagina, vale a dire l’intestazione, e identifica il sito anche nei risultati delle ricerche
sui motori (per es. “Ristorante da Peppe”).
• descrizione del sito (description)
oltre a un titolo, WordPress prevede un sottotitolo, detto anche “motto” o
“descrizione”; in genere si tratta di una frase esplicativa che specifica meglio il
contenuto (es. “Specialità a base di pesce”).
• lingua del sito (language)
WordPress può essere installato in una lingua a scelta e l’installazione predefinita
prevede l’inglese, di conseguenza, se questa voce è presente, si consiglia di
selezionare da subito l’italiano in modo da avere poi un’interfaccia di gestione
appropriata quando si accede all’area di amministrazione di WordPress.

Figura 1.9 – La prima parte della scheda da compilare quando si usa Softaculous per
installare WordPress in automatico: i campi per il nome del database e il prefisso delle sue
tabelle sono stati compilati con dei nomi esemplificativi.
L’utilizzo dell’installazione automatica offerta da Softaculous o Fantastico permette di
evitare la creazione manuale del database e il caricamento di cartelle e file di WordPress
all’interno dello spazio di hosting, così come la configurazione del file wp-config.php che,
come vedremo fra poco, permette fra le altre cose proprio la comunicazione fra WordPress
e il database, fondamentale per l’installazione e successivo funzionamento.
Quando questi strumenti d’installazione automatica non sono presenti, oppure nel caso
vogliate cimentarvi e far pratica nella creazione di un database e nella configurazione che
precede l’installazione di WordPress, potete seguire le procedure che illustrerò nei
prossimi paragrafi.
1.5 Creazione del database MySQL
Come abbiamo appena visto, per installare WordPress su un hosting dove non sia già
preinstallato, come WordPress.com oppure Altervista.org, dove non ci siano strumenti per
automatizzare l’installazione come quelli appena descritti e dove i database non siano già
forniti pronti per l’uso, sarà necessario creare prima di tutto un database manualmente.
Quest’operazione può essere eseguita usando gli strumenti che il pannello di hosting
mette a disposizione per i database MySQL, che in genere prevedono anche una procedura
guidata (in inglese “wizard”).

nota
La presenza del cPanel, in un’offerta di hosting, è sempre da ricercare quando si
decide di acquistare questo tipo di servizio, in quanto come avrete già intuito, si tratta
di un sistema che permette di gestire, grazie ai suoi strumenti e applicazioni, con
praticità e rapidità tutti i diversi aspetti dell’hosting stesso e non solo
dell’installazione e manutenzione di WordPress. In altre parti del libro scoprirete
ulteriori vantaggi che la presenza del cPanel può offrire, ma nel frattempo siete
incoraggiati a scegliere offerte di hosting che lo prevedano.
Un classico esempio è quello delle applicazioni di gestione dei database presenti nel
popolare cPanel, che come si vede nell’immagine seguente sono rappresentati da uno
strumento di creazione guidata (Wizard Database MySQL) oltre che da quelli per la
gestione manuale (Database MySQL e phpMyAdmin).

Figura 1.10 – L’area dedicata ai database MySQL nel cPanel, si noti il wizard per la
creazione guidata a sinistra e l’icona per accedere al phpMyAdmin a destra.
Fra questi ultimi due ha una sua particolare importanza il phpMyAdmin, una vera e
propria interfaccia utente che da sempre ha permesso anche a chi non ha esperienza
approfondita dei database MySQL di svolgere operazioni di routine e non. Merita quindi
uno spazio particolare tanto in questo capitolo quanto in quello dedicato alla
manutenzione di WordPress, oltre che nel bagaglio di esperienza di chiunque voglia
cimentarsi nello sviluppo professionale di siti con WordPress.
Ma torniamo alla creazione del database, che come abbiamo già rilevato è un elemento
indispensabile per installare WordPress: quest’operazione fornirà, infatti, quella serie di
informazioni che andranno “comunicate” a WordPress affinché l’installazione possa essere
avviata e concludersi con successo. Tali informazioni andranno inserite nel file di
configurazione (wp-config.php) di WordPress, come si vede dall’immagine seguente in cui
è visibile la parte di codice che le ospita all’interno del file stesso.

Figura 1.11 – Le righe di codice dove andranno inserite le informazioni relative al


database MySQL utilizzato da WordPress, cioè il nome del database stesso e del suo
utente, che spesso coincidono, la password di accesso di quest’ultimo e l’indirizzo del
server che ospita il database (se diverso da localhost).
Queste informazioni sono quattro e, giacché saranno poi utilizzate per l’installazione,
vanno annotate con cura mentre si crea, come faremo fra poco, il database MySQL:
• nome del database (dbname)
questo viene sempre scelto da voi e quasi sempre si andrà ad aggiungere a un prefisso
predefinito, formato dalla parte iniziale del nome di dominio, da un numero e dal
segno di sottolineato (es. dmn123_nomescelto).
• nome dell’utente per il database (userid)
anche questo secondo nome viene composto nello stesso formato di quello del
database, spesso anzi è identico, in quanto, come vedremo più avanti, la creazione di
un database è contestuale a quella del suo utente e al primo può essere
automaticamente assegnato il nome del secondo.
• password dell’utente (password)
creata manualmente o, preferibilmente, generata da un apposito strumento che ne
assicura la complessità, è consigliabile copiarla e incollarla in un documento esterno
come promemoria. Queste password, infatti, devono essere sicure, quindi formate da
un insieme di lettere maiuscole e minuscole e numeri disposti casualmente,
inframezzati eventualmente anche da altri simboli (es. 34L2_4e-Yy$B8W:m), quindi
sono difficili da ricordare e vanno necessariamente annotate per poterle recuperare in
caso di necessità.
• host del database (host)
quasi sempre identificato dal nome localhost, in quanto basato sullo stesso server che
ospita anche il sito, può anche essere formato da un indirizzo simile a quello del sito,
ma preceduto da sql o mysql (es. mysql.nomesito.it oppure sql. nomesito.it) o dal suo
equivalente indirizzo numerico di rete (es. 435.231.566.12).
Nel prossimo paragrafo vedremo come ottenere queste informazioni direttamente dalla
creazione di un utente e relativo database, usando l’interfaccia di phpMyAdmin all’interno
di un’installazione di WordPress su server locale. In questa fase, invece, useremo lo
strumento di creazione guidata e manuale dei database presente nell’interfaccia del cPanel.

nota
N.B. Le istruzioni fornite di seguito riguardano soltanto i casi in cui le informazioni
del database non siano state già fornite automaticamente dal provider o non sia
necessario inserirle nella configurazione di WordPress (per esempio qualora il
database stesso sia stato creato durante una procedura di installazione automatizzata
con applicazioni come Fantastico o Softaculous).

Figura 1.12 – L’interfaccia di hosting di TopHost.it permette di creare fino a 4 database in


modo completamente automatico, ma non offre alcuno strumento per l’installazione
semplificata di WordPress; si noti nell’immagine come il nome del database creato e del
relativo utente siano uguali ed entrambi ricavati dal nome di dominio, che viene usato
anche per definire l’host.
Seguite, quindi, le istruzioni che trovate qui di seguito per creare un database MySQL
usando la procedura guidata del cPanel e annotate le informazioni necessarie per
l’installazione di WordPress. Giova ripetere che la procedura che segue non serve qualora
abbiate già ottenuto le informazioni sui database disponibili nel vostro hosting
direttamente dal provider, come nel caso di Aruba.it, oppure per mezzo della generazione
automatica del database stesso, come nel caso di TopHost.it (Figura 1.12).
Individuate prima di tutto l’icona dello strumento Wizard Database MySQL, o altro
nome simile, e cliccatela per avviare la procedura guidata.
Il primo passo consiste nel completare il nome del database aggiungendo lettere ed
eventualmente numeri al prefisso preimpostato, digitandoli nel campo vuoto che segue
quest’ultimo. Se i caratteri che avete inserito sono accettati, comparirà un segno di spunta
a destra del campo, altrimenti sarà visualizzato un messaggio d’errore che scomparirà
quando avrete rimosso i caratteri superflui o non corretti. A operazione conclusa, cliccate
sul pulsante presente sotto il campo, che vi porterà al passo successivo.
Figura 1.13 – Il primo passo della procedura guidata di un database MySQL; si noti il
campo in cui digitare i caratteri scelti per completare il nome e, a destra, il segno di spunta
che in questo caso indica l’utilizzo di caratteri corretti.
Il secondo passo consiste nella creazione del nome utente. Anche in questo caso dovrete
aggiungere caratteri alfabetici e numerici a vostra scelta nel campo che segue il prefisso
preimpostato e nella scelta di una password sicura. La validità di quest’ultima è calcolata
in modo automatico, visualizzando un messaggio che segnala se è abbastanza forte o se, al
contrario, è debole e andrebbe modificata. Naturalmente, come abbiamo visto in
precedenza, il nome utente può anche essere identico a quello del database. La password
può essere creata automaticamente utilizzando lo specifico strumento, e in tal caso
ricordate di copiarla e incollarla in un file di testo e di salvare quest’ultimo per non
rischiare di smarrirla o dimenticarla.
Anche stavolta cliccate sul pulsante in basso per proseguire.
Figura 1.14 – Il secondo passaggio nella creazione guidata di un database MySQL, cioè la
creazione del relativo utente e l’assegnazione della sua password di accesso al database; si
noti, a destra, il pulsante per la generazione automatica di quest’ultima e in alto il
riepilogo che mostra il nome assegnato al database nel passo precedente.

nota
Non ci si stancherà mai di porre l’accento sull’importanza di scegliere password
robuste, composte da lettere maiuscole e minuscole, numeri e altri caratteri
possibilmente casuali, per tutto ciò che riguarda l’informatica e Internet, e in
particolare per l’accesso a dati sensibili e delicati che, una volta nelle mani di
malintenzionati, potrebbero essere danneggiati, distrutti o utilizzati illecitamente.
Come scoprirete nelle prossime pagine, questa esigenza si presenta anche e
soprattutto per gli utenti che dovranno accedere alla gestione di WordPress.
Figura 1.15 – Lo strumento di generazione automatica delle password sicure attivabile nel
secondo passo della procedura guidata di creazione del database; si notino le opzioni
extra, Advanced Options, che possono essere personalizzate cliccando sull’omonimo link
e, in basso, il pulsante con cui si dichiara di aver copiato e incollato la password generata
per poterla recuperare in caso di necessità.
L’ultimo passo della procedura guidata consiste nel selezionare tutti i privilegi per
l’utente, cliccando sul riquadro di spunta principale e assicurandosi che, in tal modo, siano
spuntati tutti gli altri. Come in precedenza, i dati già inseriti sono visualizzati in alto come
promemoria. Cliccando sul solito pulsante per proseguire, assegnerete questo utente al
database, facendo in modo che abbia accesso completo alle diverse funzioni di creazione,
modifica e cancellazione dei dati.

Figura 1.16 – Il terzo e ultimo passo della creazione guidata di un database MySQL, con
il riepilogo dei dati già inseriti e l’assegnazione di tutti i privilegi all’utente, che in questa
fase viene assegnato al database per poterlo gestire in seguito.
nota
In realtà l’utente del database sarà poi WordPress stesso, poiché il CMS si servirà dei
dati d’accesso che avrete definito per creare le tabelle del database e gestirne il
contenuto, sia durante l’installazione sia in seguito, quando creerete e modificherete i
contenuti del sito o del blog.
I dati ottenuti dalla creazione dell’utente e del database potranno a questo punto essere
inseriti nella configurazione di WordPress, ma occorre prima di tutto caricare le cartelle e i
file di quest’ultimo nello spazio di hosting a vostra disposizione.
1.6 Installazione di WordPress su hosting
Scaricate prima di tutto la versione più recente di WordPress dal sito ufficiale Word-
Press.org, in questo caso più precisamente dalla pagina dell’edizione italiana
(wpaz.it/007): in questa pagina è sempre disponibile l’ultima versione ufficiale pubblicata
dagli sviluppatori, sotto forma di archivio compresso scaricabile cliccando sul pulsante di
download di colore azzurro, che riporta anche il numero della versione più recente.

Figura 1.17 – La pagina della versione italiana di WordPress, con il pulsante per il
download della versione più recente del CMS. Dalla versione 4 di WordPress la lingua del
CMS può essere selezionata in fase di installazione o dalle Impostazioni (si veda il
Capitolo 10, Figura 10.1).

nota
Il sito di WordPress.org mette a disposizione anche le versioni precedenti del CMS,
così come sono disponibili eventuali versioni beta, attraverso due link nella stessa
pagina, ma per gli obiettivi di questo volume è importante scaricare la versione
linkata al pulsante di download.
Una volta scaricato, l’archivio compresso con il noto formato zip andrà scompattato
usando i comandi presenti nel proprio sistema operativo (Windows, Mac OSX o Linux)
oppure usando un programma specifico fra i tanti scaricabili gratuitamente da Internet.

Figura 1.18 – Il contenuto della cartella di WordPress così come si presenta una volta
scaricata e decompressa, si notino le tre cartelle wp-admin, wp-includes e wp-content e i
singoli file necessari al funzionamento del CMS; sarà necessario caricare queste cartelle e
questi file direttamente nello spazio di hosting Web che ospiterà il sito, senza quindi
includere la cartella wordpress che li contiene.

nota
È fondamentale avere una certa conoscenza della struttura di file e cartelle di
WordPress, anche se si decidesse di non spingersi troppo oltre nell’utilizzo tecnico
del CMS, in quanto potrebbe tornare particolarmente utile nelle operazioni di
manutenzione e sicurezza. Cercate, quindi, di familiarizzare con il contenuto della
cartella WordPress ancor prima di caricarlo sul vostro spazio Web o locale.
Dopo la decompressione del file, vi ritroverete con una cartella chiamata wordpress che
contiene tutto quanto è necessario per installare il CMS (Figura 1.18) e che dovrete
caricare nello spazio Web del sito: quest’operazione può essere eseguita in modi diversi
con maggiore o minore facilità o velocità. Il metodo più popolare, ma anche meno veloce
e intuitivo, consiste nell’utilizzare un client FTP, cioè un programma che serve proprio a
trasferire cartelle e file dal computer a uno spazio Web e viceversa, ma anche a gestire
quanto già presente sullo stesso spazio: rinominando, cancellando, spostando o
modificando cartelle e file.
Uno dei programmi più noti di questo tipo è FileZilla (wpaz.it/989), un software
gratuito molto popolare fra chi utilizza Windows. Gli utenti di Mac possono scaricare
l’altrettanto noto programma Cyberduck (wpaz.it/983), che è infatti disponibile anche per
il loro sistema operativo oltre che per Windows.
Una volta scaricato il client FTP, avrete bisogno dei dati di accesso assegnati dal vostro
fornitore di hosting, ovvero dell’indirizzo, che in genere è lo stesso del sito, ma può avere
anche la forma ftp.nomesito.it, del nome utente e della password, per accedere al vostro
spazio Web e caricare il contenuto della cartella wordpress al suo interno.
Come abbiamo già visto, le cartelle e i file di WordPress devono essere caricati
direttamente nell’area principale dello spazio Web che si userà per il sito, la cosiddetta
“directory radice” (in inglese “root directory” o semplicemente “root”), che viene in
genere identificata, quando è visibile il percorso delle cartelle superiori dello spazio di
hosting, come public_hml, www, htdocs o semplicemente web. Questa operazione vi sarà
molto più chiara se proverete a utilizzare un’installazione locale di WordPress per
esercitarvi o lavorare, come vedremo nel prossimo paragrafo dedicato a questa modalità di
sviluppo offline.
Figura 1.19 – Il client FTP FileZilla in azione, si noti a sinistra l’elenco di file e cartelle
da caricare e, a destra, lo spazio vuoto dell’hosting in cui saranno copiate.

nota
Chi avesse già provato a copiare una cartella contenente migliaia di file su un
supporto lento come un pendrive USB capirà perché il trasferimento dell’insieme di
cartelle e file di WordPress (117 cartelle per oltre 1000 file in totale) da locale a
remoto impiega tanto tempo; un altro fattore di lentezza è dovuto alla modalità
asincrona tipica dell’ADSL, la cui connessione offre, in upload, una velocità che è
una frazione di quella di download.
Un metodo alternativo, più rapido e semplice, è offerto da alcuni strumenti evoluti a volte
disponibili nel pannello di gestione dello spazio Web: se avete scelto un hosting che
prevede il cPanel, per esempio, potrete usare lo strumento Gestione Documenti (File
Manager nella versione inglese di cPanel), che a differenza di Gestione File (Legacy File
Manager in inglese) permette di usare alcune funzionalità estremamente utili che
vedremo a breve.
Utilizzando questo strumento di gestione file più evoluto, infatti, potrete trasferire
l’insieme di cartelle e file sotto forma di archivio compresso, sempre ricordandovi di non
usare la cartella wordpress che li contiene, bensì un archivio di quanto contenuto al suo
interno (Figura 1.20).
Figura 1.20 –Dopo avere decompresso l’archivio zip originale scaricato da
WordPress.com, selezionate tutte le cartelle e i file presenti al suo interno e create un
nuovo archivio compresso.
In sostanza, occorre prima decomprimere l’archivio scaricato dal sito di WordPress. com,
quindi comprimere solo il contenuto della cartella wordpress (Figura 1.20) che risulterà
dalla decompressione del file originale: questo nuovo archivio compresso potrà quindi
essere caricato usando il comando Carica dell’interfaccia di gestione dei file oppure via
FTP, ottenendo anche una notevole riduzione dei tempi di caricamento, e infine
decompresso usando uno dei comandi disponibili nella stessa interfaccia.
Figura 1.21 – L’archivio compresso contenente cartelle e file di WordPress caricato per
mezzo dello strumento di Gestione Documenti di cPanel, prima della sua
decompressione.

nota
Nel caso vi ritrovaste, alla fine, con una cartella wordpress contenente sia le cartelle,
sia i file del CMS, anziché semplicemente questi ultimi, potrete semplicemente
accedere al suo contenuto e usare il comando Sposta File oppure Move per spostarli
dalla cartella che li contiene a quella superiore, la root dello spazio Web, cancellando
infine la cartella wordpress vuota che rimane dopo lo spostamento.
Qualunque sia il sistema che utilizzerete per caricare le cartelle e i file di WordPress sul
vostro spazio Web, una volta che l’operazione sarà conclusa potrete provare ad avviare
l’installazione automatica gestita dal CMS stesso, tenendo a portata di mano i dati relativi
al database MySQL che avrete creato in precedenza o usando quelli che il provider vi ha
comunicato, come abbiamo già visto.
Digitando, infatti, l’indirizzo del vostro sito, dovrebbe comparire un messaggio che
segnala l’assenza del file wp-config.php, a meno che non abbiate provveduto a crearlo
manualmente come spiegato alla fine di questo paragrafo. All’interno della finestra che
contiene il messaggio è presente infatti un pulsante Crea un file di configurazione, che
dovrebbe generare il file wp-config.php permettendovi di inserire al suo interno le
informazioni raccolte durante la creazione del database MySQL.
Figura 1.22 – La finestra di avviso che compare prima dell’installazione di WordPress nel
caso il file wp-config.php non sia stato creato manualmente.
La procedura automatica di creazione e configurazione del file potrebbe non funzionare in
alcuni casi, l’esito dipende dalla configurazione del server che ospita il sito, rendendo
quindi necessaria la procedura manuale che vedremo fra poco.
Per scoprire se il vostro hosting permette questo tipo di installazione, cliccate sul
pulsante Crea un file di configurazione e compilate i campi proposti nella nuova finestra
(Figura 1.23), che viene visualizzata usando le informazioni relative al database che
abbiamo già ampiamente illustrato nei due paragrafi precedenti, cliccando infine sul
pulsante Invia per comunicare tali informazioni a WordPress e attendere la successiva
richiesta di dati.
Figura 1.23 – La finestra che permette di inserire le informazioni relative al database
MySQL e avviare così l’installazione automatica di WordPress.
La finestra successiva (Figura 1.24) richiederà, infatti, l’inserimento degli altri dati
necessari alla configurazione di WordPress, gli stessi che abbiamo esaminato da vicino nel
quarto paragrafo di questo primo capitolo: titolo del sito, nome utente dell’amministratore
e password di accesso, da inserire due volte per verifica, e infine il suo indirizzo email.
Non resta a questo punto che cliccare sul pulsante Installa WordPress e verificare che
tutto funzioni.
Figura 1.24 – La seconda finestra da compilare per procedere all’installazione automatica
di WordPress; si noti in basso l’opzione per tenere nascosto il sito ai motori di ricerca,
utile in una prima fase di allestimento del sito e configurabile, come vedremo, anche
successivamente.
Se l’installazione va a buon fine, sarà visualizzata una nuova finestra (Figura 1.25) che ne
comunica il successo e che permette di accedere con le credenziali appena fornite al
pannello di amministrazione di WordPress.
Figura 1.25 – La finestra conclusiva che comunica, in caso di successo, la corretta
installazione di WordPress, con la visualizzazione del nome utente scelto per
l’amministratore, la password è nascosta per ovvi motivi di sicurezza, e il pulsante Login
per accedere al pannello di gestione del CMS.
Se, al contrario, la procedura sopra descritta non dovesse andare a buon fine, verificate
prima di tutto che i dati inseriti siano corretti e, in caso affermativo, procedete con la
configurazione manuale del file wp-config.php come spiegato qui di seguito.
Un’installazione andata a buon fine darà sempre origine a un file wp-config.php, che
viene aggiunto agli altri file già presenti e contenente i dati relativi al database MySQL
utilizzato da WordPress (Figura 1.26). Questo file altro non è che una copia del file wp-
config-sample. php già presente fra quelli originali del CMS, rinominata e completa di tali
informazioni.
Figura 1.26 – La cartella di WordPress dopo il completamento dell’installazione; si noti il
file wp-config.php, qui evidenziato per maggiore chiarezza, non presente in precedenza,
nel quale sono inseriti i dati relativi al database MySQL utilizzato dal CMS.
Nel caso, invece, si fosse verificato qualche errore e l’installazione non dovesse
completarsi, oppure semplicemente vogliate provare a configurare manualmente questo
file e inserire solo i dati richiesti dalla seconda finestra di installazione, potrete farlo
rinominando il file wp-config-sample.php (o una sua copia) in wp-config.php e inserendo
al suo interno i dati relativi al database.
La modifica del file può avvenire tanto offline, procedendo poi a caricarlo nello spazio
di hosting in modo che si aggiunga ai file di WordPress già presenti, come si vede
nell’immagine precedente, quanto direttamente online, se il file è stato già caricato: in
questo secondo caso potrete servirvi del comando Modifica o Modifica Codice
eventualmente presente nell’interfaccia dello strumento di gestione dei file o, in
alternativa, del comando Visualizza/modifica che compare cliccando col tasto destro del
mouse sul file nella finestra del client FTP relativa ai file dell’hosting (Figura 1.27).

Figura 1.27 – Il comando Visualizza/modifica presente in FileZilla, come in altri client


FTP, permette di mostrare il contenuto di un file di testo o di codice e di apportarvi delle
modifiche, quindi può essere utilizzato per modificare il file wp-config.php di WordPress
prima o dopo l’installazione.
Qualora decidiate di modificare il file usando il comando presente nel client FTP oppure
di farlo offline, è consigliabile utilizzare un programma di modifica del codice (“editor” di
codice) piuttosto del semplice programma di modifica dei testi presente sul vostro
computer (Blocco Note su Windows, TextEdit su Mac OSX). Questo genere di programmi
è facilmente reperibile, tuttavia mi permetto di consigliarvi Notepad++ (wpaz.it/991) se
usate Windows e Text Wrangler (wpaz.it/990) con Mac OSX.
Figura 1.28 – Il file wp-config.php aperto per la modifica nell’editor di codice
Notepad++; si noti la diversa colorazione delle parti di codice e la numerazione delle
righe, caratteristiche progettate per offrire una maggiore chiarezza e ridurre gli errori.
Il vantaggio nell’uso di un editor specializzato al posto del normale editor di testo è dato
dalla maggiore chiarezza nella visualizzazione del codice e dalla numerazione delle righe,
due strumenti che aiutano moltissimo a non commettere errori e tenere traccia delle
modifiche effettuate.

nota
Nel caso in cui al caricamento del sito fosse visualizzato il messaggio “Errore nello
stabilire una connessione al database” quasi sicuramente avete commesso un errore
nell’inserire i dati relativi al database MySQL: può trattarsi anche di una semplice
maiuscola al posto di una minuscola, basta un solo carattere digitato in modo errato
oppure mancante, per avere incollato in modo incompleto uno dei dati, per impedire a
WordPress di comunicare col database. Verificate, quindi, in questo caso se i dati
presenti nel file wp-config.php sono davvero esatti.
1.7 Installazione di WordPress “in locale”
Per chi volesse esercitarsi con WordPress e diventare sempre più esperto nell’uso di
questo CMS, esiste un’alternativa alle soluzioni online esaminate finora: si tratta
dell’utilizzo di un server locale, ovvero basato su un software che permette di installare e
utilizzare uno o più siti sul proprio computer, senza alcuna necessità di essere collegati a
Internet. L’utilizzo di un server locale non è, tuttavia, utile soltanto a chi deve imparare. Si
tratta di una soluzione adottata da molti webmaster professionisti che sviluppano siti
offline prima di pubblicarli su un server Web, oppure, come vedremo nel settimo capitolo
dedicato alla manutenzione e alla sicurezza, per portare i siti offline e testarne
aggiornamenti e manutenzione senza rischiare di compromettere la versione online.
Una delle soluzioni più popolari di server locale è XAMPP (wpaz.it/012), disponibile
per Windows, Mac OSX e persino Linux. Si tratta di un software intuitivo che, una volta
installato, ricrea sul computer un vero e proprio server basato su piattaforma Apache, la
stessa utilizzata dalla stragrande maggioranza dei server reali che formano la rete Internet,
e nello stesso tempo emula anche il server MySQL necessario per ospitare e gestire i
database basati su tale standard.

Figura 1.29 – Il sito in italiano di XAMPP, con i pulsanti che permettono di scaricare le
tre versioni del software rispettivamente per Windows, Mac OSX e Linux.

nota
Esistono versioni di XAMPP “pronte per l’uso”, cioè che non richiedono alcuna
installazione oppure con all’interno, già preinstallato, lo stesso WordPress o altri
CMS. Una di queste è Bitnami, di cui trovate il link sul sito di XAMPP stesso e
nell’interfaccia di installazione, mentre un’altra versione, prodotta in Italia, è Pocket
WordPress (wpaz.it/011).

Figura 1.30 – Una fase dell’installazione di XAMPP su Windows; si notino i diversi


component del software, di cui sono in realtà fondamentali per i nostri obiettivi solo i due
server Apache e MySQL, il linguaggio PHP ed eventualmente l’applicazione
phpMyAdmin sul cui utilizzo ci soffermeremo fra poco. Potete in ogni caso lasciare attive
tutte le opzioni, visto che i diversi servizi potranno poi essere attivati singolarmente.
Durante l’installazione e l’uso di XAMPP o di un software basato su di esso, potrebbe
essere necessario fornire delle autorizzazioni affinché il sistema di sicurezza del computer
(firewall, antivirus, ecc.) non ne blocchi determinate funzionalità: concedete pure tali
autorizzazioni senza alcun timore, poiché si tratta di una prassi normale che non ha niente
a che fare con eventuali minacce informatiche.
Una volta completata l’installazione di XAMPP è possibile avviare automaticamente
l’applicazione, lasciando attiva la voce corrispondente nell’ultima finestra visualizzata:
sarà così possibile vedere subito il suo pannello di gestione. Il pannello di XAMPP
presenta tutti i servizi disponibili, dei quali è necessario attivare, cliccando sul pulsante
Start presente alla loro destra, solo i primi due, vale a dire Apache e MySQL.

nota
L’avvio di Apache o di MySQL potrebbe essere ostacolato dal blocco di sicurezza del
sistema, che può essere superato avviando XAMPP con l’opzione “Esegui come
amministratore”, selezionabile cliccando col tasto destro sull’icona del programma
anziché lanciarlo direttamente. Un altro ostacolo per Apache potrebbe nascere da un
conflitto con la porta 80, in genere utilizzata da altri software, per esempio
l’applicazione di messaggistica Skype; in tal caso basta cambiare la porta agendo
sulle impostazioni dell’applicazione stessa.

Figura 1.31 – Il pannello di XAMPP con un avviso di sicurezza generato all’avvio del
servizio di MySQL, si noti il pulsante Consenti accesso che permetterà di sbloccare il
servizio e il colore verde dei riquadri Apache e MySQL, che ne conferma l’attivazione.
Per verificare il funzionamento di Apache, PHP e MySQL basta avviare il proprio browser
preferito (Firefox, Chrome, Safari, ecc.) e scrivere come indirizzo la parola localhost: se
l’avvio dei servizi di XAMPP è stato corretto, si vedrà una schermata con il logo e un
elenco di lingue fra cui l’italiano.
Figura 1.32 – Una pagina di Firefox con la schermata di avvio di XAMPP e i link ai
diversi linguaggi, si noti come nella barra degli indirizzi sia presente semplicemente la
parola localhost.
Cliccando su uno dei link, comparirà una pagina di benvenuto, sempre caricata dal server
locale, nella lingua corrispondente, con un elenco di informazioni e applicazioni
dimostrative. Per far funzionare WordPress, tuttavia, non avete bisogno di usare nessuna
di queste, ma solo di accedere direttamente alla cartella htdocs di XAMPP per caricarvi il
CMS e all’applicazione phpMyAdmin per creare il database, come vedremo fra poco:
finché non avrete installato qualcosa nella cartella htdocs di XAMPP, infatti, resterà attiva
la home page predefinita che abbiamo appena visto.
Figura 1.33 – La versione di XAMPP per Mac OSX apre automaticamente il browser
all’avvio, mentre successivamente è possibile avviarlo e collegarlo direttamente al server
locale cliccando sul pulsante Go To Application. Per controllare lo stato di attivazione di
Apache e MySQL occorre cliccare sulla scheda Manage Servers ed eventualmente
selezionarli e cliccare sul pulsante Start a destra per attivarli. Il pulsante Open
Application Folder, infine, apre la cartella di XAMPP che, come vedremo fra poco,
contiene la cartella del sito: htdocs.
Procedete quindi con il creare il database locale che utilizzerete per far installare e
funzionare WordPress sul vostro computer senza necessità di una connessione a Internet.
Per avviare l’interfaccia di phpMyAdmin e creare questo database, dovrete digitare nella
barra degli indirizzi del browser l’indirizzo locale seguito dal nome dell’applicazione:
localhost/phpmyadmin.
La creazione di un database attraverso l’interfaccia di phpMyAdmin è abbastanza
semplice. Si comincia con il creare un nuovo utente cliccando prima sul menu Utenti e in
seguito, nella parte bassa della schermata che compare, sulla voce Aggiungi utente.
Figura 1.34 – L’interfaccia di phpMyAdmin, visualizzabile collegandosi attraverso il
server locale all’indirizzo localhost/phpMyAdmin, si notino a sinistra alcuni database
predefiniti ai quali si aggiungerà quello creato da noi per WordPress.
A questo punto sarà visualizzata una finestra in cui è necessario inserire i tre valori
fondamentali: il nome dell’utente, il nome o indirizzo dell’host, dove sarà ospitato il
database, e la password, ripetendo quest’ultima per conferma e per evitare errori nella
digitazione.
Figura 1.35 – La finestra per l’inserimento dei dati relativi all’utente, al database, all’host
e alla password, vale a dire i quattro dati richiesti per l’installazione di WordPress; si noti
la password sicura generata utilizzando il comando Genera password.

nota
Per l’indirizzo dell’host nel caso di un’installazione in locale si utilizza localhost, che
può essere digitato oppure inserito in automatico selezionando la voce “Locale” dal
menu relativo; la password, invece, può essere creata utilizzando il pulsante “Genera”
di fianco alla voce “Genera password”, ottenendo in questo modo una chiave
d’accesso sicura come abbiamo visto per la creazione dei database dal pannello di
hosting nel paragrafo precedente.
Una volta inserito il nome scelto per l’utente, l’indirizzo dell’host e la password, basta
selezionare la voce Crea un database con lo stesso nome e concedi tutti i privilegi nel
riquadro sottostante (Database per l’utente) e cliccare sul pulsante di conferma
visualizzato alla fine della pagina (Esegui oppure Aggiungi Utente) per ottenere il
database pronto per ospitare i dati di WordPress, che avrà quindi un nome identico a
quello dell’utente appena creato.
A questo punto avrete a disposizione tutte le informazioni necessarie per l’installazione
di WordPress e potrete inserirle nella schermata di configurazione che, come abbiamo già
visto nel paragrafo precedente, compare all’inizio dell’installazione guidata. Potete quindi
chiudere l’interfaccia del phpMyAdmin e procedere con la fase successiva, che consiste
nel copiare all’interno della cartella htdocs le cartelle e i file di WordPress che avrete
estratto dall’archivio compresso scaricato dal sito WordPress.org come mostrato nel
capitolo precedente.

Figura 1.36 – Per aprire la cartella di XAMMP e individuare così la sotto-cartella htdocs,
in cui collocare i file del sito, si può utilizzare il pulsante Explorer presente sul pannello
del programma.
Fra le cartelle presenti nella cartella di XAMPP ce n’è una identificata dal nome htdocs,
che rappresenta lo spazio Web in cui collocare gli elementi del sito. Per individuare questa
cartella, senza cercarla nel disco del vostro computer, potete cliccare semplicemente sul
pulsante Explorer del pannello di XAMPP (Figura 1.36).
All’interno della cartella htdocs troverete, naturalmente, le cartelle e i file che
costituiscono il “sito locale” visualizzato in precedenza nel browser usando l’indirizzo
htdocs: potete semplicemente cancellare o raccogliere tutto questo materiale all’interno di
una nuova cartella, chiamandola per esempio “cartella-originale” o qualcosa di simile,,
l’importante è che facciate pulizia per copiare all’interno di htdocs le cartelle e i file di
WordPress.
Una volta conclusa la copia di cartelle e file di WordPress in htdocs non vi resta che
digitare nuovamente localhost nella barra degli indirizzi del browser per veder comparire
la prima delle finestre che accompagnano l’installazione del CMS, come già visto nel
paragrafo precedente, per poi seguire gli stessi passi e completarla. Potrete quindi
accedere al CMS usando l’indirizzo localhost/wp-login.php, mentre il sito potrà
ovviamente essere visualizzato usando il solito indirizzo localhost.
nota
Quando avrete terminato di lavorare con WordPress e con XAMPP, ricordatevi di
accedere nuovamente al pannello di quest’ultimo e disabilitare i servizi
precedentemente attivati cliccando sui due pulsanti alla loro destra, che quando sono
attivi sono identificati da “Stop”. Per chiudere XAMPP dovrete invece cliccare sul
pulsante “Quit”, poiché cliccando semplicemente sul pulsante di chiusura della
finestra che contiene il pannello, l’applicazione resterebbe attiva, anche se nascosta.
1.8 L’area amministrativa (backend)
Collegandosi all’indirizzo del sito oppure a localhost se state usando un server locale
come XAMPP, e aggiungendo /wp-login.php o /wp-admin dopo l’URL ci si ritrova di
fronte alla schermata di accesso (login) dove occorre inserire il nome utente e la password
scelti come amministratori (admin) del CMS.
Appena si accede all’area di amministrazione di WordPress, detta in gergo “backend”, in
contrapposizione al “frontend” che a sua volta è il sito così come si presenta ai visitatori,
ci si ritrova di fronte alla Bacheca (Dashboard in inglese), l’area introduttiva
dell’interfaccia da cui potrete d’ora in poi impostare ogni aspetto del CMS e inserire i
vostri contenuti per creare il sito o il blog che avete progettato.

Figura 1.37 – Il modulo (form) di accesso a WordPress, dove andrà inserito il nome
utente scelto in fase di installazione e la relativa password, che viene mascherata per
motivi di sicurezza durante la digitazione.
Al primo accesso quasi sicuramente sarà visualizzato in Bacheca un messaggio di
benvenuto corredato da alcuni link diretti a diverse funzioni principali del CMS. Questi
elementi sono contenuti in un riquadro che potrete eliminare, qualora non vi interessino
più tali informazioni, cliccando sul pulsante/link Rimuovi in alto a destra; si potrà
visualizzarlo di nuovo usando il pulsante Impostazioni schermata, sempre in alto a
destra, e selezionando Benvenuti.
Figura 1.38 – La Bacheca di WordPress con il riquadro contenente il messaggio di
benvenuto iniziale e i link ad alcune delle funzioni principali; si noti a sinistra il menu con
i vari strumenti di gestione del CMS, in alto a destra il nome dell’utente attualmente
collegato che permette di accedere al profilo e il pulsante Impostazioni schermata, che
consente di configurare gli elementi presenti nella pagina di amministrazione corrente.

nota
Per chi non avesse familiarità con i CMS, trovarsi di fronte ai comandi presenti
all’interno del pannello di amministrazione potrebbe essere, al primo impatto,
un’esperienza che intimorisce e disorienta. In realtà una volta esplorate le diverse
funzioni ci si accorge che il loro utilizzo è intuitivo e alla portata di tutti.
Cominciamo quindi a familiarizzare con il backend di WordPress e i suoi diversi elementi
e aree amministrative (Figura 1.38), dividendo subito lo schermo in tre zone principali:
1. riga superiore
quest’area può essere visualizzata anche nell’anteprima del sito e permette di
accedere rapidamente alle funzioni principali; quando viene utilizzata nel
backend presenta, sulla parte destra, due pulsanti immediatamente al di sotto,
Impostazioni schermata e Aiuto, che rispettivamente permettono di
configurare l’area di lavoro e accedere a una guida esterna in inglese.
2. colonna di sinistra
contiene tutte le aree di gestione del CMS, raggruppate a seconda della categoria
di utilizzo; ogni voce della colonna è un menu che quasi sempre apre una serie
di sotto-menu corrispondenti; questa colonna può essere contratta usando
l’ultima voce, Riduci menu, e trasformando quindi tutte le voci di menu in
icone; cliccando su quella corrispondente a quest’ultima si può espandere
nuovamente la colonna.
3. schermata principale (area di lavoro centrale)
cambia a seconda dell’opzione scelta e in molti casi può essere personalizzata
comprimendo o espandendo i vari pannelli presenti (Figura 1.39), oppure
escludendone alcuni o aggiungendone altri per mezzo del pulsante Impostazioni
schermata illustrato al punto 1.
Le opzioni presenti nella barra laterale dell’area di amministrazione di WordPress,
escludendo la voce Bacheca, possono essere raggruppate in due categorie principali,
corrispondenti rispettivamente alla gestione dei contenuti: Articoli, Media, Pagine e
Commenti; e alla configurazione del sito e del CMS: Aspetto, Plugin, Utenti, Strumenti
e Impostazioni. Ogni voce, come abbiamo visto, è collegata a sua volta a un menu
secondario la cui prima opzione viene visualizzata anche cliccando sulla voce principale
oltre che sul menu stesso.

Figura 1.39 – I diversi pannelli della schermata principale nella Bacheca di WordPress e,
in alto, quello a scomparsa da cui è possibile impostarne la visibilità; si noti il cursore a
forma di croce sul bordo di uno dei pannelli che sta a indicare la possibilità di spostarlo in
una diversa posizione.
Ognuna delle voci presenti nel pannello di amministrazione sarà spiegata in modo
approfondito e da un punto di vista pratico nella sezione del libro che si occupa degli
argomenti corrispondenti, tuttavia può essere utile in questa prima fase introduttiva avere
una panoramica iniziale della funzione di ogni singola voce, quindi procediamo a
elencarle e illustrarle singolarmente:
1. Bacheca
come il nome suggerisce, è formata da un’area informativa (Home) il cui
contenuto cambia e si aggiorna in parte, a seconda dello sviluppo del sito o del
blog, e da un’area Aggiornamenti che appunto segnala e visualizza la
disponibilità di aggiornamenti per il CMS stesso o per i suoi componenti (temi e
plugin).
2. Articoli
quest’area permette di creare (Aggiungi nuovo) e gestire (Tutti gli articoli) i
contenuti dinamici di WordPress, detti appunto articoli (“post” in inglese). I due
menu Categorie e Tag (etichette) gestiscono, invece, le cosiddette tassonomie,
che sono utilizzate per classificare i contenuti di WordPress in maniera ordinata
e razionale.
3. Media
questa è l’area da cui è possibile caricare (Aggiungi nuovo) e gestire (Libreria)
tutti i file multimediali inseriti nel sito, principalmente rappresentati dalle
immagini, ma a seconda dei casi anche da audio, video, documenti digitali (PDF,
Word, ecc.), file compressi e così via.
4. Pagine
le pagine rappresentano, in WordPress, i contenuti statici e principali del sito, e
da quest’area è possibile crearle (Aggiungi nuova) e gestirle (Tutte le pagine).
5. Commenti
legati soprattutto ai blog, i commenti sono i messaggi che i visitatori del sito
possono lasciare a margine di un articolo, qualora tale funzione sia abilitata: da
quest’area è possibile in tal caso gestirli decidendo se saranno approvati,
cestinati o classificati come “spam”.
6. Aspetto
l’area principale in cui viene gestita la struttura (layout) del sito, a partire dalla
sua veste grafica globale (Temi) con possibilità, oltre che di sceglierla, anche di
modificarla in parte (Personalizza) o, per gli utenti più esperti, nel codice stesso
(Editor), agendo anche sull’intestazione (Testata) e sul background (Sfondo)
per quei temi che lo consentono. In quest’area è anche possibile gestire gli
elementi modulari (Widget) che vengono in genere posizionati sulle barre
laterali (sidebar) e nell’area inferiore (footer) del sito e, naturalmente, gli
elementi di navigazione (Menu). Ogni tema attivo, infine, aggiunge in genere al
menu Aspetto una voce specifica che permette di accedere alle sue impostazioni
in aggiunta alle voci già elencate.
7. Plugin
quest’area è dedicata alle estensioni che permettono di aggiungere funzionalità
ed elementi extra al sito, detti “plugin” (dall’inglese plug in, che rappresenta
l’azione di inserire una spina o uno spinotto nella corrispondente presa). Da
quest’area è possibile installarli (Aggiungi nuovo), gestirli (Plugin installati)
attivandoli e disattivandoli e persino modificarne il codice (Editor), sebbene
quest’ultima opzione sia riservata, ancora una volta, solo agli utenti più esperti.
8. Utenti
oltre all’utente principale, che avete definito durante l’installazione di
WordPress e di cui è possibile modificare tutte le informazioni (Il tuo profilo) a
eccezione del nome utente stesso, è possibile da questo pannello aggiungerne
altri (Nuovo utente) con ruoli simili o diversi e gestirli singolarmente o insieme
(Tutti gli utenti).
9. Strumenti
una delle aree meno utilizzate, contiene inizialmente alcuni strumenti per salvare
(Esporta) e caricare (Importa) contenuti nel formato riconosciuto da
WordPress, funzione utile per esempio nella migrazione da e verso una
piattaforma di blogging esterna nel caso appunto dei blog oppure da un sito
Wordpress all’altro; è possibile aggiungere ulteriori strumenti a quelli
disponibili grazie ad appositi plugin (si veda il punto 7).
10. Impostazioni
l’area più ampia e articolata di tutto il backend formata da: una sezione dedicata alle
impostazioni globali del CMS (Generali), due aree corrispondenti alle modalità di
accesso ai contenuti (Lettura) e loro pubblicazione (Scrittura), la gestione dei
commenti (Discussione) e delle immagini e altri elementi multimediali (Media) e
infine l’impostazione del formato dei link ai contenuti del sito (Permalink).
Nei capitoli che seguono, ognuna delle funzioni appena descritte sarà ampiamente
illustrata in relazione a quanto realizzato di volta in volta, in modo da collocare nel
contesto più adatto l’approfondimento della singola area di WordPress.
2
Contenuti e navigazione
Come abbiamo già sottolineato più volte nel primo capitolo, WordPress è un CMS, in altre
parole una piattaforma per la gestione di contenuti (Content Management System). Ciò
implica la sua predisposizione a permetterci di creare, gestire e organizzare una serie di
contenuti complessi, qualcosa che vada al di là della semplice struttura statica di un sito
con le sue pagine fisse fatte di testo e immagini dove al massimo viene aggiornato un
listino, ma che si possa spingere anche oltre il tradizionale blog dove periodicamente
vengono pubblicati nuovi articoli con notizie, recensioni, opinioni e commenti del
pubblico.
Realizzare un sito significa prima di tutto definire quali saranno questi contenuti e come
saranno organizzati, operazione che riguarda in particolare le pagine statiche del sito, cioè
quelle che in generale non subiranno variazioni di rilievo nel tempo. Anche i contenuti
dinamici vanno definiti prima della fase di sviluppo, quantomeno per ciò che riguarda le
tassonomie, cioè il tipo di classificazione ed etichettatura in cui verranno poi organizzati: è
il caso degli articoli pubblicati in un blog, ma anche delle news di un sito aziendale.
Nel creare le pagine e gli articoli si definisce, automaticamente, la navigazione del sito
o del blog, poiché saranno creati a ogni pubblicazione dei link di riferimento in grado di
puntare in modo univoco ai singoli contenuti oppure alle tassonomie che li identificano.
Tutto ciò sarà senz’altro più chiaro con gli esempi pratici che stiamo per vedere.
La navigazione, infine, potrà essere personalizzata utilizzando i menu e i widget, e in
questo capitolo ci occuperemo anche di quell’aspetto.
2.1 Pagine e strumenti di composizione
Subito dopo l’installazione di WordPress, troverete al suo interno alcuni contenuti di
esempio, fra cui una pagina che porta il titolo “Pagina di esempio”. La prima operazione
da fare è quella di eliminarla, quindi cliccherete su Pagine oppure passerete il puntatore
del mouse su questa voce selezionando Tutte le pagine, in modo da visualizzare l’elenco
delle pagine presenti.
Figura 2.1 – La pagina di esempio creata automaticamente in WordPress durante
l’installazione del CMS, si notino in alto le due voci Tutto e Pubblicato e in basso, sotto
al titolo della pagina, il menu di scelta rapida con le opzioni più comuni.
Spostando il mouse sul titolo della pagina o al di sotto di esso (Figura 2.1), vedrete
comparire, in basso, un menu di scelta rapida con alcune delle possibilità più usate fra cui
Cestina: cliccando su quest’opzione, la pagina sarà spostata nel cestino di WordPress, che
analogamente a quello del computer conserva il contenuto eliminato finché questo non
viene cancellato definitivamente.
Dopo quest’operazione vedrete comparire un messaggio che conferma lo spostamento
della pagina nel cestino e la possibilità di annullare l’azione e, contestualmente, sarà
visualizzata una nuova voce Cestino associata al valore 1, mentre la precedente voce Tutti
riporterà ora il valore zero e la voce Pubblicato sparirà, non essendoci più alcuna pagina
disponibile. Queste tre voci, quindi, saranno aggiornate man mano che procederete a
creare o cancellare le pagine successive.

nota
La voce Tutti comprende sia le pagine pubblicate sia quelle che, come vedremo fra
poco, vengono create, ma lasciate in bozza. WordPress permette, infatti, di creare
contenuti per i quali si deciderà, o pianificherà, nel caso degli articoli,
successivamente la pubblicazione, ma anche di rimettere temporaneamente in bozza
contenuti già pubblicati nascondendoli provvisoriamente al pubblico.
Una volta eliminata la pagina di esempio predefinita, potrete crearne una nuova tutta
vostra. Creare una pagina in WordPress è semplicissimo: basta selezionare il menu Pagine
dalla barra a sinistra nel pannello di gestione e scegliere Aggiungi nuova.
Si aprirà immediatamente una nuova finestra dal titolo Aggiungi nuova pagina (Figura
2.2) in cui sarà presente in alto un campo per il titolo della pagina e un’area, più grande, in
basso dove potrete inserire il contenuto della pagina stessa.
Figura 2.2 – Le due aree da compilare nella creazione di una pagina: in alto quella del
titolo chiaramente identificata da un messaggio che scompare quando si clicca al suo
interno, in basso quella più ampia che ospiterà il contenuto della pagina; si noti a sinistra il
menu che ha permesso l’operazione.
Digitando il titolo della nuova pagina e cliccando poi nell’area più grande in basso,
vedrete comparire, sotto il campo superiore, una riga di testo identificata dalla scritta
Permalink: si tratta dell’indirizzo (URL) della pagina così come viene definito da
WordPress sotto forma di comando (?page_id=n dove n è il numero che identifica la
pagina, incrementato automaticamente dal CMS a ogni nuova pagina creata).
Vedremo in seguito (nel sesto paragrafo di questo capitolo) come fare in modo che
questo indirizzo sia rappresentato in una forma più intuitiva e facilmente memorizzabile,
per il momento limitatevi a riconoscerne la presenza e il formato e proseguite con la
creazione della vostra pagina.
Figura 2.3 – L’indirizzo, Permalink, della pagina appena creata così come sarà
visualizzato nella barra degli indirizzi del browser, in questo caso si tratta del formato
predefinito di WordPress, che conviene personalizzare per motivi di chiarezza e di
posizionamento sui motori di ricerca.
Osserviamo la riga superiore dell’area grande sotto il titolo e la fila di icone in essa
presenti (Figura 2.3): si tratta degli strumenti che WordPress mette a disposizione per dare
forma e stile al testo della pagina, e potrete visualizzarne altri cliccando sull’ultima icona a
destra nella fila, che permette di visualizzare o nascondere la seconda fila di
icone/strumenti di modifica del contenuto.
Molti di questi strumenti (Figura 2.4) saranno familiari a chi conosce e utilizza già un
programma di videoscrittura e, come accade in questo genere di programmi, agiscono
soltanto sul testo o sul paragrafo selezionato, quindi è importante evidenziare prima la
parte di contenuto cui si vuole applicare un determinato strumento, così come si fa in un
qualsiasi programma di elaborazione testi.

nota
Nel digitare il testo all’interno dell’area principale di una pagina (o di un articolo, si
seguiranno le stesse norme di digitazione utilizzate in un normale programma di
videoscrittura (per es. Word), quindi si andrà a capo solo per creare un nuovo
paragrafo e separarlo così da quello precedente. È ovviamente possibile anche
copiare e incollare del testo, ma come vedremo più avanti è sempre consigliato farlo
in modo da non inserire formattazioni provenienti da fonti esterne come pagine Web
o documenti di videoscrittura.
Digitate il vostro contenuto nell’area vuota prima di esplorare le funzionalità degli
strumenti, che saranno spiegate nella pratica nel corso di questo capitolo, ma che come
sempre illustreremo brevemente in questa fase iniziale per maggior chiarezza, partendo
dalla prima icona a sinistra e proseguendo con le seguenti, e descrivendole a gruppi o
singolarmente a seconda dell’affinità funzionale.

Figura 2.4 – Le due file di icone che attivano gli strumenti di composizione e modifica
del contenuto in WordPress, si noti al di sopra il pulsante per l’inserimento di immagini e
altri elementi, funzione che esamineremo in dettaglio più avanti in questo capitolo.
Cominciamo dalla riga superiore:
• grassetto, corsivo e barrato
le prime tre icone, identificate con una B, una I e le lettere ABC tagliate da una riga
orizzontale, rappresentano rispettivamente i tre stili grassetto, corsivo o italico e
barrato.
• elenco puntato e numerato
queste due icone permettono di formattare una serie di righe, separate da un a capo,
in modo che siano visualizzate sotto forma di elenco usando dei punti oppure una
numerazione progressiva, rispettivamente; si tratta dello strumento ideale per
impaginare una lista di elementi.
• citazione
l’icona a forma di doppi apici applica a un blocco di testo o a un intero paragrafo un
formato simile a quello delle citazioni o degli estratti di testo in un libro; lo stile sarà
dettato dal particolare tema grafico che state utilizzando (ne parleremo nel prossimo
capitolo).
• riga orizzontale
anche se ha le sembianze di un segno meno, a causa delle dimensioni dell’icona,
questo strumento inserisce in realtà una riga orizzontale che si estende su tutta la
larghezza dell’area di testo della pagina; non è necessario andare a capo prima di
inserire la riga in quanto il testo viene spezzato automaticamente a seguito del suo
inserimento.
• allineamento a sinistra, centrato e a destra
questo gruppo di tre icone permette di allineare a sinistra o a destra un paragrafo di
testo, oppure di centrarlo; non è necessario selezionare il paragrafo ma è sufficiente
che il cursore sia collocato in un punto qualsiasi al suo interno oppure all’inizio o alla
fine del paragrafo stesso.
• inserimento e rimozione di link
usando il primo di questi due strumenti dall’icona a forma di catena è possibile
associare a un testo un link a una risorsa interna o esterna al sito (per es. un’altra
pagina/articolo oppure un altro sito), mentre con il secondo si può eliminare tale
collegamento.
• inserimento di una interruzione del contenuto
il penultimo pulsante della riga superiore inserisce nel testo il noto “Continua a
leggere” con cui si usa spezzare un contenuto per far sì che sia visibile solo
un’anteprima composta dalla parte iniziale del testo; anche questa interruzione viene
gestita in modo diverso a seconda del tema grafico scelto per il sito.
• apparizione o sparizione della barra di strumenti secondaria
usando quest’ultima icona della riga superiore è possibile far comparire o scomparire
la riga di icone aggiuntiva al di sotto (che sarà illustrata nel prossimo elenco qui di
seguito).
Passiamo ora a descrivere la riga inferiore di strumenti:
• stile del testo
da questo menu, che compare all’inizio della seconda riga di strumenti, è possibile
scegliere uno stile da applicare al testo selezionato, per esempio la serie di stili H1,
H2, H3 e così via per i titoli, oppure lo stile Paragrafo (predefinito) o ancora quello
con caratteri a spaziatura fissa; si tratta di stili molto noti a chi utilizza l’HTML in
quanto utilizzati per dare maggiore o minore enfasi al testo visualizzato nel browser,
ma non solo.
• sottolineato
questo strumento, rappresentato come una “U” maiuscola sottolineata, va a
completare gli stili collegati ai primi pulsanti della riga superiore, permettendo di
applicare la sottolineatura al testo selezionato.
• giustificazione paragrafo
anche in questo caso si tratta di uno strumento che va a completare un gruppo
presente nella riga superiore e più precisamente quello che permette di allineare il
testo e centrarlo, aggiungendo così la possibilità di giustificare il testo rendendolo
uniforme anche sul lato destro.
• colore del testo
attraverso questo strumento, che ha la forma di una “A” maiuscola sottolineata, è
possibile applicare al testo un colore fra quelli disponibili nella tavolozza che
compare cliccando sull’icona.
• incolla come testo
quando questo strumento è attivo, cioè è visibile una cornice intorno alla sua icona a
forma di portablocco con all’interno una “T” maiuscola, tutto quanto viene incollato
nell’area di scrittura viene ripulito da eventuali codici di stile o di altro tipo, lasciando
quindi soltanto il testo puro. Quando lo strumento non è attivo, al contrario, il testo
incollato conserva eventuali stili presenti nella fonte da cui è stato copiato. Potete
fare alcune prove usando del testo di Word cui è stato applicato uno stile qualsiasi,
come il grassetto, oppure anche paragrafi formattati, come elenchi numerati, e così
via.
• cancella formattazione
questo strumento dall’icona a forma di gomma per cancellare elimina lo stile
applicato a un testo (colore, grassetto, ecc.) selezionato.
• caratteri speciali
cliccando su questa icona, visualizzerete la tabella completa di tutti i caratteri speciali
(simboli, lettere accentate extra, ecc.) che è possibile inserire nell’area dei contenuti;
cliccando sulla casella del carattere desiderato inserirete quest’ultimo nel punto in cui
è posizionato il cursore all’interno dell’area di scrittura.
• riduzione o aumento del rientro paragrafo
questa coppia di icone applica un rientro minore o maggiore al paragrafo selezionato.
• annulla e ripeti
i due strumenti con cui, nella maggior parte dei programmi, potete annullare
l’operazione appena eseguita oppure, al contrario, ripristinarla.
• scorciatoie da tastiera
cliccando su quest’ultima icona a forma di punto interrogativo cerchiato,
visualizzerete le combinazioni di tasti con cui è possibile applicare gli stessi effetti
ottenuti cliccando sulla maggior parte delle icone, ma anche altre funzioni utili nella
fase di composizione e modifica (editing) del contenuto.
Il metodo migliore per familiarizzare con tutti gli strumenti appena elencati è, ovviamente,
quello di esercitarsi a utilizzarli durante la composizione di una pagina anche fittizia, da
cancellare in seguito per evitare di introdurre elementi di formattazione del testo superflui
in una pagina principale del sito.

Figura 2.5 –La parte destra superiore dell’area di composizione e modifica del testo e, a
fianco, il pannello relativo alle impostazioni di pubblicazione.
A tale proposito, è opportuno descrivere, a questo punto, anche le impostazioni presenti a
destra dell’area di composizione (Figura 2.5), a partire dalle due schede Visuale e Testo,
che permettono rispettivamente di mostrare il contenuto sotto forma di anteprima oppure
di codice: quest’ultimo tipo di visualizzazione risulta utile a chi ha familiarità con il
codice HTML in quanto mostra i marcatori tipici del linguaggio per definire lo stile del
testo che sarà mostrato nel browser, permettendo di agire a livello di codice per correggere
eventuali errori.

Figura 2.6 – La modalità a schermo intero per scrivere senza distrazioni, con in alto la
barra visualizzabile solo se il puntatore del mouse è collocato nell’area superiore dello
schermo.
L’icona del quadratino con quattro frecce agli angoli, simile a una “X”, presente sotto le
due etichette appena descritte, invece, attiva la visualizzazione a pieno schermo per la
scrittura (Figura 2.5), detta appunto “modalità a schermo intero” oppure “scrittura senza
distrazioni”. In questa modalità (Figura 2.6) viene infatti visualizzata soltanto l’area di
composizione e modifica del testo, con in aggiunta una barra superiore contenente alcuni
degli strumenti più importanti, che rimane visibile solo finché il puntatore del mouse è
posizionato nella parte alta dello schermo, scomparendo quindi non appena si clicca
nell’area del contenuto.
2.2 Impostazioni di pubblicazione
A destra dell’area di composizione e modifica del testo trovate una serie di pannelli, di cui
il primo è stato già menzionato (Figura 2.5) e ci accingiamo ora a esplorarne le diverse
opzioni.

nota
Tutti i pannelli presenti sulla destra dell’area di editing possono essere contratti
usando l’icona a forma di triangolo presente nell’angolo in alto a destra ed espansi di
nuovo cliccando sulla stessa icona che, nel frattempo, avrà preso la forma di un
triangolo capovolto. È possibile, inoltre, riposizionare ogni pannello cliccando sul
suo bordo superiore e trascinandolo mantenendo premuto il pulsante del mouse; in
questa modalità il puntatore prende la classica forma a croce.
Il primo dei pannelli visualizzati a destra dell’area di editing (Pubblica) contiene le
impostazioni di pubblicazione, in altre parole permette di stabilire, per esempio, se il
contenuto che state creando o modificando sarà visibile a tutti oppure programmarne la
pubblicazione. Nella parte alta di questo pannello trovate il pulsante Anteprima
modifiche, che potrete usare per aprire l’anteprima del contenuto in una nuova
scheda/finestra del browser e verificare il risultato prima ancora di salvare col pulsante
Pubblica, che diventa Aggiornamento se state modificando il contenuto di una pagina già
creata in precedenza.
La prima voce delle tre presenti nel riquadro, Stato, definisce appunto lo stato di
pubblicazione del contenuto, in questo caso la pagina, che potete cambiare cliccando sul
link Modifica e scegliendo fra le tre opzioni Bozza, In attesa di revisione e Pubblicato.
Nei primi due casi il contenuto sarà visibile solo a chi ha mansioni di amministrazione, ma
nascosto al pubblico, non appena si clicca sul pulsante Pubblica sarà reso visibile a tutti.
Lo stato di Bozza è attivato in automatico, dal momento in cui si comincia a creare il
contenuto, e resta attivo finché non si decide di pubblicarlo cliccando sull’apposito
pulsante oppure di mantenere il contenuto in bozza cliccando invece su Salva bozza.
La seconda opzione è riferita in modo specifico alla Visibilità del contenuto, che nello
stato normale è Pubblico, mentre usando il menu visualizzato cliccando sul link Modifica
può essere opzionalmente reso accessibile solo per mezzo di una password, Protetto da
password, oppure addirittura visibile solo al suo autore, Privato. Scegliendo quest’ultima
forma di pubblicazione, nella sezione Stato, Pubblicato sarà sostituito da Pubblicato
privatamente.

nota
Un contenuto protetto potrà essere associato a un’unica password, quindi sarà visibile
a chiunque la conosca. Qualora si desideri assegnare password diverse a più utenti
per lo stesso contenuto è necessario ricorrere all’uso di specifici plugin che
gestiscono l’accesso ai contenuti riservati da parte di utenti registrati.
Figura 2.7 – La schermata dove appaiono le revisioni e dove è possibile confrontare due
versioni dello stesso contenuto ed eventualmente ripristinarne una precedente in caso di
necessità; si notino i pulsanti a destra e sinistra e la barra a scorrimento al centro che
permettono di spostarsi lungo la cronologia delle revisioni.
Sotto l’opzione relativa alla visibilità trovate quella che permette di consultare le
Revisioni: WordPress conserva, infatti, versioni progressive del contenuto, che vengono
memorizzate durante la sua modifica e indicate da un numero a destra che si incrementa a
ogni aggiornamento, permettendo così di risalire a versioni precedenti nel caso sia
necessario confrontarle con quella attuale ed eventualmente ripristinarle (Figura 2.7).
Cliccando sul link Scorri si apre una nuova schermata in cui vengono affiancate due
versioni del contenuto ed è possibile scorrere a ritroso o in avanti usando i due pulsanti
Precedente e Successivo oppure, più velocemente, usando la barra di scorrimento al
centro. Cliccando sul pulsante Ripristina questa revisione quando attivo, è possibile
sostituire la versione attuale del contenuto con quella visualizzata nella parte destra della
nuova schermata.
La quarta e ultima opzione di questo primo pannello riguarda invece la data e ora di
pubblicazione, che inizialmente è nell’immediato (subito), ma può essere anche definita
manualmente retrodatando o posticipando la pubblicazion; in questo secondo caso il
contenuto apparirà sul sito esattamente nell’ora e nel giorno stabiliti.
La parte bassa del pannello, infine, contiene il link Spostare nel cestino, che permette di
eliminare il contenuto che si sta creando o modificando e, a fianco, il pulsante di
pubblicazione vero e proprio, Pubblica, che dopo il primo salvataggio cambia etichetta e
diventa Aggiornamento.
2.3 Attributi pagina
Il secondo pannello che troviamo a destra dell’area di editing della pagina è Attributi
pagina (Figura 2.8) e ci permette di definire due importanti attributi riguardanti la pagina
stessa.

Figura 2.8 – Il pannello Attributi pagina con il menu per la scelta del Modello
(template) e la casella contenente il valore di Ordinamento da associare alla pagina che
state creando o modificando.
Il primo di questi attributi è il Modello (in inglese “template”), vale a dire il tipo di
struttura che vogliamo assegnare alla pagina, che si sceglie per mezzo di un menu in cui
sono presenti diverse opzioni a seconda del tema grafico adottato per il sito.
Le voci di questo menu in genere sono almeno due: Template standard e Pagina a
larghezza piena (in inglese “Full width page”). Il primo modello è esattamente l’opposto
del secondo, poiché si riferisce in genere alla struttura di WordPress, dove la pagina è
affiancata da una barra laterale (sidebar), che occupa circa un terzo della larghezza totale
della pagina. L’opzione Pagina a larghezza piena, quindi, elimina questa barra laterale e
assegna alla pagina tutta la larghezza disponibile. Esamineremo più in dettaglio questi
argomenti nel prossimo capitolo, per il momento potete esercitarvi ad assegnare l’uno o
l’altro modello verificando il risultato nel frontend dopo aver confermato la scelta,
cliccando come sempre sul pulsante Aggiornamento del pannello Pubblica.

nota
Una buona abitudine, quando si lavora alla creazione o modifica di una pagina o di
un articolo, è quella di usare Anteprima modifiche che, come abbiamo già visto,
permette di verificare i risultati dell’editing in corso prima di confermarli. Oltre a ciò,
è sempre utile tenere aperta una seconda scheda del browser in cui caricare la pagina
del sito che si sta modificando, in modo da poterla ricaricare senza abbandonare la
scheda in cui stiamo utilizzando il pannello di editing del contenuto. In questo modo
eviteremo eventuali perdite di dati dovute a un mancato caricamento o altri problemi.
Il secondo attributo che si può impostare in questo pannello riguarda il valore di
Ordinamento della pagina: è, infatti, possibile assegnare alle pagine un ordinamento
progressivo, che parta da zero, in modo da disporle nel giusto ordine sia per quanto
riguarda il menu di navigazione, che esamineremo fra poco, sia quando ne visualizzate
l’elenco col comando Tutte le pagine.
Nel momento in cui avrete creato almeno una pagina, si aggiungerà una nuova voce a
questo pannello: si tratta dell’opzione Genitore, che permette di trasformare la pagina che
si sta creando o modificando da una “pagina madre” selezionata attraverso il nuovo menu,
trasformandola quindi in una sotto-pagina (Figura 2.9). Questa possibilità può risultare
utile qualora si voglia creare una struttura gerarchica di argomenti e sotto-argomenti
all’interno del sito, ma ha un significato legato alla strutturazione dei contenuti, più che a
quella della navigazione; ricordiamo sempre che WordPress è un CMS, quindi predisposto
anche per gestire contenuti complessi e strutturati. Nel caso non si desideri rendere la
pagina corrente una sotto-pagina o si voglia riportarla a tale stato in un secondo tempo, il
menu della nuova opzione Genitore deve rimanere impostato su Pagina base.

Figura 2.9 – La nuova opzione Genitore che compare nel pannello Attributi pagina dal
momento in cui si crea il secondo foglio, corredata dal menu che permette di assegnare
una pagina “madre” a quella corrente, trasformando quest’ultima in una sotto-pagina.
Quanto visto finora è abbastanza da consentirvi di cominciare a creare delle pagine, per
ora di solo testo, e pubblicarle, osservando i risultati delle varie applicazioni di stili e
impostazioni, fino a familiarizzare con tutti gli elementi che abbiamo appena esaminato.
Nel prossimo paragrafo ci occuperemo dei menu e degli altri elementi di navigazione, per
poi passare agli articoli, evidenziando le differenze rispetto alle pagine e illustrando gli
altri pannelli di configurazione in comune con esse. Nel paragrafo successivo passeremo
all’utilizzo delle immagini e, nella parte finale del capitolo, degli altri contenuti
multimediali, completando così la parte più importante che riguarda la creazione dei
contenuti di un sito.
Il consiglio, quindi, è di esercitarvi a questo punto nella creazione e modifica delle
pagine con gli strumenti esaminati finora, giacché questa pratica rappresenta un passaggio
fondamentale nella creazione di un sito Web.
Prima di proseguire con la gestione degli elementi di navigazione, è opportuno spiegare
come far sì che all’apertura del sito sia visualizzata una pagina specifica, che diventerà
così la vostra “home page”. Dovrete, ovviamente, aver creato e pubblicato almeno una
pagina prima di procedere.

nota
Nella sua impostazione predefinita, WordPress si comporta come una piattaforma di
blogging e visualizza, quindi, gli articoli (post) nella home page, disponendoli in
ordine cronologico dal più recente al meno recente. Modificare questa impostazione e
far sì che la home page sia una pagina creata da voi è molto semplice, come vedremo
fra poco.
Cliccate sulla voce Impostazioni del pannello e selezionate il menu Lettura; potete anche
spostarvi col puntatore su Impostazioni e cliccare direttamente su Lettura nel sottomenu
che compare.
Figura 2.10 – La configurazione della pagina iniziale, “home page”, del sito dall’area
Lettura della sezione relativa alle Impostazioni di WordPress; si noti la chiarezza delle
opzioni disponibili.
Nella parte alta, dove è visualizzata la scritta La pagina iniziale mostra selezionate la
seconda scelta: Una pagina statica (selezionata qui sotto) e dal menu di fianco a Pagina
iniziale, selezionate, fra quelle che avete già creato, la pagina che volete far comparire
come home page del sito (Figura 2.10).
Cliccate a questo punto sul pulsante Salva le modifiche in basso, per confermare la
nuova impostazione e ricaricate il sito per verificare il risultato.
2.4 Menu e altri elementi di navigazione
Se avete già osservato l’anteprima del vostro sito man mano che le pagine sono state
create, avrete notato come il menu di navigazione principale, nella parte alta del sito, si
aggiorni includendo i rispettivi collegamenti.
In realtà WordPress offre anche diverse funzioni con cui personalizzare la navigazione
del sito, permettendo ai visitatori di raggiungere più facilmente i contenuti: gran parte di
queste funzioni è disponibile in un’area dedicata del pannello di amministrazione del
CMS, che si chiama proprio Menu ed è una voce della sezione Aspetto.
Figura 2.11 – La schermata che compare accedendo la prima volta all’area Menu di
WordPress, si noti l’invito a creare un nuovo menu e, nel pannello a sinistra, l’elenco delle
pagine già create non ancora selezionabili.
Al vostro primo accesso all’area Menu (Figura 2.11) sarete invitati a creare il primo menu
del sito.
Potete esercitarvi a creare tutti i menu che volete, poiché sarà poi possibile assegnarli
liberamente, come vedremo, alle aree di navigazione predisposte nel tema grafico scelto.

nota
Nel momento in cui si assegna un menu, questo va a sostituire quello creato
automaticamente durante l’inserimento delle pagine. È importante familiarizzare con
questa funzione del pannello di WordPress, visto che permette di personalizzare il
menu principale ed eventualmente quelli secondari ottenendo il risultato migliore in
termini di navigabilità del sito.
Cominciate con l’inserire un nome per il vostro menu nel campo a destra della voce Nome
menu, cliccando poi sul pulsante Creazione menu a destra per confermarlo. Nel
momento in cui il vostro primo menu sarà salvato, la schermata si aggiornerà rendendo
attive le aree in precedenza grigie e aggiungendo nuove opzioni.
Fra le nuove possibilità visualizzate troviamo la scheda secondaria Gestione posizioni
che va ad affiancarsi a Modifica menu nella parte alta della schermata: una volta creato
un menu, infatti, come abbiamo già accennato, è possibile assegnarlo a un’area di
navigazione specifica fra quelle presenti nel tema grafico utilizzato. Questa configurazione
si può gestire anche attraverso l’ultima scelta in basso nel riquadro dei menu (Posizione
del tema) dove basta mettere il segno di spunta sull’area di navigazione a cui si intende
associare il menu.

Figura 2.12 – La schermata dell’area Menu con tutte le voci attive in seguito al
salvataggio del primo menu; si noti che alla scheda Modifica menu si è aggiunta, in alto,
la scheda Gestione posizioni.
Nell’esercitazione si sta utilizzando il tema predefinito di WordPress, in questo caso
Twenty Fourteen, che prevede due aree di navigazione: oltre al menu principale in alto,
infatti, viene visualizzato anche un menu laterale nella sidebar sinistra, di conseguenza
sarà possibile associare il menu creato o un altro a quest’area invece che alla parte
superiore.

nota
L’opzione “Aggiungi automaticamente le pagine”, presente in basso nel riquadro di
composizione e gestione del menu, è disattivata come impostazione predefinita, ma
valutate bene se è il caso di attivarla, soprattutto se avete intenzione di creare molte
pagine che non saranno necessariamente visualizzate come voci di menu nel sito.
Ma andiamo con ordine: dei pannelli visualizzati in questa schermata quelli di sinistra
(Pagine, Link, Categorie), che esamineremo più in dettaglio fra poco, permettono di
selezionare o creare gli elementi che andrete a inserire nel menu, mentre quello a destra
visualizza gli elementi già inseriti e la struttura del menu che state creando o modificando.
Per inserire delle pagine nel menu, basta mettere il segno di spunta su quelle desiderate,
presenti nell’elenco del pannello Pagine a sinistra, usando il link Seleziona tutto se si
desidera inserirle in blocco, e cliccare poi sul pulsante Aggiungi al menu.

nota
La voce “Home” del menu, che è semplicemente un link all’indirizzo del sito, non
viene in genere visualizzata direttamente nell’elenco Pagine a meno che non si
clicchi sulla scheda “Mostra tutti” del pannello stesso. In questo modo saranno
visualizzate tutte le pagine disponibili, e non solo le più recenti come da
impostazione predefinita, e fra queste ci sarà anche la pagina Home che riporta alla
home page del sito. Se come pagina di inizio non avete usato una di quelle richiamate
già da un altro menu (per es. “Chi siamo”) e volete che il pubblico possa comunque
visualizzarla anche se raggiunge il sito da una pagina interna, potete includere nel
menu la pagina/voce Home. Si tratta comunque di una buona abitudine che migliora
la navigabilità generale.
Una volta inserite le pagine desiderate nella struttura del menu, potrete gestirle in diversi
modi, per esempio cambiandone l’ordine cliccando e trascinando il relativo pannello
oppure aprendo quest’ultimo con un clic sul triangolino a destra e cambiando il nome
della voce di menu (Etichetta di navigazione) con qualcosa di personalizzato invece che il
titolo della pagina, oppure eliminandola del tutto cliccando sul link Rimuovi.

Figura 2.13 – L’area di gestione dei menu di WordPress una volta che si comincia a creare
un nuovo menu; si noti l’apertura di uno dei pannelli con le opzioni al suo interno e il
pannello in basso spostato per modificare la gerarchia del menu.
Potete anche creare dei menu “gerarchici”, vale a dire trasformare delle voci di menu in
sottomenu, semplicemente spostando verso destra il relativo pannello rispetto a quello
superiore. Ricordatevi sempre di cliccare sul pulsante Salva menu per confermare le
impostazioni di volta in volta.

Figura 2.14 – I tre pannelli per l’aggiunta di elementi ai menu di WordPress; si noti il
pannello Link aperto, con le due caselle per l’inserimento del collegamento e del nome da
assegnare alla voce di menu.
Potete aggiungere al menu anche le categorie, le esamineremo fra poco nel paragrafo
dedicato agli articoli, e persino un qualsiasi link a una risorsa esterna o interna, usando
rispettivamente i pannelli Categorie e Link (Figura 2.14). Per quanto riguarda i
collegamenti, siete voi a decidere fin da subito, dopo aver incollato il link nella casella
superiore del pannello, che nome dare alla voce di menu che state per creare. Questa
funzione può tornare utile, oltre che per aggiungere voci che puntano a risorse esterne al
sito, per includere nel menu articoli e persino dei file caricati nella libreria Media, che
esamineremo più avanti nel capitolo.

nota
Usando il pannello Link si possono creare anche delle voci di menu che hanno solo
una funzione di segnaposto, inserendo il segno di cancelletto (#) al posto del
collegamento, in tal modo non produrrano alcun effetto. Ciò può tornare utile, per
esempio, quando si vuole creare una voce di menu principale nella quale includere
dei sottomenu, ma facendo in modo che la prima serva solo da contenitore per le
altre.
Ritroverete i menu nel prossimo capitolo, quando esamineremo gli elementi strutturali del
sito, in particolare gli elementi modulari chiamati “widget”. Per il momento le
informazioni fornite sono sufficienti a permettervi di personalizzare al meglio la
navigazione principale del sito, quindi come sempre vi invito a esercitarvi con tutte le
funzionalità descritte finora.
2.5 Articoli
Daremo ora uno sguardo agli articoli, che come abbiamo detto rappresentano i contenuti
dinamici di un sito e sono tipici dei blog o di un’eventuale area blog o news all’interno di
un sito tradizionale.
Per questa loro caratteristica dinamica, gli articoli hanno, rispetto alle pagine, una serie
di caratteristiche aggiuntive che permettono di classificarli e organizzarli, facilitandone la
consultazione da parte del pubblico: in questo paragrafo esamineremo proprio queste
caratteristiche, tralasciando tutto quanto si è già visto a proposito delle pagine riguardo
all’editor dei contenuti.

Figura 2.15 – Il pannello delle opzioni per gli Articoli con l’elenco che inizialmente
contiene solo l’articolo di esempio, si notino le due opzioni aggiuntive Categorie e Tag
non presenti nel menu delle Pagine visto in precedenza e il menu di scelta rapida che
compare spostando il puntatore del mouse sotto il titolo dell’articolo.
Come per le pagine, la prima operazione da fare dopo l’installazione di WordPress è la
cancellazione dell’articolo di esempio già presente, cliccando sulla voce Articoli del
pannello di amministrazione oppure selezionando Tutti gli articoli. L’elenco degli articoli,
infatti, inizialmente conterrà solo quello predefinito di esempio, che va cancellato anche
per motivi di sicurezza, visto che rappresenta uno dei punti vulnerabili agli attacchi di
spam ai commenti.
Per cancellare rapidamente l’articolo di esempio spostatevi come sempre sotto il titolo
con il puntatore del mouse e cliccate su Cestina nel menu di scelta rapida che compare
(Figura 2.15).
A questo punto, create il vostro primo articolo, cliccando sul pulsante Aggiungi nuovo,
in alto a sinistra, oppure sulla voce di menu con lo stesso nome presente nella barra
laterale.

Figura 2.16 – I tre pannelli aggiuntivi che trovate nella schermata di creazione e modifica
di un articolo, assenti in quella delle pagine, con le opzioni che permettono di classificare
gli articoli in vari modi.
La prima cosa che noterete, appena sarete di fronte alla schermata di editing degli articoli,
è la presenza di tre nuovi pannelli (Figura 2.16), assenti nella fase di modifica delle
pagine, legati a quelle caratteristiche di classificazione cui accennavamo all’inizio del
paragrafo.
Il pannello Formato, introdotto nelle versioni più recenti di WordPress, permette di
definire un formato per il contenuto dell’articolo.

nota
Non bisogna lasciarsi ingannare dal pannello Formato pensando che sia necessario
scegliere uno dei formati disponibili per visualizzare un contenuto di un certo tipo: un
articolo in formato standard, quello predefinito, può contenere oltre al testo tutti gli
altri formati, eventualmente combinati in uno stesso contenuto. Inoltre, i post
realizzati in un formato specifico sono preferibili quando il tema scelto è predisposto
per visualizzarli con uno stile dedicato (per esempio un player grafico per l’audio e il
video, oppure un riquadro particolare per le citazioni o le digressioni e così via).
Utilizzate, quindi, il pannello Formato soprattutto in quest’ultimo caso.
Figura 2.17 – Un esempio di come sono gestiti i formati degli articoli in un tema grafico
professionale, in questo caso nel tema Divi (wpaz.it/012).
Ecco alcuni dei formati disponibili secondo il tema utilizzato:
• standard
si tratta dell’articolo composto da testo, immagini ed eventuali altri elementi
multimediali, che può contenere uno o più tipi di contenuto presenti nei formati che
seguono.
• digressione
potrebbe essere descritto come una “nota a margine”, vale a dire un breve contenuto
(per esempio un commento, un estratto o un riferimento a un altro contenuto), che
viene rappresentato sotto forma di solo testo, addirittura privo del titolo.
• immagine
un’illustrazione o foto visualizzata individualmente.
• video
un semplice video, incorporato con il codice di una piattaforma esterna come
YouTube o Vimeo oppure caricato direttamente nei Media di WordPress, che
rappresenta anche in questo caso l’unico contenuto dell’articolo.
• audio
ancora una volta, un contenuto multimediale inserito come riferimento a un media
esterno, caricato su una piattaforma dedicata, oppure caricato direttamente nella
libreria Media, e visualizzato in maniera individuale, cioè senza altri contenuti a
corredo.
• citazione
simile al testo formattato con questo stile negli articoli, ma in questo caso tutto il
contenuto dell’articolo è un’unica citazione.
• link
un semplice collegamento a una risorsa (sito o pagina Web, file, ecc.), che può essere
accompagnato da un breve testo descrittivo.
• galleria
un insieme di immagini raggruppate nel formato standard della galleria di WordPress.
• chat
la trascrizione di una chat.
• status
simile alla digressione, ricorda molto lo “Stato” di Facebook.
Il pannello Categorie (Figura 2.18) permette, come suggerisce il nome, di assegnare
all’articolo una specifica categoria, che può essere anche secondaria e associata a una
categoria principale, selezionando in tal caso quest’ultima dal menu Categoria madre. La
categoria predefinita per gli articoli è naturalmente Senza categoria, ma si può
immediatamente creare una nuova categoria adatta a classificare il contenuto dell’articolo
cliccando sul link Aggiungi una nuova categoria: una volta digitato il nome della
categoria bisognerà cliccare sul pulsante Aggiungi nuova categoria sottostante
ricordandosi di togliere il segno di spunta a Senza categoria.
Le categorie rappresentano un elemento importante nella classificazione dei contenuti
all’interno di un CMS, tanto per gli utenti che dovranno navigare fra i contenuti, quanto
per i motori di ricerca, che potranno, in tal modo, indicizzarli meglio.

Figura 2.18 – La schermata di gestione delle categorie, accessibile dal menu Categorie
dell’area Articoli nel backend di WordPress; si noti a destra il pannello con l’elenco delle
categorie disponibili, che inizialmente contiene soltanto Senza categoria, che volendo
può essere modificata assegnandole una nomenclatura diversa.
Utilizzando il menu Categorie della sezione Articoli nel pannello di amministrazione di
WordPress, è possibile accedere all’apposita schermata e gestire in maniera più completa
le categorie, modificandole oltre che creandole. Per modificare una categoria si può
utilizzare il link Modifica o Modifica rapida che compare portando il puntatore del
mouse sotto il suo nome, all’interno del pannello che visualizza le categorie disponibili.
Oltre al nome della categoria e all’eventuale categoria madre, se si trattasse di una sotto-
categoria, è possibile definire un’abbreviazione, che rappresenti il cosiddetto “permalink”
(approfondiremo questo argomento nel prossimo paragrafo).
Il terzo dei pannelli specifici per gli articoli è quello delle etichette, il cui equivalente in
inglese, ormai universalmente accettato anche nella nostra lingua, è “tag”. Il pannello Tag
permette di associare quindi all’articolo che state creando o modificando una o più
etichette identificative che ancora una volta, come per le categorie, permetteranno ai
visitatori del sito di individuare più facilmente i contenuti che desiderano.
In particolare le etichette aiutano nello stabilire affinità fra i diversi articoli,
permettendovi di segnalare, per mezzo di plugin che esamineremo nel sesto capitolo,
dedicato alla promozione del sito, agli utenti altri contenuti correlati con quello che stanno
già consultando.

Figura 2.19 – I “tag” utilizzati in un sito o blog possono essere visualizzati usando un
widget dedicato (parleremo dei widget nel prossimo capitolo e riprenderemo l’argomento
in modo più specifico anche nel sesto capitolo), che in tal caso mette in evidenza i tag più
utilizzati aumentando proporzionalmente la dimensione del carattere.
La selezione di tag idonei a classificare un contenuto è un compito non sempre facile,
anche perché è importante evitare che si sovrappongano con le categorie, ma si può partire
dal principio che, mentre le categorie rappresentano una forma di classificazione di livello
più alto, le etichette riguardano invece una classificazione più specifica e capillare. Nel
sesto capitolo torneremo sull’argomento alla luce della sua importanza per il successo dei
contenuti.

nota
Sebbene tag, in quanto traduzione di etichetta, possa essere vista come una parola di
genere femminile, il suo uso nella lingua italiana del gergo informatico è
contraddistinto da una classificazione di genere maschile, ormai entrata nell’uso
comune, poiché riferita più precisamente alla traduzione prettamente informatica di
“codice identificativo”. Pertanto, anche in questo libro sarà utilizzato il genere
maschile.
Per ora è importante sapere che si possono inserire più tag contemporaneamente, purché
divisi da una virgola e che, una volta inseriti diversi tag, sarà possibile selezionarli più
velocemente usando il link Scegli un tag fra quelli più utilizzati e cliccando sulle
etichette visualizzate nella casella sottostante.

Figura 2.20 – Un elenco degli articoli pubblicati, si notino le due colonne aggiuntive
Categorie e Tag rispetto all’elenco delle pagine.
Oltre a questi pannelli e ai relativi attributi, che concorrono alla classificazione e
tassonomia degli articoli, questi ultimi si differenziano dalle pagine nel modo in cui sono
visualizzati. Prima di tutto, infatti, gli articoli pubblicati in un sito o blog possono essere
elencati, oltre che nel loro naturale ordine cronologico inverso ed eventualmente
mostrando soltanto i titoli e parte del testo iniziale, anche in base alla categoria di
appartenenza o ai tag associati. Inoltre, quando visualizzati singolarmente, sono in genere
accompagnati, subito dopo il titolo, dai cosiddetti “meta tag” che identificano l’autore, la
data di pubblicazione, la categoria e altri attributi identificativi.
Anche in questo caso tutto vi diventerà più chiaro man mano che vi esercitate a creare e
pubblicare degli articoli, assegnando categorie e tag e gestendo entrambi per mezzo delle
rispettive schermate come illustrato nelle pagine precedenti.
2.6 Permalink
All’inizio di questo capitolo, parlando delle pagine, abbiamo dato uno sguardo veloce al
modo in cui WordPress crea l’indirizzo di riferimento (URL) di una pagina, osservato in
seguito anche nella creazione degli articoli nel paragrafo precedente. È arrivato ora il
momento di scoprire com’è possibile personalizzare e rendere ancora più chiaro e utile
tale indirizzo.
Cliccando sulla voce Permalink dell’area Impostazioni nel backend di WordPress,
avrete accesso alla schermata in cui è possibile scegliere un formato alternativo per questi
indirizzi oppure addirittura personalizzare tale formato (Figura 2.21).

Figura 2.21 – La sezione principale della schermata di impostazione dei Permalink; si


notino il formato selezionato e, nel campo dl formato Struttura personalizzata, la
sintassi corrispondente.
Diamo subito uno sguardo alle sei diverse possibilità di configurazione dei permalink di
WordPress:
1. Predefinito
come suggerisce il nome, si tratta del formato che ritrovate preimpostato nel
momento in cui create un contenuto ed è nella forma dominio.it/?=pXXX dove
XXX è il numero della pagina o dell’articolo visualizzato.
2. Data e nome
utilizzato abbastanza spesso, questo formato prevede la visualizzazione della
data completa in forma numerica (anno/mese/giorno) e del titolo assegnato alla
pagina o all’articolo subito dopo il nome di dominio del sito.
3. Mese e nome
In questo caso il titolo della pagina o dell’articolo è preceduto, oltre che dal
nome di dominio, ovviamente, solo dall’anno e dal mese, quest’ultimo sempre
in forma numerica.
4. Numerico
questo formato fa sì che sia visualizzato, dopo il nome di dominio,
semplicemente il numero progressivo che identifica la pagina o l’articolo; quello
che, per intenderci, era visualizzato nella parte finale del formato predefinito.
5. Nome articolo
selezionando questo formato si visualizzerà semplicemente il titolo della pagina
o dell’articolo subito dopo il nome di dominio; si tratta anche in questo caso di
un formato molto utilizzato.
6. Struttura personalizzata
anche se nel campo a destra di questo formato compare di volta in volta la
sintassi degli altri formati selezionati, è possibile modificare tale codice e
personalizzarlo ulteriormente (come vedremo fra poco).
Come abbiamo visto al punto 6, è possibile personalizzare ulteriormente la struttura dei
permalink, purché si rispetti la sintassi del codice. Una struttura molto utilizzata e pratica
da un punto vista di accessibilità, ma anche di ottimizzazione per i motori di ricerca (come
vedremo più in dettaglio nel sesto capitolo), è quella formata dalla categoria e dal titolo,
nella forma /%category%/%postname%/, che si rivela molto utile nella formazione di
permalink per gli articoli.

Figura 2.22 – Un esempio di struttura personalizzata in cui il nome della categoria


precede il titolo dell’articolo e, in basso, le Impostazioni aggiuntive per i permalink che,
come indicato fra parentesi, sono facoltative.
Le Impostazioni aggiuntive (Figura 2.22) permettono di far precedere un elenco di
articoli visualizzati all’interno di una specifica categoria o tag da una parola a vostra
scelta, per esempio “argomenti” o “etichette”, ma si tratta di una impostazione poco
utilizzata e identificata, infatti, come facoltativa. Potete in ogni caso sperimentare
digitando qualcosa nei due campi delle rispettive voci e osservarne l’effetto nella
visualizzazione di un elenco di articoli.
Per visualizzare un elenco di articoli appartenenti a una stessa categoria basta
aggiungere, nella barra degli indirizzi del browser, /category/nome-categoria/ all’URL del
sito, per esempio nomedominio.it/category/economia. Se si aggiunge, in riferimento a
quanto appena visto riguardo alle Impostazioni aggiuntive, la parola “argomenti” nel
campo Base delle categorie, il link appena descritto diventerà
nomedominio.it/argomenti/economia. La pratica, come sempre, vi aiuterà a chiarire
meglio questi concetti.

nota
Salvare le impostazioni dei permalink dalla schermata che li gestisce, aggiorna, in
realtà, il file .htaccess che WordPress crea nella cartella principale (root) del sito e
che contiene le indicazioni relative al formato dei link per la navigazione dei
contenuti. Qualora fosse visualizzato un messaggio di errore che segnala
l’impossibilità di salvare le impostazioni a causa della protezione in scrittura di tale
file, sarà necessario intervenire sui permessi del file stesso, come spiegato nel settimo
capitolo, dedicato alla manutenzione di WordPress.
Aggiornando i permalink, infine, saranno modificati tutti i link di riferimento visualizzati
nel menu principale, in eventuali menu secondari e anche nei widget (parleremo di questi
nel prossimo capitolo) che sono visualizzati nelle barre laterali o in quella a piè di pagina,
per esempio quello delle categorie, degli archivi o degli articoli più recenti.
2.7 Gestione di gruppo per pagine e articoli
Quando si visualizza un elenco delle pagine o degli articoli usando i rispettivi comandi
Pagine Tutte le pagine e Articoli Tutti gli articoli vengono visualizzati dei
comandi che permettono di gestire al meglio tanto la visualizzazione dell’elenco e
l’individuazione dei contenuti quanto la gestione degli elementi presenti in elenco.
Daremo ora un rapido sguardo proprio a questi strumenti, che possono rivelarsi molto utili
per sveltire e semplificare il lavoro soprattutto per siti molto complessi o blog
contraddistinti dalla ricchezza dei contenuti.
Prima di tutto in alto a sinistra (Figura 2.23) troviamo i quattro link da cui è possibile
conoscere la quantità di contenuti, pagine o articoli che siano, totali, pubblicati, in bozza o
cestinati: se una di queste categorie non contenesse almeno un elemento non sarà
visualizzata. Di fianco a ogni categoria viene segnalato, fra parentesi, il numero di
elementi presenti.
Cliccando sul primo link, Tutti, saranno visualizzati tutti i contenuti pubblicati e in
bozza, ma non quelli cestinati, per visualizzare questi ultimi bisogna infatti cliccare su
Cestinato, mentre i link Pubblicati e Bozza mostrano ovviamente soltanto i contenuti che
rientrano nelle rispettive classificazioni.
Figura 2.23 – La schermata che visualizza l’elenco di tutti gli articoli già creati; si noti
come nella visualizzazione sia presente anche un articolo in bozza e come, dai menu a
sinistra del pulsante Filtra, sia possibile selezionare solo gli articoli creati in una
particolare data e/o appartenenti a una certa categoria.
Cliccando su Cestinato, il menu di scelta rapida visualizzato sotto ogni titolo nell’elenco,
conterrà, al posto dei comandi Modifica, Modifica rapida, Cestina e Visualizza che
abbiamo già visto nelle immagini precedenti, i due comandi Ripristina e Cancella
definitivamente, che permettono rispettivamente di riportare un contenuto al suo stato
originale di bozza o pubblicato spostandolo fuori dal cestino oppure di eliminarlo in modo
definitivo dal database di WordPress; un’operazione da valutare e usare con cautela,
ovviamente.
Il campo di ricerca a destra, sulla stessa riga, insieme al pulsante corrispondente
permette di individuare un contenuto specifico indicando una parola o frase presente nel
titolo o nel contenuto.
La riga successiva contiene, a sinistra, il menu Azioni di gruppo, che permette di
gestire più pagine o più articoli contemporaneamente e cambia a seconda che ci si trovi
nelle prime tre categorie o in Cestinati: in quest’ultimo caso avrete a vostra disposizione
due comandi per ripristinare o cancellare definitivamente tutti i contenuti selezionati,
mentre nel primo caso i due menu disponibili permetteranno di eliminarli oppure
modificarne in blocco molte delle impostazioni in modo rapido e semplice.
Figura 2.24 – Il pannello per la “modifica di massa” visualizzato selezionando due o più
pagine o articoli e usando l’opzione Modifica del menu Azioni di gruppo durante la
visualizzazione di un elenco di contenuti; si notino a sinistra i contenuti che saranno
inclusi nelle modifiche apportate in uno o più elementi fra quelli visualizzati sulla destra.
Selezionando Modifica dal menu Azioni di gruppo, infatti, sarà visualizzato un pannello
(Figura 2.24) che contiene, a sinistra, l’elenco dei contenuti scelti permettendo di
escluderne qualcuno in caso di ripensamenti e, a destra, tutte le possibilità per assegnare o
modificare le diverse caratteristiche (stato e data della pubblicazione, autore, ecc.) delle
pagine o degli articoli selezionati. Cliccando sul pulsante Aggiornamento tutte le
impostazioni modificate saranno assegnate in blocco al gruppo di contenuti selezionato,
facendo così risparmiare moltissimo tempo.
Sempre sulla stessa riga del menu Azioni di gruppo trovate nella parte centrale, il filtro
che permette di visualizzare solo i contenuti corrispondenti a una certa data e categoria,
quest’ultima solo per gli articoli, ovviamente. Selezionando dal menu la data (mese e
anno) desiderata e/o, nel caso degli articoli, la categoria e cliccando sul pulsante Filtra, si
otterrà una visualizzazione selezionata dei contenuti corrispondenti alla scelta.
Quest’opzione torna utile, ancora una volta, in siti o blog ricchi di contenuti.
Alla destra del filtro si trovano, nell’elenco degli articoli, due icone seguite dal
conteggio degli elementi, pagine o articoli, correntemente visualizzati. Queste icone
permettono rispettivamente di visualizzare gli articoli sotto forma di lista sintetica, solo i
titoli, impostazione predefinita, oppure di mostrare oltre al titolo anche parte del
contenuto.
Per quanto riguarda, infine, i link visualizzati nell’elenco in corrispondenza della
colonna dell’autore e, per gli articoli, delle categorie e tag, cliccando su ogni link si
visualizzeranno tutti i contenuti associati: quelli di un particolare autore, di una specifica
categoria o etichettati con un determinato tag.
In sostanza, gli strumenti offerti da WordPress per gestire in maniera efficiente anche
grandi quantità di contenuti sono diversi e riescono a coprire ogni esigenza, basta
conoscerli e soprattutto imparare a impiegarli nel vostro lavoro col CMS.
2.8 Immagini
La gestione delle immagini in WordPress, già ben più intuitiva e pratica di quanto non sia
in altri CMS, ha avuto un’ulteriore evoluzione con l’arrivo della versione 3.9, nella quale è
stata introdotta la possibilità di trascinare i file direttamente all’interno dell’area di editing
del contenuto.
Per inserire un’immagine in una pagina o un articolo di WordPress passate alla
schermata di modifica del contenuto e, dopo aver posizionato il cursore del testo nel punto
in cui volete inserirla, trascinate il file dell’immagine dalla cartella che lo contiene fino
alla finestra in cui è visualizzato il testo della pagina o dell’articolo.

Figura 2.25 – L’operazione di trascinamento (drag’n’drop”), con cui è possibile inserire


facilmente un’immagine all’interno di un contenuto di WordPress semplicemente
spostandola dalla sua cartella sul computer alla finestra di editing del contenuto; si noti
l’area colorata in azzurro e la scritta che segnalano l’operazione in corso.
Vedrete colorarsi in azzurro l’area di editing e comparire il messaggio “Trascina file per
inserire” (Figura 2.25). Rilasciando il pulsante del mouse si aprirà automaticamente la
finestra di caricamento dei file, dove un riquadro con una barra di progressione segnalerà
il caricamento, più o meno veloce a seconda delle dimensioni del file, dell’immagine e,
una volta che questo sarà completo, visualizzerà la sua anteprima (Figura 2.26).

nota
Ricordate sempre di utilizzare immagini ottimizzate, le cui dimensioni non eccedano
quelle che l’immagine avrà nella sua massima dimensione visualizzabile.
Un’immagine in formato JPEG e dimensione 1024x768 pixel è in genere sufficiente
per la maggior parte degli utilizzi in ambito Web, quindi è inutile ricorrere a
dimensioni maggiori o altri formati, salvo che non vi siano esigenze particolari.
Ricordate, inoltre, di assegnare un nome indicativo al file prima di caricarlo,
utilizzando possibilmente solo lettere minuscole e sostituendo eventuali spazi con il
segno meno (riprenderemo quest’aspetto nel sesto capitolo a proposito della SEO).

Figura 2.26 – Un’immagine appena caricata e pronta per essere inserita nel contenuto; si
noti il segno di spunta che ne evidenzia la scelta e, a destra, la parte superiore delle
impostazioni riguardanti l’immagine stessa.
Prima di confermare l’inserimento dell’immagine cliccando sul pulsante Inserisci nella
pagina, che ovviamente diventa Inserisci nell’articolo nel caso si stia creando o
modificando un articolo e che viene contrassegnato da un segno di spunta nella libreria,
sarà opportuno compilare alcuni dei campi presenti sul lato destro della finestra. Qui sono
anche visualizzati i dati che si riferiscono al file appena caricato (nome, data del
caricamento, dimensioni in pixel) insieme a due link che permettono di modificare
l’immagine selezionata, come vedremo più avanti, oppure cancellarla (Cancella
definitivamente).
Prima di proseguire, diamo un rapido sguardo ai campi riguardanti le impostazioni di
un’immagine, per capire la loro funzione e utilizzarli al meglio (alcuni saranno
approfonditi nel sesto capitolo sull’ottimizzazione delle immagini per i motori di ricerca)
soprattutto quelli più importanti.
• Titolo
rappresenta il nome che l’immagine avrà nella libreria Media di WordPress,
inizialmente assegnato in automatico usando il nome del file al Titolo, ma è possibile
riscriverlo per una maggiore chiarezza e per migliorare l’indicizzazione
dell’immagine oltre che del contenuto in generale.
• Didascalia
se volete che sotto l’immagine sia visualizzata una didascalia che la descriva, questo
è il campo in cui inserire il testo relativo.
• Testo Alt
si riferisce al tag alt dell’HTML (vedere nota dopo questo elenco), quindi viene
utilizzato in sostituzione (alt è l’abbreviazione di alternative) dell’immagine quando
per qualche motivo quest’ultima non viene caricata e la descrive con il testo
utilizzato; anche in questo caso è importante per l’indicizzazione (ne riparleremo
infatti nel sesto capitolo) oltre che in osservazione degli standard del Web.
• Descrizione
oltre che rappresentare la descrizione del file nella libreria Media di WordPress,
questo testo sarà utilizzato per il tag description dell’HTML e verrà quindi
indicizzato dai motori di ricerca; di conseguenza è utile inserire un testo descrittivo
possibilmente diverso da quello usato per il campo Testo Alt.
• Allineamento
questo è il primo della sezione Impostazione visualizzazione allegati e inizialmente
è impostato su Nessuna; a meno che non si desideri tenere l’immagine lontano dal
testo e disallineata, è opportuno selezionare una delle altre opzioni, in genere
Sinistra o Destra per far scorrere il testo intorno all’immagine, oppure Centro
qualora si volesse tenere l’immagine separata dal testo ma centrata nella pagina.
• Link a
tramite questo menu e il relativo campo, decidete se l’immagine dovrà essere
collegata al file originale con l’opzione File Media, utile quando si vuole ingrandire
visualizzandola nella sua dimensione massima, all’Allegato pagina, che rappresenta
l’immagine così come archiviata in WordPress (lo vedremo più avanti nel paragrafo),
a un’URL personalizzato (se per esempio voleste collegare l’immagine a una pagina
Web del vostro sito o di un altro), che specificherete nel campo sottostante o, infine, a
Nessuna risorsa, ottenendo quindi un’immagine priva di link.
• Dimensione
oltre a Dimensione reale, questa sezione può contenere due o tre opzioni secondo le
dimensioni dell’immagine caricata; se si trattasse di un’immagine le cui dimensioni
in pixel sono 640x480 o superiori avrete a disposizione tre possibilità, vale a dire
Miniatura, Media e Grande; se l’immagine avesse dimensioni inferiori potrebbero
essere disponibili solo le prime due. Queste opzioni definiscono la dimensione
dell’immagine di anteprima, che può essere lasciata uguale all’originale o ridotta a
seconda delle esigenze.

nota
Quando si parla di “tag” in relazione ai dati di un’immagine ci si riferisce ai codici
del linguaggio HTML, che è quello utilizzato per visualizzare le pagine Web:
WordPress, infatti, è basato su linguaggio PHP, ma nel visualizzare un contenuto il
browser interpreta e traduce in tempo reale i comandi di questo linguaggio nel
tradizionale HTML, creando una pagina Web dove i contenuti del database e delle
cartelle di WordPress siano visualizzati nel formato definito dal tema
(approfondiremo questo aspetto nel prossimo capitolo).
Una volta caricata e inserita, l’immagine può essere ovviamente ancora modificata o
riposizionata e potrete anche cambiarne le impostazioni: per accedere alle opzioni di
modifica e alle impostazioni, occorre cliccare una volta sull’immagine nella pagina di
correzione del contenuto e quindi sull’icona a forma di matita che compare nell’angolo in
alto a sinistra (Figura 2.27). L’icona a forma di “X” che la affianca serve a rimuovere
l’immagine dal contenuto, ma ricordate che rimarrà comunque nella libreria Media, finché
non la rimuoverete da quest’ultima.

Figura 2.27 – Le icone che compaiono nell’angolo in alto a sinistra dell’immagine


cliccando su quest’ultima nell’area di modifica del contenuto e che permettono
rispettivamente di cambiarne le caratteristiche e rimuoverla; si notino le maniglie poste
intorno all’immagine con le quali potete ridimensionarla dinamicamente.

nota
Cliccando sulle maniglie che circondano l’immagine dopo averla selezionata, potrete
ridimensionarla dinamicamente, ma è importante sapere che questa funzione è utile
solo nel caso si voglia ridurne le dimensioni e non viceversa: ingrandendola oltre le
sue dimensioni effettive, infatti, si otterrebbe un effetto di sfocatura.
Il riquadro che compare cliccando sull’icona a forma di matita è il pannello Dettagli
Immagine e contiene, oltre alle impostazioni di visualizzazione già elencate e descritte,
anche una sezione OPZIONI AVANZATE in cui è possibile definire l’Attributo title
dell’immagine, che diventerà quindi il tag title utile anche per l’indicizzazione sui motori,
come vedremo nel sesto capitolo, e un’eventuale stile personalizzato dell’immagine e dei
suoi link. Questi valori saranno utili a chi ha esperienza dei fogli stile CSS, tutti gli altri
possono tranquillamente ignorarli.

Figura 2.28 – Il pannello Dettagli Immagine con tutti i parametri che è possibile
modificare, fra cui quelli già visti in fase di inserimento; si noti in basso la sezione delle
Opzioni avanzate e a destra, sotto l’immagine, i due pulsanti per la sua modifica e
sostituzione.
Dei due pulsanti visualizzati a destra sotto l’anteprima dell’immagine, Sostituisci
permette di rimpiazzare la figura corrente con un’altra scelta dalla libreria Media, mentre
Modifica originale permette di accedere a una nuova schermata in cui applicare delle vere
e proprie modifiche grafiche all’immagine originale anziché all’anteprima (Figura 2.28).
Figura 2.29 – Il pannello per la modifica dell’immagine originale; si notino gli strumenti
di modifica sopra l’anteprima e in particolare quello per il ritaglio (in inglese “crop”) che
in questo caso è attivo poiché è stata selezionata un’area dell’immagine; a destra sono
visibili le sezioni per il ridimensionamento, il ritaglio e le impostazioni della miniatura,
con i pulsanti di aiuto di fianco a ogni titolo di sezione.
In questa nuova schermata (Figura 2.29) troviamo una serie di icone disposte sopra
l’anteprima dell’immagine, con le quali potete applicare varie modifiche. La prima icona,
inizialmente inattiva, è quella del ritaglio, e si attiva selezionando con il mouse un’area
dell’immagine visualizzata, basta cliccare e trascinare. Le due icone successive applicano
rispettivamente una rotazione antioraria e oraria all’immagine, mentre le due alla loro
destra la specchiano in verticale e in orizzontale. Le ultime due icone sono quelle usate per
annullare o ripristinare l’ultima operazione eseguita.
Una volta applicate le modifiche per mezzo delle icone appena descritte, sarà necessario
cliccare sul pulsante Salva per confermarle, mentre con Annulla si potrà eliminare ogni
modifica.
Il pannello a destra, infine, consente di ridimensionare l’immagine: basterà inserire il
valore dell’altezza o della larghezza, essendo il calcolo dell’altro valore automatico,
definire meglio il ritaglio e decidere se queste modifiche saranno applicate a tutte le
dimensioni dell’immagine, miniatura inclusa, oppure escludere quest’ultima o ancora
applicarle solo a essa.

nota
Quando viene caricata un’immagine in WordPress, il CMS crea automaticamente una
serie di copie della stessa per le dimensioni standard, ovvero Miniatura, Media e
Grande, quest’ultima sarà creata solo se le dimensioni sono inferiori a quelle
dell’originale. In questo modo non sarà necessario crearle ogni volta che dovranno
essere visualizzate come anteprima.
Non bisogna dimenticare, inoltre, che è possibile accedere alle immagini e modificarle
anche dall’interno della libreria: selezionando l’opzione Libreria dal menu Media del
pannello di amministrazione di WordPress, visualizzerete un elenco degli elementi caricati
(immagini ma anche altri tipi di file, a seconda dei contenuti inseriti in WordPress) e
potrete usare il menu di scelta rapida per visualizzare, cancellare in modo definitivo o
modificare ognuno di essi. Di fianco a ogni elemento è visualizzato anche l’eventuale
contenuto, articolo o pagina, in cui è stato inserito; qualora non sia stato utilizzato da
nessuna parte, sarà contrassegnato come Non allegato.
Cliccando sul link Modifica del menu di scelta rapida sarà possibile inserire dati come
la didascalia, il testo alternativo o la descrizione di un’immagine, ma anche accedere agli
strumenti di modifica già visti cliccando sull’omonimo pulsante.

nota
Per quanto siano presenti strumenti di modifica delle immagini in WordPress, è
sempre consigliabile elaborarle prima del caricamento nel CMS, non solo per quanto
riguarda l’ottimizzazione, ma anche per il ritaglio e il ridimensionamento in funzione
della struttura che si desidera creare per il sito. Inoltre, è altrettanto consigliato
eliminare tutte le immagini caricate che, per un motivo o per l’altro, non saranno più
utilizzate, poiché vanno a occupare inutilmente spazio sul server e rendono meno
agevoli le operazioni di backup, ripristino e trasloco del sito.
Le immagini, oltre che singolarmente, possono essere gestite in gruppo sotto forma di
“galleria”, un elemento molto utilizzato all’interno dei siti Web: per creare una galleria
basta cliccare sul pulsante Aggiungi media, presente in alto a sinistra sopra gli strumenti
di editing del contenuto, e selezionare Crea galleria nella schermata che compare,
selezionando le immagini da quelle già presenti nella libreria usando il pannello Libreria
media della stessa schermata oppure caricandone altre: anche in questo caso, infatti,
nuove immagini possono essere caricate direttamente, selezionandole e trascinandole tutte
insieme dalla cartella di origine alla finestra della libreria Media di WordPress.
Figura 2.30 – La schermata di creazione di una galleria con alcune immagini selezionate e
pronte per essere inserite; si noti l’opzione Crea galleria selezionata a sinistra, il numero
di elementi correntemente selezionati in basso al centro e il pulsante Crea una nuova
galleria in basso a destra.
Una volta che le immagini saranno disponibili e selezionate nella schermata della libreria
(Figura 2.30) basterà cliccare sul pulsante Crea nuova galleria per passare alla schermata
di gestione della galleria stessa (Figura 2.31), dove volendo potrete riorganizzare le
immagini in un ordine particolare, semplicemente trascinandole e riposizionandole oppure
invertendone l’ordine cliccando sul pulsante Ordine inverso in alto, usare il pannello di
destra per definire il link per tutte le immagini, come abbiamo visto per le immagini
singole, e il numero di colonne su cui distribuire le miniature, e infine impostare un
eventuale ordine casuale nella visualizzazione. Per ogni immagine, inoltre, potrete definire
titolo, didascalia, testo alternativo e descrizione, semplicemente cliccando sulla sua
miniatura all’interno di questa stessa schermata; la didascalia può essere inserita o
modificata anche usando il campo di testo presente sotto ogni miniatura.
Figura 2.31 – La seconda schermata di composizione della galleria, successiva alla
selezione delle immagini; si notino i diversi menu e pulsanti per cambiare l’ordine delle
immagini, la disposizione in colonne e l’aggiunta di nuovi elementi.
Qualora decideste di eliminare alcune immagini dalla galleria appena composta, basterà
cliccare sul segno “X” che compare nell’angolo in alto a destra di ogni miniatura quando
vi si passa il puntatore, mentre per aggiungere altre immagini potrete cliccare sull’opzione
Aggiungi alla galleria nel menu a sinistra della schermata. Il comando Cancella galleria,
presente in alto a sinistra nella schermata, consente di annullare la galleria appena creata,
senza ovviamente eliminare dalla libreria le immagini che la componevano e che restano
pertanto sempre disponibili per un utilizzo successivo.
Una volta impostata la galleria sarà possibile inserirla nel contenuto, pagina o articolo,
che stavate creando o modificando, cliccando sul pulsante Inserisci galleria. Dalla
versione 3.9 di WordPress le gallerie sono visualizzate in anteprima diretta (Figura 2.32)
mentre in precedenza era visibile solo un “segnaposto” che ne indicava la presenza e
l’ingombro: ciò rende possibile richiamare la schermata di modifica dell’intera galleria
cliccando sulla solita icona a forma di matita che compare nell’angolo in alto a sinistra
selezionando la galleria, proprio come avete fatto con le singole immagini.
Figura 2.32 – Una galleria così come appare una volta inserita all’interno del contenuto di
una pagina o di un articolo; si notino le icone di modifica e di cancellazione che
compaiono cliccando su un elemento qualsiasi della galleria.
In realtà ciò che visualizza la galleria nell’area di editing e nel frontend del sito è uno
“shortcode”, ovvero uno o più comandi e parametri racchiusi fra due parentesi quadre, che
WordPress interpreta e trasforma nella galleria così come la vedete o come la vede il
pubblico. Potete rivelare questo codice passando dalla modalità di editing Visuale a quella
Testo, cliccando sull’etichetta che porta proprio questo secondo nome nell’angolo in alto a
destra dell’area di editing: questa modalità permette, come vedremo più avanti, di
visualizzare ed eventualmente aggiungere o modificare il codice HTML che la modalità
Visuale nasconde per rendere più facile il lavoro ai meno esperti. Va da sé che non è
consigliabile cimentarsi nella modifica del codice senza una certa esperienza. Per tornare
alla modalità Visuale basterà naturalmente cliccare sull’omonima etichetta.

nota
Gli “shortcode” (letteralmente “codice abbreviato”), vale a dire i comandi racchiusi
fra parentesi quadre e accompagnati da eventuali parametri, come vedremo nelle
prossime pagine sono utilizzati da molti plugin e temi di WordPress come una forma
sintetica e pratica per passare al software le istruzioni che serviranno poi a
visualizzare un contenuto in una certa forma, per esempio un video con dimensioni
definite da noi, oppure un elemento dell’impaginazione o di grafica. Generalmente
gli shortcode sono inseriti e visualizzati nel contenuto “visuale” che stiamo
elaborando, ma in alcuni casi, come per le gallerie predefinite di WordPress, sono
visibili solo passando alla modalità Testo e rappresentati invece nella modalità
Visuale così come saranno poi visualizzati dal pubblico.
È ovviamente possibile ricorrere a dei plugin per aggiungere a WordPress funzioni più
evolute e maggiore flessibilità nella creazione e gestione delle gallerie di immagini,
tuttavia nella sua forma attuale, la funzione predefinita è abbastanza intuitiva e pratica da
rivelarsi efficace nella maggior parte delle situazioni. Per chi volesse, tuttavia, esplorare le
possibilità offerte dai plugin in tal senso, esistono alternative gratuite, come il popolare
plugin NextGen Gallery (wpaz.it/016), oppure commerciali/professionali come i diversi
plugin dedicati, disponibili sul sito CodeCanyon di Envato (wpaz.it/015).

nota
Quando si sceglie di lasciare attivo il link di un’immagine alla sua versione originale,
facendo in modo che cliccando sulla miniatura sia visualizzata la figura nelle
dimensioni reali, può essere utile installare un plugin tipo “lightbox”, in grado di
migliorare questa visualizzazione aggiungendo un effetto estetico più piacevole.
Termineremo il paragrafo approfondendo questo aspetto.
Un altro importante punto riguardo alle immagini è la visualizzazione della loro versione
originale quando si clicca sulla miniatura presente nel contenuto della pagina o
dell’articolo: come abbiamo visto nelle impostazioni di ogni immagine, questa modalità è
predefinita, quindi cliccando sulla miniatura di un’immagine si ottiene la visualizzazione
di quella originale nelle sue dimensioni di partenza.
Purtroppo, salvo che il tema da voi utilizzato non preveda un effetto particolare, questa
visualizzazione sarà semplicemente creata caricando l’immagine originale nella stessa
finestra del browser o in una nuova scheda o finestra, come se foste passati a un’altra
pagina del sito. Utilizzando invece un plugin con effetto lightbox l’immagine si aprirà in
una finestra a comparsa che in genere si sovrappone alla pagina e viene messa in risalto da
un fondo opaco o scuro, offrendo anche dei pulsanti di navigazione qualora sulla stessa
pagina ci siano più immagini (per es. in una galleria, ma non solo).
Uno dei plugin gratuiti più interessanti in questa categoria è Responsive Lightbox by
dFactory (wpaz.it/017), ma potete individuarne altri usando appunto la parola “lightbox”
come chiave di ricerca nella schermata di installazione dei plugin di WordPress (Figura
2.33). Vediamo a questo punto come funziona la ricerca e l’installazione di un plugin,
procedura che sicuramente vi troverete a ripetere più volte nell’utilizzo del CMS.
Figura 2.33 – La schermata di installazione dei plugin di WordPress; si noti il campo di
ricerca in cui digitare il nome del plugin cercato o una semplice parola chiave e a destra il
pulsante che avvia la ricerca.
Cliccate prima di tutto sulla voce Aggiungi nuovo del menu Plugin nel pannello di
amministrazione di WordPress. Accederete così alla schermata Installa Plugin, dove
avrete la possibilità di effettuare una ricerca per parola chiave o nome del plugin (Figura
2.33): in questo caso digitate direttamente “responsive lightbox” e premete INVIO sulla
tastiera per avviare la ricerca.

nota
La modalità di ricerca libera è quella maggiormente utilizzata, se si escludono i casi
in cui il plugin è stato scaricato sul computer sotto forma di archivio compresso.
L’archivio ZIP è il formato standard per i plugin come per i temi, in quanto composti
entrambi da una cartella che contiene a sua volta altre cartelle e file, per esempio per i
plugin commerciali che vengono acquistati e appunto scaricati dal sito ufficiale
piuttosto che dall’area dei plugin del sito WordPress.org.
WordPress a questo punto visualizzerà un elenco dei plugin il cui nome contiene le parole
chiave da voi utilizzate per la ricerca e, in genere, al primo posto troverete proprio quello
che stavate cercando (Figura 2.34). Approfondiremo il discorso dei plugin anche nei
prossimi capitoli, ma approfittate di questo primo esempio per familiarizzare con una parte
delle funzionalità relative.
Figura 2.34 – Il risultato della ricerca per “responsive lightbox” nella schermata di
installazione dei plugin di WordPress così com’era visualizzato fino alla versione 3.9.1 del
CMS (si veda il Capitolo 10, Figura 10.6 per la nuova schermata introdotta dalla versione
4), si noti il plugin cercato al primo posto e l’elenco di altri plugin che hanno almeno uno
dei due termini di ricerca nel loro nome.
Per installare il plugin una volta che lo avrete individuato, spostatevi col puntatore sotto il
suo nome e nel menu che compare cliccate su Installa adesso: comparirà una piccola
finestra che vi chiederà conferma dell’operazione, poiché state per aggiungere un
componente software a WordPress: cliccate pure sul pulsante OK per confermare.
Dopo un tempo relativamente breve, in genere pochi secondi, sempre che il file del
plugin non sia particolarmente grande, sarà visualizzata la schermata successiva, in cui
potrete attivare il plugin cliccando su Attiva plugin (Figura 2.35).

nota
Quando si installa un plugin o un tema direttamente dalla pagina di ricerca offerta da
WordPress l’archivio compresso ZIP che lo conteneva viene automaticamente
decompresso nella sotto-cartella plugins della cartella wp-content del CMS, rendendo
così accessibili i file e le cartelle relativi per l’attivazione e il conseguente utilizzo.
L’esito di quest’operazione viene sempre visualizzato nella schermata finale da cui si
attiva il plugin.
Figura 2.35 – La schermata che compare dopo l’installazione del plugin e ne permette
l’attivazione per mezzo dell’apposito link se la procedura di decompressione e
installazione è andata a buon fine; si noti il testo che conferma quest’ultimo aspetto.
Una volta attivato il plugin sarà visualizzata la pagina che contiene l’elenco dei plugin
installati (Figura 2.36), in cui è possibile selezionare, per mezzo di una serie di link nella
parte superiore, se l’elenco dovrà contenere tutti i plugin (Totale), solo quelli attivati,
(Attivi), o disattivati (Inattivi) oppure quelli che sono stati attivati recentemente (Attivato
di recente). Questa possibilità di filtro può sembrare esagerata a prima vista, ma quando si
cominciano a utilizzare molti plugin nello stesso sito si apprezza per la sua praticità.

Figura 2.36 – L’elenco dei plugin attivi nel sito, si noti oltre a Responsive Lightbox l’altro
plugin Ultimate Coming Soon Page, che illustreremo successivamente, e il link Settings
sotto i nomi di entrambi i plugin.
Spesso, sotto il nome di un plugin installato e attivo compare il link Settings, che permette
di accedere alla schermata di configurazione del plugin stesso (Figura 2.36). È importante,
tuttavia, familiarizzare con un altro aspetto dell’installazione e attivazione dei plugin, vale
a dire l’aggiunta del loro nome ai menu del backend di WordPress, generalmente come
voce addizionale nel menu Impostazioni o Strumenti, oppure come nuova voce
principale nella stessa barra laterale dell’area amministrativa del CMS.
In questo caso, come si vede dall’immagine, è il menu Impostazioni a contenere la
nuova voce Responsive Lightbox, cliccando sulla quale si accede alla schermata di
configurazione del plugin (Figura 2.37) in cui è possibile personalizzare ogni aspetto del
suo funzionamento.

Figura 2.37 – La schermata delle impostazioni del plugin Responsive Lightbox, con le
due schede di impostazioni generali, General settings, e specifiche per l’effetto, Lightbox
settings; nella parte bassa troverete come sempre un pulsante da utilizzare per confermare
le impostazioni modificate, Salva le modifiche, affiancato, in questo caso, da un altro
pulsante, Reset to defaults, che ripristina quelle originali.
Il plugin, in realtà, come quasi tutti quelli che aggiungono l’effetto lightbox alle immagini,
funziona perfettamente anche senza alcuna impostazione, ma potete provare a esplorare le
diverse possibilità se lo desiderate (una trattazione della pagina di configurazione del
plugin richiederebbe troppo spazio ed esula dalle finalità di questo capitolo introduttivo,
sarà quindi eventualmente approfondita sul blog ufficiale del libro: wpaz.it). In ogni caso
noterete, una volta che il plugin è attivato, come cliccando sulle immagini del sito sarà ora
visualizzata una finestra che mostra, sullo sfondo nero, la versione originale
dell’immagine e alcuni pulsanti per la navigazione, nel caso vi siano altre immagini sulla
stessa pagina, e per la chiusura di questa finestra aggiuntiva (Figura 2.38).

Figura 2.38 – La finestra nera che compare e si sovrappone al contenuto della pagina o
dell’articolo quando si clicca su un’immagine dopo avere attivato il plugin Responsive
Lightbox; si noti a sinistra il pulsante di chiusura a forma di “X” e, a destra, i due pulsanti
di navigazione.
È importante, infine, menzionare in questo paragrafo le cosiddette “immagini in
evidenza”, che sono gestite dall’apposito pannello Immagine in evidenza posto
generalmente in basso a destra nella schermata di editing di pagine e articoli (Figura 2.39):
usando il link Imposta l’immagine in evidenza presente in questo pannello potrete
scegliere o caricare, se non ancora presente nella libreria Media, un’immagine che sarà
associata al contenuto e potrà essere usata dal tema come una miniatura che accompagna o
rappresenta il contenuto stesso in alcune forme di visualizzazione dei contenuti
raggruppati, per esempio gli articoli più recenti nel caso dei blog (Figura 2.40).
Figura 2.39 – Il pannello con il link per inserire o sostituire l’immagine in evidenza
associata a una pagina o articolo.
Una volta che avrete cliccato su Imposta l’immagine in evidenza (Figura 2.39) si aprirà il
solito pannello della libreria Media e potrete selezionare l’immagine desiderata, o
caricarla contestualmente, cliccando infine sul pulsante Imposta l’immagine in evidenza,
per confermare l’operazione e veder comparire l’immagine scelta all’interno del pannello
stesso. Nel caso voleste sostituirla vi basterà cliccare sul link nel pannello, che nel
frattempo sarà diventato Rimuovi immagine in evidenza, per eliminare quella presente e
ripetere l’operazione per inserirne un’altra.
Figura 2.40 – Un esempio di come sono utilizzate graficamente le immagini in evidenza
associate agli articoli per la visualizzazione dei contenuti sulla home del sito di
Numerologica.it (wpaz.it/988).
Con questa nota finale chiudiamo il paragrafo riguardante le immagini, anche se si
potrebbe, come per ogni aspetto di WordPress, riempire pagine su pagine di
approfondimento che preferiamo lasciare al blog wpaz.it in modo da offrire anche
l’interazione che può dare maggiore spazio ai lettori e alle loro domande e suggerimenti.
2.9 Video
Nei contenuti di WordPress è possibile includere anche dei video, naturalmente e, come
abbiamo già visto, esistono addirittura dei formati di articolo, i post, dedicati a questo tipo
di contenuto.
A differenza delle immagini, tuttavia, nel caso dei video non è consigliabile caricare i
relativi file direttamente nella libreria Media, dal momento che oltre a occupare spazio
eccessivo sull’hosting andrebbero ad appesantire la navigazione, consumando banda e
influendo così sulla velocità di fruizione del sito.

nota
La riproduzione di un video all’interno di un sito Web non avviene quasi mai da un
file caricato sullo spazio Web del sito stesso, per evitare che il traffico dati generato
dalla sua visualizzazione provochi un eccesso nel consumo di banda e un intervento
da parte del provider di hosting, che deve tutelare gli altri clienti ospitati sullo stesso
server ed evitare una penalizzazione nella velocità dei loro siti.
I video, infatti, vengono di solito caricati prima su una piattaforma come YouTube o Vimeo
e poi inseriti usando l’indirizzo o il codice forniti dalla piattaforma stessa, come vedremo
fra poco. Naturalmente, la creazione dei video e il loro caricamento sulle già citate
piattaforme è un argomento che richiederebbe una trattazione separata ed esula dalle
finalità del presente volume, ma si tratta di operazioni abbastanza semplici e comunque
ben documentate, con guide facili da reperire sui rispettivi siti e altrove nel Web.
Per l’inserimento di video nei contenuti di un sito o di un blog creato con WordPress
avete, in sostanza, due possibilità: usare il semplice link al video oppure incorporare il
codice. Nel secondo caso, come vedremo fra poco, avrete maggior controllo sul formato
del video stesso.
Se il video sarà inserito in un articolo, inoltre, potrete utilizzare il formato Video
dedicato, selezionandolo dal pannello Formato (Figura 2.41) oppure inserire
semplicemente il video all’interno del contenuto; se invece si trattasse di una pagina,
potrete usare solo la seconda modalità.

Figura 2.41 – Un link a un video di YouTube inserito in un articolo per il quale si è scelto
il formato Video; si noti la selezione di questa voce nel pannello Formato a destra.
In entrambi i casi dovete prima di tutto procurarvi il link al video così come viene fornito
dalla piattaforma, per esempio su YouTube basta cliccare sul pulsante Condividi presente
sotto il video (Figura 2.42) e copiare l’URL visualizzato nel campo che compare
all’interno della scheda predefinita (Condividi questo video) sotto le icone social.
Figura 2.42 – La visualizzazione del link da incollare in WordPress per inserire un video
di YouTube; si noti il pulsante Condividi in alto e le due schede Condividi questo video e
Codice da incorporare in basso.
Una volta copiato l’indirizzo del video, basterà inserirlo nel contenuto dell’articolo o della
pagina, ma sarà necessario usare i pulsanti Anteprima o Visualizza per vederlo così come
apparirà nel frontend del sito, cioè come lo vedranno i visitatori nel backend, vale a dire
nella modalità di modifica del contenuto, dove viene mostrato sotto forma di semplice
link, che WordPress si occuperà di trasformare nel video vero e proprio quando il
contenuto sarà visualizzato al pubblico.
La seconda modalità di inserimento dei video prevede l’uso del codice da “incorporare”
(“embed” in inglese) e, se da una parte risulta un tantino più complessa, offre, come
dicevamo, un maggior controllo sul formato e sul posizionamento del video stesso.
Figura 2.43 – Il codice del video YouTube da utilizzare quando si desidera avere un
maggiore controllo sul formato del video e sul suo posizionamento, si noti la seconda
scheda Codice da incorporare selezionata e, in basso, il menu per la scelta delle
Dimensioni video e alcune opzioni aggiuntive.
Per utilizzare questa modalità di inserimento da YouTube occorre, dopo aver selezionato
Condividi, cliccare sulla scheda Codice da incorporare e copiare il codice visualizzato
(Figura 2.43) dopo avere eventualmente selezionato o personalizzato le dimensioni del
video.

Figura 2.44 – Il codice del video YouTube una volta inserito nel contenuto di WordPress,
si noti la modalità Testo selezionata al posto di quella Visuale.
Per utilizzare il codice nel contenuto WordPress che state creando o modificando, tuttavia,
dovrete passare dalla modalità Visuale alla modalità Testo cliccando sull’omonima scheda
in alto a destra nella parte alta dell’area di editing (Figura 2.44), incollando il codice e poi
tornando alla modalità Visuale per proseguire il lavoro con il resto del contenuto.

nota
Una volta incorporato un codice all’interno del contenuto in modalità Testo, tornando
alla modalità Visuale viene visualizzato semplicemente un riquadro: è consigliabile
non intervenire mai su questo elemento in modalità Visuale, ma piuttosto tornare alla
modalità Testo ed effettuare le eventuali modifiche, per evitare di danneggiare il
codice originale.
Tornando alla modalità Visuale vi ritroverete con un semplice riquadro e, per visualizzare
il video, sarà necessario ancora una volta usare i pulsanti Anteprima o Visualizza.
Tornando alla modalità Testo in fase di editing potrete intervenire con ulteriori modifiche
al video (per es. cambiando le dimensioni direttamente nel codice) e aggiungere eventuale
altro codice HTML, per esempio includere il codice del video in un tag <div> per centrare
il video nella pagina, come si vede nell’esempio che segue:
<div align=”center”><iframe src=”//www.youtube.com/embed/h4T1MQGTV9U?rel=0” width=”420” height=”315”
frameborder=”0” allowfullscreen=”allowfullscreen”>

</iframe></div>

Il tipo di modifica, centratura con <div>, è valido anche per i video ospitati sulla
piattaforma Vimeo, che possono essere inseriti solo usando il codice e oppure l’URL della
pagina in cui compare il video stesso e non il link di condivisione come abbiamo visto per
YouTube nel primo esempio.
Come per le immagini, naturalmente, anche per i video è possibile utilizzare dei plugin
aggiungendo funzionalità specifiche a WordPress, in questo caso un plugin molto popolare
è Viper’s Video Quicktags, che potrete installare e attivare usando la stessa procedura già
illustrata per il plugin Lightbox nel paragrafo precedente.

Figura 2.45 – La schermata principale delle impostazioni del plugin Viper’s Video
Quicktags, si notino i diversi formati video con l’opzione per visualizzare la relativa icona
negli strumenti di editing di WordPress e impostare le dimensioni predefinite per ogni
formato e in alto i link per accedere alle schermate delle Impostazioni aggiuntive e a
quelle specifiche per alcuni formati.
Uno dei vantaggi nell’utilizzo di un plugin di questo tipo è di poter definire le dimensioni
dei video tanto in maniera predefinita quanto direttamente in fase di inserimento, senza
che sia necessario ricorrere al codice incorporato e accedere alla modalità di editing Testo.
Il plugin Viper’s Video Quicktags, infatti, oltre ad offrire un pannello di impostazioni
molto intuitivo (Figura 2.45) aggiunge agli strumenti di editing dei contenuti di WordPress
una serie di nuove icone dedicate proprio ai formati video, primi fra tutti i già visti
YouTube e Vimeo.

Figura 2.46 – L’inserimento di un video di Vimeo per mezzo degli strumenti dedicati di
Viper’s Video Quicktags, si notino le nuove icone dei vari formati video aggiunte al
pannello dopo l’installazione e le opzioni presenti nel pannello che compare cliccando su
di esse.
Cliccando su uno di questi pulsanti aggiuntivi si aprirà un pannello in cui potrete inserire il
link al video e definire, se lo desiderate, delle dimensioni personalizzate diverse da quelle
predefinite o configurate nel pannello delle opzioni del plugin. In quest’ultimo caso
potrete, inoltre, definire anche la centratura automatica del video e altre caratteristiche
estetiche o funzionali. Come scoprirete subito, il video viene in questo caso rappresentato
da uno shortcode che compare direttamente nella modalità di editing Visuale. Il codice
sarà come sempre tradotto da WordPress, con l’aiuto del plugin, nella visualizzazione del
video relativo, quando il contenuto sarà visualizzato dai visitatori del sito.
Esistono ovviamente innumerevoli altri plugin gratuiti o commerciali per la gestione dei
video in WordPress. Per quanto riguarda i primi potrete individuarli e scoprirne le
caratteristiche attraverso il sistema di ricerca interno dei plugin che avete già usato nel
paragrafo precedente, utilizzando per esempio parole chiave come video oppure specifiche
come youtube o vimeo. Per i plugin commerciali/professionali, invece, potrete servirvi di
una ricerca combinata come video wordpress sul popolare sito di CodeCanyon (per un
esempio si veda wpaz.it/018).
Va fatta un’ultima considerazione riguardo alla creazione delle cosiddette “playlist”,
cioè gruppi di video visualizzati insieme, come abbiamo già fatto per le immagini nel caso
delle gallerie. Questo genere di elementi, che ritroveremo nel prossimo paragrafo a
proposito dei file audio, può essere creato solo da video caricati direttamente nella libreria
Media, quindi possono rivelarsi utili solo a chi ha la possibilità di gestire dei video caricati
sul proprio hosting, un’eventualità che come abbiamo visto è abbastanza rara,
considerando le caratteristiche di uno spazio Web idoneo e i relativi costi.
In ogni caso la procedura per creare playlist di video è identica a quella già vista per le
gallerie di immagini, con la differenza che vi ritroverete, se avete dei video caricati nella
libreria Media, con un link Crea una playlist video in aggiunta al link Crea galleria
(Figura 2.47), e potrete definire così quali video inserire nella playlist e come organizzarli
per la visualizzazione.

Figura 2.47 – Il comando Crea una playlist video, che compare sotto Crea galleria non
appena si caricano dei video nella libreria Media di WordPress; si notino i due video
selezionati di cui il primo ancora in fase di upload.
Una volta inserita, la playlist video sarà visualizzata con una finestra principale in cui è
visualizzato il primo video dell’elenco, seguita dall’elenco stesso che sarà cliccabile
dall’utente e gli permetterà di selezionare gli altri video presenti nella playlist, regolare il
volume, navigare all’interno del video in esecuzione o visualizzarlo a pieno schermo
(Figura 2.48). Come nel caso delle gallerie di immagini, passando dalla modalità Visuale a
quella Testo potrete vedere lo shortcode creato dal comando Crea una playlist video con i
numeri di identificazione, “ID”, dei video contenuti nella playlist, nella forma [playlist
type=”video” ids=”xxx,yyy,zzz”].
Figura 2.48 – Un esempio di come sono visualizzate le playlist video in un articolo di
WordPress; si noti l’elenco numerato e, a destra, le info sulla durata di ognuno dei video
presenti.
2.10 Audio
Come per il video, anche per l’audio avete a disposizione due principali modalità di
inserimento nelle pagine e negli articoli del vostro sito: potete farlo inserendo un codice
fornito da una piattaforma dedicata oppure caricando voi stessi i file audio nella libreria
Media di WordPress.
In entrambi i casi, la procedura è molto simile a quanto già visto per i video, tanto per
l’inserimento di singoli audio quanto per eventuali playlist, che come vedremo sono
previste anche per questo formato.
Quando si tratta di inserire un audio proveniente da una piattaforma dedicata dovete,
come già fatto con YouTube, individuare il link o il pulsante di condivisione associato al
brano che volete incorporare nel vostro contenuto WordPress. Per fare un esempio ci
serviremo di SoundCloud.com, che come altre piattaforme dello stesso tipo permette
l’ascolto e la condivisione di singoli brani o di playlist create da noi stessi.
Figura 2.49 – Una serie di brani visualizzati sulla piattaforma SoundCloud, si notino i
quattro pulsanti presenti sotto ogni singolo brano, dei quali l’ultimo (Share) permette di
ottenere il codice da incorporare nel contenuto in WordPress.
Cliccando sul pulsante di condivisione otterrete come sempre la visualizzazione di una
serie di opzioni, fra cui quella denominata Embed, scegliendo la quale sarà visualizzato il
codice da incorporare che dovrete copiare e incollare nel contenuto del vostro articolo o
pagina, proprio come abbiamo visto per il codice di YouTube nel paragrafo precedente.
Ricordatevi di effettuare quest’operazione mentre siete in modalità Testo e non Visuale.
Anche nel caso di SoundCloud sono disponibili, nella scheda Embed, delle opzioni
aggiuntive che permettono di definire l’estetica dell’elemento da incorporare (Figura
2.50): prima fra tutte la scelta del riquadro contenente il player audio e l’eventuale
immagine di copertina, e cliccando sul link More options, anche dimensioni, colori ed
eventuale riproduzione automatica, in genere sconsigliata.
Figura 2.50 – Il codice da incorporare per i brani di SoundCloud presente nella scheda
Embed e, sotto, il link che mostra le opzioni aggiuntive e il nuovo codice che le contiene;
si notino in alto le due diverse modalità di visualizzazione grafica della miniatura per il
brano.
Creando delle playlist sulla piattaforma, queste potranno essere a loro volta condivise con
la stessa modalità, creando la visualizzazione dell’intero elenco di brani invece che di uno
singolo (Figura 2.51).
Figura 2.51 – Una playlist di SoundCloud incorporata con la stessa modalità di un brano
singolo; si notino le tracce audio e le relative informazioni.
Come nel caso dei video, anche per l’audio l’utilizzo di una piattaforma esterna si traduce
in un minore assorbimento di risorse per il proprio hosting nel momento in cui gli utenti
del sito decideranno di riprodurre i brani ospitati. Salvo che non ci siano particolari motivi
che impediscano la pubblicazione dei brani su piattaforme come SoundCloud e a patto che
si abbiano a disposizione risorse di spazio e banda per l’hosting sufficienti a gestire il
traffico dati generato dalla riproduzione di audio da parte di più utenti anche in
contemporanea, la soluzione di caricare la propria musica su una piattaforma dedicata e
collaudata, e renderla disponibile sul sito attraverso il relativo codice di incorporamento,
rimane quella più saggia ed efficace.

Figura 2.52 – Il comando Crea playlist audio, che compare quando nella libreria Media
avrete iniziato a caricare i file dei brani audio, permette di comporre delle playlist così
come fate con le immagini per le gallerie; si notino a destra i campi in cui inserire i dati
concernenti i singoli brani.
Qualora, invece, per un qualsiasi motivo, decidiate di caricare direttamente i brani sul sito,
cercate di trovare un buon compromesso fra qualità e ottimizzazione dell’audio e usate il
formato MP3. La procedura di caricamento è uguale a quella già vista per le immagini e
sarà possibile inserire in un contenuto sia i singoli brani sia gruppi di essi sotto forma di
playlist, usando il comando Crea playlist audio e procedendo come abbiamo già visto per
le gallerie di immagini e le playlist video (Figura 2.52).
Ai singoli brani potranno essere assegnati vari attributi all’interno della libreria Media
usando la stessa opzione Modifica già utilizzata per le immagini: nel caso dell’audio sarà
possibile assegnare un’immagine in evidenza, che sarà poi visualizzata, selezionando la
relativa opzione, anche nelle playlist, una didascalia e i metadati relativi all’autore e
all’album. Il risultato, come si vede nell’immagine, è molto professionale ed efficace.

Figura 2.53 – Un esempio di playlist contenente dei brani per i quali sono stati assegnati
degli attributi; si noti l’immagine in evidenza, la didascalia associata al numero del brano
nella lista che ne sostituisce il titolo e le informazioni su autore e album.
Nel caso decidiate di caricare dei brani direttamente nella libreria Media di WordPress per
inserirli poi nel contenuto del sito, esercitatevi a configurarne gli attributi e verificare di
volta in volta i risultati, in modo da familiarizzare con ogni elemento. Ricordate, infine,
che anche nel caso dei singoli brani e delle playlist che inserirete dalla libreria Media, in
modalità Testo sarà possibile visualizzare lo shortcode che crea l’anteprima visualizzata
nell’editor e nel frontend del sito.
2.11 Altri formati di file
Così come potete caricare immagini, video e audio nella libreria Media di WordPress, vi è
permesso caricare altri tipi di file, che nella maggior parte dei casi si possono ricondurre a
due categorie principali: documenti sotto forma di archivio compresso e documenti PDF.
Nel primo caso potete includere anche i PDF, soprattutto se non volete che il loro
contenuto sia indicizzato dai motori insieme con quello delle pagine e degli articoli del
sito, essendo così visibile anche nei risultati delle ricerche), sempre che non desideriate
creare una visualizzazione del documento piuttosto che limitare l’azione del pubblico al
solo download del file. Ma procediamo per gradi, partendo dai documenti in genere
inseriti nella libreria sotto forma di file compressi.
Prima di tutto è importante comprimere l’eventuale documento o cartella da pubblicare
usando il formato ZIP, essendo quest’ultimo quello più popolare e facilmente gestibile da
qualunque sistema operativo. Evitate quindi altri formati come RAR, 7ZIP o simili.
Figura 2.54 – Diversi file caricati nella libreria Media; si noti come soltanto le icone dei
file immagine siano associate alla miniatura corrispondente, mentre tutte le altre hanno
una miniatura generica associata al tipo di file.
Una volta caricato nella libreria Media, il file potrà essere inserito in qualsiasi contenuto e
sarà visualizzato come semplice link, cliccando sul quale gli utenti potranno scaricarlo sul
proprio computer.
Qualora voleste associare il file a un’immagine, cliccando sulla quale si attivi il
download, dovrete procedere con i passaggi seguenti:

• caricamento del file compresso nella libreria Media


come sempre basta selezionare Libreria dal menu Media del pannello di
amministrazione e trascinare il file dal vostro computer alla finestra della libreria,
piuttosto che cliccare su Aggiungi nuovo per poi procedere allo stesso modo oppure
selezionare il file dopo aver cliccato sul pulsante Selezionare i file.
• copiare il link del file
cliccando su Modifica o Visualizza sotto il nome del file nella libreria potrete
ottenere il suo link, nel primo caso lo copierete dal campo URL del file che compare
nel pannello a destra avendo cura di selezionarlo nella sua interezza, nel secondo sarà
visualizzato in alto come contenuto della finestra; in entrambi i casi userete
naturalmente il tasto destro del mouse scegliendo rispettivamente Copia oppure
Copia indirizzo link.
• inserire l’immagine associata nel contenuto
inserite l’immagine all’interno dell’articolo o della pagina con la procedura già
descritta nel paragrafo delle immagini e cliccate su di essa per visualizzare l’icona
della matita, cliccando poi su quest’ultima per accedere alla sua schermata di
modifica.
• associate il link del file all’immagine
nella schermata di modifica dell’immagine, selezionate nelle IMPOSTAZIONI DI
VISUALIZZAZIONE la voce URL personalizzata dal menu associato all’area
Link a e incollate nel campo di testo il link del file (Figura 2.55).

Figura 2.55 – La finestra IMPOSTAZIONI DI VISUALIZZAZIONE con la voce Link


a e l’opzione URL personalizzata del relativo menu; si noti il percorso del file all’interno
del link incollato nel campo sottostante.
In alcuni casi potrà capitarvi, invece, di voler consentire al pubblico la consultazione di un
documento direttamente all’interno del contenuto di una pagina o di un articolo: per
questo tipo di esigenza il popolare formato PDF è la scelta ideale, poiché è possibile
utilizzare diverse modalità di visualizzazione sicuramente molto efficaci e funzionali, ma
come vedremo fra poco non siete limitati solo a questo formato.
L’utilizzo di documenti PDF all’interno di WordPress può essere gestito in modo simile
a quello dei video o degli audio esterni, vale a dire poggiandosi a una piattaforma
dedicata: esistono vari servizi che permettono la pubblicazione di documenti PDF, come
Issuu.com, Scribd.com oppure Slideshare.com, che sono più o meno simili e mettono a
disposizione, come nel caso delle piattaforme per video o audio, il codice da incorporare
nei contenuti del sito incollandolo mentre siamo in modalità Testo (Figura 2.56).

nota
Spesso occorre registrarsi prima di poter caricare dei documenti su una di queste
piattaforme e le regole sono abbastanza simili tanto per la registrazione quanto per il
caricamento dei documenti e l’estrazione del codice da incorporare, ma si tratta in
ogni caso di un approfondimento che esula dalle finalità di questo volume e le cui
informazioni sono facilmente reperibili su Web.
Figura 2.56 – La schermata che Issuu.com mette a disposizione quando si clicca sul solito
link Share associato a un documento PDF e successivamente l’altrettanto familiare link
Embed, si noti l’opzione Use Tumblr or other blog selezionata per ottenere il formato
adatto e le diverse opzioni di visualizzazione selezionabili con, in basso, il codice da
copiare e incollare nella pagina o nell’articolo di WordPress usando la modalità Testo.
Quando richiedete il codice da copiare sulle diverse piattaforme, osservate sempre se è
presente un’opzione che genera un formato specificamente adatto a WordPress e altri blog:
nel caso di Issuu.com, per esempio, l’opzione si chiama Use on Tumblr or other blog
(Figura 2.56). Il risultato dell’utilizzo di questo codice è la creazione di una finestra,
all’interno della pagina o dell’articolo, in cui è possibile “sfogliare” il documento, spesso
con opzioni come la visualizzazione a schermo intero o altro, oppure risalire alla
piattaforma che lo ospita per mezzo di specifici link.
Figura 2.57 – La miniatura di una pubblicazione di Issuu.com così come appare una volta
incorporato il codice in WordPress, si notino i pulsanti laterali per sfogliare il documento
nelle sue dimensioni ridotte e, al centro, il pulsante Click to read, che visualizza invece il
documento a tutto schermo, aggiungendo diverse altre icone di navigazione interattiva.
Come nel caso dei video incorporati da YouTube o Vimeo, anche per i PDF ospitati sulle
piattaforme dedicate come Issuu sarà visualizzato un semplice elemento grigio passando
alla modalità Visuale di creazione e modifica dei contenuti in WordPress, quindi sarà
necessario fare sempre riferimento al codice nella modalità Testo per eventuali modifiche
o sostituzioni.
Nella sconfinata varietà di plugin disponibili per WordPress, esistono naturalmente
anche quelli che permettono di svincolarsi dalle piattaforme appena descritte e
visualizzare una versione sfogliabile di un PDF o di un altro documento (per es. di Word)
sul vostro sito dopo averlo caricato nella libreria Media: fra questi il più versatile è
sicuramente Google Doc Embedder, che utilizza il codice della famosa piattaforma di
gestione documenti di Google per visualizzare i diversi formati compatibili, fra cui il PDF,
e mette a disposizione numerose possibilità di configurazione (Figura 2.58), che possono
anche essere ignorate. Una volta installato, infatti, il plugin aggiunge agli strumenti di
editing di WordPress una nuova icona, cliccando sulla quale viene visualizzata una
finestra in cui basta inserire l’URL del file già caricato in precedenza nella libreria Media
e specificare eventualmente le sue dimensioni e se si desidera che sia visualizzato anche il
link per il download.
Figura 2.58 – La schermata principale delle impostazioni per il plugin Google Doc
Embedder; si notino in altro le altre schede e più sotto il menu con l’opzione Enhanced
Viewer, che aggiunge ulteriori opzioni di visualizzazione e gestione dei documenti.
Un’alternativa più leggera a Google Doc Embedder, e specifica per il formato PDF, è il
plugin RV Embed PDF, che una volta installato converte automaticamente qualsiasi
documento PDF inserito dalla libreria Media nel contenuto e lo trasforma in un elemento,
rappresentato in modalità Visuale con il solito riquadro grigio e in modalità Testo con uno
shortcode, che sarà poi mostrato usando lo standard di Google Docs nella pagina
visualizzata dagli utenti, permettendo a questi ultimi di consultarlo, ma senza il link per
salvarlo, che in questo caso dovrete inserire voi manualmente.

nota
Ogni plugin è contraddistinto dalle sue peculiari caratteristiche e norme di utilizzo e,
come spesso accade in una guida come questa (che ha finalità più generali), non c’è
purtroppo lo spazio per approfondire argomenti tanto specifici. L’invito è di
consultare gli articoli che nel tempo saranno pubblicati sul sito associato a questo
libro (wpaz.it) utilizzando la pagina dei contatti per richiedere eventuali
approfondimenti o informazioni specifiche su un argomento trattato nel volume.
3
Struttura e layout
Ora che abbiamo visto come inserire i contenuti nel sito, è arrivato il momento di
esplorarne la “forma”, vale a dire la struttura e lo stile grafico, cioè l’impaginazione,
spesso definita “layout” dal suo equivalente in inglese.
Come abbiamo già accennato all’inizio di questo volume, la sezione del pannello di
amministrazione di WordPress, che contiene tutte le opzioni relative al design del sito, si
chiama Aspetto: sarà questa l’area esaminata nel capitolo che segue, prima di mettere in
pratica tutte le informazioni grazie alla realizzazione di un semplice sito Web nel capitolo
successivo.
Esamineremo ogni voce dell’area Aspetto in un paragrafo separato, con uno spazio più
ampio ai temi, che saranno trattati per primi, e tenendo conto che l’area Menu è stata già
ampiamente trattata nel quarto paragrafo del capitolo precedente.
L’applicazione pratica di quanto descritto in questi primi tre capitoli, e
l’approfondimento tecnico che gli sarà dedicato nel settimo capitolo, vi permetterà di
avere un quadro sempre più chiaro di WordPress e delle sue funzionalità.
3.1 Anatomia di un tema
Che si tratti di temi gratuiti o commerciali, per potersi orientare nella ricerca e nella scelta
di quello più adatto al vostro progetto Web e impiegarlo poi al meglio, è importante
familiarizzare con i diversi elementi del layout, cioè la struttura della pagina Web così
come è stata progettata nel tema.
Figura 3.1 – Lo schema semplificato di un tema di WordPress con le sue tre sezioni
principali, testata, corpo centrale e piè di pagina, applicato al tema commerciale Evolution
(wpaz.it/025) di Elegant Themes; si noti come l’area centrale sia in realtà molto più
complessa in un tema professionale.
Le aree che formano il layout di un tema sono fondamentalmente riconducibili a tre
elementi (Figura 3.1):
• Testata (header)
la parte alta del tema, contiene in genere il logo e la barra di navigazione principale,
ma può ospitare anche altri elementi (per es. banner o aree di navigazione
aggiuntive).
• corpo centrale
nei temi tradizionali e in quasi tutti quelli gratuiti, è formato da un elemento
principale e da uno, più stretto, laterale, la cosiddetta “sidebar”, traducibile con
“barra laterale”, posta quasi sempre a destra, che ospita i “widget”, gli elementi
modulari di cui parleremo più avanti nel capitolo; in alcuni casi possono esserci
anche due o persino tre barre laterali, ma generalmente nella home dei temi
professionali queste tendono a sparire, lasciando il posto a un corpo centrale più
complesso e articolato, composto da vari elementi affiancati e sovrapposti. Nella
parte alta del corpo centrale è spesso presente lo “slider”, un elemento che visualizza
i contenuti in evidenza sotto forma di presentazione composta da immagini e testi.
• piè di pagina (footer)
generalmente composto da un’area dall’altezza ridotta che contiene informazioni
sullo sviluppatore, sul tema e/o sul soggetto del sito (per es. il nome dell’azienda).
Nei temi più evoluti può contenere un’area in grado di ospitare i widget.
La struttura del corpo centrale di un tema può variare in complessità e contenere vari
elementi che contribuiscono a rendere il tema più efficace tanto in estetica quanto in
funzionalità, migliorando l’impatto visuale e la comunicazione dei contenuti del sito.
Questi elementi saranno gestiti da specifiche opzioni che ritroviamo nel backend di
WordPress, come vedremo nelle prossime pagine, e che possono essere progettate
diversamente da tema a tema. Nel prossimo capitolo potrete familiarizzare con i vari
elementi, per il momento ci limitiamo a trattare l’argomento dei temi in senso più ampio,
esaminando quelli gratuiti e quelli commerciali rispettivamente nei prossimi due paragrafi.
Nel settimo capitolo, dedicato alla manutenzione e sicurezza, daremo uno sguardo
anche a come sono strutturate le cartelle dei temi, oltre che altri elementi fra cui i plugin
all’interno della cartella di WordPress, ma avremo modo di dare un primo sguardo ai file
che compongono un tema anche più avanti in questo capitolo, quando parleremo della
personalizzazione.
3.2 Temi gratuiti
La prima area della sezione Aspetto è accessibile come sotto-menu alla voce Temi oppure
cliccando direttamente sulla voce principale, e visualizza la schermata di riepilogo dei
temi già installati in WordPress (Figura 3.2).

nota
Un tema definisce sia la struttura del sito, vale a dire la sua impaginazione, sia lo stile
grafico di ognuno degli elementi che la compongono. Come vedremo fra poco, ogni
tema è formato da un insieme di sotto-cartelle e singoli file raccolti all’interno di una
cartella principale, e nell’installazione di WordPress sono inclusi alcuni temi
predefiniti e pronti per l’uso.
Figura 3.2 – La schermata con i temi installati in WordPress; si noti quello attivo posto in
alto a sinistra con in evidenza il pulsante di personalizzazione e, in basso, il riquadro con il
segno + che si ricollega al comando Aggiungi nuovo visibile in alto e consente di inserire
un nuovo tema seguendo diverse modalità.
Secondo la versione di WordPress che state utilizzando, potreste trovare, visualizzati in
quest’area sotto forma di miniature di anteprima, nuovi temi in aggiunta a quelli visibili
nell’immagine: periodicamente, infatti, gli sviluppatori aggiungono un tema in
corrispondenza della pubblicazione di una nuova versione del CMS, assegnandogli un
nome con numero progressivo (Twenty Eleven, Twenty Twelve e così via). Il nome di ogni
tema è riportato chiaramente nella parte inferiore, sotto la miniatura della rispettiva home
page.
Il tema attivo è sempre il primo visibile in alto a sinistra ed è, infatti, l’unico a
visualizzare il pulsante Personalizza, mentre gli altri temi mostrano, al passaggio del
puntatore del mouse, i due pulsanti Attivare e Anteprima.
Sempre al passaggio del puntatore sulla miniatura di ogni tema viene visualizzato il
pulsante Dettagli del tema, che apre una finestra in cui troverete informazioni sul tema
assieme a un’anteprima più grande (Figura 3.2): sotto ogni descrizione noterete un elenco
di tag che, come vedremo fra poco, permette di “classificare” il tema e aiuta così a
individuare nuovi temi con particolari caratteristiche, fra quelli gratuiti disponibili sul sito
ufficiale di WordPress.org.

Figura 3.3 – La finestra che si apre cliccando sul pulsante Dettagli del tema sulle
miniature visualizzate nella sezione Temi di WordPress; si notino i tag sotto la descrizione
e, in basso, i pulsanti, che in questo caso sono specifici per il tema attivo.
Nella finestra dei dettagli trovate, inoltre, due pulsanti di navigazione in alto a sinistra, con
cui esplorare gli altri temi installati e, in basso, altri pulsanti che, nel caso del tema attivo,
portano alle possibilità di personalizzazione, mentre per gli altri temi riproducono i due
comandi Attiva e Anteprima già visti sotto le miniature della schermata Temi. Un altro
pulsante, in basso a destra, permette di rimuovere il tema, ovvero disinstallarlo, quindi va
utilizzato con attenzione.
Prima di esaminare in dettaglio le opzioni di personalizzazione di un tema, ci
soffermeremo sulla possibilità di cercare, fra i temi gratuiti disponibili su WordPress.org,
quelli che possono rivelarsi più adatti a un particolare progetto di sito.

nota
Inizialmente è facile lasciarsi prendere la mano dall’abbondanza di temi disponibili
su WordPress.org, tuttavia bisogna tener presente che non tutti possiedono le
caratteristiche adatte a permettere lo sviluppo di un tema professionale. È importante,
quindi, farsi soprattutto un’idea di come orientarsi nella scelta di un tema gratuito, ma
anche verso l’acquisto e l’utilizzo di temi professionali, per quei progetti Web che
richiedono una qualità e un’efficacia maggiori.
Cliccando sul riquadro vuoto con il segno + o sul pulsante Aggiungi nuovo presente in
alto a sinistra nella pagina Temi del backend, raggiungerete una nuova schermata
Aggiungi tema (Figura 3.4), dove troverete tre diversi filtri di visualizzazione e un
pulsante Filtro funzionalità, che ora andremo a esaminare.

Figura 3.4 – La schermata Aggiungi tema, che si raggiunge cliccando sul pulsante
Aggiungi nuovo o sul riquadro vuoto con il segno + presenti nella schermata Temi di
WordPress; si notino in alto i filtri per la navigazione fra i temi e in particolare la quarta
voce Filtro funzionalità, che permette di impostare caratteristiche più precise nella
ricerca.
La prima scheda di questa nuova schermata visualizza i temi In evidenza, il cui numero è
riportato in alto a sinistra: si tratta di temi dall’aspetto e dalle caratteristiche professionali,
spesso pubblicati in forma gratuita da sviluppatori che di solito commercializzano i loro
temi attraverso i propri siti, quindi altamente consigliati anche per eventuali progetti Web
iniziali e prima di avvicinarsi ai temi commerciali, che esamineremo nelle prossime
pagine.

nota
Anche se i pulsanti “Dettagli & anteprima” e “Anteprima” presenti su ogni miniatura
permettono di aprire una schermata che mostra le informazioni sul tema e
un’anteprima dello stesso, quest’ultima è limitata (almeno fino al momento in cui
scriviamo) alla visualizzazione degli articoli nel classico formato blog, non essendo
possibile riprodurre la home page del tema selezionato, poiché, come vedremo, ogni
tema ha impostazioni diverse a riguardo e sarebbe impossibile attivarle in automatico
usando una configurazione “universale”.
La seconda scheda (Popolari) visualizza un numero maggiore di temi poiché sono
elencati quelli più scaricati e utilizzati dagli utenti e naturalmente i primi sono proprio
quelli predefiniti contenuti nell’installazione iniziale di WordPress, che come noterete
riportano la scritta Già installato sulla miniatura.
La terza schermata (Più nuovo) visualizza ovviamente i temi pubblicati di recente dagli
sviluppatori e anche in questo caso è possibile individuarne di interessanti e abbastanza
professionali.
Utilizzando la quarta voce del menu (Filtro funzionalità) sarà possibile visualizzare un
elenco di temi in base a un’ampia serie di caratteristiche, che abbiamo già visto nei tag
presenti sotto i dettagli di ogni tema, raggruppate nelle quattro categorie Colori, Layout,
Funzionalità e Soggetto. Sarebbe impossibile descrivere in dettaglio ognuna di queste
caratteristiche in ogni caso abbastanza intuitive, quindi come sempre l’invito è di
esplorarle sperimentando diverse combinazioni per scoprire quali sono i temi proposti per
ognuna di esse.
È importante menzionare, tuttavia, le tre opzioni Layout fisso, Layout fluido e
Responsive: le prime due determinano rispettivamente la capacità del tema di mantenere
delle dimensioni fisse o adattarsi alla larghezza dello schermo su cui è visualizzato, mentre
la terza si riferisce alla capacità di adattare il proprio layout ai dispositivi mobili,
modificandolo in modo dinamico per consentire la navigazione del sito anche sui piccoli
display degli smartphone.
I temi esplorabili da quest’area di WordPress sono, in sostanza, gli stessi che ritroviamo
nell’area del sito WordPress.org dedicata (wpaz.it/019), che rappresenta la fonte più sicura
per quanto riguarda i temi gratuiti.

nota
Quando si tratta di temi gratuiti provenienti da siti diversi da quello ufficiale
(wordpress.org), occorre essere molto cauti nel selezionare la fonte da cui vengono
scaricati, in quanto il loro codice potrebbe essere stato modificato per introdurre falle
nella sicurezza ed esporre così i siti che li utilizzano ad attacchi informatici
(l’argomento sarà trattato nel settimo capitolo e riguarda anche i temi commerciali
“piratati”, cioè ottenuti per vie traverse e tutt’altro che legali). Se possibile, scaricate
temi gratuiti solo dal sito ufficiale di WordPress oppure, al massimo, dai siti di
sviluppatori famosi che mettono a disposizione gratuitamente uno o più temi, come
vedremo più avanti.
L’installazione e conseguente attivazione di un tema è molto semplice, basta cliccare sul
pulsante Installa, che compare passando il puntatore del mouse sulla miniatura di
anteprima nella schermata Aggiungi tema, e, una volta che sarà visualizzato l’esito
dell’installazione, cliccare sul link Attivare visualizzato sotto i dettagli (Figura 3.5). Nel
caso si desideri attivare uno dei temi già installati, basterà invece cliccare sul pulsante
Attivare che compare passando il puntatore del mouse sulla sua miniatura nella schermata
Temi. I temi scaricati da siti Web, compresi quelli acquistati, che come i plugin si
presentano sotto forma di archivi compressi in formato ZIP, dovranno invece essere
installati usando il pulsante Carica tema visualizzato nella parte alta della schermata
Aggiungi tema, usando la procedura standard che prevede la selezione del file e il suo
caricamento. Dopodiché l’installazione ed eventuale attivazione sarà uguale a quanto
appena visto per i temi scelti direttamente dall’interno di WordPress.

Figura 3.5 – I dettagli con l’esito dell’installazione di un tema; si notino i link in basso fra
i quali è presente quello che permette di attivare immediatamente il tema appena
installato: Attivare.
3.3 Temi commerciali
Per quanto sia possibile sviluppare siti professionali anche usando temi gratuiti, arriverà
inevitabilmente il momento in cui vorrete spingervi un po’ oltre e acquistare un tema
commerciale o addirittura abbonarvi a un sito che vi permetta di scaricarne e utilizzarne
diversi a fronte di una quota annuale.
I motivi che possono spingere a utilizzare temi commerciali sono diversi, ma di solito si
possono ricondurre principalmente alla necessità di ottenere particolari caratteristiche
estetiche e funzionali, che a un certo punto risultano difficili o addirittura impossibili da
acquisire con l’uso di temi gratuiti, oltre che all’impossibilità di personalizzare i temi per
adattarli a specifiche esigenze, a meno di non essere abbastanza esperti di PHP e CSS.

nota
Spesso persino i temi gratuiti offerti dagli sviluppatori di temi commerciali hanno una
versione a pagamento, che permette di superare le limitazioni imposte a quella
gratuita. Lo sviluppo di un tema con caratteristiche professionali richiede tempo,
esperienza ed energie che difficilmente possono spingere il suo autore a distribuirlo
gratuitamente.
Il costo dei temi commerciali acquistati singolarmente può partire da poche decine di euro
e arrivare anche ai cento euro e oltre, ma considerato il valore di mercato dei siti che
permettono di sviluppare si tratta, tutto sommato, di un investimento ragionevole.
Acquistati sotto forma di abbonamento, invece, questi temi possono diventare molto
convenienti e il loro costo individuale può ridursi a una manciata di euro. Fra poco
esamineremo entrambe le possibilità, ma prima è importante capire quali sono le
caratteristiche di un tema professionale per scegliere con maggiore consapevolezza la
soluzione più adatta alle proprie esigenze:
• affidabilità della fonte
un tema professionale, sviluppato da un “developer” o da un team già affermato,
offre una garanzia di affidabilità nel tempo, soprattutto quando l’autore ha al suo
attivo altri temi; diversamente ci si potrebbe ritrovare con un tema il cui sviluppo sia
stato abbandonato e diventerebbe sempre meno utilizzabile (si veda il punto
successivo).
• frequenza degli aggiornamenti
con il rapido evolversi di WordPress e dei suoi componenti aggiuntivi, plugin e
widget, anche i temi richiedono aggiornamenti frequenti che permettano da una parte
di superare eventuali conflitti di codice e dall’altra di sfruttare le innovazioni
introdotte nel CMS.
• assistenza e documentazione
la serietà di chi sviluppa e commercializza temi professionali si vede anche
nell’assistenza che viene offerta a chi li acquista e utilizza, oltre che nella
documentazione a corredo dei temi stessi, sempre più necessaria, considerato come si
evolvono e diventano sempre più ricchi di funzionalità.
• layout “responsive” (ed eventualmente “retina ready”)
questo genere di temi si adatta perfettamente ai dispositivi mobili, compresi quelli
con display ad alta definizione.
• assortimento di template
i migliori temi professionali offrono un’ampia scelta di modelli per i diversi tipi di
pagine (home, blog, portfolio, ecc.).
• shortcode
sempre più temi professionali includono una serie di “shortcode” pronti per l’uso con
cui creare elementi grafici e strutturali anche complessi, dalle colonne multiple alle
sezioni a scomparsa e così via.
• font aggiuntivi
oltre al carattere predefinito per titoli e testo principale, i temi professionali mettono a
disposizione altri font fra cui scegliere.
• ottimizzazione SEO
nei temi professionali è possibile trovare delle impostazioni che aiutino a ottimizzare
il sito per i motori di ricerca, posizionando i relativi dati (che esamineremo nel sesto
capitolo) in un punto ottimale del codice.
Questi sono solo alcuni fra gli aspetti che contraddistinguono i temi commerciali, ma
come vedremo più avanti, ci sono casi in cui si va ben al di là di queste funzionalità di
base e diventa possibile adattare il tema a ogni tipo di esigenza, grazie a una serie di
opzioni che lo rendono flessibile e duttile.
nota
Può capitare di chiedersi se l’uso di temi già pronti possa portare a una proliferazione
di siti tutti uguali, ma si tratta di un mito ormai sfatato da tempo, soprattutto grazie
alla varietà di temi disponibili sul mercato, alla possibilità di personalizzazione di
molti di essi e, in definitiva, del ruolo che i contenuti hanno nel definire la personalità
di un sito, ancor prima del tema in cui vengono visualizzati.
La fonte più utilizzata da chi sviluppa siti Web per scegliere temi molto professionali è
sicuramente Theme Forest, che nella sua area dedicata a WordPress (wpaz.it/020) offre
una scelta davvero ampia di modelli grafici con diverse caratteristiche e prezzi: i temi più
recenti e popolari hanno prezzi che si aggirano intorno ai 40 euro o poco più, e fra questi
sono particolarmente degni di nota i temi cosiddetti “multi-purpose” che offrono
caratteristiche di flessibilità notevoli e consentono di realizzare siti con stili diversi,
usando lo stesso tema (Figura 3.6).

Figura 3.6 – La pagina del tema King Power su Theme Forest (wpaz.it/021), uno dei temi
cosiddetti “multi-purpose”; si noti il pulsante Live Preview, che permette di rappresentare
un’anteprima del tema in azione, con tutte le caratteristiche visualizzabili per mezzo del
menu del sito dimostrativo.

nota
I temi singoli acquistati su Theme Forest sono contraddistinti da una licenza mono-
uso, cioè possono essere utilizzati per un singolo progetto e richiedono, quindi, in
caso di ulteriore utilizzo su siti diversi, di rinnovarne l’acquisto allo stesso prezzo.
Ben diversa la licenza dei temi scaricabili dai siti che offrono forme di abbonamento
annuale, che possono invece essere usati più volte su siti diversi e persino dopo che
l’abbonamento è scaduto.
Tutti i temi di Theme Forest (wpaz.it/020) sono presentati in pagine individuali (Figura
3.6) che, oltre a contenere un’anteprima e numerose informazioni, offrono due pulsanti
che consentono rispettivamente di visionare il tema in azione (Live Preview) e alcune
immagini dello stesso (Screenshots). Nel primo caso i menu del sito che ospita la versione
dimostrativa del tema consentono di caricare e visionare i diversi template, layout e
shortcode disponibili insieme con altre caratteristiche.
L’alternativa all’acquisto di temi singoli può essere l’abbonamento a un sito che offra,
per un’unica quota annuale, in genere equivalente al costo di un solo tema come quelli
appena descritti, l’accesso a diversi temi già pronti (Figura 3.7) e a quelli che saranno poi
sviluppati nel corso dell’anno di registrazione: il vantaggio in questo caso non è solo
riferito al prezzo, ma anche alla licenza d’uso, giacché rispetto ai temi prima descritti,
utilizzabili su un unico sito, possono essere utilizzati tutte le volte che si desidera e anche
se non si decidesse di rinnovare l’abbonamento l’anno successivo.
Naturalmente è sempre utile e saggio rinnovare questo genere di abbonamenti, poiché
oltre ad avere ancora diritto all’assistenza, spesso utile per risolvere problemi tecnici legati
alla personalizzazione dei temi stessi, si potrà godere di tutti gli aggiornamenti dei temi
esistenti e ovviamente scaricare anche i nuovi temi sviluppati.

Figura 3.7 – Una parte della collezione di temi professionali di Elegant Themes
(wpaz.it/014), di cui fa parte il tema/builder Divi (wpaz.it/022), che sarà approfondito più
avanti nel capitolo e anche nella sezione dei progetti pratici.
Quasi tutti i siti che offrono collezioni di temi accessibili tramite abbonamento hanno al
loro attivo tanto temi di tipo generico, quanto temi per applicazioni più specifiche: e-
commerce, immobiliare, ristoranti e hotel, matrimoniali, musicali (Figura 3.8), ecc. senza
trascurare naturalmente i temi per blog, portfolio e web-magazine.

Figura 3.8 – Lovers (wpaz.it/023) è un tema “verticale” dedicato alla musica, incluso
nella collezione di Tesla Themes (wpaz.it/996); si noti il player audio presente nella home
page e le icone social sotto i profili degli artisti.
I temi dedicati a un settore specifico contengono spesso caratteristiche aggiuntive
progettate per il settore in cui rientrano: nei temi dedicati alla musica, per esempio, sono
disponibili elementi specifici per la riproduzione di musica e video, così come nel caso dei
temi per alberghi, per esempio, è possibile che sia incluso un modulo per le prenotazioni
già predisposto per l’inserimento visuale della data d’arrivo e di partenza (Figura 3.9).


Figura 3.9 – Il tema per hotel Santorini (wpaz.it/024) incluso nella raccolta di CSS Igniter
(wpaz.it/995) è dotato di un modulo per le prenotazioni con scelta della data d’arrivo e
partenza tramite calendario visuale.
I temi acquistati singolarmente e appartenenti a sviluppatori diversi, come quelli in vendita
su Theme Forest, sono, come si può intuire, progettati con pannelli di configurazione
diversi fra loro, il che costringe ogni volta a familiarizzare con le impostazioni specifiche
del tema scelto. Lo stesso vale per gli elementi del layout, che sono gestiti in modo
diverso secondo il tema, di solito con formati personalizzati per gli articoli e altri elementi
da configurare singolarmente (Figura 3.10).

Figura 3.10 – Una schermata con le opzioni di un tema acquistato da Theme Forest; si
notino in alto le diverse schede relative ai vari aspetti personalizzabili del tema e, a
sinistra, i diversi formati di articolo che andranno a comporre gli elementi del layout.
Ben diversa la situazione per i temi inclusi in raccolte come quelle di Elegant Themes
(wpaz.it/014) o CSS Igniter (wpaz.it/995), che essendo basati sullo stesso schema di
sviluppo (framework), sono accomunati da un’interfaccia di gestione condivisa, che rende
lo sviluppo di siti diversi molto più agevole e intuitivo anche quando si cambia tema
(Figura 3.11).
Figura 3.11 – Il pannello di configurazione dei temi di Elegant Themes (wpaz.it/014); si
noti la chiarezza dei comandi di impostazione e l’ordine della suddivisione in schede, che
ritroviamo in tutti i temi di questo sviluppatore.
3.4 Impostazioni e personalizzazione
Che si tratti di temi commerciali o gratuiti, la sezione Aspetto di WordPress mette a
disposizione di sviluppatori e utenti l’opzione Personalizza, grazie alla quale è possibile
definire tutta una serie di elementi strutturali ed estetici del tema attivo e visualizzarne il
risultato in tempo reale (Figura 3.12).
Figura 3.12 – Il pannello “Personalizza” di WordPress, in questo caso associato al tema
predefinito Twenty Eleven, che permette di impostare diversi aspetti estetici e strutturali
del tema attivo verificando in tempo reale l’effetto di tali modifiche; si noti a destra
l’anteprima del tema che viene aggiornata in tempo reale.
Questo pannello di configurazione è standard, ma si adatta ai diversi temi in base alle
impostazioni che gli sviluppatori decidono di consentire e che non sono incluse nel
pannello specifico del tema; quest’ultimo, invece, viene installato nel momento in cui si
installa il tema e lo ritrovate, in genere, poco più in basso nell’area Aspetto associato alla
voce Theme options, eventualmente preceduta dal nome del tema stesso.
Fra le voci più comuni del pannello Personalizza troviamo:
• info sul tema
la prima voce in alto identifica sempre il tema che stiamo personalizzando e, una
volta espansa, ne visualizza le informazioni e la miniatura.
• titolo del sito e motto
sono le due informazioni principali del sito, configurabili anche dal menu Generale
dell’area Impostazioni nel backend di WordPress; come abbiamo visto nel primo
capitolo, il titolo viene in genere assegnato in fase di installazione del CMS, mentre il
motto (sotto-titolo) può essere impostato successivamente.
• colori
in questa sezione è possibile impostare il colore del testo e dei link, ma anche quello
dello sfondo e del titolo.
• immagine della testata
per i temi che prevedono la presenza di un’immagine nella testata, quest’opzione
permette di sceglierla fra quelle precaricate o di caricarne di nuove, rispettando le
misure consigliate o ritagliandole.
• immagine di sfondo
opzione alternativa al colore di sfondo e disponibile per i temi che la prevedono,
eventualmente decidendone la disposizione: fissa o affiancata.
• navigazione
riguarda le impostazioni dei menu che abbiamo già visto nel capitolo precedente e
permette di assegnare i menu già creati alle aree di navigazione previste nel tema.
• pagina iniziale statica
anche in questo caso si tratta di un’opzione già vista e presente nelle Impostazioni di
WordPress, sezione Lettura, permette di assegnare una pagina specifica alla home al
posto della visualizzazione degli articoli più recenti, stile blog.
• widget
questa opzione permette di definire e posizionare gli elementi modulari che sono
generalmente collocati nelle aree laterali o nella parte bassa del tema, come vedremo
più avanti.
A queste voci se ne possono aggiungere, secondo il tema attivo, altre riguardanti per
esempio il layout (larghezza, scelta fra colonna singola, due colonne, ecc. con
posizionamento della colonna laterale su uno dei due lati e così via), i contenuti in
evidenza visualizzati in genere nella parte alta del sito e diverse altre legate alla particolare
struttura del tema scelto.
Nella sezione Aspetto di WordPress troviamo, inoltre, anche altre due voci separate
relative allo Sfondo e alla Testata, dove è possibile scegliere colori e immagini da
utilizzare per questi due elementi in maniera più precisa rispetto alle omonime opzioni del
pannello Personalizzazione.
3.5 Widget
Il termine inglese widget, utilizzato per indicare gli elementi modulari utilizzati per
svariate funzioni nei siti WordPress, potrebbe essere tradotto tanto come “congegno” o
“dispositivo” quanto, più scherzosamente, con “aggeggio” o “coso”.
In effetti, si tratta di componenti così diversi fra loro per caratteristiche e funzionalità da
meritare giustamente entrambe le definizioni, ed è inevitabile che ci si trovi a utilizzarli
all’interno di un progetto Web quando si desidera, per esempio, aggiungere un elemento
marginale piuttosto che centrale alla struttura del sito.
Figura 3.13 – L’area Widget di WordPress con i widget predefiniti e, a destra, due aree
predisposte per ospitarli, dove quella superiore ne contiene già diversi.
Accessibili dalla voce Widget della sezione Aspetto di WordPress, diversi widget sono già
disponibili subito dopo l’installazione e possono essere trascinati e posizionati nelle aree
predisposte (Figura 3.13) oppure rimossi trascinandoli fuori da queste ultime.
Cliccando sul triangolo capovolto a destra della barra di ogni widget lo si espande,
rivelandone il pannello di configurazione (Figura 3.14). Una volta decise le impostazioni,
si cliccherà sul pulsante in basso per memorizzarle e confermarle, e si potrà infine usare il
link Chiudi o il triangolo di cui sopra, per contrarre nuovamente il pannello. Il link
Cancella rimuove il widget, che può tuttavia essere eliminato anche semplicemente
trascinandolo fuori dall’area che lo contiene, spostandolo verso sinistra, dove sono
elencati tutti i widget.
Figura 3.14 – Il widget Articoli recenti in forma espansa con le sue impostazioni; si noti
il pulsante per memorizzarle e, alla sua sinistra, i link per richiudere il pannello o
rimuovere del tutto il widget dall’area che lo contiene.

nota
Sotto all’area che raggruppa i widget disponibili, è presente un’area secondaria
denominata “Widget non attivi”: trascinandovi i dispositivi già configurati, che si
desidera eventualmente riutilizzare, ne saranno conservate le impostazioni, mentre le
stesse verrebbero annullate trascinando un widget verso l’area superiore, poiché
l’azione sarebbe interpretata come eliminazione del dispositivo stesso.
In genere è possibile trascinare in “un’area widget”, sono definite così le aree predisposte
a ospitarli, anche più copie di uno stesso dispositivo, configurandole separatamente. Le
aree widget sono in genere due, una laterale e una nel piè di pagina del tema, tuttavia i
temi potrebbero contenere anche solo un’area widget laterale o, al contrario, numerose
aree disposte anche nel corpo centrale del tema. I temi più moderni ed evoluti permettono
addirittura di definire aree widget personalizzate e collocarle dove si desidera. I widget
predefiniti, che trovate in WordPress subito dopo l’installazione, sono particolarmente
legati all’utilizzo tradizionale del CMS come piattaforma di blogging e in genere sono i
seguenti:
• Archivi
visualizza un elenco degli articoli pubblicati diviso per mese.
• Articoli recenti
visualizza gli articoli più recenti ed è possibile definirne il numero e scegliere se
visualizzare anche la data di pubblicazione.
• Calendario
un piccolo calendario che visualizza il mese corrente e inserisce dei link sui giorni in
cui sono stati pubblicati degli articoli, permettendo anche di spostarsi sui mesi
precedenti per individuare articoli pubblicati in date diverse.
• Categorie
un elenco delle categorie definite e contenenti articoli.
• Cerca
un piccolo campo con pulsante per la ricerca di contenuti nel sito tramite una o più
parole chiave.
• Commenti recenti
un elenco dei commenti più recenti agli articoli pubblicati.
• Menu personalizzato
in questo widget è possibile visualizzare un elenco definito nell’area Menu di
WordPress e utilizzarlo come menu secondario.
• Meta
un widget che contiene una serie di link classici di WordPress, come quello per il
“login” e il “logout” dell’amministratore del sito e degli altri utenti registrati, i link ai
“feed RSS” di articoli e commenti e l’URL del sito ufficiale WordPress.org.
• Pagine
un elenco delle pagine del sito, con la possibilità di ordinarle in vari modi e di
selezionare quelle da visualizzare e quelle da escludere.
• RSS
in questo widget è possibile visualizzare i contenuti di un altro sito o blog utilizzando
il relativo feed RSS.
• Tag Cloud
la cosiddetta “nuvola di tag”, ovvero l’insieme di tag utilizzati per gli articoli del sito
e visualizzati con dimensioni diverse a seconda della frequenza d’uso.
• Testo
si tratta di un widget molto versatile, in quanto oltre contenere del semplice testo (per
es. un “chi siamo” che debba rimanere sempre visibile) può ospitare anche del codice
HTML o JavaScript, permettendo così di incorporare al suo interno elementi dinamici
come immagini interattive o animate, mappe, previsioni meteorologiche e molto
altro, premesso che si abbia esperienza del codice da utilizzare o si disponga di un
codice predefinito, offerto per esempio da un sito o servizio Web.
I widget appena elencati sono naturalmente quelli di base già installati in WordPress,
tuttavia esistono anche versioni più evolute e complesse di alcuni di essi, ma soprattutto è
possibile installarne di completamente nuovi e adatti a varie esigenze, utilizzando i relativi
plugin. Questi ultimi possono essere, ovviamente, tanto gratuiti, quanto commerciali, nel
primo caso sono esplorabili nell’area dei plugin del sito ufficiale di WordPress
(wpaz.it/026), nel secondo sono reperibili da fonti ufficiali e ben fornite come l’area
plugin WordPress di Code Canyon (wpaz.it/028).

nota
I plugin di WordPress possono contenere, o essere semplicemente, dei widget. Una
volta installato, in questo caso, il plugin crea automaticamente il widget
corrispondente e lo rende disponibile nella schermata Widget di WordPress, dove
andrà quindi utilizzato come di consueto, collocandolo in un’area predisposta del
tema e configurato con le necessarie opzioni.
3.6 Editor e child theme
L’ultima voce della sezione Aspetto di WordPress (Editor) è quella che presuppone
maggiori conoscenze tecniche per essere utilizzata.
Cliccando su Editor, infatti, ci si ritrova immediatamente di fronte a una finestra la cui
parte centrale visualizza il codice del foglio stile CSS del tema attivo, pronto per essere
modificato: è chiaro che per applicare eventuali modifiche occorra essere abbastanza
esperti di fogli stile e conoscere il PHP, qualora si voglia modificare il codice di uno
qualsiasi dei template (Figura 3.15) che compongono il tema.

nota
Il termine “template” può essere tradotto con “modelli”, infatti moltissimi temi
professionali contengono, al loro interno, dei template che possono essere scelti per
dare alla pagina che si sta creando un formato particolare, per esempio “full width” (a
larghezza piena), eliminando le barre laterali, oppure “blank” (vuoto), eliminando la
testata con il menu per creare, per dire, delle pagine di cortesia quando il sito è in
costruzione o manutenzione, oppure le cosiddette “landing page” utilizzate nel Web
marketing.
Figura 3.15 – La schermata dell’Editor, dove è possibile modificare direttamente il
codice dei template e del foglio stile CSS di ogni singolo tema, operazione ovviamente
consigliata solo a chi abbia una certa esperienza; si noti in alto a destra il menu di
selezione del tema con, al di sotto, l’elenco dei template e, nel riquadro centrale, il codice
del foglio stile CSS, che è quello aperto automaticamente quando si accede a quest’area
del backend.
Scorrendo l’elenco a destra della finestra che contiene il codice, potrete vedere i diversi
elementi che vanno a formare le pagine del sito e anche riconoscere fra questi i template
principali concernenti lo schema di layout già descritto all’inizio del capitolo. Ognuno di
questi file in linguaggio PHP è contenuto nella cartella del tema scelto, insieme a uno o
più file CSS che corrispondono ai fogli stile (si veda l’elenco seguente). Chi non avesse
alcuna conoscenza dei linguaggi di programmazione in generale e del linguaggio PHP in
particolare, potrebbe provare una sensazione di scoraggiamento di fronte al codice
visualizzato o al foglio stile CSS, tuttavia nel tempo si riuscirà a familiarizzare con questi
linguaggi, intervenendo con piccole modifiche per cominciare a personalizzare i temi
secondo le proprie esigenze.

nota
Questa panoramica sui file PHP e CSS che compongono un tema WordPress è
semplicemente introduttiva, poiché un vero approfondimento richiederebbe quasi un
volume dedicato (che mi auguro di pubblicare in futuro). Si proverà comunque a
divulgare quelle informazioni di base che possono aiutare a muovere i primi passi
nell’editing dei temi, argomento che toccheremo anche nel prossimo capitolo e negli
altri progetti pratici di questo volume.
Ecco un elenco dei template più comuni presenti nella cartella di un tema, non comprende
quindi tutti i template e quelli specifici di un particolare tema, preceduti dal foglio stile
CSS, fra parentesi i nomi dei rispettivi file (in genere uguali alle corrispondenti
nomenclature in inglese, per es. testata=header):
• foglio stile (style.css)
questo file contiene tutte le impostazioni relative alle dimensioni e allo stile del testo
e degli elementi che compongono il sito: barra di navigazione, logo, riquadri per le
immagini, barre laterali e così via. Oltre a style.css in genere trovate anche rtl.css, che
contiene il codice per le lingue con lettura da destra a sinistra (“left to right” in
inglese). Molti temi contengono anche fogli stile aggiuntivi, spesso per assicurare la
compatibilità con i diversi browser, ma anche con i dispositivi mobili.
• testata (header.php)
in questo file sono contenute le istruzioni che costruiscono l’intestazione o testata del
tema, vale a dire ciò che compare nella parte alta, generalmente l’area formata dal
logo e dalla barra dei menu principale. Per chi avesse un po’ di esperienza di HTML,
è giusto precisare che questa parte di codice contiene anche le istruzioni incluse nel
tag <head>.
• pagina principale (index.php)
questo è il template principale che raccoglie tutti gli altri al suo interno, formando la
pagina che il visitatore del sito vede nel suo browser, cioè quanto compreso nel tag
<body>, per chi conosce l’HTML, che si tratti della home o di qualsiasi altra pagina
fra quelle relative ai template che seguono nell’elenco. In alcuni casi, potrebbe essere
presente anche un template home.php specifico per la home page.
• barra laterale (sidebar.php)
questo file contiene le istruzioni che costruiscono la barra laterale del tema, inserendo
quindi i diversi widget che avrete attivato e configurato nell’area dedicata del
backend.
• template pagine (page.php)
il file che visualizza le singole pagine nella loro interezza, ovvero titolo e contenuto.
• articolo singolo (single.php)
come per le pagine, ma in questo caso si tratta dei singoli articoli, con la
visualizzazione, dopo il titolo e prima del contenuto, dei dati relativi alla data di
pubblicazione, all’autore e alle categorie e i tag associati al contenuto dell’articolo.
• piè di pagina (footer.php)
visualizza l’area inferiore del tema, contenente in genere i “credits” ovvero i
tradizionali riferimenti allo sviluppatore e all’utilizzo di WordPress nel sito.
• risultati della ricerca (search.php)
questo template permette di visualizzare un elenco di pagine e articoli, con titolo e
parte iniziale del contenuto, come risultato della ricerca libera con parole chiave
condotta sull’intero sito per mezzo dell’apposita funzione prevista in quasi ogni tema
e comunque disponibile, come abbiamo visto, nei widget.
• template 404 (404.php)
la famigerata pagina di errore che viene visualizzata quando si clicca su un link che
non ha una destinazione corretta (pagina non trovata) o in generale quando
WordPress non riesce a individuare il contenuto da visualizzare.
• commenti (comments.php)
questo file gestisce i commenti che compaiono sotto il contenuto di pagine e articoli.
• archivi (archive.php)
visualizza un elenco, composto da titolo e parte iniziale del contenuto, di tutti gli
articoli corrispondenti a una particolare ricerca “filtrata”, ovvero relativa a categorie,
tag, autori o data di pubblicazione. Viene sostituito dall’uso eventuale di template
specifici come quelli del punto 13.
• funzioni tema (functions.php)
un file molto importante, simile a un plugin, che contiene tutte le funzioni che
permettono di creare elementi particolari del tema: formati per gli articoli, barre di
navigazione, sfondi e testate personalizzate e simili.
• template categorie, autore, data e tag (category.php, author.php, date.php,
tag.php)
i singoli template che visualizzano un elenco di articoli corrispondenti a una ricerca
basata rispettivamente su categoria, autore, data o tag (si veda “archivi” alla voce 11).
WordPress permette, quindi, di modificare il codice di ognuno dei file presenti nella
cartella principale e nelle sotto-cartelle di ogni tema, tuttavia è opportuno sottolineare
come questa operazione andrebbe compiuta solo da chi ha una certa esperienza e
conoscenza di PHP o CSS e sempre dopo aver preso le necessarie precauzioni, per evitare
di introdurre errori nella visualizzazione del sito, che potrebbero tradursi addirittura
nell’impossibilità di accedere nuovamente all’area di amministrazione del CMS. Inoltre,
come vedremo fra poco, è consigliabile applicare tali modifiche a una “derivazione” del
tema stesso chiamata “child theme”, per non perderle con i successivi aggiornamenti.

nota
Non è mai consigliabile intervenire direttamente sui file PHP o CSS di un tema senza
averne prima creata una copia di backup o, ancora meglio, senza aver creato un
“child theme” che consenta di applicare modifiche senza toccare direttamente le
cartelle e i file del tema originale. Anche un semplice errore di digitazione potrebbe,
infatti, impedirvi addirittura di accedere al backend: assicuratevi di avere comunque a
portata di mano un backup di tutte le cartelle e i file che andrete a modificare, e di
poterli ripristinare in caso di problemi usando un client FTP oppure la gestione dei
file dal pannello di hosting.
Figura 3.16 – Una visione d’insieme della cartella del tema predefinito Twenty Twelve; si
noti la struttura di cartelle e sottocartelle, la presenza dei diversi file di template e quella di
una sotto-cartella page-templates che contiene, in questo caso, due diversi modelli per le
pagine, con e senza barra laterale.
Esercitatevi a familiarizzare con il contenuto delle cartelle dei diversi temi (Figura 3.16)
esplorando la cartella di WordPress e in particolare la sotto-cartella themes all’interno
della cartella wp-content. Una volta che avrete un’idea chiara dei diversi file, potrete
affrontare con maggiore sicurezza le modifiche come illustrato nelle prossime pagine. La
modifica dei file di un tema può consentire di aggiungere, eliminare o cambiare gli
elementi che lo compongono e il loro stile, per esempio cambiando le dimensioni dei titoli
o del testo di pagine e articoli, oppure quelle dei menu, ma anche modificando la
larghezza della pagina o della barra laterale e così via. Imparare a conoscere il codice che
crea le pagine del vostro sito vi consente di acquisire quella padronanza che vi permetterà
di adattare sempre di più la sua forma alle vostre esigenze di sviluppo.
Come abbiamo già sottolineato, tuttavia, le modifiche al codice non vanno mai
applicate direttamente sui file del tema originale, in quanto andrebbero perse una volta che
il tema fosse aggiornato per portarlo a una versione più recente. Operazione che, come
vedremo nel settimo capitolo, è più frequente e necessaria di quanto non si pensi. Alcuni
temi, come quelli di Elegant Themes (wpaz.it/014), possiedono nel loro pannello di
configurazione un’area (Figura 3.17) in cui è possibile inserire del codice affinché si
sovrapponga a quello del foglio stile CSS originale: in questo modo le modifiche sono
memorizzate nel database MySQL insieme alle altre impostazioni e, anche aggiornando il
tema, restano intatte e continuano a funzionare.
Figura 3.17 – L’area Custom CSS presente nel pannello delle impostazioni dei temi di
Elegant Themes (wpaz.it/014), in cui è possibile inserire delle modifiche al codice del
foglio stile CSS in modo che si sovrappongano a quello originale e non vadano perse
neanche quando si aggiorna il tema.
Per quei temi che non prevedono un’opzione di questo tipo, potrebbe essere, invece,
pratico utilizzare un plugin come Simple Custom CSS (wpaz.it/072) oppure CSS Plus
(wpaz. it/071): il secondo aggiunge la possibilità di utilizzare del codice CSS
personalizzato direttamente in ogni singola pagina o articolo. Per chi non si sentisse
ancora abbastanza sicuro nel manipolare il codice originale dei temi, si consiglia di
installare Simple Custom CSS per esercitarsi con le modifiche illustrate nel progetto
pratico del prossimo capitolo.

nota
La differenza principale fra l’utilizzo di un vero e proprio child theme e l’alternativa
offerta da plugin come Simple Custom CSS o CSS Plus è che questi ultimi non
offrono la possibilità di applicare modifiche specifiche a un tema e conservarle
qualora si passi a un tema diverso e si decida di intervenire anche su quest’ultimo. I
child theme, infatti, permettono di applicare modifiche a temi diversi e ritrovarli
quando si passa da un tema all’altro, senza la necessità di doverli reinserire. Il codice
inserito per mezzo dei due plugin menzionati, invece, essendo riferito a un particolare
tema, andrà sostituito con altro codice qualora si decidesse di passare a un tema
diverso, costringendo a salvarne eventualmente una copia (per es. in un file di testo)
prima della sostituzione e dell’aggiunta del nuovo codice CSS.
Per chi invece volesse andare più a fondo nella personalizzazione, è consigliabile, come
abbiamo visto, creare il cosiddetto “child theme”, traducibile letteralmente con “tema
figlio” poiché derivato dal tema originale, mentre quest’ultimo diventa il “tema genitore”
o, in inglese, “parent theme”. A tale proposito dedicheremo il resto di questo paragrafo a
illustrare la procedura per la creazione manuale di questo tema “derivato” e più adatto alla
personalizzazione.
Figura 3.18 – La cartella del child theme di Twenty Eleven; si noti l’uso del segno meno al
posto dello spazio, che infatti non va mai utilizzato in questi casi.
Il child theme è contenuto in una sua cartella separata (Figura 3.18), nella quale basta
creare un file riguardante il foglio stile CSS che conterrà, oltre a una serie di righe di
codice standard che lo identificano, le eventuali modifiche da voi apportate rispetto al
foglio stile originale. La cartella va nominata, possibilmente, usando il nome del tema
originale seguito da –child, quindi se il tema originale è Twenty Eleven, la sua cartella
originale si chiamerà twentyeleven e quella del tema figlio si chiamerà twentyeleven-child.
All’interno di questa nuova cartella create un file chiamato style.css e inserite al suo
interno il codice seguente (in questo caso i riferimenti sono al tema Twenty Eleven, quindi
assicuratevi di usare quelli relativi al tema da voi scelto e fate riferimento al suo file
style.css per compilare le informazioni necessarie):
/*

Theme Name: Twenty Eleven tema ¿glio


Description: Child theme per il tema Twenty Eleven
Author: Bonaventura

Template: twentyeleven

(altre voci opzionali: Theme URI, Author URI, Version)


*/

@import url(“../twentyeleven/style.css”);

/* =Inserire di seguito il codice personalizzato


––––––––––––––––––- */

Assicuratevi di racchiudere il percorso del tema genitore fra doppi apici dritti e non curvi
per la riga di codice che inizia con @import url, quindi evitate di creare il file in
programmi che convertono automaticamente questo carattere. L’ideale è usare un editor di
codice, per esempio NotePad++ (wpaz.it/991) se usate Windows oppure TextWrangler
(wpaz. it/990) se usate Mac OS X. L’utilizzo di programmi come questi garantisce una
maggiore correttezza nella digitazione del codice, riducendo le possibilità di errore grazie
all’uso di guide visive (per es. la colorazione del testo o la numerazione delle righe).
Una volta creata la cartella del tema figlio, potrete anche semplicemente comprimerla in
un file ZIP e caricarla come se fosse un qualsiasi tema standard, attivandola allo stesso
modo (Figura 3.19). Se, invece, decideste di caricarla usando un client FTP come File-
Zilla (wpaz.it/989), dovrete poi ricordarvi di attivarlo dalla schermata Temi di WordPress,
dove lo ritroverete insieme agli altri temi installati.

Figura 3.19 – La schermata che segue il caricamento del tema figlio una volta compresso
come archivio ZIP; si noti il testo che precede i link in basso, fra cui Attiva che bisogna
cliccare per confermare l’uso del child theme, e la conferma della presenza del
corrispondente tema genitore sotto la nota che ne segnala la necessità.
Una volta caricato e attivato il tema figlio, sarà possibile modificare il codice del foglio
stile dalla solita schermata Modifica temi, raggiungibile dalla voce Editor del menu
Aspetto di WordPress (Figura 3.20), assicurandosi che sia selezionato nel menu di fianco
alla voce Selezionare il tema da modificare in alto a destra. La cartella del tema figlio
può contenere anche file corrispondenti a quelli dei template del tema originale, nel caso si
desideri applicare delle modifiche anche al codice di questi ultimi o addirittura dei
template aggiuntivi non presenti nella cartella del tema originale, da usare per esempio per
creare modelli di pagina nuovi.
Figura 3.20 – Il codice del foglio stile CSS del tema figlio caricato nell’editor dei temi di
WordPress; si noti in alto a destra il nome del child theme selezionato e, in basso a destra,
l’unico file presente nella cartella appena creata, cioè il foglio stile CSS.
È anche possibile creare un tema figlio per mezzo di plugin come One-Click Child Theme
(wpaz.it/029) o Duplicate Theme (wpaz.it/100).
Il primo aggiunge una voce Child Theme alla sezione Aspetto di WordPress (Figura 3.21)
e permette di creare automaticamente la cartella del tema figlio corrispondente al tema
attivo con, al suo interno, il file style.css già compilato secondo gli standard descritti in
precedenza, in base ai dati inseriti nella schermata delle opzioni di questo plugin.
Figura 3.21 – La schermata con le opzioni per la creazione di un tema figlio dal tema
attivo attraverso il plugin One-Click Child Theme (wpaz.it/029); si noti a sinistra la nuova
voce Child Theme aggiunta dal plugin alla sezione Aspetto e i campi da compilare per i
dati di commento al file style.css, che sarà creato insieme alla cartella che lo contiene,
cliccando sul pulsante Create Child in basso.
Duplicate Theme aggiunge, invece, una voce omonima all’area Aspetto di WordPress e
rispetto a One-Click Child Theme permette di scegliere il tema genitore anche se non è
quello attivo e di crearne eventualmente un semplice duplicato anziché un tema figlio.
Come spesso accade, ci sono diversi plugin che svolgono la medesima funzione con
modalità quasi sempre diverse, sta a noi provarli e decidere quale fa al caso nostro.
3.7 Strumenti per la creazione di layout e temi
Potrebbe capitarvi di non trovare il tema adatto al vostro progetto Web oppure che un tema
da voi utilizzato non vi consenta di creare pagine con il layout che desiderate:
quest’ostacolo può essere superato in diversi modi e per fortuna non richiede
necessariamente le competenze di uno sviluppatore di temi professionista.
Oltre che modificare o sviluppare da zero un tema, usando direttamente il codice PHP e
i fogli stile CSS, esistono infatti strumenti di varia complessità con i quali è possibile
comporre pagine personalizzate o addirittura creare interi temi secondo le proprie
esigenze. Questi strumenti sono classificabili secondo una progressiva complessità d’uso e
rientrano nelle seguenti categorie, che tuttavia tendono a confondersi, poiché molte
caratteristiche sono comuni o quantomeno simili:
• shortcode plugin
si tratta di plugin che, una volta installati, inseriscono nuovi strumenti nella barra di
editing dei contenuti di WordPress e spesso anche nuove opzioni nel backend,
permettendovi di inserire in pagine e articoli elementi diversi come l’impaginazione
multi-colonna, riquadri colorati di testo, pulsanti, cornici, gallerie e slider per
immagini, contenuti con schede a scomparsa (toggle), aree widget personalizzate e
molto altro.
• theme builder
traducibili come “costruttori di temi”, questi plugin rappresentano un passo avanti
rispetto ai precedenti, in quanto inseriscono in WordPress veri e propri strumenti di
composizione che, oltre a permettere l’inserimento di elementi simili a quelli degli
shortcode, consentono di costruire la pagina agendo su tutta la sua struttura con un
sistema modulare e dinamico dove i singoli elementi possono essere spostati e
riconfigurati visualmente per mezzo di pannelli dedicati.
• framework
basati sul già illustrato standard genitore-figlio, i framework possono essere basati
tanto su interfacce completamente visuali, quanto su altre che lo sono soltanto in
parte, e sono destinati a chi intende avviarsi più professionalmente sulla strada del
Web design con WordPress. Quando si sviluppa un tema da un framework si lavora
quindi sul tema figlio che va installato insieme al tema genitore dal momento che
quest’ultimo rappresenta la piattaforma di sviluppo.
• theme design tool
in questa categoria rientra, per il momento, solo il popolare software Artisteer
(wpaz.it/041), cui dedicheremo un piccolo spazio a fine capitolo.
Alla prima categoria appartengono plugin gratuiti, ma anche commerciali: fra i primi
possiamo senz’altro annoverare WordPress Shortcodes (wpaz.it/034) e Shortcodes
Ultimate (wpaz.it/035), che tuttavia offrono una gamma di strumenti piuttosto ristretta, che
può essere ampliata solo acquistando le licenze per gli elementi aggiuntivi, il cui costo
complessivo si rivela, tuttavia, uguale o superiore a molti plugin commerciali dello stesso
tipo, ben più potenti e stabili.
Figura 3.22 – Alcuni degli elementi che si possono inserire in pagine e articoli usando il
plugin Elegant Shortcodes (wpaz.it/031) e che ritrovate, naturalmente, nella maggior parte
degli altri plugin dello stesso tipo.
Fra i plugin commerciali ce ne sono diversi, più o meno complessi e facili da gestire: fra i
più intuitivi si può senz’altro includere Elegant Shortcodes (wpaz.it/031), il cui codice è
incluso in tutti i temi prodotti dallo stesso sviluppatore, ma che è anche disponibile per il
download agli utenti registrati, che potranno così installarlo come un qualsiasi plugin
standard e utilizzarlo anche con temi prodotti da altri sviluppatori. Questo plugin aggiunge
agli strumenti dell’editor dei contenuti di WordPress una serie di nuovi pulsanti/icone che
permettono di aggiungere elementi nuovi al contenuto, come: riquadri colorati,
impaginazione a più colonne, pulsanti e molto altro (Figura 3.22).
Figura 3.23 – La creazione di colonne multiple con il plugin Styles with Shortcodes
(wpaz.it/033); si noti sulla destra della prima fila di strumenti il nuovo pulsante per gestire
le colonne e, in basso nel contenuto, i pulsanti per modificare ogni singola colonna.
Come sempre una ricerca mirata su Code Canyon (wpaz.it/032) permette di individuare
decine di plugin dello stesso tipo e anche più ricchi di opzioni, quasi tutti a buon mercato
(intorno ai 20 euro in media) come il popolare Styles with Shortcodes for WordPress
(wpaz.it/033), che aggiunge un centinaio di nuovi elementi da utilizzare in pagine e
articoli con un semplice click. Questo plugin (Figura 3.23), come diversi altri, può essere
provato prima dell’acquisto cliccando sul pulsante nella pagina informativa, collegato a un
sito su cui il plugin è già installato e dove è possibile accedere grazie alle credenziali di
login fornite.
Come abbiamo visto, la maggioranza dei temi più recenti contiene già un sistema basato
su shortcode, quindi assicuratevi sempre della loro presenza nel tema che state utilizzando,
prima di decidere per l’installazione di uno specifico plugin.
La complessità di questi plugin è molto variabile, tanto nel numero di opzioni e
strumenti quanto nel modo in cui questi sono gestiti, di conseguenza vale sempre la pena
testarli o quantomeno documentarsi bene prima di scegliere. Non essendoci lo spazio per
trattarli in modo approfondito, visto che si tratta unicamente di una panoramica
introduttiva, ci riserviamo di esaminarli singolarmente sul sito wpaz.it.
Figura 3.24 – La modalità di composizione di MotoPress Content Editor (wpaz.it/037); si
noti a sinistra il pannello con le diverse categorie di elementi e l’elenco degli oggetti che è
possibile trascinare sulla pagina, dei quali è stato appena inserito e configurato quello dei
grafici.
Anche la seconda categoria, quella dei cosiddetti “theme builder”, è ricchissima di plugin
che rientrano, però, solo nell’ambito commerciale. Questi plugin inseriscono in WordPress
una vera e propria modalità di composizione modulare della pagina attraverso una serie di
elementi che è possibile selezionare e inserire, e in alcuni casi trascinare sulla pagina da
un pannello, configurare più volte e ovviamente riposizionare a seconda delle esigenze.

nota
Diversi “theme builder” offrono due modalità di costruzione della pagina, cioè
permettono di comporla sia dall’interno del pannello di amministrazione di
WordPress (backend) sia direttamente sul sito così come visualizzato dal pubblico
(frontend).
MotoPress Content Editor (wpaz.it/038), per esempio, una volta attivato cliccando
sull’apposito pulsante, che ritrovate nella parte alta dell’editor dei contenuti di WordPress
e che va a sostituirlo, visualizza una barra di strumenti sulla sinistra dello schermo da cui è
possibile selezionare la categoria di elementi e trascinare poi questi ultimi sulla pagina
(Figura 3.24). Una volta collocati, gli oggetti possono essere modificati cliccandovi sopra
e facendo così comparire il relativo pannello di opzioni. Anche questo plugin può essere
testato gratuitamente accedendo alla sua pagina ufficiale dove sono come sempre
disponibili le credenziali di login al sito dimostrativo su cui è installato.

Figura 3.25 – L’attivazione della modalità di composizione visuale della pagina in


Ultimatum Theme Builder (wpaz.it/037); si noti il pulsante per tornare alla modalità
standard di editing dei contenuti di WordPress (Classic mode) e alla sua destra quello per
l’editing diretto sul sito (Frontend editor); il pulsante Add element, in basso, permette di
scegliere l’elemento da inserire nella pagina (Figura 3.26), mentre Add row aggiunge una
nuova sezione orizzontale e Templates permette di richiamare i modelli di pagina
eventualmente memorizzati.
Ultimatum Theme Builder (wpaz.it/037) richiede invece, per poter essere testato, una
registrazione che si attiva nella home page ufficiale e si trova alla fine della pagina, e che
resta valida per una settimana. Si tratta di uno strumento di composizione molto evoluto
che offre un’ampia scelta di elementi (Figura 3.26), con la possibilità di disporli su più
sezioni orizzontali, divisibili anche in varie colonne all’interno della pagina e di definire,
per ogni elemento, i valori di spaziatura su tutti i lati. Ogni layout di pagina creato può
essere salvato per applicarlo eventualmente a successivi impaginati che potranno poi
essere personalizzati, ma anche esportati e importati.
Ultimatum Theme Builder è basato su vari componenti e in aggiunta al sistema di
impaginazione Visual Composer, disponibile anche come plugin separato, come vedremo
fra poco, mette a disposizione tre sistemi evoluti per la creazione di slider: Layer Slider,
ShowBiz e Slider Revolution, un editor di moduli (Easy Forms) la possibilità di
scegliere fra un ampio numero di font, widget personalizzati e l’integrazione con il
popolare plugin di ecommerce WooCommerce.

Figura 3.26 – Una parte degli elementi che è possibile inserire nella pagina con Ultimate
Theme Builder (wpaz.it/037) o con Visual Composer (wpaz.it/994); si notino in alto i link
per visualizzare una particolare categoria di elementi e, al di sotto, il campo che consente
di cercare un elemento usando il suo nome.
Una versione leggermente ridotta, ma comunque altrettanto flessibile e intuitiva di
Ultimatum Theme Builder, la ritroviamo nel molto famoso e apprezzato Visual Composer
(wpaz.it/994), che riproduce in sostanza solo la parte di editing e ha quindi un costo
nettamente inferiore rispetto al suo fratello maggiore in cui è stato incorporato come parte
del sistema di sviluppo globale. L’interfaccia è praticamente uguale (Figura 3.26),
compresa la possibilità di comporre tanto nel backend quanto nel frontend del sito e dalla
pagina ufficiale si può accedere a un sito dimostrativo con le credenziali d’accesso per il
login in modo da testare gratuitamente il plugin. Nel tempo sono nati diversi plugin che si
possono utilizzare in abbinamento a Visual Composer per estenderne caratteristiche e
funzionalità ed è possibile trovarli con una ricerca mirata su Code Canyon (wpaz.it/039).
Anche Elegant Themes (wpaz.it/014) ha intrapreso il percorso dei theme builder,
inizialmente con Elegant Theme Builder (wpaz.it/042), che si presentava sotto forma di
plugin e, successivamente, con il tema Divi (wpaz.it/013), che contiene un builder visuale
e in un certo senso può essere anche definito un framework (la categoria che ci avviamo a
descrivere). Utilizzerete Divi in uno dei progetti pratici dedicati al restyling di un sito
esistente (il blog del mio primo libro), quindi avrete modo di approfondire.
La forma più evoluta di theme builder è quella che permette di definire tutti gli elementi
del layout, compresa la testata e il piè di pagina, creando nuovi template da zero oppure
modificando quelli standard, che abbiamo visto all’inizio del capitolo: a questa categoria
appartengono senz’altro i “framework”, che come abbiamo visto possono avere interfacce
di sviluppo tanto visuali quanto semi-visuali e di conseguenza meno intuitive per chi è alle
prime armi.
I framework, come qualsiasi altro strumento legato al mondo di WordPress e dei CMS
in generale, tendono a evolversi nel tempo e a volte anche a sparire, cambiando spesso
approccio e metodologia di sviluppo: è il caso di PageLines, che inizialmente faceva parte
di quella categoria di framework per cui era necessaria una buona esperienza nell’uso
diretto del codice (PHP e CSS), ma si è poi trasformato in DMS (wpaz.it/046), il cui
acronimo sta per Design Management System ed è un vero e proprio theme builder basato
su framework che permette di lavorare direttamente sul frontend del sito, quindi offre il
meglio dei due mondi. DMS è disponibile anche in versione gratuita (wpaz.it/047),
ovviamente con limitazioni, e installabile dall’area Temi di WordPress, come qualsiasi
altro tema gratuito, semplicemente usando il solito pulsante Aggiungi nuovo per accedere
alla schermata Aggiungi tema e digitando la sigla “DMS” (in maiuscolo) nel campo di
ricerca presente in alto a destra.

Figura 3.27 – L’ambiente di lavoro di DMS (wpaz.it/046) in versione gratuita; si noti la


finestra con gli elementi che è possibile inserire nella pagina che si sta
componendo/modificando, richiamata dal pulsante Add to Page, e sulla sua sinistra la
suddivisione per categorie.
Per una panoramica sull’utilizzo di DMS (Figura 3.27) potete guardare il video presente
sulla home page del sito ufficiale, mentre per la versione gratuita sono reperibili due video
su YouTube, che potete trovare digitando “PageLine DMS free version” nel campo di
ricerca del sito; si tratta di video in inglese, ma risulteranno abbastanza chiari anche per
chi non conoscesse la lingua. Infine, una volta installato, DMS, anche nella sua versione
gratuita, visualizza un tour guidato sempre in inglese per una panoramica sugli strumenti
utilizzati. In ogni caso si tratta di uno strumento molto meno intuitivo rispetto ai theme
builder esaminati in precedenza, quindi meno adatto a chi ha una conoscenza di base dei
template e del codice di WordPress.
Anche Headway Themes (wpaz.it/040) offre uno strumento in prevalenza visuale
(Figura 3.28), che risulta più intuitivo, ma va utilizzato direttamente dal sito con un
abbonamento annuale, quindi vincola lo sviluppatore al servizio. I template e le estensioni,
“block”, offerte dal sito sono opzionali e vanno acquistati a parte, aggiungendo ulteriori
costi a quelli di base, di per sé già limitanti rispetto al numero di siti su cui è possibile
utilizzare i template realizzati. Per chi desiderasse provare questo theme builder, anche qui
è possibile accedere a un sito di prova inserendo semplicemente il proprio indirizzo email.

Figura 3.28 – L’interfaccia di composizione del layout presente nel servizio offerto da
Headway Themes (wpaz.it/040): in questo caso la creazione di elementi geometrici col
semplice trascinamento del mouse sulla griglia di base offre piena libertà nella costruzione
della pagina; si notino in alto a sinistra i due pulsanti principali per accedere agli strumenti
di impaginazione e a quello di stile.
Altrettanto intuitivo è Builder di iThemes (wpaz.it/044), anch’esso basato sulla doppia
interfaccia composta da editor di layout e gestore di stili, ma con la possibilità di
utilizzare, a seconda della formula scelta, un certo numero di temi già pronti e modificabili
fra le decine che il sito mette a disposizione; si tratta di “child theme” del framework di
base. In questo caso gli elementi strutturali vengono aggiunti e configurati senza un vero e
proprio drag’n’drop, ma l’interfaccia è comunque molto comoda e intuitiva. Il sito
ufficiale non offre alcuna possibilità di testare il prodotto, ma sono presenti alcuni video
che permettono di farsi un’idea del suo utilizzo.
Un altro framework commerciale molto noto e apprezzato è sicuramente Genesis di
StudioPress (wpaz.it/043), ma rispetto a quelli visti finora è privo di editor visuale nella
sua versione standard e di conseguenza meno adatto a chi non avesse ancora acquisito una
buona esperienza e abilità con il codice dei temi, ovvero con PHP e CSS. Anche questo
framework viene offerto sia come prodotto singolo sia in abbinamento a una serie di child
theme già sviluppati che, grazie alla documentazione, possono essere poi personalizzati da
chi possiede già il framework e ha l’esperienza adatta. È possibile, tuttavia, utilizzare
un’interfaccia visuale abbinando a Genesis l’applicazione Dynamik Website Builder di
CobaltApps (wpaz.it/045) per creare molto più facilmente e rapidamente child theme
compatibili con il framework. Appartenente alla stessa categoria di Genesis è Thesis di
DIYtyhemes (wpaz.it/048), un framework altrettanto diffuso e apprezzato dagli
sviluppatori, che tuttavia non è associabile ad alcun editor visuale e presuppone, quindi, la
necessaria esperienza di sviluppo basata su codice.
Si potrebbero riempire pagine su pagine riguardo ai diversi theme builder e framework
disponibili per WordPress, ma questa vuole essere soltanto una panoramica in grado di
darvi una visione abbastanza completa di questo importante settore di sviluppo.
Concluderemo questo capitolo parlando dell’unica applicazione basata su un software
da installare su computer e che permette quindi di creare, lavorando offline, temi completi
installabili in WordPress: stiamo parlando di Artisteer (wpaz.it/041), un programma che in
realtà permette di esportare i temi creati nei formati compatibili anche con altri CMS
(Joomla!, Drupal, DotNetNuke e Blogger) e offre un’interfaccia completamente visuale
(Figura 3.29) dalla quale è possibile comporre il layout di un tema selezionandone e
configurandone i vari elementi e i loro attributi.
Sul sito ufficiale è disponibile un link che permette di scaricare la versione dimostrativa
con cui potrete provare a utilizzare tutti gli strumenti disponibili, ma senza poter salvare i
temi creati, oltre a un’ampia serie di temi gratuiti da scaricare sia nelle versioni esportate
installabili sui vari CMS, sia come template da modificare e personalizzare usando il
programma.
Figura 3.29 – Una vista dell’interfaccia di composizione di Artisteer (wpaz-it/041) con un
design di tema suggerito dal programma; si notino i numerosi menu e strumenti disponibili
nella parte alta dell’interfaccia, dei quali è visibile la sezione dedicata ai menu.
4
Sviluppo di un sito di base
In questo capitolo proveremo a percorrere tutti i passi che portano dall’installazione di
WordPress e relativa configurazione di base, fino allo sviluppo completo di un semplice
sito adatto a svariate esigenze e completo di un modulo per i contatti. Il percorso sarà utile
per evidenziare alcuni punti già visti e altri aspetti ancora non illustrati, ma soprattutto
potrà gettare le fondamenta per la pratica nello sviluppo di siti Web anche più complessi.
Come sempre proveremo a racchiudere ogni argomento o passaggio principale in un
paragrafo a sé, raggruppando nello stesso paragrafo le operazioni più semplici e brevi che
tuttavia saranno sempre descritte con un ordine progressivo, come se stessimo osservando
la creazione del sito in diretta.
4.1 Dopo l’installazione
Appena avrete eseguito il login accedendo all’area di amministrazione (backend) di
WordPress, vi ritroverete di fronte alla Bacheca, da cui potrete subito rimuovere il
pannello introduttivo cliccando su Rimuovi in alto a destra (Figura 4.1).
Ricordate anche di eliminare subito l’articolo e la pagina dimostrativi, che come potete
vedere sono menzionati nel riquadro In sintesi; il commento dimostrativo, essendo
collegato all’articolo, sarà automaticamente eliminato. Per gli step necessari, fate
riferimento a quanto spiegato nel secondo capitolo.
Figura 4.1 – Il backend di WordPress, subito dopo il login successivo all’installazione; si
noti la schermata della Bacheca che è quella visualizzata automaticamente all’accesso
all’area amministrativa e il pannello introduttivo che è possibile rimuovere cliccando
sull’apposito pulsante in alto a destra.
Figura 4.2 – Il pannello Impostazioni schermata, richiamato dall’omonimo pulsante,
con l’elenco dei pannelli visualizzabili nell’area di WordPress attiva; si noti come ogni
pannello possa essere contratto o espanso per mezzo del pulsante a forma di triangolo
capovolto e come sia possibile riorganizzare i pannelli semplicemente trascinandoli.
Ricordate, inoltre, che ogni area del backend può essere personalizzata nascondendo o
visualizzando i pannelli che ospita per mezzo del pulsante Impostazioni schermata in
alto a destra, oppure contraendoli e spostandoli (Figura 4.2). In alcune schermate (come
quelle per la creazione e modifica di pagine e articoli, per esempio) è possibile anche
decidere se i pannelli saranno visualizzati su due colonne o su singola colonna.
Figura 4.3 – Una parte della schermata del profilo utente; si noti il nome utente (qui
nascosto per motivi di sicurezza) e in basso il campo in cui digitare il nickname alternativo
e, sotto di esso, il menu per selezionare il nome pubblico da visualizzare.
Cliccate ora sulla voce Il tuo profilo nella sezione Utenti, a sinistra, per accedere ai vostri
dati di registrazione, e digitate un nickname alternativo a quello usato per registrarvi,
potete usare anche qualcosa come “webmaster” o “redazione”, sempre che non sia proprio
quello usato durante la registrazione: digitatelo semplicemente nel campo Nickname,
dopodiché potrete selezionarlo dal menu Nome pubblico da visualizzare; in questo menu
sono aggiunti automaticamente tutti i nickname digitati nel capo precedente).
Assicuratevi, inoltre, che l’indirizzo email specificato nel vostro profilo (qui nascosto
sempre per motivi di privacy e sicurezza) sia esatto, poiché sarà utilizzato da WordPress
per tutti i messaggi di avviso inviati in automatico. Infine, notate le diverse opzioni
presenti in questa schermata (Figura 4.3) fra cui quella per disabilitare o abilitare la barra
del menu di amministrazione, durante la visualizzazione dell’anteprima del sito da parte
dell’utente.
Una volta completate le impostazioni, ricordatevi di cliccare sul pulsante Aggiorna
profilo per confermarle e memorizzarle.
4.2 Scelta e personalizzazione del tema
Per questo esempio di base useremo il tema predefinito Twenty Eleven. Se non fosse già
installato, cliccate sulla voce Temi della sezione Aspetto e, nella schermata che compare,
cliccate sul riquadro vuoto con il segno + al centro oppure sul pulsante Aggiungi nuovo in
alto. Per individuare subito il tema, potete scrivere il suo nome o parte di esso nel campo
che contiene la scritta Cerca temi… in grigio: una volta che la miniatura di anteprima di
Twenty Eleven comparirà, spostatevi su di essa con il puntatore e cliccate sul pulsante
Installa. Se tutto procede regolarmente, nella schermata successiva sarà visualizzato un
messaggio di conferma dell’installazione, sotto il quale troverete tre link: cliccate su
quello centrale (Attivare) per rendere attivo il tema appena installato.

nota
Nel caso il caricamento di un tema generi un errore, potete riprovare a caricarlo,
tuttavia se il secondo tentativo dovesse produrre altri errori potrebbe essere il caso di
accedere allo spazio Web via FTP e rimuovere la cartella del tema, probabilmente
incompleta o contenente file danneggiati da un trasferimento problematico, per poi
caricare manualmente una copia integrale della stessa, ottenuta scaricando il tema
dall’area dei temi del sito ufficiale di WordPress (si veda il terzo capitolo).

Figura 4.4 – La schermata delle impostazioni per il tema Twenty Eleven, raggiungibile
dalla voce Theme Options della sezione Aspetto una volta che il tema è stato installato e
attivato; si notino i due schemi cromatici (skin), in alto e i tre tipi di layout in basso.
Una volta attivato il tema, cominciate a personalizzarlo rendendolo più adatto a un sito che
non a un blog, quindi rimuovete le barre laterali accedendo all’area di personalizzazione
con la voce Theme Options della sezione Aspetto e cliccando sul terzo layout
visualizzato nella parte bassa della schermata (Figura 4.4), ricordandovi poi di confermare
col pulsante Salva le modifiche.
Nella stessa schermata si sarebbe anche potuto scegliere lo schema cromatico (“skin” in
inglese) fra i due disponibili, ovvero testo nero su fondo bianco o viceversa, tuttavia per
gli scopi di questo capitolo sarà lasciato attivo lo schema predefinito con sfondo bianco.

Figura 4.5 – L’opzione per impostare un’immagine di sfondo nel tema Twenty Eleven; si
noti il riquadro tratteggiato in cui è possibile trascinare semplicemente l’immagine che si
vuole utilizzare e, in alto a sinistra, il pulsante Salvato, che indica l’avvenuta conferma
delle impostazioni e il pulsante Chiudi, che in questo caso sostituisce automaticamente
Annulla e permette di uscire dall’area di personalizzazione.
Passiamo ora alla personalizzazione dello sfondo, cliccando sulla voce Personalizza della
sezione Aspetto: l’anteprima del tema comparirà nella parte destra dello schermo e sarà
aggiornata in tempo reale. Per modificare lo sfondo del sito, cliccate su Immagine di
sfondo nell’elenco a sinistra, quindi sul riquadro grigio con la scritta Nessuna immagine:
a questo punto potrete caricare un’immagine da utilizzare per lo sfondo del sito,
trascinandola sul riquadro tratteggiato sottostante oppure cliccando sul link seleziona un
file e scegliendo il documento da caricare.
In realtà si potrebbe semplicemente scegliere un colore alternativo per lo sfondo al
posto del grigio predefinito, cliccando sulla voce Colori e poi sul pulsante Seleziona
colore preceduto dalla scritta Colore dello sfondo: in questo modo si aprirà una tavolozza
in cui selezionare con un clic un nuovo colore e, nel caso si cambi idea, sarà possibile
ripristinare il colore originale cliccando sul pulsante Predefinito. Vedremo da vicino
quest’impostazione fra poco variando il colore della testata, per ora proseguiamo con lo
sfondo.
L’immagine di sfondo può essere intera oppure “a tassello”: nel primo caso ci si dovrà
assicurare che sia abbastanza grande da riempire almeno tutta l’area intorno al riquadro
del layout, mentre nel secondo caso dovrà essere ritagliata in modo da offrire
un’apparenza di uniformità se ripetuta più volte. Per questo esempio è stata usata
un’immagine del secondo tipo, poiché offre un risultato migliore anche quando il sito
viene visualizzato su schermi molto grandi, al contrario delle immagini intere, che
tendono a dimostrarsi inadatte in tali frangenti.

nota
Per individuare delle immagini di sfondo “a tassello” potete usare la ricerca immagini
di Google con una frase come “site background patterns” e selezionare quelle che più
vi sembrano adatte al vostro progetto.

Figura 4.6 – Le opzioni per la disposizione dell’immagine di sfondo, attivate cliccando


sul riquadro che visualizza l’immagine caricata; si notino le tre categorie principali e in
particolare quella per definire la ripetizione dello sfondo utilizzata in questo caso.
Cliccando sul riquadro che mostra l’immagine appena caricata, potrete accedere alle
diverse impostazioni di disposizione suddivise in tre categorie: la prima (Ripetizione
dello sfondo) permette di ripetere l’immagine più volte in orizzontale, verticale o
entrambe le direzioni, in questo caso sarà usata l’opzione Affianca per ottenere l’effetto
mosaico; la seconda serie di opzioni consente di decidere il posizionamento orizzontale
nel caso di un’immagine intera, il più comune è quello A sinistra; la terza categoria di
opzioni, infine, stabilisce se l’immagine di sfondo, anche in questo caso intera, dovrà
scorrere insieme al layout del sito (Scorrevole,) oppure restare fissa lasciando scorrere
soltanto il layout (Fisso). Va da sé che, scegliendo l’opzione Affianca nella prima
categoria, le opzioni delle due categorie successive non avranno effetto.
Una volta decisa questa prima impostazione, potete cominciare a confermarla cliccando
sul pulsante Salva & pubblica in alto nella barra di sinistra (Figura 4.6).

Figura 4.7 – La sezione Colori del pannello di personalizzazione del tema Twenty
Eleven; si noti in alto la scelta fra i due schemi cromatici (skin), disponibili e, aperto al di
sotto, il pannello per la scelta del colore del testo con cui è visualizzato il titolo del sito
nella testata.
Cliccando su Colori potete accedere alle opzioni per la scelta degli schemi cromatici
disponibili, che come abbiamo visto in questo caso sono due, e a quelle che permettono di
definire, nell’ordine: il colore da utilizzare per il testo con cui è visualizzato il titolo del
sito (Colore testo della testata), quello per lo sfondo, nel caso non contenga un’immagine
“a mosaico”, e quello per i link, normalmente azzurro. In questo caso è stato scelto un
colore rosso scuro per il titolo del sito (Figura 4.7), cliccando nuovamente su Salva &
pubblica per confermare.
Utilizzate infine la voce Immagine della testata per aggiungere un’immagine
personalizzata che sostituisca quelle predefinite, che possono essere anche alternate
usando il pulsante Testate suggerite casuali. In questo caso comparirà in alto la dicitura
Rendi casuali le intestazioni suggerite. Potete anche scegliere una delle immagini
suggerite, ricordandovi che è possibile rimuoverla e rimuovere anche l’opzione “casuale”
cliccando sul pulsante Nascondi immagine, che compare una volta scelta l’immagine o
attivata la visualizzazione casuale.

Figura 4.8 – L’immagine scelta per la testata del sito, caricata nella libreria Media; si noti
la scritta che suggerisce le dimensioni e, in basso a sinistra, il pulsante Seleziona e
Ritaglia che, come vedremo nell’immagine seguente, permette di ritagliare l’immagine
quando le sue dimensioni sono eccessive.
Caricate quindi una nuova immagine a vostra scelta in modo da personalizzare la testata,
ricordandovi che le dimensioni ideali dovrebbero essere, come indicato nel riquadro, di
1000x288 pixel. Cliccando sul pulsante Aggiungi nuova immagine vi ritroverete nella
libreria Media (Figura 4.8) e potrete selezionare, se già caricata, o caricare una nuova
immagine, per poi usare il pulsante Seleziona e Ritaglia per sistemarla nel caso fosse più
grande. Se l’immagine avesse dimensioni maggiori di 1000x288 pixel sarà infatti adattata
al riquadro per mezzo di un ritaglio.

nota
Ricordate sempre che le immagini trovate su Internet potrebbero essere protette da
copyright, quindi assicuratevi, nel caso voleste servirvi di immagini create da altri,
che ne sia permesso l’utilizzo citando la fonte. È comunque consigliabile servirsi di
immagini “stock”, ovvero scaricate, gratis o a pagamento, dagli appositi servizi che
offrono un’ampia scelta di soggetti anche per questo genere di applicazione (si veda
il capitolo finale dedicato alle risorse utili).

Figura 4.9 – Il riquadro che compare dopo aver selezionato l’immagine per la testata nella
libreria Media e cliccato sul pulsante Seleziona e ritaglia; si noti il riquadro tratteggiato
da spostare per definire l’area utilizzata e il pulsante di conferma in basso a destra.
Nella schermata che compare potrete, se l’immagine ha dimensioni superiori a quelle
consigliate, trascinare il riquadro tratteggiato per selezionare l’area da utilizzare, cliccando
infine su Ritaglia Immagine per confermarla e tornare così al pannello di
personalizzazione del tema, dove otterrete l’anteprima della nuova testata. Usando le
maniglie del riquadro potrete anche ridurre l’altezza dell’immagine e di conseguenza
l’ingombro dell’area grafica della testata, a tutto vantaggio del contenuto della pagina
sottostante.
Figura 4.10 – L’opzione che permette di rimuovere il testo del titolo e sotto-titolo che
precede la testata del sito; si noti il riquadro di spunta da deselezionare e il pulsante di
conferma Salva le modifiche in basso.
Potete anche eliminare del tutto il testo che visualizza il titolo e sotto-titolo (motto), del
vostro sito, per esempio decidendo di integrarli nella grafica utilizzata per la testata e
riducendo così la parte alta del layout in modo da recuperare spazio per i contenuti. In
questo caso bisognerà ovviamente caricare un’immagine per la testata che contenga già
titolo ed eventuale sotto-titolo in forma grafica (Figura 4.11), dopodiché sarà necessario
accedere alla schermata completa delle impostazioni per l’immagine della testata,
cliccando sulla voce Testata della sezione Aspetto, e rimuovere il segno di spunta
dall’opzione Visualizzare il testo della testata con una propria immagine alla voce
Testo della testata. (Figura 4.10).
Figura 4.11 – Una testata completamente grafica che viene ritagliata riducendo le
dimensioni verticali dopo il caricamento dalla schermata Immagine personalizzata della
testata; si notino le maniglie superiore e inferiore utilizzate per ridefinire l’altezza e il
pulsante Ritaglia e pubblica per confermare il formato e inserire l’immagine.
Noterete che quest’opzione è in un certo senso ambigua, ma basta fare qualche prova
selezionandola e deselezionandola, confermando ogni volta col pulsante Salva le
modifiche, ricaricando poi l’anteprima del sito per verificare il risultato per comprenderne
il reale funzionamento. Una volta eliminata l’area che visualizzava il titolo e sotto-titolo
sotto forma di testo, vedrete che il campo di ricerca del sito viene spostato
automaticamente nella barra dei menu, sotto la testata grafica.
Scegliendo di utilizzare una testata che contenga già il titolo del sito ed eliminando così
quello in formato testo, potrete inoltre ridefinire, come già visto, l’eventuale altezza
dell’immagine, usando ancora una volta la schermata generale delle impostazioni per la
testata: caricherete in questo caso la nuova immagine direttamente da questa schermata
cliccando su Scegli file o su Scegli immagine, se il file è già presente nella libreria Media,
e ridefinendo l’area da utilizzare con un semplice trascinamento del riquadro tratteggiato
(Figura 4.11) prima di confermare cliccando sul pulsante Ritaglia e pubblica.
Figura 4.12 – L’applicazione dello schema cromatico alternativo, Dark, con la nuova
testata completamente grafica.
Come ultima modifica provate ora a eliminare l’immagine di sfondo caricata prima,
accedendo alla sezione Immagine di sfondo del pannello di personalizzazione e cliccando
prima sul riquadro dell’immagine di sfondo e poi sul link Rimuovi immagine sotto la
miniatura che compare. Infine, aprite il pannello Colori e impostate lo schema cromatico
con sfondo chiaro e testo nero (Light) e assegnate al colore di sfondo il valore #bababa,
che equivale a un grigio chiaro (si veda la nota seguente), verificando infine il risultato
nell’anteprima a destra e cliccando su Salva & pubblica per confermare (Figura 4.12).

nota
I colori utilizzati sul Web sono spesso definiti per mezzo del loro valore esadecimale,
vale a dire da tre coppie di lettere e numeri, ed è possibile familiarizzare con questo
sistema usando una qualsiasi pagina di riferimento fra le numerose disponibili sul
Web (wpaz.it/052). È importante rilevare che i cambiamenti di impostazione che
utilizzate in questo capitolo hanno puramente lo scopo di illustrare le diverse
modalità di personalizzazione del tema scelto e le relative opzioni disponibili, quindi
siete invitati a esercitarvi nelle varie operazioni per acquisire maggiore familiarità
con tali strumenti.
4.3 Creazione pagine e menu
Per dare forma al sito, si procederà ora con la creazione delle pagine principali e del menu
di navigazione, rifacendosi a quanto già illustrato nel secondo capitolo. In questo esempio
i contenuti saranno ovviamente fittizi e per i testi sarà usato il popolare metodo del Lorem
ipsum copiando e incollando i testi generati da un sistema automatizzato (wpaz.it/051).
Create prima di tutto la pagina che farà da “home” al sito, che in questo esempio sarà
intitolata “Chi Siamo”: cliccando sulla voce Aggiungi nuova della sezione Pagine vi
ritroverete davanti alla schermata di creazione dei contenuti, dove potrete procedere come
già descritto nel secondo capitolo per inserire il titolo, il testo ed eventuali immagini.
Visualizzando l’anteprima della pagina una volta completata la sua creazione, noterete
subito che, sotto il contenuto, viene visualizzata l’area dei commenti di WordPress: per
eliminarla usate il pulsante Impostazioni schermata in alto a destra (Figura 4.13) e
assicuratevi che il pannello Discussione sia attivo, altrimenti spuntatelo per attivarlo,
dopodiché togliete i segni di spunta dalle opzioni Permetti commenti e Permetti
trackback e pingback su questa pagina nel pannello che sarà visualizzato in basso, sotto
l’area dei contenuti.

Figura 4.13 – L’attivazione del pannello Discussione, per mezzo del pulsante
Impostazioni schermata, e la disattivazione delle due opzioni al suo interno permettono
di eliminare l’area dei commenti eventualmente visualizzata sotto le pagine del sito.
Osservando l’area sotto il titolo della pagina mentre siete nella schermata di editing,
noterete, inoltre, che il Permalink (l’URL della pagina) ha ancora la forma predefinita
(Figura 4.13), cioè termina con ?page_id=xx, quindi ricordatevi di modificare la struttura
dei permalink per tutto il sito cliccando sulla voce Permalink della sezione Impostazioni
e scegliendo un formato più intuitivo (come spiegato nel sesto paragrafo del secondo
capitolo).
Dovete ora fare in modo che questa pagina diventi la home page del sito, quindi usate la
voce Lettura della sezione Impostazioni per accedere alle configurazioni (Figura 4.14) e
selezionare Chi siamo dal menu della sezione Pagina iniziale dopo avere attivato
l’opzione Una pagina statica nella sezione La pagina iniziale mostra. Cliccate sul
pulsante Salva le modifiche in basso per confermare e digitate l’URL del sito per
verificare che la home page sia effettivamente quella da voi scelta.

Figura 4.14 – La schermata accessibile dalla voce Lettura della sezione Impostazioni; si
noti l’opzione attiva nella sezione La pagina iniziale mostra e, al di sotto, la pagina
iniziale impostata su Chi Siamo.
Anche se ci sono ancora alcuni aspetti del layout che bisogna sistemare, proseguite
creando altre pagine e ricordandovi di disattivare i commenti e i pingback per ognuna di
esse: in questo caso aggiungerete, per esempio: Servizi, Le Nostre Offerte, Dove Siamo,
Contattaci riservandovi di inserire, più avanti nel capitolo, un modulo (form), per i
contatti all’interno di quest’ultima e una cartina di Google Maps nella precedente.

Figura 4.15 – L’anteprima della home page del sito dopo l’aggiunta di tutte le pagine; si
noti la voce Le Nostre Offerte spostata in basso per mancanza di spazio a causa del
riquadro di ricerca, che eliminerete più avanti.
Nel procedere con la creazione delle pagine vedrete che vengono aggiunte
automaticamente al menu principale e che, al termine, le voci di menu saranno troppe e
provocheranno un’interruzione di riga, portando la voce Le Nostre Offerte in basso
(Figura 4.15): risolverete temporaneamente questo problema impostando il menu, per poi
procedere più avanti nel capitolo con delle modifiche direttamente al codice del tema.
Figura 4.16 – Il menu appena composto aggiungendo e riordinando le pagine visualizzate
nel pannello a sinistra; si noti in basso il segno di spunta alla casella di fianco alla voce
Posizione del tema, usato per assegnare il menu a quello principale (Primary Menu) del
tema.
Accedete quindi all’area di impostazione dei menu e procedete come spiegato nel secondo
capitolo, usando la voce Menu della sezione Aspetto e creando un nuovo menu che
chiamerete “Menu principale” e che assegnerete al Primary Menu, che è quello
principale del tema Twenty Eleven (Figura 4.16). Qui inserirete, usando il pannello a
sinistra, tutte le pagine che avete creato, trascinandone poi i pannelli per disporle nel
giusto ordine. Salvate il menu così impostato e visualizzate di nuovo l’anteprima del sito:
noterete che la lunghezza delle voci provoca ancora il problema riscontrato in precedenza,
quindi procederete modificando il nome delle voci di menu.
Figura 4.17 – I pannelli dei menu aperti per modificare il testo (Etichetta di
navigazione), di ogni voce; si noti che il campo in basso riporta sempre il nome originale
corrispondente al titolo della pagina.
Mentre siete nella schermata Menu del backend, espandete tutte le voci di menu cliccando
sul triangolo capovolto alla loro destra, modificando il testo nel campo Etichetta di
navigazione in modo da accorciarlo: digiterete “Home” al posto di “Chi Siamo”,
“Servizi” al posto di “I Nostri Servizi” e “Offerte” al posto di “Le Nostre Offerte” (Figura
4.17). Una volta concluse le modifiche cliccate sul solito pulsante Salva il menu per
confermare e verificate l’anteprima del sito, che a questo punto dovrebbe presentare il
menu su una sola riga.

nota
L’Etichetta di navigazione si riferisce esclusivamente al testo che sarà visualizzato
nel menu, ma non influisce sul collegamento originale che rimane quindi intatto. Nel
caso delle pagine, quindi, il titolo di ognuna resterà invariato, anche se modificate la
corrispondente voce di menu.
4.4 Modifiche al codice del tema
È arrivato il momento di capire come si può applicare una personalizzazione più profonda
al tema, servendosi di plugin come Simple Custom CSS (wpaz.it/072) per modifiche a tutto
il tema o CSS Plus (wpaz.it/071) per modifiche a una singola pagina o articolo, oppure
creando un vero e proprio tema figlio (“child theme”), come già visto nel sesto paragrafo
del capitolo precedente: in entrambi i casi si eviterà di modificare il codice originale del
tema utilizzato, conservando nello stesso tempo le modifiche apportate anche quando il
tema sarà aggiornato a versioni successive. Le indicazioni fornite da qui in avanti fanno
riferimento all’uso di un child theme, ma chi desiderasse utilizzare il plugin Simple
Custom CSS, non dovrà fare altro che incollare i codici di esempio forniti nell’apposito
campo all’interno della schermata del plugin.

Figura 4.18 – La schermata del plugin Simple Custom CSS (wpaz.it/072) visualizzata
cliccando sulla nuova voce Custom CSS, che viene creata alla sua attivazione nella
sezione Aspetto di WordPress; si noti il codice, che sarà utilizzato nel corso di questo
paragrafo per i vari esempi di personalizzazione del tema e la colorazione della sintassi.
Per creare facilmente e rapidamente il tema figlio si utilizzerà il plugin già menzionato nel
capitolo precedente, ovvero One-Click Child Theme: installatelo e attivatelo, quindi
selezionate la nuova voce Child Theme che viene aggiunta alla sezione Aspetto per
accedere alla schermata Create a Child Theme. In questa schermata darete un nome al
tema figlio digitandolo nel primo campo in alto e vi assocerete una descrizione digitandola
nel secondo campo, aggiungendo infine il vostro nome nel terzo e ultimo campo e
cliccando sul pulsante Create Child. Senza badare allo strano messaggio che comparirà in
alto sostituendo la schermata, cliccate su Temi nella sezione Aspetto e vedrete come il
tema attivo è ora il child theme di Twenty Eleven (Figura 4.19).
Figura 4.19 – Il tema figlio (child theme), di Twenty Eleven creato con il plugin One-
Click Child Theme attivo e pronto per essere modificato senza influire sul tema genitore.
Quando si crea un tema figlio e lo si rende attivo, si perdono ovviamente le impostazioni
di personalizzazione applicate al tema originale (genitore), quindi in questo caso dovrete
riassegnare la testata grafica personalizzata, eliminare il testo di titolo e sotto-titolo,
impostare il colore di sfondo e infine assegnare il menu al Primary Menu del tema figlio;
tutte operazioni facili e veloci se le avete già eseguite come descritto in precedenza
(Figura 4.20).
Figura 4.20 – La personalizzazione del child theme di Twenty Eleven, per ottenere lo
stesso risultato con testata e menu.

nota
Anche se gli argomenti trattati da questo punto in poi all’interno del capitolo
presuppongono una certa conoscenza di CSS e PHP, se applicati su un sito di testo e
per scopi puramente didattici, permetteranno a chiunque di incamminarsi sulla strada
della personalizzazione del codice con cui sono realizzati i temi. Se non vi sentite
ancora pronti per questo genere di modifiche, potete saltare questo paragrafo e
passare direttamente a quello successivo, ma il consiglio è di dare almeno uno
sguardo all’argomento e tornarvi successivamente. Assicuratevi in ogni caso di
esercitarvi sempre su un sito di prova, eventualmente installato su server locale, e non
dimenticate di avere a disposizione una copia di backup dei file che andrete a
modificare.
Per esercitarsi e comprendere come individuare e scoprire il codice che determina la
struttura di un tema, è utile servirsi degli strumenti incorporati di serie nei browser.
Utilizzando Firefox o Chrome, per esempio, potete cliccare col tasto destro in un punto
qualsiasi della pagina Web visualizzata e scegliere rispettivamente Analizza elemento o
Ispeziona elemento per accedere a uno speciale pannello (Figura 4.21) attraverso il quale
potrete esplorare il codice della pagina e persino applicare delle modifiche fittizie, non
influiscono sul codice reale ma solo sull’anteprima visualizzata nel browser, e di
conseguenza tali da non compromettere l’integrità del codice originale del tema.

Figura 4.21 – Il pannello che compare in Chrome cliccando col tasto destro del mouse su
un punto qualsiasi della pagina Web visualizzata e selezionando Analizza elemento; si
noti in basso la struttura gerarchica del codice con, a destra, il dettaglio degli stili CSS in
un pannello separato e in alto, evidenziata, l’area cui si riferisce il codice selezionato.
Volendo, per esempio, ridurre lo spazio fra la barra dei menu e la pagina sottostante,
potreste utilizzare i comandi del browser appena descritti per individuare l’elemento del
foglio stile CSS che determina l’altezza di quella specifica area del tema e modificarne il
valore nel foglio stile CSS del tema figlio, ottenendo il risultato di avvicinare il contenuto
della pagina alla barra del menu.
Osservando il codice, si noterà che l’area sotto la barra del menu è definita
dall’elemento con ID #main (Figura 4.21) del foglio stile e più precisamente dal valore di
“padding” dello stesso, che è di 1,625; essendo utilizzata la numerazione anglosassone, al
posto della virgola ci sarà il punto. La dichiarazione che vedete, infatti, nel foglio stile è la
seguente:
#main {padding:1.625em 0 0;}

Se azzerate il primo valore (1.625em), corrispondente alla distanza verticale


dell’elemento, ridurrete quindi l’altezza dell’area che precede la pagina, avvicinando
quest’ultima alla barra del menu. Per farlo cliccate su Editor nella sezione Aspetto e
aggiungete una nuova riga di codice al foglio stile del tema figlio (Figura 4.22), vale a
dire:
#main {padding:0 0 0;}

Cliccate sul pulsante Aggiorna file per confermare la modifica, assicurandovi di avere
digitato correttamente il testo, spazi compresi, e verificate come ora la distanza fra la barra
del menu e la pagina sottostante sia stata ridotta.

Figura 4.22 – Il foglio stile del tema figlio con la nuova riga di codice aggiunta in basso,
che andrà a sostituire la corrispondente dichiarazione di stile CSS presente nel tema
genitore; si noti a destra l’assenza dei template, poiché la cartella del tema figlio contiene
inizialmente solo il foglio stile CSS.
Potrete ora utilizzare il metodo appena visto per individuare, nel foglio stile, il campo di
ricerca visualizzato nella barra dei menu e fare in modo che scompaia, lasciando spazio
alle voci del menu stesso.
Mentre visualizzate la home page del sito nel browser, quindi dal frontend, cliccate col
tasto destro sull’area dove è posizionato il campo di ricerca e selezionate il comando
Ispeziona elemento, in Chrome, oppure Analizza elemento, in Firefox: scoprirete subito
che l’elemento nel foglio stile del tema che contiene il campo di ricerca è identificato con
l’ID #searchform e cliccando sulla riga corrispondente (Figura 4.23) potrete visualizzarne
nel pannello di destra i parametri che definiscono, per esempio, la posizione verticale,
“(bottom”), e la larghezza, (“max-width”). Volendo, potreste esercitarvi a variare i valori
di questi parametri direttamente nel pannello di destra e osservare l’effetto dei
cambiamenti, ma vediamo prima di tutto come ottenere il risultato prefissato, cioè non
visualizzare più il campo di ricerca nella barra del menu.
Figura 4.23 – L’elemento corrispondente al campo di ricerca nel tema Twenty Eleven
esplorato con lo strumento Analizza elemento di Chrome; si noti a destra il corrispondente
elemento nel foglio stile CSS e i rispettivi parametri.
Il codice da inserire nel foglio stile CSS del child theme, usando l’editor dei temi come è
stato fatto in precedenza, in questo caso, è il seguente:
#searchform { display: none; }

In questo modo si dichiara che l’elemento con ID #searchform non dovrà essere
visualizzato per nulla, liberando come previsto lo spazio nella barra dei menu. Tuttavia
avrete ancora bisogno di una modifica finale se volete effettivamente allargare l’area del
menu per inserire eventuali voci aggiuntive o per ripristinare l’etichetta originale di quelle
esistenti, senza che ciò provochi gli errori di visualizzazione visti in precedenza.
Figura 4.24 – L’elemento del foglio stile CSS che contiene le voci di menu identificato
per mezzo dello strumento di analisi del codice di Chrome; si noti in alto la specifica del
valore di larghezza (391px) e a destra la parte inferiore del pannello, dove sono
visualizzati tutti i valori corrispondenti alle distanze e dimensioni dell’elemento.
L’ultimo intervento sul codice del foglio stile riguarda l’elemento che “contiene” le voci di
menu, che individuerete con il sistema già visto e del quale dovrete modificare la
larghezza: in questo caso l’elemento è identificato con l’ID #menu-menu-principale
(Figura 4.24) e per mezzo dell’etichetta “tooltip”, che compare quando si posiziona il
puntatore sulla riga di codice corrispondente, potrete vedere che gli è stata assegnata una
larghezza di 390 pixel, mentre la larghezza complessiva della barra di navigazione, il cui
elemento si chiama #access, è di 690 pixel.
Figura 4.25 – Il foglio stile CSS del child theme di Twenty Eleven, con tutte le modifiche
descritte finora, si noti il parametro !important; nella penultima riga, volto a rafforzare la
modifica apportata dal comando display:none.
A questo punto non resta che inserire, nel foglio stile del tema figlio, la riga di codice
seguente per ridefinire la larghezza del “contenitore” delle voci di menu:
#menu-menu-principale {width:690px;}

Ora potrete finalmente ripristinare tutto lo spazio disponibile sulla barra e visualizzare
anche un menu con voci più lunghe o con un maggior numero di voci (Figura 4.26).
Figura 4.26 – La home page del sito con il menu che sfrutta l’intera larghezza della barra
dopo le modifiche al foglio stile del child theme.

nota
Esercitatevi a individuare, per esempio, il codice CSS che definisce le dimensioni dei
titoli di pagina e l’altezza dell’area che li contiene, in modo da ridurne l’ingombro
complessivo, guadagnando altro spazio per il contenuto. Usando il metodo finora
descritto non sarà difficile, ma eccovi un indizio: in questo caso non si tratterà di ID
bensì di “classi” CSS, quindi saranno precedute dal punto anziché dal cancelletto.
L’ultima modifica al codice che applicherete riguarda invece il piè di pagina, dove
inserirete il classico link all’autore o allo sviluppatore del sito. In questo caso, la modifica
non va applicata al foglio stile CSS, quindi non potrete usare la funzione introdotta dal
plugin CSS Plus, bensì al template footer.php che contiene, infatti, quanto viene
visualizzato nel piè di pagina del sito.
Tale modifica andrà applicata al tema originale, salvo che non si decida di creare una
copia del template footer.php e collocarla nella cartella del tema figlio, usando come
sempre un client FTP o la gestione file del pannello di hosting se presente: sarete voi a
decidere quale delle due soluzioni adottare, ricordando che nel primo caso dovrete
ricordarvi di riapplicare la modifica qualora il tema genitore venga aggiornato. In entrambi
i casi, la procedura per questa modifica rimane la stessa: accedete alla schermata
dell’editor di temi selezionando la voce Editor del menu Aspetto e, dopo avere scelto il
tema genitore dal menu Selezionare il tema da modificare, se avete scelto di non
duplicare il template nel tema figlio, selezionate il template footer.php nell’elenco di
destra (Figura 4.27).
Alla fine del codice trovate la porzione di testo che visualizza la scritta “Proudly
powered by WordPress” con il link a WordPress.org, ovvero questa:
a href=”<?php echo esc_url( __( ‘http://wordpress.org/’, ‘twentyeleven’ ) ); ?>” title=”<?php
esc_attr_e( ‘Semantic Personal Publishing Platform’, ‘twentyeleven’ ); ?>”><?php printf( __( ‘Proudly
powered by %s’, ‘twentyeleven’ ), ‘WordPress’ ); ?></a>

Non lasciatevi intimorire dai vari comandi PHP inclusi nella riga di codice, poiché per
aggiungere la vostra scritta personalizzata e relativo link basta molto meno. Sarà
sufficiente aggiungere, in coda al codice appena descritto e senza andare a capo, la
seguente riga di codice HTML:
& <a href=“http://www.wpaz.it” title=“WordPress dalla A alla Z”>WPAZ</a>

Quanto vedete qui sopra creerà la scritta “& WPAZ” di fianco al testo già visualizzato nel
piè di pagina, inserendo il link al blog: chi ha esperienza di HTML non faticherà a
riconoscere la sintassi di questa riga di codice, mentre per tutti gli altri basti sapere che è
possibile modificare le parti fra doppi apici e la sigla finale WPAZ senza toccare il resto
del codice, per ottenere il risultato desiderato. Come sempre, la pratica vi permetterà di
familiarizzare con la procedura fino a renderla perfettamente comprensibile.

Figura 4.27 – Il codice alla fine del template del piè di pagina, footer.php, con l’aggiunta
per visualizzare una scritta e un link personalizzato di fianco al testo esistente; si noti in
basso a destra il template selezionato nell’elenco.

nota
Ricordatevi di riselezionare il tema figlio una volta applicate le modifiche al template
del tema genitore, se avete scelto di modificare quest’ultimo invece di creare una
copia del template footer.php nella cartella del tema figlio.
4.5 Inserimento di una mappa di Google
Capita spesso di voler incorporare una mappa di Google all’interno di un sito Web,
tipicamente nella pagina “Dove Siamo”, ecco perché abbiamo deciso di includere un
paragrafo apposito in questo capitolo.
Sempre che il tema utilizzato non preveda già una funzione specifica, in genere è
possibile inserire una mappa di Google in due modi: incorporandone il codice fornito
direttamente da Google Maps oppure utilizzando uno specifico plugin.
Nel primo caso visualizzerete dapprima la mappa usando la pagina di Google Maps
dopo avere inserito l’indirizzo preciso nel campo di ricerca (Figura 4.28) e poi, cliccando
sull’icona a forma di ingranaggio, selezionerete il comando Share and embed map
(Figura 4.29). Otterrete così la visualizzazione di un riquadro in cui basterà cliccare
sull’etichetta Embed map, in alto a sinistra, per visualizzare la scheda contenente il
codice e un’anteprima del risultato, con tanto di menu per selezionare le dimensioni della
mappa fra le tre predefinite (piccola, media e grande) oppure l’opzione Customize size
per impostare voi stessi le dimensioni desiderate.

Figura 4.28 – Per ottenere il codice da incorporare in un contenuto di WordPress e


visualizzare una mappa di Google corrispondente a un indirizzo, è necessario prima di
tutto che questo sia inserito in modo esatto nel campo di ricerca.
Figura 4.29 – La finestra con l’anteprima della mappa di Google e, in alto, il codice da
copiare e incollare per incorporarla nel vostro contenuto; si noti l’etichetta Embed map
selezionata per visualizzare la scheda adatta e, in basso a destra, l’icona a forma di
ingranaggio e il menu con il comando Share and embed map, che visualizza il riquadro
con il codice e l’anteprima.
Per incorporare il codice ottenuto dovrete procedere come abbiamo già visto nel secondo
capitolo a proposito dei video: passare alla modalità Testo e incollare il codice nella
posizione desiderata rispetto all’eventuale contenuto esistente (Figura 4.30).
Figura 4.30 – Il codice della mappa di Google inserito prima del contenuto esistente in
modalità Testo, sarà come sempre visualizzato sotto forma di rettangolo grigio quando si
passa alla modalità Visuale, mostrando invece la mappa nel frontend.
Il risultato sarà naturalmente visibile solo nel frontend del sito (Figura 4.31) in quanto,
come abbiamo già visto negli altri casi di codice incorporato, passando alla modalità
Visuale dell’editor, nel backed sarà visualizzato solo un riquadro di colore grigio come
segnaposto.
Figura 4.31 – La mappa di Google così come sarà visualizzata nel fronted del sito,
ovviamente interattiva e navigabile come quando viene utilizzata nella pagina di Google
Maps.
Come avevamo accennato a inizio paragrafo, l’inserimento di una mappa di Google può
avvenire anche per mezzo di un plugin: esistono innumerevoli plugin gratuiti e
commerciali adatti allo scopo, ma per questo esempio sceglieremo uno fra i più semplici
da utilizzare, che non a caso si chiama Very Simple Google Maps (wpaz.it/053).
Cercate e installate il plugin con il comando Aggiungi nuovo della sezione Plugin di
WordPress (attenzione alla “s” finale poiché esiste un plugin dal nome simile ma senza
“s”), quindi attivatelo. A questo punto non ci sarà bisogno di alcuna impostazione: basterà
aprire di nuovo in modifica la pagina “Dove Siamo” e, al posto del codice precedente,
inserire, in modalità Visuale, uno shortcode come questo:
[vsgmap address=“Carmignano, Piazza Vittorio Emanuele, Carmignano, Prato, Toscana, Italia”
align=center width=800 zoom=16]

I parametri align, width e zoom possono anche essere omessi, ma in tal caso il plugin
adotterà quelli predefiniti.
4.6 Inserimento di un modulo contatti
In qualunque sito che si rispetti non dovrebbe mai mancare un modulo per i contatti e
ovviamente anche in questo senso le soluzioni non mancano: se il tema non prevedesse già
un template ad hoc oppure quello in dotazione al tema non vi soddisfa, potete provare con
un plugin come Contact Form 7 (wpaz.it/054), che contiene già la lingua italiana ed è
abbastanza flessibile da soddisfare la maggior parte delle esigenze.
Figura 4.32 – La schermata principale Moduli di contatto del plugin Contact Form 7; si
noti il pannello introduttivo in alto, che è possibile eliminare cliccando su Dismiss e, a
sinistra, nella barra di amministrazione di WordPress, la nuova sezione CF7 con le due
voci Moduli di contatto e Aggiungi nuovo.
Cercate quindi il plugin, installatelo e attivatelo con la solita procedura e osservate come
in questo caso venga aggiunta una nuova sezione (CF7), alla barra degli strumenti di
amministrazione di WordPress (Figura 4.32), piuttosto che una nuova voce nella sezione
Impostazioni o Strumenti come in altri casi: cliccando su CF7 vi ritroverete nella prima
delle due schermate del plugin (Moduli di contatto), dove sono visualizzati i moduli già
creati (inizialmente solo quello predefinito). Dopo avere eliminato il pannello introduttivo
in alto, cliccando su Dismiss, potrete modificare il modulo predefinito o crearne una copia
spostandovi col puntatore sul suo nome e cliccando rispettivamente sul menu di scelta
rapida Modifica o Copia.
Figura 4.33 – La parte alta della schermata Edit Contact Form di Contact Form 7; si noti
in alto lo shortcode del modulo che si sta modificando o creando e, al di sotto, gli elementi
del modulo a sinistra e il menu per aggiungerne altri a destra.
Nella schermata Edit Contact Form, in cui vi trovate sia quando modificherete i moduli
esistenti, sia quando deciderete di crearne di nuovi (Figura 4.33), trovate una serie di
riquadri che ora riassumeremo per praticità:
• shortcode
questo riquadro contiene lo shortcode da inserire nella pagina che dovrà visualizzare
il modulo e un link per crearne una copia esatta (Duplicate); sotto questo riquadro è
presente anche il pulsante per salvare le eventuali modifiche apportate al modulo.
• Modulo
nell’area sinistra di questo pannello vengono inseriti gli elementi del modulo generati
con il menu presente nell’area destra e configurati sempre nella stessa finestra.
• Mail
in questo pannello potrete definire i dettagli del messaggio che ricevete quando un
utente compila e invia il modulo.
• Mail(2)
questo secondo pannello permette di inviare una mail automatica (opzionale) a tutti
coloro che hanno usato il modulo, come negli autorisponditori.
• Messaggi
in quest’area è possibile modificare i messaggi utilizzati dal plugin in tutte le
situazioni previste, comprese quelle che generano un errore.
• Impostazioni aggiuntive
in questo riquadro i più esperti possono inserire del codice per attivare azioni
aggiuntive al verificarsi di determinate condizioni.
Come abbiamo visto, Contact Form 7 contiene già un modulo predefinito che potete usare
anche senza modifiche, visto che prevede tutti i campi fondamentali, ma daremo un rapido
sguardo alle diverse possibilità di creazione e modifica per chi volesse cimentarsi a
personalizzare il modulo predefinito o crearne di nuovi. Cliccate quindi su Modifica nel
menu di scelta rapida del modulo predefinito per accedere alla schermata Edit Contact
Form (Figura 4.33).

nota
Lo spazio a disposizione è come sempre insufficiente a trattare in modo approfondito
tutte le caratteristiche di un plugin articolato come Contact Form 7, al quale saranno
comunque riservati degli articoli di approfondimento sul blog wpaz.it.
In questa schermata potete prima di tutto cambiare il nome del modulo cliccandovi sopra
nel riquadro in alto, ricordando che questa modifica influenza anche lo shortcode, quindi
dovrete eventualmente sostituirlo se lo avete già utilizzato. La modifica del nome del
modulo può tornare utile se decideste, per esempio, di creare una copia di quello
predefinito usando il link Duplicate, in alto a destra in questo primo riquadro, dal
momento che il nuovo modulo avrà lo stesso nome di quello originale seguito
semplicemente da _copy.
Un’altra operazione utile che potete fare in questa schermata è la personalizzazione dei
testi presenti nel modulo, all’interno del secondo pannello (Modulo) evitando di
modificare tutto quanto è compreso fra parentesi quadre, quindi intervenendo solo su ciò
che è generalmente racchiuso nella prima riga di ogni elemento, in mezzo ai tag HTML
<p> e <br />, che rispettivamente aprono un nuovo paragrafo e creano un a capo.
Figura 4.34 – La creazione di un elemento aggiuntivo per il modulo, in questo caso un
menu a cascata con diverse opzioni; si noti lo shortcode da inserire fra quelli già presenti
nel modulo a sinistra e, al di sotto, lo shortcode per il riquadro Mail.
Volendo inserire nuovi elementi nel form, potete utilizzare il menu posto sulla destra di
questo stesso pannello, configurando l’elemento creato e inserendolo nel riquadro di
sinistra nella posizione desiderata con un semplice copia e incolla dello shortcode
principale prodotto dall’operazione (Figura 4.34). Ricordate inoltre di incollare nei campi
email del pannello sottostante lo shortcode secondario visualizzato in basso. Anche in
questo caso, non basterebbe un intero capitolo per descrivere in dettaglio le diverse
possibilità di ogni singolo elemento disponibile nel menu, quindi rimandiamo gli
approfondimenti al blog.
Figura 4.35 – Il pannello Mail nella schermata Edit Contact Form, che permette di
configurare il messaggio ricevuto quando un utente invia un modulo; si noti il testo in
inglese a destra, che potete eventualmente modificare.
Nel pannello Mail (Figura 4.35) trovate, invece, tutti gli elementi che andranno a
comporre l’email ricevuta quando un utente compila e invia il modulo dal sito. Ricordate
di impostare correttamente l’indirizzo del destinatario nel primo campo, poiché sarà quello
cui Contact Form 7 invierà i dati del modulo trasmesso dall’utente. La modifica o la
compilazione del campo Corpo del messaggio, a destra, è del tutto opzionale, visto che
contiene ciò che sarà ricevuto da noi e non dall’utente.
Figura 4.36 – Il pannello opzionale Mail(2) per l’invio di un’email al mittente del modulo
e, al di sotto, i messaggi di sistema predefiniti utilizzati da Contact Form 7; si noti come
alcuni di essi siano ancora in inglese ed è quindi opportuno modificarli traducendoli.
Il pannello Mail(2) permette di configurare un messaggio che sarà inviato invece
all’utente quando quest’ultimo compila e invia il modulo, potete quindi utilizzarlo come
una forma di autorisponditore, tipico delle operazioni di marketing, o semplice forma di
cortesia. A questo pannello segue quello dei Messaggi (Figura 4.36) utilizzati dal plugin
durante le varie operazioni ed è ovviamente possibile personalizzarli, ed eventualmente
tradurre quelli ancora in inglese, che sono tuttavia specifici per determinate situazioni,
quindi secondari.
L’ultimo pannello (Impostazioni aggiuntive) è riservato solo agli utenti più esperti, dal
momento che può ospitare del codice personalizzato per attivare funzioni extra non
previste direttamente dalle opzioni del plugin, quindi potete tralasciarlo visti gli obiettivi
di questo capitolo.
Figura 4.37 – La pagina Contatti con lo shortcode che visualizzerà il modulo nel
frontend; si noti come l’inserimento sia stato fatto in modalità Visuale, come si fa in
genere per tutti gli shortcode.
A questo punto non vi rimane che inserire il modulo all’interno della pagina Contatti del
vostro sito, incollando semplicemente il suo shortcode mentre siete in modalità Visuale
durante la modifica o creazione della pagina (Figura 4.37) e poi visualizzando l’anteprima
della pagina per verificare il risultato nel frontend (Figura 4.38).
Non dimenticate di testare il funzionamento del modulo compilandone i dati e
inviandoli dalla pagina dove è pubblicato, facendo attenzione che il messaggio non sia
finito nello spam.
Figura 4.38 – Il modulo predefinito senza modifiche, così come viene visualizzato nella
pagina Contatti sul frontend del sito.
4.7 Creazione di un’area blog o news
Non si può trascurare, per il sito di base, un ultimo ma non meno importante aspetto, vale
a dire la presenza di un’area dedicata ai contenuti dinamici.
Questa sezione del sito sarà naturalmente creata usando gli articoli di WordPress e
richiamata da un’apposita voce di menu che aggiungerete sotto forma di categoria:
procedete quindi con il creare prima di tutto quest’ultima, prima degli articoli di esempio.
Figura 4.39 – La schermata Categorie richiamata dall’omonima voce della sezione
Articoli nel backend di WordPress; si noti a destra la categoria predefinita Uncategorized
e al di sotto il menu di scelta rapida che compare passandovi sopra il puntatore.
Cliccate sulla voce Categorie della sezione Articoli nel backend per accedere alla
schermata omonima (Figura 4.39) e digitate nel primo campo (Nome) il nome della
categoria che assocerete ai vostri contenuti dinamici, per esempio “News”, cliccando
infine semplicemente sul pulsante Aggiungi una nuova categoria, che trovate nella parte
bassa della schermata.

nota
La categoria predefinita “Uncategorized” viene assegnata automaticamente a tutti gli
articoli per i quali ci si dimentica di selezionare una delle categorie create
successivamente. È consigliabile modificarne il nome in qualcosa di più specifico,
per esempio il nome del sito, oppure tradurla con un termine italiano appropriato. Per
farlo basta usare il menu di scelta rapida che compare sotto il nome, come si vede in
Figura 4.39.
Figura 4.40 – La schermata di creazione e modifica degli articoli; si noti in basso a destra
come la nuova categoria News sia stata selezionata mentre è deselezionata la categoria
predefinita Uncategorized.
Procedete quindi a creare alcuni articoli di prova, ricordandovi di assegnare a ognuno di
essi la categoria News prima di pubblicarli (Figura 4.40), facendo contemporaneamente
attenzione che non sia invece selezionata la categoria predefinita Uncategorized.
Dopo aver creato almeno due o tre articoli, potrete passare alla fase successiva, vale a
dire la creazione della voce di menu che permette ai visitatori del sito di visualizzarli.
Figura 4.41 – L’aggiunta della categoria News come voce del menu del sito; si noti come
la nuova voce di menu venga aggiunta automaticamente in coda alle altre, ma che come
sempre sia possibile spostarla trascinandola in una posizione diversa.
Cliccate sulla voce Menu della sezione Aspetto e, dopo avere espanso il pannello
Categorie a sinistra, selezionate la categoria News e cliccate su Aggiungi al menu per
inserirla nel vostro menu principale (Figura 4.41). Potete decidere la sua posizione rispetto
alle altre voci di menu trascinandola, per esempio, in modo che preceda la voce Contatti.
Non dimenticate di cliccare sul pulsante Salva menu per confermare la nuova modifica.
Figura 4.42 – Il nuovo menu News e l’elenco degli articoli che compare cliccando su di
esso; si notino le info relative a data e categoria e i riferimenti ai commenti, ricordando
che potete sempre disabilitare questi ultimi.
Non vi resta che ricaricare la home del sito e verificare la presenza della nuova voce News
nel menu, cliccando sulla quale otterrete la visualizzazione degli articoli appartenenti a
tale categoria, disposti in ordine cronologico inverso (Figura 4.42).
Potete esercitarvi, a questo punto, a creare delle sotto-categorie della categoria News
per organizzare gli articoli, aggiungendo poi queste nuove categorie come sotto-voci del
menu News usando gli strumenti di personalizzazione del menu già visti. Inoltre, potete
disattivare i commenti per ogni singolo articolo durante la sua creazione o modifica,
oppure disabilitarli globalmente per tutti i nuovi articoli creati, usando la voce
Discussione della sezione Impostazioni nel backend e deselezionando l’opzione
Consenti la scrittura di commenti per i nuovi articoli.

nota
Anche se in questo capitolo non abbiamo preso in considerazione tutti gli elementi
che potrebbero far parte di un sito di base, quanto illustrato qui e nei capitoli
precedenti dovrebbe già fornire un bagaglio sufficiente ad affrontare lo sviluppo di un
sito con WordPress. Nei capitoli successivi completeremo questo bagaglio
aggiungendo le competenze che non possono mancare a chi volesse creare siti
professionali.
5
Traduzioni e multi-lingua
Come sappiamo WordPress è una piattaforma CMS sviluppata negli USA, con finalità
prima di tutto internazionali e di conseguenza nasce e si diffonde principalmente in lingua
inglese. Lo stesso vale per la stragrande maggioranza dei temi e dei plugin che vengono
sviluppati quotidianamente per accrescerne le funzionalità.
Per quanto riguarda la nostra lingua, abbiamo visto che WordPress è disponibile per il
download già in forma tradotta, grazie al prezioso contributo di alcuni volontari italiani
che si occupano anche di aggiornare periodicamente la traduzione parallelamente alla
pubblicazione delle versioni aggiornate del CMS.
Ma come comportarci se volessimo aggiungere la lingua italiana a un’installazione di
WordPress ancora nella sua forma originale in inglese? Come potremmo tradurre la lingua
di un tema o di un plugin perché visualizzi i suoi messaggi in italiano? E infine, come
potremmo aggiungere a un sito già sviluppato una o più lingue straniere?
In questo capitolo proveremo a fornire una serie di risposte chiare e sintetiche a queste
domande, consigliando come sempre gli strumenti migliori per gestire ognuno degli
aspetti sopra menzionati: esamineremo, quindi, prima di tutto la traduzione di WordPress e
dei relativi temi e plugin, per passare poi alla traduzione dei contenuti di un sito in più
lingue, sia dal punto di vista automatizzato, sia nei casi più professionali di traduzione
manuale del sito.
5.1 Traduzione di WordPress e dei relativi temi e plugin
La differenza fra una versione originale, quindi in inglese, di WordPress e una versione
tradotta in una lingua specifica è determinata da due elementi: la presenza della
sottocartella languages all’interno della cartella principale wp-content (Figura 5.1) e la
specifica della lingua da utilizzare nel file wp-config.php.
Figura 5.1 – La struttura della sotto-cartella languages contenuta nella cartella principale
wp-content della versione italiana di WordPress; si notino le due sotto-cartelle plugins e
themes che contengono a loro volta i file di lingua per i due tipi di elementi già tradotti.
Quando scaricate una versione in italiano di WordPress o la installate per mezzo di uno
strumento del pannello di hosting scegliendo la vostra lingua, entrambi gli elementi sopra
descritti sono inseriti automaticamente giacché contenuti nell’archivio compresso di
WordPress utilizzato, che è appunto già predisposto per la versione italiana del CMS.
Figura 5.2 – La parte di codice del file wp-config.php, che contiene l’impostazione per
l’eventuale lingua diversa dall’inglese originale, associata al parametro WPLANG; si noti
il valore it_IT che specifica l’italiano.
Qualora vi doveste trovare di fronte alla necessità di tradurre una versione di WordPress
già installata, avreste due possibilità: aggiungere i due elementi appena visti oppure
utilizzare un apposito plugin. Nel primo caso dovrete caricare nel vostro spazio Web la
sotto-cartella languages nella cartella wp-content, dopo averla estratta da una copia di
WordPress in italiano (wpaz.it/007), modificando poi il file wp-config.php per aggiungere
il parametro it_IT alla riga di codice che contiene la definizione della lingua per il
parametro WPLANG (Figura 5.2).
Nel secondo caso, vi basterà cercare e installare il plugin gratuito WordPress Language
(wpaz.it/055) che, una volta attivato, aggiungerà all’area di amministrazione di WordPress
un menu dal quale è possibile selezionare la nuova lingua, che sarà così inserita
automaticamente dal plugin stesso, che a sua volta si occuperà di installare i file necessari
e configurare il CMS di conseguenza; permettendovi anche di usare la nuova lingua per i
successivi aggiornamenti di WordPress).
A proposito dei file di lingua, a questo punto è importante soffermarci proprio sul loro
formato e sulle modalità con cui possono essere modificati o creati. Questi file seguono lo
standard GetText, utilizzato per l’internazionalizzazione dei siti sviluppati con PHP, e
possono essere in uno dei seguenti tre formati:
• POT (Portable Object Template)
si tratta del formato che si ottiene quando si estrae il testo dall’applicazione PHP (per
es. un CMS, un tema o un plugin) per inviarlo ai traduttori.
• PO (Portable Object)
questo è il primo dei due file che utilizzerete per gestire le traduzioni, si tratta di una
traduzione già realizzata, che potete facilmente modificare con un apposito
programma di cui parleremo fra poco.
• MO (Machine Object)
il secondo dei due file che utilizzerete, in questo caso composto da un codice
comprensibile alle macchine più che agli umani, infatti, viene generato
automaticamente quando si salva il file PO tradotto.
Esaminando i file contenuti nella cartella languages di WordPress (Figura 5.1) vi
accorgerete subito che sono delle coppie di file con estensione .po e .mo, appartenenti
quindi ai due formati sopra descritti. Saranno questi, di conseguenza, i file che potrete
usare per creare la versione italiana di un tema o di un plugin. Vediamo in pratica come
procedere.
Prima di tutto dovete procurarvi il programma PoEdit (wpaz.it/056), disponibile sia per
Windows, sia per Mac OSX: si tratta di un software gratuito dedicato proprio a questo
scopo, che è disponibile anche in una versione pro a pagamento (al momento di scrivere
acquistabile per circa 20 dollari), che semplifica in modo particolare il lavoro di
traduzione con i componenti di WordPress: temi e plugin.

Figura 5.3 – La schermata visualizzata dall’applicazione PoEdit all’avvio; si noti in basso


la terza opzione destinata solo agli utilizzatori della versione pro a pagamento.
nota
Non bisogna lasciarsi confondere dalle opzioni visualizzate sulla schermata di avvio
di PoEdit, in quanto, come vedremo fra poco, anche le prime due possono essere
usate per tradurre un file di lingua esistente in italiano o generarne uno nuovo. La
terza scelta rappresenta una funzione aggiuntiva presente nella versione a pagamento
e, rispetto alle prime due, permette di estrarre il file di lingua direttamente dal codice
del tema o del plugin, nei casi in cui non fosse ancora disponibile.
All’avvio (Figura 5.3), PoEdit visualizza una schermata con tre opzioni: la prima
(Modifica una traduzione) permette di aprire un file PO esistente e modificarlo, la
seconda (Crea nuova traduzione), consente di aprire anche i file POT e serve per creare
nuove traduzioni, mentre la terza (Traduci tema WordPress o plugin), richiede la
versione pro del software ed è in grado di estrarre un file POT dall’archivio di un tema o
di un plugin anche se non lo prevedono in origine.
Procederemo ora con due diverse situazioni gestibili con la versione gratuita del
programma, prima di esaminare l’opzione presente solo nella versione a pagamento.
Il primo caso è quello in cui si ha a disposizione un file POT: potete prendere come
esempio l’archivio del tema predefinito Twenty Eleven, scaricandolo dal sito ufficiale di
WordPress.org (wpaz.it/057). All’interno della cartella di Twenty Eleven troveretete una
sotto-cartella languages, che contiene a sua volta un file chiamato twentyeleven.pot:
utilizzando la seconda opzione di PoEdit, che nel menu File è riportata come Nuovo file
da POT/PO, aprite il file POT del tema e selezionate l’italiano come lingua per la
traduzione (Figura 5.4).
Figura 5.4 – L’interfaccia di PoEdit con, al centro, la scelta della lingua per la traduzione
che sarà visualizzata aprendo un file POT; si notino in alto le stringhe di testo del file
originale (sorgente) e, nei due riquadri più piccoli in basso, rispettivamente il campo del
testo sorgente selezionato e quello della traduzione, al momento assente.
Procedete quindi selezionando una riga per volta nel riquadro grande Testo sorgente in
modo che il suo originale sia visualizzato nel riquadro più piccolo sottostante che porta lo
stesso nome, quindi digitate nell’ultimo riquadro in basso, Traduzione, la traduzione del
testo selezionato. Una volta che avrete completato la traduzione di tutto il testo desiderato,
potete anche tradurlo parzialmente, selezionate l’opzione Salva dal menu File e vedrete
che il programma assegnerà automaticamente al file della vostra traduzione il nome
it_IT.po e, salvandolo, creerà altrettanto automaticamente il relativo file it_IT.mo: questi
due file andranno collocati nella cartella languages del tema sul vostro spazio Web
affinché Twenty Eleven sia visualizzato in italiano; a patto che anche WordPress sia
impostato per tale lingua, ovviamente.
Il secondo caso è, naturalmente, quello in cui avete già a disposizione un file PO: se si
tratta di un file it_IT.po, eventualmente già tradotto in parte, basterà cliccare due volte
sulla sua icona per aprirlo con PoEdit e modificarlo, salvando poi la versione aggiornata.
Quando si tratta, invece, di un file in altra lingua, per esempio in inglese (quindi
en_EN.po), potete aprirlo usando l’opzione Nuovo da file POT/PO in modo da poter
selezionare poi la lingua italiana prima di risalvarlo, proprio come avete fatto prima con il
file POT.

Figura 5.5 – La finestra di scelta della cartella del tema o del plugin che compare in
PoEdit versione pro scegliendo la terza opzione; si noti come in questo caso sia stato
scelto il tema Twenty Eleven per testarlo dopo aver preventivamente escluso la cartella
languages esistente.
Se decidete, invece, di acquistare la versione pro di PoEdit, potrete usare la terza opzione
della schermata d’avvio o l’opzione Nuova traduzione WordPress del menu File per
selezionare una cartella contenente un tema o un plugin di WordPress privi di file di lingua
(Figura 5.5) e far generare automaticamente al programma la relativa cartella languages in
cui salverà la nuova coppia di file PO e MO associati alla lingua da voi selezionata con la
solita procedura.
Se avete adottato la versione pro di PoEdit e non avete a disposizione nell’immediato
un tema o un plugin privi di traduzione, potrete per esempio eliminare la cartella
languages da quella del tema Twenty Eleven, dopo aver decompresso quest’ultimo,
selezionando poi la cartella twentyeleven da PoEdit per testare la funzione di creazione
della cartella e dei file di lingua (Figura 5.5).
5.2 Traduzione automatica dei contenuti di un sito
Quando si tratta di tradurre i contenuti di un sito o di un blog, avete a disposizione due
possibilità: affidare il lavoro di traduzione a un servizio automatizzato come quello di
Google o simili, oppure creare una vera e propria struttura multi-lingua dove le traduzioni
sono realizzate manualmente e possibilmente in modo professionale.
In questo paragrafo daremo uno sguardo alla prima soluzione, che come si intuisce è
realizzabile con l’uso di plugin, che si appoggiano ai servizi di traduzione del Web e di
conseguenza rappresenta un approccio tutt’altro che professionale. Può comunque andar
bene per blog e siti di fascia medio-bassa, quindi prenderemo in considerazione alcuni fra
i numerosi plugin disponibili cercando di scegliere quelli contraddistinti da una maggiore
praticità d’utilizzo. Molti dei plugin disponibili, infatti, presentano degli aspetti che ne
rendono complessa o addirittura sconsigliabile l’implementazione, il che riduce
notevolmente la libertà di scelta.

Figura 5.6 – La barra di traduzione visualizzata dal pulsante di WP Translate; si noti la


disposizione in alto ben distante dal layout del sito e i testi dei menu e della pagina già
tradotti, in questo caso in inglese.
Cominciamo con WP Translate (wpaz.it/058), che una volta installato aggiunge
automaticamente un pulsante nell’area in alto a destra della pagina visualizzata dal
browser, cliccando sul quale viene visualizzata, sempre nella parte alta della pagina, una
barra da cui si può scegliere la lingua e ottenere la traduzione cliccando su un pulsante
(Figura 5.6). L’aspetto positivo di questo plugin è che tanto il pulsante di attivazione,
quanto la barra di selezione e applicazione della lingua sono collocati in modo da non
influire sul layout del sito, ma questo può diventare anche un lato positivo, nel caso gli
utenti non notino il pulsante iniziale. È possibile anche acquistare una versione pro del
plugin, che in teoria permetterebbe di decidere la disposizione del pulsante, tuttavia
quest’ultimo rimane comunque relegato ai quattro angoli estremi della pagina visualizzata.
Figura 5.7 – Il sito di prova dopo l’attivazione e configurazione di Google Language
Translator; si noti il pulsante Translate in basso a destra, le bandierine e il menu sotto la
testata, a sinistra, e la barra di traduzione di Google, che compare nella parte alta del sito
quando si clicca su una bandiera per tradurre la pagina e che può essere disattivata nelle
opzioni.
Google Language Translator (wpaz.it/059), al contrario di WP Translate, offre un’estrema
visibilità agli strumenti di traduzione in quanto, oltre a visualizzare un pulsante facilmente
individuabile in basso a destra sullo schermo (Figura 5.7), permette di inserire le
bandierine delle lingue desiderate in un punto qualsiasi del layout, ma per ottenere questo
risultato occorre aggiungere una riga di codice PHP al layout del tema; preferibilmente
alla testata, ovvero al template header.php.
La schermata di impostazioni del plugin, visualizzabile dalla nuova voce Google
Language Translator aggiunta alla sezione Impostazioni di WordPress dopo
l’attivazione, permette di scegliere la lingua di partenza del sito e le lingue da visualizzare,
l’uso delle bandierine, la presenza della barra di Google Translator e altre opzioni, oltre a
fornire uno shortcode che è possibile includere nelle pagine e il codice PHP da inserire nel
tema, qualora si desideri visualizzare ovunque i pulsanti di traduzione. È presente, inoltre,
un riquadro per l’inserimento di codice personalizzato per il foglio stile CSS.

nota
L’inserimento del codice PHP, che attiva molti dei plugin di traduzione automatica,
richiede, come sempre, una particolare cautela e l’uso eventuale di un child theme:
quanto spiegato nei due capitoli precedenti sarà sicuramente d’aiuto in questa delicata
operazione, ma è sempre raccomandabile procedere dopo essersi assicurati di avere
un backup del tema e di poterlo rispristinare in caso di problemi.

Figura 5.8 – Il pulsante di traduzione inserito con il codice PHP del plugin Bing
Translator; si noti come vengono tradotti i menu oltre al contenuto.
Bing Translator (wpaz.it/060) sfrutta, invece, il servizio di traduzione del motore di
Microsoft e come Google Language Translator permette di inserire le funzioni di
traduzione sia nel singolo contenuto per mezzo di uno shortcode (Figura 5.9), sia in tutto il
sito con l’utilizzo della riga di codice PHP da inserire nel tema. È anche disponibile come
widget da utilizzare nelle aree predisposte (barra laterale, piè di pagina, ecc.) del tema
utilizzato. Fra le pochissime opzioni del plugin c’è quella che permette al pubblico di
suggerire a Microsoft perfezionamenti o correzioni alla traduzione visualizzata e quella,
molto interessante, per far sì che il contenuto sia tradotto automaticamente in base alla
lingua del browser usato dal visitatore.
Figura 5.9 – Il pulsante aggiunto all’area di editing di WordPress dal plugin Bing
Translator; si noti lo shortcode inserito e la seconda opzione che serve, invece, a marcare
una pagina come da Non tradurre, qualora si utilizzi il codice PHP oppure il widget per
le traduzioni.
Esistono, come dicevamo, altri plugin simili a quelli già illustrati, che tuttavia hanno delle
limitazioni (per es. consentono solo di inserire uno shortcode in ogni singolo contenuto da
tradurre) o delle incompatibilità, quindi la scelta si riduce di molto.
La scelta più professionale rimane, in ogni caso, quella di procedere con traduzioni
manuali del contenuto da visualizzare per mezzo di un plugin per multi-lingua ed è
proprio di questo che parleremo nel prossimo paragrafo.
5.3 Siti multi-lingua con WPML
Realizzare un sito multilingua può essere una decisione delicata che, in alcuni casi, rischia
di complicare le cose. Se, per esempio, decideste di farlo usando siti diversi, uno per ogni
lingua, sullo stesso dominio, vi ritrovereste con più siti da aggiornare e gestire, il che non
è per niente pratico.
L’utilizzo di un plugin specifico per questa funzione, invece, permette di gestire tutte le
traduzioni all’interno dello stesso sito, ottimizzandone di conseguenza la gestione globale.
In quest’ultimo paragrafo, dedicato proprio all’argomento dei siti multi-lingua,
prenderemo in considerazione un solo plugin e di tipo commerciale, poiché per un
risultato davvero professionale e una minore quantità di grattacapi nella configurazione e
gestione, è assolutamente da preferire a soluzioni gratuite.
Abbiamo quindi escluso i pochi plugin gratuiti, come qTranslate e anche alcuni plugin
commerciali a basso costo, proprio per motivi come la mancanza di aggiornamenti
(qTranslate, il più popolare, si è rivelato incompatibile con le versioni più recenti di
WordPress), la scarsa assistenza da parte degli sviluppatori e i problemi riscontrati in fase
di configurazione e utilizzo.
nota
Investire qualche decina di euro in un tema oppure in un plugin è assolutamente
normale quando si desidera realizzare un sito o un blog professionale e di qualità. Il
fatto che WordPress sia un CMS gratuito e che esistano temi e plugin altrettanto
gratuiti non deve indurre a pensare che i risultati professionali si possano ottenere
senza nemmeno un piccolo investimento e, soprattutto, l’utilizzo di temi e plugin
commerciali mette al sicuro da problemi che si rivelano poi non risolvibili a causa di
una scarsa assistenza da parte degli sviluppatori.

Figura 5.10 – La pagina con le tipologie di acquisto di WPML (wpaz.it/061) e relative


caratteristiche aggiornate al momento di scrivere questo libro; si noti il prezzo di 29
dollari per la versione base, adatta ai blog, e quello di 79 dollari, più adatto ai siti veri e
propri, mentre il rinnovo annuale è rispettivamente di 15 e 39 dollari.
WPML (wpaz.it/061), la cui sigla sta per WordPress Multi Language, è il plugin utilizzato
dalla stragrande maggioranza dei siti multi-lingue realizzati con WordPress, il che ne fa
una soluzione ampiamente collaudata, oltre che uno strumento continuamente aggiornato e
migliorato dai suoi sviluppatori. Quando un tema o un plugin professionale viene
dichiarato “multilingual ready” (pronto per il multi-lingue), fa infatti sempre riferimento
alla compatibilità con WPML, in quanto quest’ultimo è considerato lo standard de facto
nel settore.
Un sito o un blog con pretese di internazionalità, inoltre, non può sicuramente essere
classificato come “amatoriale” e di conseguenza merita senz’altro di funzionare sulla base
di una soluzione di questo tipo, piuttosto che far conto su un plugin economico o
addirittura gratuito, che non assicura alcuna affidabilità immediata e soprattutto nel tempo.
Detto ciò, proviamo a dare uno sguardo alle caratteristiche di WPML e al suo utilizzo
all’interno di WordPress.

Figura 5.11 – La schermata iniziale visualizzata subito dopo l’installazione di WPML con
la procedura guidata di configurazione in italiano; si noti in alto il messaggio che invita a
guardare una breve panoramica introduttiva prima dell’utilizzo.
Una volta acquistato, WPML può essere scaricato, come tutti i plugin e i temi
commerciali, dal sito ufficiale dopo l’accesso come utenti registrati e va quindi installato
usando l’opzione Caricare presente nella schermata Installa Plugin di WordPress.
Una volta attivato, WPML visualizzerà nella parte alta del backend un invito a guardare
una breve panoramica introduttiva (Figura 5.11), mentre la configurazione iniziale sarà
gestita in modalità graduale e guidata.
La prima impostazione riguarda semplicemente la scelta della lingua del contenuto
attuale del sito, che sarà sicuramente l’italiano sempre che non siate partiti da un blog o un
sito scritto direttamente in un’altra lingua (per es. l’inglese per motivi internazionali).
Cliccando sul pulsante Avanti passerete alla schermata successiva, che riguarda invece la
scelta delle lingue che volete attivare per il vostro sito, ricordando che potete aggiungerne
o rimuoverne anche in seguito.
Cliccando nuovamente sul pulsante Avanti vi ritroverete in una schermata più ricca di
opzioni, che riguardano in gran parte le modalità di selezione della lingua, ovvero la
visualizzazione del widget in una specifica area, come sempre legata al tema utilizzato, del
selettore in uno dei menu del sito e di quello nel piè di pagina. Potrete inoltre decidere se i
vari selettori di lingua dovranno contenere o no le classiche bandierine e altri aspetti
estetici o funzionali, tutti molto intuitivi, e infine se visualizzare nei contenuti un link alla
corrispondente traduzione quando disponibile. Cliccando sul pulsante Termina avrete
completato la configurazione iniziale e potrete cominciare a usare WPML.

Figura 5.12 – Una parte delle impostazioni per il selettore delle lingue di WPML; si
notino le diverse possibilità disponibili e l’anteprima del selettore che sarà incluso nel
widget dedicato.

nota
Assieme al plugin WPML vengono forniti una serie di plugin aggiuntivi, che
permettono di ampliare le possibilità di traduzione del sito, per esempio intervenendo
sui testi del tema utilizzato. Si tratta di plugin inclusi nella dotazione, quindi senza
alcuna necessità di ulteriore acquisto.
Figura 5.13 – L’elenco dei contenuti così come appare dopo l’installazione di WPML; si
notino i filtri per visualizzare i contenuti globalmente o secondo la lingua, e il segno + che
permette di aggiungere direttamente la traduzione di uno specifico contenuto.
Per cominciare a inserire le traduzioni dei contenuti del vostro sito avete due possibilità:
accedere a ciascuno in modalità di modifica oppure cliccare sul segno + visualizzato
direttamente nella riga di quel contenuto specifico all’interno dell’elenco (Figura 5.13). Il
segno +, una volta creata la traduzione, sarà sostituito dall’icona di una matita per indicare
la possibilità di modificare il contenuto disponibile nella nuova lingua.
Figura 5.14 – Il nuovo pannello Lingua introdotto da WPML nella schermata di
creazione e modifica del contenuto di WordPress; si noti il segno + che permette di creare
un contenuto nuovo in cui si andrà a comporre la traduzione e, di fianco, la casella che
permette, se spuntata, di inserire automaticamente il contenuto originale italiano nella
nuova area di editing, nel caso si voglia utilizzarlo come traccia per la traduzione.
Nel primo caso dovrete eseguire un passaggio in più, ovvero cliccare sul segno +, che in
tal caso troverete in un pannello a destra dell’area di modifica (Figura 5.14), affiancato da
una casella su cui dovrete mettere una spunta nel caso voleste ricopiare automaticamente il
contenuto originale in quello nuovo; per usarlo eventualmente come traccia della
traduzione, quando questa sarà effettuata direttamente, piuttosto che incollata da un
documento esterno. Alla fine, vi ritroverete comunque in una schermata dove potrete
creare il contenuto nella nuova lingua, che viene specificata, proprio come quando create
una nuova pagina o un nuovo articolo (Figura 5.15).
Figura 5.15 – La traduzione del contenuto nella nuova schermata di editing; si noti il
pannello a destra con la specifica della lingua del contenuto e il riferimento all’originale,
con al di sotto il pulsante con l’icona a forma di matita per passare alla modifica della
versione italiana.
Una volta creato o incollato il nuovo contenuto tradotto, compreso il titolo, basterà come
sempre cliccare sul pulsante Pubblica o Bozza, se non ritenete di pubblicare ancora il
contenuto, per completare l’operazione, passando così agli altri contenuti da tradurre.
Una volta tradotte le pagine del sito, potrete accedere alla schermata Menu della
sezione Aspetto e, cliccando sul link Sincronizza i menu tra le lingue, visualizzato in
alto a destra, sarete in grado di impostare una corrispondenza precisa fra le voci di menu
in base ai nomi delle pagine stesse (Figura 5.16).
Figura 5.16 – La schermata di sincronizzazione delle voci di menu cui si accede cliccando
sul nuovo link Sincronizza i menu tra le lingue introdotto da WPML; si noti come la
voce corrispondente alla categoria richieda una traduzione a sé.
Nel caso il menu contenga elementi diversi dalle pagine, questi richiederanno ovviamente
una traduzione separata: nel nostro esempio di sito del capitolo precedente, per esempio,
era stata introdotta la categoria News (Figura 5.16), che in questo caso andrà tradotta
accedendo alla schermata Categorie della sezione Articoli e utilizzando il link Modifica
del menu di scelta rapida, per visualizzare il nuovo pannello Lingua introdotto da WPML
per la sua traduzione.

nota
Assicuratevi sempre che il tema da voi utilizzato sia “translation ready” ed
eventualmente compatibile in modo preciso con WPML: la maggioranza dei temi
commerciali offre sicuramente questa compatibilità, dal momento che è diventato
quasi uno standard, ma ve ne sono anche fra i temi gratuiti presenti sull’area del sito
ufficiale di WordPress (wpaz.it/062). Inoltre, quando cambiate tema, ricordate di
associare nuovamente ogni menu personalizzato all’elemento di navigazione
corrispondente nel nuovo tema.
Potrebbero esserci altri elementi da tradurre all’interno del sito, secondo il tema scelto e la
complessità globale, ma WPML offre tutti gli strumenti per intervenire su ogni aspetto e
garantire nella quasi totalità dei casi una traduzione completa dei contenuti come del
layout; quest’ultimo sempre a patto che i relativi file di lingua del tema siano disponibili,
ovviamente.
Il requisito fondamentale per utilizzare al meglio WPML è sempre la scelta di un tema
translation ready, che se nel caso dei temi commerciali è un requisito quasi onnipresente al
giorno d’oggi, per quelli gratuiti potrebbe non esserlo, quindi utilizzate una ricerca mirata
con tale caratteristica sull’area di WordPress.org dedicata ai temi (wpaz.it/062). Per il test
di WPML su un tema gratuito, infatti, è stato scelto il tema gratuito Base WP
(wpaz.it/063), caricandolo direttamente dalla schermata di selezione e scelta dei temi di
WordPress, ed è risultato perfettamente compatibile con i contenuti e le impostazioni
multilingua già creati utilizzando il tema predefinito Twenty Eleven (che ha invece
mostrato delle incompatibilità nella visualizzazione dei selettori di lingua di WPML),
visualizzando correttamente tutti i selettori di lingua impostati (menu, widget e piè di
pagina) come si vede in Figura 5.17.
Un ultimo consiglio, prima di chiudere questo capitolo dedicato alle traduzioni e ai siti
multi-lingua, riguarda l’utilizzo del plugin gratuito WP-Translation-Box (wpaz.it/064), che
aggiunge un pannello di traduzione automatizzata nella schermata di creazione e modifica
dei contenuti (Figura 5.18), permettendo di incollare, tradurre e copiare del testo
utilizzando Google Translator, per ottenere una traduzione rapida su cui poi intervenire
manualmente in modo da perfezionarla.

Figura 5.17 – Il tema gratuito Base WP (wpaz.it/063) installato su un sito in cui era già
configurato WPML mostra tutti i selettori di lingua impostati (menu principale, widget e
piè di pagina); si noti anche il link di collegamento alla traduzione corrispondente del
contenuto, visualizzato in fondo al testo della pagina.
Figura 5.18 – Il pannello aggiunto dal plugin WP-Translation-Box (wpaz.it/064) sulla
destra dell’area di creazione e modifica dei contenuti di WordPress; si notino i due
pulsanti che aprono i rispettivi menu di scelta della lingua di partenza e di quella della
traduzione, e i due campi che contengono rispettivamente il testo originale incollato e
quello risultante dalla traduzione automatica.
6
Promozione del sito
Possiamo creare un sito o un blog esteticamente stupendo e dai contenuti incredibilmente
utili, divertenti o interessanti, ma se nessuno lo visita sarà stato un lavoro inutile. Cosa
ancora più importante se il sito ha finalità commerciali, cioè è stato realizzato per
promuovere prodotti o servizi nostri o di altri.
Ma come si promuove un sito? O meglio, come si fa a renderlo visibile e convincere il
pubblico a visitarlo?
Non c’è una sola risposta a queste domande, ma nel corso del capitolo proveremo a dare
quelle più importanti e utili, senza la pretesa di andare a fondo in argomenti, come la SEO,
i Social Media e il Web marketing, che, singolarmente, hanno già interi volumi dedicati
allo specifico argomento.
6.1 Ottimizzare i contenuti per il pubblico
L’obiettivo primario di ogni sito che si rispetti è la fruibilità, vale a dire la facilità e
intuitività con cui il pubblico ne individua e utilizza i contenuti: un sito lento, scomodo
nella navigazione e disordinato è la ricetta infallibile per far fuggire i lettori a gambe
levate.
WordPress mette a disposizione, come abbiamo visto soprattutto nel secondo capitolo,
tutti gli strumenti per dare alle aree e ai contenuti del sito una forma ordinata e razionale,
tale da permettere al pubblico di trovare e consultare facilmente le informazioni pubblicate
nelle sue pagine: gestione personalizzata dei menu, categorie e tag, permalink e
classificazione precisa delle immagini e di altri contenuti multimediali.
Nel progettare il sito, quindi, dovete prima di tutto cercare di utilizzare al meglio tali
strumenti per organizzare i contenuti e la loro navigazione nella maniera più efficace.
Come vedremo nel prossimo paragrafo, questo metodo di sviluppo porta automaticamente
dei benefici e dei risultati anche dal punto di vista del posizionamento sui motori di
ricerca, ma intanto partiamo con l’obiettivo di “piacere” prima di tutto ai visitatori, per
evitare che il sito sia penalizzato da una “frequenza di rimbalzo” (“bounce rate” in
inglese) e da un “tasso di abbandono” tali da rendere inutile tutto il lavoro di sviluppo dei
contenuti.

nota
Il bounce rate (frequenza di rimbalzo) è il parametro utilizzato nel valutare il tempo
di sosta dei visitatori sulle pagine di un sito ed è tenuto particolarmente in
considerazione dai motori di ricerca: se i visitatori abbandonano una pagina dopo
mezzo minuto, per capirci, per un motore di ricerca come Google potrebbe
significare che il contenuto di tale pagina non è interessante e rilevante (pertinente),
soprattutto se si tiene conto del fatto che il visitatore l’ha raggiunta in seguito a una
specifica ricerca. In questo caso il motore di ricerca applica una penalizzazione che fa
retrocedere il sito nei risultati.
Mirate, quindi, a presentare i contenuti del vostro sito in una forma tale da incoraggiarne
l’utilizzo, adottando soluzioni valide non solo da un punto di vista estetico (per es. con la
scelta di un bel tema), ma anche e soprattutto da un punto di vista dei contenuti, che
devono poter attrarre e tenere sul sito i visitatori e anche spingerli a tornare: sono questi i
fattori che determinano il successo di un sito, al di là dell’estetica, che rimane comunque
un elemento importante.

Figura 6.1 – Alcuni elementi in grado di accrescere la permanenza del pubblico sul sito e
l’interazione sul blog di Progetto Evolutivo (wpaz.it/987); si notino gli articoli correlati
con miniatura alla fine dell’articolo, il widget delle categorie a destra e, più sotto, la
finestra per chat e messaggi di Zopim (wpaz.it/065) di cui parleremo più avanti.
Ricordiamo, inoltre, che il pubblico del Web è frettoloso e distratto, e non è facile
catturarne l’attenzione: la scelta di un titolo e del paragrafo iniziale di un contenuto
possono essere determinanti per evitare che la pagina venga guardata solo distrattamente e
poi abbandonata dal visitatore. Anche quando il lettore si è soffermato sulla consultazione
di un contenuto, dovete cercare di tenerlo sul sito suggerendogli per esempio contenuti
affini presenti in altre pagine (Figura 6.1). Vedremo quali plugin utilizzare più avanti nel
capitolo.
Volendo riepilogare, quindi, ecco i punti da tenere presenti per ottimizzare i contenuti
per il pubblico e aumentare le possibilità di successo del sito o del blog:
• organizzate i contenuti
un uso intelligente delle categorie e sotto-categorie eventuali, ma anche dei tag, può
aiutare il pubblico a individuare più facilmente i contenuti che cerca.
• curate titoli e incipit
come in un buon libro o in un buon film, l’inizio è determinante per tenere viva
l’attenzione del pubblico, quindi abbiate cura dei titoli e della parte iniziale del
contenuto di ogni pagina, incoraggiando il lettore a leggere il resto.
• migliorate la navigazione
utilizzate ogni possibile strumento fornito da WordPress per potenziare la
navigazione fra i contenuti del sito: menu personalizzati, widget e link interni.
Vedremo più avanti quali plugin possono tornare utili.
• fornite un motivo per restare
mettetevi nei panni del visitatore che arriva sulla home o su una pagina specifica del
sito e chiedetevi cosa potete fare perché non snobbi il contenuto e vada altrove: gli
avete dato ciò che si aspettava di trovare e lo avete fatto in modo chiaro e
accattivante?
• fornite un motivo per tornare
chiedevi se ci sono dei motivi per cui il visitatore potrebbe desiderare di tornare sul
sito: i vostri contenuti sono periodicamente aggiornati e arricchiti? Avete fornito al
visitatore dei mezzi per iscriversi ai feed di articoli e commenti o a una newsletter?
• stimolate il feedback
cercate di coinvolgere il pubblico con i commenti e l’interazione, usando per esempio
un sistema di messaggistica alternativo alla solita pagina dei contatti (Figura 6.1)
come quello di Zopim (wpaz.it/065), di cui parleremo alla fine del capitolo.
Ovviamente una trattazione approfondita di argomenti su come migliorare la
comunicazione di un sito o di un blog esula dagli obiettivi di questo manuale, ma potrete
trovare altri spunti, riferimenti e approfondimenti sul blog ufficiale del mio secondo libro
(wpaz.it/002).
6.2 Ottimizzare i contenuti per i motori
Una volta che avrete ottimizzato i contenuti per il pubblico, sarete già a metà strada e forse
anche oltre nell’ottimizzazione per i motori di ricerca, altrimenti nota come SEO (Search
Engine Optimization), l’acronimo della sua versione originale. Anche se questo non è un
libro dedicato alla SEO, proveremo comunque a esporne gli aspetti principali per chi fosse
a digiuno dell’argomento.
La SEO è fondamentalmente di due tipi: quella interna al sito (onsite SEO) e quella
esterna ad esso (offsite SEO), e mentre la prima riguarda in gran parte l’ottimizzazione dei
contenuti, la seconda è fondamentalmente basata sulla creazione di link che da altri siti o
dai social media puntano verso il vostro sito.

nota
Sulla SEO in generale sono stati scritti numerosi manuali, poiché l’argomento si
presta a un ampio approfondimento, che esula dalle finalità del presente volume. Sul
blog del mio secondo libro (wpaz.it/002), tuttavia, sono disponibili diversi articoli
utili a chi volesse approfondire l’argomento.
Anche se più avanti nel capitolo esamineremo alcuni plugin e metodi per creare link dai
social media verso il vostro sito, è giusto precisare sin da ora che l’offsite SEO più
efficace si realizza soprattutto creando altri contenuti su siti affini al vostro e inserendo al
loro interno dei link associati a parole chiave ugualmente attinenti, in particolare con il
cosiddetto “guest blogging”, cioè la pubblicazione di vostri articoli mirati su blog esterni.
In questo capitolo, quindi, descriveremo solo i punti fondamentali dell’onsite SEO e ci
serviremo di un plugin specifico per metterne in pratica i principi nell’ottimizzazione dei
contenuti di testo. Ma prima di passare all’ottimizzazione SEO dei testi, è importante
evidenziare com’è altrettanto importante curare la SEO delle immagini, che spesso viene
trascurata.

Figura 6.2 – La schermata del plugin Media File Renamer (wpaz.it/066) accessibile dalla
nuova voce File Renamer, che lo stesso aggiunge alla sezione Media di WordPress; si
notino in alto i pulsanti per la rinomina di massa (sconsigliata) e in basso un file che viene
rinominato individualmente utilizzando il titolo come nome del file.
La prima regola è di assegnare ai file delle immagini un nome indicativo, che suggerisca il
loro contenuto e sia attinente al contesto della pagina, ancora prima di caricarle in
WordPress, usando solo lettere minuscole e dividendo le parole con il segno meno (per es.
copertina-libro-wordpress.jpg): si vedono purtroppo ancora tanti siti e blog in cui le
immagini caricate corrispondono a dei file il cui nome non suggerisce nulla, poiché è
rimasto invariato rispetto all’originale e quest’ultimo era, per esempio, una semplice serie
di lettere e numeri.

nota
Il nome del file di ogni immagine viene automaticamente assegnato al suo “titolo”,
corrispondente al tag TITLE dell’HTML, ma quest’ultimo andrebbe a sua volta
ottimizzato dopo il caricamento del file in modo da rispecchiare una o più parole
chiave attinenti al contenuto e correttamente formattate (per es. per un’immagine il
cui file si chiama “automobile-rossa.jpg” si dovrà rinominare il titolo in “automobile
rossa”).
Come fare per le immagini che avete già caricato in WordPress? In questo caso può essere
d’aiuto il plugin Media File Renamer (wpaz.it/066), che una volta installato e attivato
aggiunge la voce File Renamer alla sezione Media di WordPress e permette di assegnare
ai file di ogni immagine il titolo che avreste dato all’immagine stessa nella schermata
Modifica Media (Figura 6.2).

Figura 6.3 – I campi descrittivi di un’immagine in WordPress accessibili, come il titolo,


dalla schermata Modifica Media; si noti come il testo relativo alla Descrizione può essere
anche formattato usando stili e tag HTML.
La seconda regola è di corredare, dopo il caricamento, ogni immagine dei necessari
elementi descrittivi, in particolare il Testo alternativo, che corrisponde al tag ALT
dell’HTML), e la Descrizione, compilando i due campi corrispondenti (Figura 6.3) come
già descritto nel secondo capitolo ed evitando di usare lo stesso testo per entrambi.
Se avete anche la possibilità di abbinare una didascalia, aggiungerete un punto in più
all’ottimizzazione, tanto per il pubblico quanto per i motori di ricerca. Anche in questo
caso evitate possibilmente di usare il testo già inserito negli altri due campi, provando a
creare un testo alternativo, ma altrettanto efficace.
Per modificare manualmente e singolarmente i campi appena descritti, basta cliccare sul
link Modifica del menu di scelta rapida sotto ogni immagine della libreria Media, mentre
per procedere in maniera automatica su tutte le immagini già inserite, nel caso siano
numerose e non abbiate voglia di modificarne i parametri individualmente, potrete usare
un plugin come SEO Friendly Images (wpaz.it/067). Quest’ultimo consente di assegnare
in automatico a tutte le immagini caricate e inserite nei contenuti un Testo alternativo
(Alt) e un Titolo (Title) in base a dei parametri a vostra scelta, che possono essere
collegati con il titolo dell’articolo, la sua categoria e i suoi tag abbinandoli eventualmente
a delle parole (Figura 6.4). Sono presenti, inoltre, le due opzioni aggiuntive Override
default Wordpress image alt tag (recommended) e Override default Wordpress
image title, che permettono rispettivamente di sovrascrivere i contenuti dei campi Testo
alternativo e Titolo se già compilati, con la prima opzione attiva di default.

Figura 6.4 – La schermata delle opzioni del plugin SEO Friendly Images (wpaz.it/07),
richiamata dall’omonima voce, che viene aggiunta alla sezione Impostazioni; si notino gli
esempi dei parametri e i due campi per i tag ALT e TITLE delle immagini.
Va da sé che una compilazione automatica e generalizzata dei due campi non ha la stessa
efficacia di una modifica manuale e individuale degli stessi, tuttavia in alcune situazioni
pregresse questa soluzione può essere valida e soddisfa sicuramente le linee guida di
Google per le immagini (si veda la nota seguente).

nota
Le direttive ufficiali fornite da Google per l’utilizzo delle immagini (wpaz.it/068)
definiscono le regole ottimali per consentire una corretta indicizzazione del contenuto
iconografico di un sito. È consigliabile consultarle almeno una volta, se fra gli
obiettivi del sito c’è un’ottimizzazione SEO globale che comprenda, quindi, anche le
immagini oltre che i testi.
Non resta altro da dire sulle immagini, se non che vale la pena sceglierle e dimensionarle
nell’ottica di una maggiore efficacia e qualità estetica, e che bisogna fare il possibile per
ottimizzarne il peso affinché il loro caricamento non influisca negativamente sulla velocità
di visualizzazione della pagina in cui sono inserite, ma di questo parleremo più
approfonditamente nel prossimo capitolo.
Chiusa la parentesi riguardante le immagini, passiamo a quella ben più articolata dei
testi: sono questi ultimi, infatti che determinano in gran parte il tipo di posizionamento che
il sito avrà nei risultati delle ricerche sui motori.

Figura 6.5 – La prima pagina di risultati ottenuta cercando “come installare wordpress in
locale” su Google; si noti nella parte alta il risultato a pagamento che fa riferimento a
WordPress.com e, al di sotto, i risultati cosiddetti “organici”, cioè ottenuti dai rispettivi siti
senza pagare nulla a Google.
Prima di entrare nel vivo della SEO servendoci di un plugin dedicato, soffermiamoci
brevemente a osservare come le pagine dei siti e dei blog siano visualizzate in una pagina
di risultati derivante da una ricerca su Google o su altri motori (Figura 6.5).
Noterete prima di tutto che i risultati di una ricerca sono di due tipi: a pagamento e
“organici”, dove i primi sono riconoscibili dal bollino “Ad” o da una diversa colorazione e
sono in genere collocati in un’area separata rispetto al corpo centrale della pagina (in alto
nella Figura 6.5). Tutti gli altri risultati visibili nella pagina sono organici, vale a dire
prodotti dal “posizionamento” che ognuna delle pagine e relativi siti ha conquistato nel
tempo grazie ai suoi contenuti e all’ottimizzazione SEO che la contraddistingue.
Il secondo aspetto che noterete è il modo in cui i risultati sono visualizzati, cioè la
presenza di un titolo, con caratteri più grandi e marcati, su una prima riga, e di una
descrizione, con caratteri più piccoli e disposta su più righe. Tenete per ora in mente questi
due elementi perché fra poco scopriremo la loro relazione con la SEO.
Intanto torniamo per un attimo alla differenza fra risultati organici e a pagamento, che è
fondamentale per capire l’importanza di quanto spiegato in questo capitolo.

nota
Google consente ai proprietari di siti e blog di acquistare visibilità investendo nelle
cosiddette campagne “AdWords”, con le quali si possono utilizzare specifiche parole
chiave la cui ricerca produrrà la visualizzazione del sito nelle prime posizioni e
nell’area dei risultati a pagamento. Ogni volta che un utente clicca sul link del
risultato per visitare il sito, al proprietario del sito viene addebitato il costo del
relativo click, che è generalmente variabile e rientra in un budget giornaliero da lui
impostato. Sull’argomento è possibile trovare una ricca documentazione sul sito
ufficiale (wpaz.it/986) o acquistare dei manuali specifici.
Salvo che non intendiate investire denaro per posizionarvi fra i risultati a pagamento
(acquistando i click di AdWords, si veda la nota precedente), dovrete mirare a comparire
fra i risultati organici della prima pagina, quindi sforzarvi di pubblicare contenuti di
qualità e ottimizzarli in un’ottica SEO: le restanti pagine di questo capitolo saranno utili a
raggiungere questo secondo obiettivo, dal momento che il primo esula dallo scopo del
libro.
Per conquistare posizioni sempre più alte nei risultati organici delle ricerche, quindi,
dovrete avere nel vostro sito o blog dei contenuti che i motori possano indicizzare, quindi
scandagliare per poi conservarne un riferimento sui loro server e segnalare agli utenti che
eseguiranno delle ricerche secondo specifiche parole chiave: sono proprio queste ultime,
le parole chiave (“keyword” in inglese), che dovete valutare nel costruire i contenuti del
vostro sito.
Comparire nei risultati organici significa, infatti, essere scelti e promossi dai motori di
ricerca come risultato della parola o frase digitata dall’utente, cioè convincere i motori che
i vostri contenuti sono attinenti e rilevanti alla specifica ricerca. Per fare un esempio
pratico: se il vostro sito parlasse di giardinaggio e contenesse un articolo sulla coltivazione
delle begonie, dovreste ottimizzare la SEO del sito e del particolare articolo riguardo alle
parole chiave principali affinché Google e gli altri motori visualizzino nei risultati,
possibilmente della prima pagina, un link all’articolo quando un utente effettua una ricerca
usando una combinazione di parole chiave come “coltivazione delle begonie” o simili.

nota
Scordatevi da subito di aspirare a conquistare le prime posizioni dei risultati di
Google con parole chiave singole e generiche, giacché prima di voi hanno cercato di
farlo altri, per anni, conquistando faticosamente le loro posizioni. Puntate, invece, a
posizionarvi in ambiti specialistici (nicchie) usando parole chiave altrettanto
specifiche, vale a dire basate sulla cosiddetta “coda lunga” (wpaz.it/985), cioè ben
più specifiche e composte quindi da più parole o da vere e proprie frasi.
Per ottenere risultati migliori nel posizionamento si dovrebbe, quindi, partire da una
chiave di ricerca frequente, vale a dire utilizzata spesso dal pubblico, e sviluppare i
contenuti sulla base delle parole che la compongono e dei loro sinonimi. È altrettanto
importante, però, non esagerare in tal senso, poiché i motori di ricerca, Google in primis,
hanno ormai imparato a riconoscere le forzature tipiche di chi “farcisce” i suoi contenuti
con la stessa parola chiave tentando di posizionarsi (il cosiddetto “keyword stuffing”).
Per chiarire meglio questo concetto, ci serviremo di uno dei plugin più popolari per la
SEO in WordPress, vale a dire WordPress SEO by Yoast (wpaz.it/069): si tratta di un
plugin gratuito e molto completo, che potete installare direttamente dalla sezione Plugin
di WordPress. Prima di esaminare il suo utilizzo per l’ottimizzazione dei contenuti,
daremo una rapida occhiata alle varie schermate di configurazione, senza tuttavia
approfondire le opzioni più “tecniche”, in quanto non basterebbe un intero capitolo per
spiegarle singolarmente.
Appena attivato, il plugin visualizza un messaggio in cui si invita a favorire il suo
miglioramento per mezzo della raccolta delle statistiche di utilizzo, che potete permettere
o impedire. Si tratta di una scelta individuale e in ogni caso tale funzione è utilizzata nel
rispetto della privacy. Inoltre, la prima visita alle schermate di configurazione del plugin,
dalla nuova voce SEO che inserisce nell’area di amministrazione di WordPress, sono
accompagnate da una serie di messaggi-guida che offrono una panoramica completa e che
andrebbero letti con attenzione prima di cliccare sul relativo pulsante Chiudi che li
disattiva; potrete comunque ripristinarli usando il pulsante Inzia il tour che troverete in
seguito nella prima schermata.
Figura 6.6 – La prima schermata, Bacheca, del plugin WordPress SEO by Yoast
(wpaz.it/069) contiene, oltre ai link e alle caselle per i codici di verifica dei motori e di
altri servizi, anche un’opzione che permette di abilitare o disabilitare la configurazione
SEO avanzata per gli altri utenti che hanno accesso alla creazione e modifica dei
contenuti.
Daremo ora un rapido sguardo alle diverse schermate richiamabili dalle voci presenti nella
nuova sezione SEO aggiunta dal plugin al backend di WordPress, ma solo per segnalare
eventuali possibilità che vale la pena attivare nell’immediato e offrire una panoramica
globale della versatilità di questo plugin. Lo spazio a disposizione non ci permette di
andare a fondo nelle numerose opzioni contenute nelle schermate di WordPress SEO by
Yoast, che richiederebbero, per essere approfondite, più di un intero capitolo, dal momento
che toccano anche tematiche molto specialistiche. Procediamo quindi con una panoramica
veloce, prima di entrare nel vivo dell’uso di questo plugin nella fase di ottimizzazione
SEO dei contenuti, che in definitiva è l’aspetto più importante: in teoria potrebbe bastare
la descrizione della SEO, poiché la stragrande maggioranza degli utenti non utilizza
nemmeno la maggior parte delle impostazioni che stiamo per presentare.
Nella prima schermata (Figura 6.6), detta Bacheca, oltre alla già vista opzione per il
tour guidato, ritrovate quella per il monitoraggio statistico e un’opzione (Sicurezza) che
permette di assegnare o meno agli altri utenti con accesso ai contenuti la possibilità di
applicare delle impostazioni avanzate (che vedremo più avanti). Nella parte bassa della
schermata trovate, infine, i link ai vari servizi di registrazione sui motori e simili, e i campi
relativi per l’inserimento dei codici di verifica.
Figura 6.7 – La schermata Titoli & Metadati del plugin WordPress SEO è riservata a
impostazioni secondarie e può essere lasciata invariata in tutte le sue schede, a meno che
non si abbia l’esperienza SEO giusta per modificare le varie voci.
Le impostazioni presenti nella seconda schermata, Titoli & Metadati (Figura 6.7), sono
riservate a chi ha una certa esperienza dei parametri SEO più avanzati, ma è senz’altro
consigliabile definire titolo e descrizione per la pagina principale del sito nella scheda
Home ed eventualmente attivare l’opzione noindex, nofollow per determinati contenuti
nelle schede Tipi articolo e Tassonomie (per es. nel caso non volessimo indicizzare
contenuti basati su formati personalizzati legati al tema oppure gli archivi dei tag). Per il
momento potreste comunque limitarvi a lasciare le impostazioni predefinite, finché non
avrete l’occasione di approfondire questi aspetti su un testo specializzato dedicato alla
SEO; aspetti che non possono essere trattati in questa sede considerato il livello
introduttivo di questo capitolo nell’ambito globale del libro. Nella terza schermata, Social,
invece, è possibile inserire i parametri delle tre piattaforme social principali: Facebook,
Twitter e Google+.
Figura 6.8 – Anche le opzioni della schermata Sitemaps XML di WordPress SEO by
Yoast sono preimpostate; si notino quelle opzionali per segnalare i nuovi contenuti a
Yahoo e Ask. com nell’area Impostazioni generali.
Più importante ai fini degli argomenti di base di questo capitolo è invece la quarta
schermata, Sitemaps XML, poiché la creazione di una “mappa del sito” (“sitemap” in
inglese), è fondamentale per l’indicizzazione da parte dei motori di ricerca ed è infatti
possibile segnalarla a questi ultimi quando ci si registra per inserire il proprio sito o blog.
In questa schermata (Figura 6.8) troverete già attiva l’opzione Sitemap XML e potrete
ottenere il link della mappa principale del sito e di quelle secondarie cliccando sul
pulsante XML Sitemap, nel caso voleste passare questi link ai motori in fase di
registrazione.

nota
La presenza di un’opzione per la mappa del sito e per la convalida della registrazione
sui motori in WordPress SEO by Yoast permette di evitare l’installazione di plugin
che svolgono soltanto questi compiti specifici, con un notevole risparmio di risorse in
WordPress.
Le due opzioni Fare ping a Yahoo! e Fare ping ad Ask.com possono essere attivate
qualora si desideri segnalare anche agli altri due motori la pubblicazione di nuovi
contenuti, che viene già segnalata in automatico a Bing e Google. Si tratta di una funzione
molto utile soprattutto per i blog o al massimo per quei siti la cui area “news” o “blog” è
molto attiva. Anche la schermata Permalinks mette a disposizione diverse impostazioni
riservate a utenti più esperti, ma la prima fra queste potrebbe tornarvi utile, poiché elimina
la famigerata parola “categoria” dai permalink quando le categorie sono incluse nel
formato stesso dell’URL. Quindi, se avete adottato questo formato per i vostri permalink,
fareste bene ad attivarla.
La schermata Links Interni, invece, permette di abilitare la funzione “breadcrumb”,
vale a dire di raffigurare il percorso gerarchico quando visualizzate un contenuto (es.
Home->News->Titolo notizia). Si tratta di una funzione molto utile, tanto ai fini
dell’usabilità del sito, quanto per l’indicizzazione sui motori e, anche se c’è da inserire del
codice PHP nei template del tema, può valere la pena utilizzarla.
Nella schermata “RSS” potrete utilizzare due campi per creare il testo visualizzato
prima e dopo il feed RSS del vostro sito o blog, in modo da prevenire l’abuso da parte di
applicazioni che si limitano a prelevarne il contenuto per riproporlo su altri siti, sfruttando
di fatto il nostro lavoro per creare dei contenuti a scrocco.

nota
Il Feed RSS è un flusso di dati generati da WordPress nell’omonima forma e consente
ai lettori di un blog di “abbonarsi” e ricevere in tempo reale i contenuti pubblicati per
mezzo di un’applicazione (per es. su smartphone) o semplicemente dall’apposita
funzione presente anche nei browser. Ritorneremo sull’argomento più avanti nel
capitolo.
La schermata Importa & Esporta può tornare utile se avete usato in precedenza un altro
plugin SEO (per es. All In One SEO Pack) e volete passare a WordPress SEO by Yoast
senza perdere le impostazioni precedenti oppure nel caso voleste installare quest’ultimo su
un altro sito e importare la vostra configurazione preferita senza doverla impostare
manualmente.
Le due schermate Editor di modifica massiva… servono a modificare rapidamente i
titoli e le descrizioni SEO di pagine e articoli senza aprirli singolarmente (parleremo fra
poco di questi due importanti elementi SEO), mentre la schermata Modifica Files dà un
accesso diretto al file robots.txt, che invia istruzioni agli spider usati dai motori per
indicizzare il sito, e .htaccess, che stabilisce i criteri di navigazione del sito. Il file robots.
txt può anche essere creato direttamente da questa schermata, se non fosse ancora
presente.
Per finire, la schermata Estensioni consente di acquistare e aggiungere una serie di
componenti aggiuntivi fra cui la versione premium del plugin.
Torniamo ora all’aspetto più importante di WordPress SEO by Yoast, vale a dire le
impostazioni che il plugin aggiunge alla schermata di creazione e modifica di pagine e
articoli: una volta che lo avrete installato e attivato, infatti, ritroverete un pannello (Figura
6.9) con lo stesso nome del plugin, collocato sotto l’area di editing del contenuto, mentre
nel pannello Pubblica troverete una riga che riporta lo stato della SEO. Procediamo prima
di tutto a esaminare il nuovo pannello e capire come utilizzarlo al meglio per migliorare la
SEO dei contenuti.
Figura 6.9 – Il nuovo pannello WordPress SEO by Yoast creato dal plugin omonimo e
visualizzato sotto l’area di editing di pagine e articoli; si notino i link alle quattro schede
nella parte alta e il report visualizzato sotto il campo della Parola Chiave Principale e,
nel pannello Pubblica a destra, il grado di ottimizzazione SEO del contenuto.
Il pannello per la SEO è diviso in quattro aree, accessibili da altrettanti link alle relative
schede: Generale, Analisi della pagina, Avanzato e Social. Esamineremo ora ognuna
delle quattro schede, cominciando con la prima e più importante: Generale (Figura 6.9).
La parte superiore di questa scheda riporta un’anteprima di come saranno visualizzati
“titolo” e “descrizione” del contenuto nei risultati delle ricerche, cioè come avete già visto
nell’esempio della pagina di Google (Figura 6.5): si tratta dei due “metadati” che saranno
poi inseriti nella parte iniziale del codice della pagina Web e che vengono inizialmente
estratti in automatico, rispettivamente dal titolo e dalla parte iniziale del contenuto della
pagina o dell’articolo che state creando o modificando. Starà a voi verificare se
rispondono ai requisiti SEO ed eventualmente modificarli riscrivendoli a mano nei due
campi sottostanti Titolo SEO e Meta descrizione.
Secondo quali parametri viene valutato il grado di SEO di questi due elementi e del
contenuto in generale? Semplicemente dalla Parola Chiave Principale: questa parola o
frase, detta anche “focus keyword”, rappresenta la chiave di ricerca che si suppone sarà
utilizzata dal pubblico per trovare il vostro contenuto e andrà digitata nel campo omonimo
(Figura 6.10). Il plugin si occuperà di suggerirne eventuali varianti o combinazioni
durante la digitazione, attingendo alle statistiche di Google e permettendovi di valutarne in
tempo reale la validità: una parola o frase chiave scarsamente ricercata non comparirà fra
quelle suggerite.

Figura 6.10 – I suggerimenti di WordPress SEO by Yoast visualizzati in tempo reale


durante la digitazione della parola chiave principale (focus keyword) sono generati in base
alle statistiche di ricerca di Google e vanno utilizzati per scegliere parole o frasi chiave
efficaci.
Nell’esempio della Figura 6.10 potete vedere che la combinazione di keyword
comunicazione efficace è statisticamente fra le frasi utilizzate spesso dagli utenti per le
ricerche su Google, quindi conviene impostarla come parola chiave principale e
intervenire di conseguenza perché il contenuto sia ottimizzato intorno a essa,
assicurandovi che sia presente nei vari elementi della pagina che il browser andrà a
visualizzare partendo dal vostro contenuto.
State attenti, però, a non esagerare con una ripetizione pedissequa delle keyword, ma
preferite piuttosto anche delle varianti che abbiano lo stesso significato: oggi i motori di
ricerca, e Google in particolare, sono in grado di valutare semanticamente il testo di una
pagina, quindi coglierne il significato riconoscendo anche i sinonimi di una parola o frase.
Figura 6.11 – La valutazione positiva di titolo e descrizione SEO una volta inserite le
parole chiave principali nei due campi corrispondenti; si noti come l’Anteprima Snippet
sia aggiornata di conseguenza e, come nel pannello a destra, lo stato di ottimizzazione
SEO venga aumentato anche se di poco.
Cominciate quindi con il riscrivere il titolo e la descrizione all’interno del pannello,
usando le parole chiave scelte come principali: il plugin aggiornerà di conseguenza il
contenuto del campo Anteprima Snippet [grassetto] confermandone la validità ai fini SEO
(Figura 6.11) e, una volta aggiornato l’articolo o la relativa bozza se non fosse ancora
pubblicato, la valutazione SEO nel pannello Pubblica passerà da Pessimo a Scarso.
Perché il grado di ottimizzazione SEO migliori, dovrete intervenire, come si evince dalle
altre voci sotto il campo della parola chiave, sull’intestazione dell’articolo, sull’URL della
pagina e sul contenuto della stessa.
Con “intestazione dell’articolo” si intende in questo caso il titolo del contenuto che state
creando o modificando, non importa che si tratti di una pagina o di un articolo, quindi
procedete inserendo le parole chiave scelte nel campo del titolo prima del contenuto
(Figura 6.12): aggiornando o pubblicando la pagina vedrete che anche la voce
Intestazione articolo sotto Parola Chiave Principale ora è visualizzata in verde con lo
stato Yes (1).
Figura 6.12 – Lo stato Intestazione articolo viene visualizzato in verde dopo che avrete
inserito le parole chiave nel titolo del contenuto e aggiornato la pagina; si noti il numero
tra parentesi che indica le occorrenze della “focus keyword”.

nota
Cambiando il titolo della pagina sarà modificata di conseguenza la voce di menu
corrispondente, che in questo caso si allungherà provocando disordine nella barra di
navigazione, quindi sarà necessario accedere all’area “Menu” di WordPress e
personalizzare l’etichetta corrispondente, riportandola al testo originale, come
abbiamo visto nel secondo capitolo.
Figura 6.13 – La modifica del permalink, vale a dire l’URL della pagina, per introdurre le
keyword desiderate può essere effettuata anche usando il link Modifica Rapida nel menu
di scelta rapida visualizzato sotto ogni pagina nella schermata visualizzata cliccando sulla
voce Tutte le pagine della sezione Pagine di WordPress.
Per inserire le parole chiave nell’URL della pagina, dovrete agire sul campo del
permalink, che nel caso della home page non può essere modificato dal momento che
punta direttamente all’indirizzo del dominio. Potrete invece farlo per tutte le altre pagine
e, ovviamente, per gli articoli. In questo caso potrete comunque personalizzare il
permalink di una pagina impostata come home usando il menu di scelta rapida nell’elenco
delle pagine (Figura 6.13), ma ciò non si rifletterà sullo status SEO, in quanto la pagina
sarà associata al dominio del sito.

nota
Non c’è da preoccuparsi se, come per la home page, l’ottimizzazione SEO mancasse
di uno degli elementi, in questo caso l’URL della pagina, purché tutti gli altri siano
ottimizzati al meglio, in particolare il contenuto, per il quale dovrete sempre ricordare
di non esagerare nel ripetere troppe volte la parola o frase chiave.
Procedete quindi a modificare il contenuto della pagina cercando di inserire la parola
chiave in uno o più punti del testo, possibilmente senza comprometterne la fluidità di
lettura: potete utilizzarla per i titoli dei paragrafi, con l’attributo di stile H2 o H3,
evidenziarla con uno stile (grassetto, corsivo, sottolineato) e così via, ma ricordando
sempre di non esagerare con le ripetizioni ed evitare forzature evidenti che Google non
tarderebbe a riconoscere; in questo caso rischiereste una penalizzazione per “keyword
stuffing”, cioè l’effetto contrario di una promozione nel posizionamento.
Altri elementi importanti per aumentare il grado di ottimizzazione del contenuto sono
l’inserimento di immagini, a loro volta ottimizzate come spiegato nelle pagine precedenti
di questo capitolo, e di link interni ed esterni associati alle keyword, sempre facendo
attenzione a non eccedere e mantenendo un aspetto naturale nel contenuto, che deve
risultare tale al pubblico prima che ai motori di ricerca che indicizzeranno il sito.
Quando avrete ottimizzato al meglio ogni elemento, ricordandovi di aggiornare sempre
il contenuto che state elaborando, potrete verificare se ci sono ancora elementi migliorabili
cliccando sul link della scheda Analisi della pagina nel pannello WordPress SEO di
Yoast (Figura 6.14): le voci associate a un bollino verde sono ovviamente quelle già
ottimizzate, mentre quelle con bollino arancione potrebbero essere, ma non è strettamente
necessario, ulteriormente migliorate e quelle con bollino rosso richiedono sicuramente un
intervento di maggiore ottimizzazione.

Figura 6.14 – L’Analisi della pagina nella seconda scheda del pannello WordPress SEO di
Yoast; si notino le due voci con bollino rispettivamente rosso e arancione, suscettibili di
miglioramento, e a destra il valore Buono per la SEO nel pannello Pubblica.

nota
In realtà le indicazioni fornite nella scheda Analisi della pagina rappresentano un
vero e proprio vademecum che può guidarci a migliorare tutti gli aspetti
dell’ottimizzazione SEO, quindi leggetele sempre con attenzione ed esercitatevi a
metterle in pratica, finché non avrete acquisito una predisposizione naturale e
intuitiva a creare dei contenuti già ottimizzati.
Figura 6.15 – L’elenco delle pagine con le nuove quattro colonne inserite da WordPress
SEO by Yoast; si notino i diversi bollini colorati e in particolare la colonna Focus KW che
visualizza la parola o frase chiave principale.
WordPress SEO by Yoast visualizza un riepilogo dei dati SEO anche nell’elenco delle
pagine e degli articoli (Figura 6.15), permettendovi così di avere un colpo d’occhio sullo
stato di ottimizzazione del sito e di intervenire su quei contenuti che la richiedono.
Naturalmente, quanto illustrato finora non ha la pretesa di esaurire l’argomento
dell’ottimizzazione SEO di un sito, sul quale come sappiamo sono state pubblicate intere
guide e in alcuni casi anche in modo specifico per WordPress (wpaz.it/070). Per chi
volesse approfondire elementi particolari dell’ottimizzazione, ricordiamo che sul blog
ufficiale del mio secondo libro (wpaz.it/002) vengono pubblicati periodicamente articoli
specifici. Nel prossimo paragrafo proveremo comunque a fare una panoramica dei diversi
aspetti concernenti il miglioramento della SEO “onsite” facendo riferimento a una serie di
plugin specializzati, il cui utilizzo è altamente consigliato se si vogliono aumentare le
probabilità di guadagnare posizioni nei risultati delle ricerche su Google e altri motori.
6.3 Plugin aggiuntivi per la SEO
Ogni aspetto legato all’ottimizzazione SEO onsite può essere gestito per mezzo di uno o
più plugin, che vanno ad aggiungersi a un plugin specifico utilizzato per l’ottimizzazione
dei contenuti come quello esaminato nel paragrafo precedente.
La scelta in questo senso è davvero infinita, ma per le finalità del capitolo possiamo
sicuramente restringere il campo a una serie di plugin collaudati dei quali è stata appurata
l’efficacia, oltre che l’utilità e la praticità.
Come abbiamo già avuto modo di accennare, la presenza di link interni fra i contenuti è
un elemento sicuramente determinante per migliorare l’indicizzazione da parte dei motori,
oltre che l’usabilità nei confronti degli utenti, soprattutto nel caso di siti ricchi di contenuti
e dalla struttura complessa, primi fra tutti i blog oppure i siti che contengono un’area blog
o news particolarmente attiva.
Yet Another Related Post Plugin (wpaz.it/073), conosciuto anche con il suo acronimo
YARPP, da questo punto di vista è diventato un riferimento: il suo compito è di segnalare e
linkare, in fondo a ogni contenuto, eventuali altri argomenti che risultino affini in modo da
consigliarne la lettura al pubblico.
La stima di affinità avviene, oltre che in base ai titoli e ai contenuti, anche in base alle
categorie di appartenenza e ai tag, per cui un utilizzo ponderato ed efficace di entrambi i
criteri di classificazione potrà assicurare risultati migliori in questo senso.
Una volta installato e attivato, il plugin aggiunge la voce YARPP alla sezione
Impostazioni di WordPress e permette così di accedere alla sua schermata di
configurazione, che è suddivisa in quattro pannelli principali. In realtà il plugin ha effetto
anche senza modificare alcuna opzione, tuttavia vale la pena esplorarle e soprattutto
testarle per verificare i diversi risultati.
Il primo pannello (Veduta di Insieme) permette di selezionare determinate categorie o
tag in modo da evitarne l’inclusione nella ricerca dei contenuti correlati, di includere nella
visualizzazione anche i contenuti protetti da password e di escludere quelli più vecchi di
una certa data.
Il secondo pannello (Opzioni Affinità) è invece quello in cui si decide il grado di
correlazione fra i contenuti in base a un valore di corrispondenza (predefinito 5) al
crescere del quale aumenteranno le restrizioni di affinità e di conseguenza si ridurrà il
numero di contenuti correlati visualizzato. I quattro menu presenti nel pannello
permettono di regolare il ruolo di titoli, contenuti, categorie e tag nel processo di
valutazione del grado di affinità, mentre l’opzione Mostra i risultati da tutti i tipi di
post, se attivata, visualizza anche altri contenuti oltre a quelli dello stesso tipo (per es.
anche articoli nelle pagine e viceversa; si possono eventualmente verificare i risultati
testando le diverse combinazioni assieme al valore di corrispondenza. L’ultima opzione
esclude dal processo di associazione i nuovi articoli.
Il pannello Opzioni di visualizzazione nel tuo sito (Figura 6.16) consente di definire la
quantità e il formato dei contenuti correlati visualizzati, facendo scegliere fra il semplice
elenco e l’abbinamento alle miniature delle immagini in evidenza. In realtà è disponibile
una terza opzione che permette di selezionare anche dei template personalizzati,
scaricandoli e installandoli col pulsante Copy templates che compare posizionandosi
sulla sua icona.
Figura 6.16 – Le tre opzioni per il formato di visualizzazione dei contenuti correlati in
YARPP (wpaz.it/073); si noti la terza opzione attivata con il download dei template e il
menu di scelta di questi ultimi nel riquadro sottostante.
Da un menu nella parte bassa del riquadro potrete scegliere in che ordine visualizzare i
contenuti correlati, in altre parole per rilevanza, data o alfabeticamente per titolo, in tutti e
tre i casi anche in ordine inverso, mentre al di sotto trovate un’opzione per visualizzare le
info sugli sviluppatori. La parte alta del riquadro, infine, contiene due possibilità per la
scelta del tipo di contenuti da includere, normalmente sono selezionati solo gli articoli, e
l’eventuale inclusione dei post correlati anche nelle visualizzazioni dei contenuti come
archivi.
L’ultimo riquadro, Opzioni di visualizzazione nel tuo feed RSS, permette di includere
gli articoli correlati anche nel feed RSS degli articoli.
Quando si tratta di link verso l’esterno, invece, vi ritrovate a dover gestire due
importanti problematiche in un’ottica SEO: la presenza di link non più validi e il
passaggio di “ranking”, punteggio relativo al posizionamento del sito, a siti esterni.
La prima questione è molto delicata, poiché i motori di ricerca, Google in primis, sono
molto attenti alla validità dei link pubblicati nel sito e in seguito all’aumento del numero
di link non più funzionanti, che portano a una “pagina non trovata” o addirittura a un
dominio ormai scaduto e non più valido, si rischia di incorrere in una penalizzazione e
retrocedere nel posizionamento.
Figura 6.17 – La prima delle cinque schermate di configurazione del plugin Broken Link
Checker (wpaz.it/074); si noti la segnalazione del link rotto riscontrato con il link alla
schermata di log, raggiungibile anche dalla voce Link rotti della sezione Strumenti di
WordPress.
Per evitare questo problema dovete prima di tutto installare un plugin come Broken Link
Checker (wpaz.it/074), il quale effettua un costante monitoraggio sui link presenti nei
contenuti e sul sito in generale, segnalando quelli che dovessero risultare “rotti” (“broken”
in inglese) o semplicemente reindirizzati. Questa verifica e la conseguente segnalazione
avviene sia all’interno della sua schermata di log, raggiungibile dalla nuova voce Link
rotti che aggiunge alla sezione Strumenti di WordPress, sia con l’invio di un messaggio
di posta elettronica all’indirizzo specificato nella sua schermata principale di impostazioni,
raggiungibile dalla nuova voce Link Checker che il plugin aggiunge in fondo alla sezione
Impostazioni di WordPress (Figura 6.17). Le cinque schermate di configurazione
disponibili permettono di personalizzare ogni aspetto del lavoro svolto dal plugin e sono
fortunatamente in italiano, quindi saranno abbastanza intuitive.
Un altro tipo di plugin, fondamentale per la gestione corretta dei link, è quello che
definisce i reindirizzamenti da un link all’altro, utile in svariate situazioni fra cui la
modifica di permalink associati ai contenuti, che darebbero quindi un errore finché il sito
non viene reindicizzato dai motori, oppure il dirottamento forzato di una pagina o di un
articolo a un link esterno. Fra i plugin specializzati in questo compito, merita sicuramente
di essere menzionato Quick Page/Post Redirect (wpaz.it/075), che, oltre a permettere di
definire dei reindirizzamenti veloci attraverso la voce Quick Redirects della nuova
sezione Redirect Options di WordPress, aggiunge un nuovo pannello in fondo all’area di
editing di pagine e articoli (Figura 6.18) attraverso il quale si può definire un
reindirizzamento specifico.

Figura 6.18 – Il nuovo pannello per le opzioni di reindirizzamento introdotto dal plugin
Quick Page/Post Redirect (wpaz.it/075) sotto l’area di editing dei contenuti; si notino le
diverse opzioni e il menu per la scelta del tipo di reindirizzamento.
La seconda problematica SEO cui accennavamo in precedenza, vale a dire il passaggio di
ranking a siti esterni per mezzo dei relativi link, viene in parte gestita direttamente da
plugin come quello appena descritto, ma è altrettanto utile, se non addirittura
fondamentale, tenere sotto controllo i link inseriti nei commenti dal pubblico e quelli
inseriti dai noi stessi all’interno dei contenuti: è importante che a questi link sia aggiunto
l’attributo/parametro “nofollow”, che istruisce i motori di ricerca a non attribuire alcun
punteggio di ranking nel corso dell’indirizzamento.
Questo attributo, che nei plugin già descritti è presente come opzione, può essere
gestito, tanto per i commenti quanto per i link nei contenuti, con un plugin come Ultimate
NoFollow (wpaz.it/077), che introduce un’opzione per l’inserimento del nofollow nella
finestra di creazione dei link visualizzata con l’apposito strumento della barra di editing
dei contenuti, ma permette anche di aggiungere tale parametro a tutti i link presenti nei
commenti attraverso la schermata delle opzioni, raggiungibile dalla voce nofollow
aggiunta alla sezione Impostazioni di WordPress.
Nel caso voleste controllare l’attribuzione del nofollow nei commenti secondo una
graduatoria meritocratica e diversi altri parametri, per esempio escludendolo per gli utenti
che commentano spesso o includendolo per coloro che utilizzano determinate parole nei
commenti, potreste installare il plugin NoFollow Free (wpaz.it/078). Sebbene al momento
di scrivere non sia stato aggiornato da almeno due anni è risultato compatibile anche con
le versioni più recenti di WordPress ed è quindi utilizzabile, almeno per ora, senza
particolari controindicazioni.
Sempre a proposito di link, infine, per chi volesse reintrodurre in WordPress la gestione
dei link, esclusa dal backend e dai widget ormai da tempo, un plugin come Simple Links
(wpaz.it/076), che oltre ad aggiungere a WordPress un nuovo tipo di contenuto basato sui
link reintroduce un widget dedicato che, rispetto a quello originale, offre un numero
maggiore di opzioni. Il plugin aggiunge, inoltre, un sistema di “shortlink” e uno strumento
dedicato all’interno della barra di editing dei contenuti, riconoscibile dall’icona a forma di
puzzle.
Concluso anche l’argomento dei link, è il caso di dedicare almeno un paragrafo
all’argomento dei “social media” e un altro ancora all’interazione con gli utenti e la loro
fidelizzazione, in modo da chiudere il cerchio della promozione del sito.
6.4 WordPress e social media
Ci sono due aspetti che coinvolgono i social media nel processo di promozione di un sito:
la condivisione da parte del pubblico e quella gestita da chi amministra, invece, il sito
stesso, che si tratti del webmaster o di uno o più redattori o altre figure autorizzate. Il
primo aspetto si gestisce per mezzo di icone e pulsanti “social “che vengono visualizzati
in determinate posizioni della pagina: sul bordo, sopra o sotto il contenuto, all’interno di
widget dedicati e così via. Esistono numerosi plugin che aggiungono questi pulsanti,
permettendo spesso di selezionare anche i canali social da includere, lo stile delle icone, la
loro disposizione. Oltre a queste possibilità, generalmente l’unica altra configurazione
richiesta è quella riguardante i propri profili social in modo da associarla alle singole
icone. Non è difficile trovare plugin di questo tipo con una semplice ricerca su Google,
tuttavia proveremo a suggerirne alcuni in questo paragrafo e altri degni di nota sul blog
wpaz.it, selezionandoli nel corso del tempo.
Fra i plugin di questo tipo, uno dei più semplici da utilizzare e nello stesso completo è
sicuramente Shareaholic (wpaz.it/080), che nella sua schermata principale di
configurazione (Figura 6.19) consente di impostare facilmente la disposizione, sopra o
sotto il contenuto e, per mezzo del pulsante Customize, anche la disposizione delle icone,
la loro selezione e così via.
Per chi desiderasse, invece, una scelta più ampia nello stile delle icone c’è Floating
Social Media Icon (wpaz.it/079), che si distingue proprio per l’assortimento di icone
social, ma che permette di accedere alla stragrande maggioranza delle sue opzioni solo
nella versione premium.
Figura 6.19 – Il pannello di configurazione di Shareaholic (wpaz.it/080) con i quattro
riquadri per impostare la disposizione delle icone social rispettivamente negli articoli,
nelle pagine, negli elenchi e nelle categorie; si noti il pulsante Customize, che permette di
accedere alle impostazioni aggiuntive.
Shareaholic offre anche un’opzione per i contenuti correlati simile a quella già vista per
YARPP nelle pagine precedenti, quindi permette di evitare l’uso di un plugin aggiuntivo
facendo risparmiare risorse preziose.
Come abbiamo visto, l’inclusione di più funzioni all’interno dello stesso plugin è molto
utile e in tal senso vale la pena menzionare, proprio in un’ottica social, JetPack (wpaz.
it/081), il plugin ufficiale di WordPress.com che permette di includere su un sito o blog
indipendente, vale a dire installato su un hosting personale, molte delle funzionalità offerte
dalla famosa piattaforma di blogging basata su WordPress.

nota
Per essere utilizzato nella sua versione completa, JetPack richiede un account
(gratuito) sulla piattaforma WordPress.com: dopo la sua installazione, infatti, viene
visualizzato un avviso in cui viene richiesto di collegare il plugin con tale account.
Potete registrarvi su WordPress.com anche senza utilizzarlo come piattaforma di
blogging, ma è importante registrare il sito nell’account che andrete a creare.
Jetpack, in un certo senso, porta all’eccesso questa tendenza, dal momento che include
probabilmente fin troppe funzioni per un solo plugin. Molti sviluppatori, infatti, hanno
creato plugin derivati, che mantengono solo una parte; è possibile individuarli facilmente
usando la parola chiave jetpack nel sistema di ricerca dei plugin di WordPress). Tuttavia
vale la pena menzionarlo proprio riguardo alle sue opzioni per i social media, in quanto
oltre a offrire un set di icone per la condivisione su più profili è dotato di un’opzione per la
condivisione automatica dei contenuti sui nostri profili e fan page.

Figura 6.20 – La schermata di JetPack (wpaz.it/081) con l’elenco dei moduli utilizzabili,
che compare subito dopo la connessione con WordPress.com; si notino a destra i filtri per
visualizzare i moduli secondo vari parametri e, nell’elenco a sinistra, il modulo
Condivisione, che consente di pubblicare in automatico i contenuti sui profili social.
Il modulo Condivisione di JetPack, infatti, oltre a includere le opzioni per visualizzare le
icone social sul sito, permette di collegare, con lo strumento Pubblicizza, profili e “fan
page” per pubblicare automaticamente ogni nuovo contenuto anche sulle diverse
piattaforme; nella stessa schermata è presente anche un’utilissima opzione per associare il
sito o blog al profilo di Google+. JetPack offre anche un altro elemento utile in questo
senso: si chiama Mi piace e va attivato nell’elenco dei moduli del plugin. Il suo compito è
di visualizzare sotto gli articoli e le pagine, il numero di “like” ottenuto sul social network
e le foto di coloro che lo hanno cliccato.

nota
Le funzioni aggiunte da JetPack sono davvero numerose e richiederebbero un intero
capitolo per essere illustrate. Di conseguenza l’invito è di esplorarle in autonomia e
fare eventualmente riferimento al blog wpaz.it per eventuali approfondimenti legati a
ogni singola funzionalità del plugin.
Fra i plugin commerciali che permettono di rilanciare sui social media il contenuto di un
sito o di un blog è sicuramente da menzionare Social Auto Poster (wpaz.it/984), che
consente di configurare ogni aspetto della condivisione, compreso il testo che dovrà
precedere il link all’articolo e il tipo di piattaforma utilizzata per creare lo shortlink
(WordPress, TinyURL o bit.ly). I social network inclusi nel plugin, tutti configurabili
singolarmente (Figura 6.21), sono diversi: oltre a Facebook, Twitter e LinkedIn, troviamo
anche Tumblr, Delicious, FriendFeed e BufferApp (manca, purtroppo, Google+ almeno
nella versione esaminata al momento di scrivere).

Figura 6.21 – Una parte della schermata con le possibilità di configurazione per Facebook
nel plugin Social Auto Poster (wpaz.it/984); si notino le icone per accedere alle opzioni
degli altri social network e il menu della scelta del sistema di abbreviazione dell’URL
(shortlink).
Il plugin, inoltre, offre una pagina di impostazioni secondaria, dove potrete configurare
diversi widget basati sul vostro profilo Facebook, che vanno da quello più popolare per i
Like (di cui parleremo fra poco), a quelli che visualizzano gli eventi o gli album di foto
pubblicati sul social network.
Un altro elemento social sempre più frequente nei siti e nei blog è sicuramente il widget
associato alla fan page di Facebook creata per promuovere il sito stesso: il modo più
semplice per inserire questo widget nel vostro sito è di usare il widget Riquadro Mi Piace
di Facebook inserito da JetPack, compilando il campo URL Pagina Facebook al suo
interno e impostando le altre semplici possibilità presenti, che sono tutte molto intuitive.
Chi volesse, invece, gestire un widget di questo tipo in maniera più integrata con le
funzioni statistiche del social network, potrà installare il plugin Facebook (wpaz.it/082),
che, oltre a fornire il widget già descritto, può essere interfacciato con un’app di
Facebook, la cui creazione è consigliata solo a chi avesse già esperienza in tal senso o
volesse in ogni caso acquisirla. Il vantaggio, a fronte dell’impegno tecnico richiesto, è
l’integrazione totale con la piattaforma social e la possibilità di verificare l’efficacia della
promozione da un punto di vista statistico; soprattutto grazie alla funzione OpenGraph di
Facebook. A proposito di statistiche, è necessario rilevare come una promozione efficace
non possa prescindere dalla verifica dei suoi risultati: a tale proposito, la presenza di un
sistema di statistiche e monitoraggio del traffico sul sito è quantomeno auspicabile, per
conoscere, oltre al numero di visitatori, unici e regolari, e di pagine viste, anche la
provenienza e la durata delle visite e altri dati preziosi per un’ulteriore ottimizzazione dei
contenuti del sito.
Oltre ai diversi plugin per WordPress interfacciabili con Google Analytics e facilmente
reperibili usando il nome del servizio nella pagina di installazione dei plugin, vanno
sicuramente menzionati almeno altri due tipi di plugin che gestiscono, rispettivamente,
statistiche interne ed esterne al sito. In realtà anche JetPack offre un suo sistema di
statistiche veicolato da WordPress.com e visualizzabile, nel backend di WordPress, dalla
voce Statistiche Sito presente nella nuova sezione JetPack.
Un sistema dettagliato di statistiche di accesso al sito, gestibile e visualizzabile
direttamente nel backend, si può ottenere con plugin come Kstats Reloaded (wpaz.it/083)
oppure StatPress Reloaded (wpaz.it/084). Entrambi non vengono aggiornati da lungo
tempo, ma al momento di scrivere risultano funzionanti anche con le versioni più recenti
di WordPress: vanno semplicemente installati per iniziare immediatamente a monitorare
gli accessi al sito, visualizzando le relative statistiche nelle rispettive schermate. Stat-Press
Reloaded offre un più grande numero di dati e un maggior dettaglio rispetto a KStats
Reloaded. Un’alternativa più aggiornata è StatPress Visitors (wepaz.it/085), che risulta
altrettanto minuzioso in quanto a statistiche.

nota
Lo svantaggio nell’uso di plugin come StatPress Reloaded, StatPress Visitors o
KStats Reloaded è il consumo di risorse e le conseguenze che esso può avere sulle
prestazioni e la stabilità del sito. Pertanto è sempre consigliabile utilizzare le
statistiche fornite da servizi esterni, tanto quelle di Google Strumenti Webmaster e
Analytics, quanto quelle di WordPress.com se si usa JetPack, oppure di altri servizi
come StatCounter, che stiamo per descrivere.
L’alternativa ai servizi e ai plugin finora descritti è la registrazione a un servizio come il
popolare StatCounter (wpaz.it/086) e l’utilizzo dell’omonimo plugin (wpaz.it/087): oltre a
fornire statistiche dettagliate e facili da consultare, questo servizio può essere utilizzato
gratuitamente con l’unica limitazione nella durata dei dati archiviati, che per la versione
gratuita cominciano a essere cancellati al raggiungimento dei 500 elementi e che possono
essere ampliati con un abbonamento che parte da pochi euro mensili. In ogni caso, la
versione gratuita del servizio è più che sufficiente per la maggior parte dei siti, soprattutto
se si ha l’accortezza di consultare con frequenza le statistiche.
6.5 Interazione e fidelizzazione
L’ultimo aspetto di cui ci occuperemo in questo capitolo dedicato alla promozione del sito
riguarda il miglioramento dell’interazione col pubblico e le conseguenti strategie che
possono incentivarne la fidelizzazione.
Abbiamo già visto come creare una pagina di contatti in cui inserire un modulo per
l’invio di messaggi, che in molti casi è già un enorme passo avanti rispetto all’utilizzo del
solo recapito email. Un ulteriore miglioramento è quello di rendere più immediatamente
visibile e utilizzabile l’eventuale strumento di invio dei messaggi ed è possibile farlo
utilizzando plugin come Widget Contact Form 7 (wpaz.it/088) oppure Easy Contact Form
7 Widget (wpaz.it/089). Entrambi aggiungono un widget nel quale è possibile inserire uno
dei moduli creati con Contact Form 7, che deve quindi essere già installato e attivo nel
sito, rendendo possibile l’inserimento di un semplice modulo nella barra laterale o
nell’area widget del piè di pagina del sito, il che stimola particolarmente il suo utilizzo da
parte del pubblico. Naturalmente, in questi casi è consigliabile creare un modulo ad hoc in
modo che sia visualizzato al meglio nel widget e di utilizzo più immediato rispetto
all’eventuale modulo pubblicato nella tradizionale pagina dei contatti.
Ancora più efficace può essere l’utilizzo di un elemento, chiamato widget come quelli
di WordPress, ma in questo caso non gestito dal CMS, che fornisca un servizio di chat e
messaggistica ai visitatori del sito. Ne è un esempio quello di Zopim (wpaz.it/065),
disponibile anche in forma gratuita, che si inserisce in WordPress utilizzando il codice
fornito nelle impostazioni del proprio pannello dopo la registrazione e l’accesso al
servizio, cliccando sulla voce Widget del menu di Zopim, e copiandolo per poi incollarlo
in WordPress all’interno del template header.php prima del tag </head>. In questo modo
sarà visualizzato un elemento particolarmente visibile nell’area in basso a destra della
pagina mostrata nel browser, configurabile con il testo desiderato in italiano: se nel
momento in cui un visitatore arriva sul sito foste loggati in Zopim, egli potrà chattare con
voi in tempo reale, altrimenti gli sarà possibile inviare un messaggio che arriverà
sull’indirizzo email che avrete utilizzato nella registrazione sul sito di Zopim.
Figura 6.22 – Le possibilità di configurazione del widget Zopim (wpaz.it/065) nel
pannello del sito; si notino i diversi pulsanti in alto per accedere al codice di embed e alle
altre opzioni di configurazione.
Un’altra importante strategia di fidelizzazione è di permettere ai visitatori di abbonarsi
facilmente ai vostri feed RSS oppure a una vera e propria newsletter. Nel primo caso è
utile gestire i feed attraverso il popolare servizio Feedburner (wpaz.it/090), registrando
prima di tutto il sito con il proprio account Google e installando poi il plugin Feedburner
Email Subscription (wpaz.it/091), che aggiunge a WordPress un widget molto semplice da
configurare e molto efficace nella sua immediatezza d’uso nel frontend. Nel secondo caso
potete servirvi del popolare plugin Newsletter (wpaz.it/091) dello sviluppatore italiano
Stefano Lissa (alias Satollo), che è davvero completo e ampiamente configurabile, e
contiene diversi template (Figura 6.23) per le newsletter da spedire agli utenti.
Figura 6.23 – Alcuni dei template disponibili per l’invio dei messaggi nel plugin
Newsletter (wpaz.it/091); si noti il primo completamente vuoto e adatto, quindi, a una
personalizzazione più spinta.

nota
Come molti altri plugin gratuiti menzionati in questo libro, Newsletter suggerisce
l’invio di una donazione allo sviluppatore: è buona norma contribuire anche con una
somma modesta se ritenete di aver trovato utile un plugin e in particolare se vi ha
permesso di risolvere un particolare problema o se lo utilizzate di frequente. Anche
un piccolo contributo è di incoraggiamento agli sviluppatori, che hanno fatto la scelta
generosa di offrire gratuitamente il frutto del proprio lavoro.
Per finire, non dimenticate di consentire al vostro pubblico, che ha già fatto uno sforzo per
interagire commentando un contenuto, di registrarsi per ricevere avvisi via email sui
successivi commenti allo stesso articolo. Basta un plugin come Subscribe to Comments
Reloaded (wpaz.it/093) per offrire al visitatore tutte le possibilità con cui gestire questo
tipo di iscrizione.
Gli argomenti che abbiamo esplorato in questo capitolo sono una summa dei principi
alla base di ogni strategia per la promozione di un sito o di un blog, ma non pretendono
certamente di esaurire tutte le tematiche coinvolte in questa delicata e importante area
della comunicazione sul Web.
Come sempre, l’invito è di visitare il blog wpaz.it e consultarne i contenuti sugli
approfondimenti specifici e le tematiche di interesse.
7
Manutenzione e sicurezza
I motivi per cui un sito Web potrebbe smettere di funzionare sono diversi e vanno da un
eventuale problema dell’hosting a un conflitto fra temi e/o plugin, fino all’estrema (ma per
niente improbabile) ipotesi di un danno provocato dall’utilizzo inappropriato da parte di
un utente con privilegi di amministrazione o, peggio ancora, da un attacco informatico.
Questo capitolo ha l’obiettivo di fornire tutti quegli strumenti che possono aiutare a
prevenire e risolvere problemi come quelli appena descritti e, per quanto possa sembrare
un argomento secondario, va tenuto assolutamente in considerazione, a meno di non
volersi esporre a situazioni che definire stressanti è un eufemismo.
Prima di parlare degli strumenti e dei metodi per una corretta manutenzione e
protezione di un sito, tuttavia, sarà bene dare un’altra occhiata “sotto il cofano” di
WordPress, per capire quali siano gli elementi da preservare e proteggere, argomento che
tratteremo nel primo paragrafo.
7.1 Cartelle, file e database
Come avete già avuto modo di scoprire nel primo capitolo di questo volume, i due
elementi che permettono a un sito WordPress di funzionare sono il database e l’insieme di
cartelle e file del CMS: il primo contiene le informazioni inserite da voi e dai componenti
(temi e plugin) che installerete nel tempo, il secondo i file di base e quelli che caricherete
dopo l’installazione di WordPress, vale a dire gli elementi della libreria Media e,
ovviamente, i temi e i plugin.

Figura 7.1 – Il contenuto di una cartella di WordPress; si noti il file wp-config.php e la


sottocartella uploads, che vengono aggiunti solo in seguito all’installazione e l’utilizzo del
CMS.
Se osserviamo l’insieme di cartelle e file di WordPress in uno spazio hosting dove il CMS
sia già installato e funzionante (Figura 7.1), noteremo che rispetto alla cartella originale
sono stati aggiunti due nuovi elementi: la sotto-cartella uploads nella cartella wp-content e
il file wp-config.php.
La prima contiene tutti i file che caricherete nella libreria Media, come sapete composti
in gran parte da immagini, normalmente organizzate in sotto-cartelle corrispondenti al
mese e all’anno dell’upload.
Il file wp-config.php contiene, invece, le informazioni riguardanti il database utilizzato
da WordPress, che non si trova nello spazio di hosting, ma è ospitato, invece, da un server
apposito, ovvero il server MySQL.

Figura 7.2 – Un tipico database di WordPress così com’è strutturato subito dopo
l’installazione; si noti l’elenco delle tabelle principali, che contengono tutti i dati di
configurazione del CMS, alle quali si aggiungeranno col tempo altre tabelle create
generalmente dai plugin.
Nel primo capitolo avete già avuto modo di osservare da vicino questo importante
elemento, ma sarà bene rinfrescarsi la memoria sulla sua natura e struttura: il database
MySQL, in cui sono conservate tutte le informazioni di WordPress, è strutturato in forma
tabellare (Figura 7.2) ed è vitale per il funzionamento del CMS, in quanto contiene dei dati
che non sarebbe possibile recuperare nel caso venisse danneggiato, fra i quali si trovano:
• contenuti di pagine e articoli
tutti i testi che digiterete creando pagine e articoli, comprese le informazioni di
formattazione del testo, i link e ogni altro elemento a essi associato, ma anche i
commenti.
• le informazioni sugli elementi della libreria Media
mentre i file caricati saranno, come abbiamo appena visto, inseriti nella cartella
uploads, tutte le informazioni a essi associate sono conservate nel database. Per
esempio: la loro collocazione all’interno del contenuto, il testo alternativo, la
descrizione, nel caso delle immagini, e così via.
• i dati di configurazione di WordPress
informazioni come i dati dell’admin e degli altri utenti, le impostazioni di base di
WordPress e ogni altro aspetto della configurazione di base del CMS.
• le impostazioni dei temi e dei menu
tutti i dati di personalizzazione e configurazione dei temi gestiti attraverso l’area di
personalizzazione di WordPress o il pannello specifico di ogni tema, ma anche i
widget e il loro posizionamento e, naturalmente, i menu personalizzati che andrete a
creare.
• le impostazioni dei plugin
in genere i plugin creano, una volta installati e configurati, una loro tabella all’interno
del database, che si va ad aggiungere a quelle esistenti, nella quale sono memorizzate
le relative impostazioni di configurazione.

nota
Sebbene ai fini di una corretta manutenzione di base di WordPress non sia
assolutamente necessario conoscere la struttura del database MySQL, farsene un’idea
di massima può aiutare a gestirlo con maggiore sicurezza e in modo più intuitivo.
Come vedremo fra poco, può essere facilmente gestito sotto forma di file, senza
quindi dover familiarizzare con i comandi del linguaggio SQL e l’interfaccia di
phpMyAdmin (già descritta nel primo capitolo), a meno di non volerne approfondire
l’uso da un punto di vista tecnico.
Da quanto appena descritto si capisce come il database, insieme al file wp-config.php, che
ne contiene i dati d’accesso insieme ad altre impostazioni di configurazione di WordPress,
siano due degli elementi che è importante preservare e proteggere quando si parla di
manutenzione e sicurezza.
L’altro elemento che cambia nel tempo, e di conseguenza va protetto e conservato, è la
cartella wp-content, al cui interno si trova la cartella dei temi (themes), quella dei plugin
(plugins) e quella in cui sono collocati tutti i file caricati (uploads), a partire dalle
immagini.
È facile intuire che delle tre cartelle appena descritte la più preziosa è uploads, anche se
è opportuno avere sempre una copia di backup delle altre due, per non essere costretti a
recuperare temi e plugin installati durante lo sviluppo e conseguente utilizzo del sito.
Volendo a questo punto riepilogare, ecco i tre elementi del sito da includere in
un’eventuale copia di sicurezza (backup), nel caso vi ritrovaste a doverlo ripristinare per
un qualsiasi problema non risolvibile altrimenti:
• il file wp-config.php
dal momento che contiene i riferimenti al database e altri dati di configurazione.
• la cartella wp-content
o quantomeno le tre sotto-cartelle uploads (la più importante), themes e plugins.
• il database MySQL
che viene salvato sotto forma di file nel suo formato nativo SQL con o senza
compressione.
Tutte le altre cartelle e file di WordPress non subiscono modifiche nel corso del tempo, di
conseguenza possono essere sostituite, e in effetti lo sono, ogni qualvolta si aggiorna
WordPress.
Saranno proprio gli aggiornamenti l’argomento di un apposito paragrafo di questo
capitolo, ma ora è importante dedicare il giusto spazio all’argomento, importantissimo, del
backup e del ripristino di un sito WordPress, oltre che del suo trasloco, che coinvolge
entrambe le operazioni.
7.2 Backup
Il backup, vale a dire la copia di sicurezza, di un sito WordPress sarà pertanto composto da
due elementi: il file del database e le cartelle e file del CMS. Entrambi possono essere
memorizzati usando procedure manuali o automatiche, che descriveremo in questo
paragrafo.

Figura 7.3 – L’inizio del processo di esportazione di un database da phpMyAdmin per


crearne una copia di backup; si noti il database selezionato a sinistra, con l’elenco delle
tabelle, e l’opzione Personalizzato selezionata per consentire la caratterizzazione
dell’esportazione e renderla adatta a un eventuale ripristino da successiva importazione.
Potete creare una copia di backup del database accedendo all’interfaccia di phpMyAdmin,
come abbiamo già visto nel primo capitolo a proposito delle fasi di creazione del database
stesso. Per salvare una copia del database basterà selezionarlo nell’area a sinistra e
scegliere il comando Esporta fra quelli visualizzati nella parte superiore dell’area più
grande a destra (Figura 7.3).
Selezionate prima di tutto il Metodo di esportazione attivando la seconda opzione
(Personalizzato – mostra tutte le possibili opzioni), senza lasciarvi spaventare dall’elenco
di scelte che compare (Figura 7.3), visto che ne dovrete usare solo due. Prima di
procedere, però, soffermatevi per un attimo sulla finestra che elenca le tabelle del
database. È importante capire come da questa finestra potreste escludere delle tabelle, che
sono per esempio state create da un plugin non più utilizzato, alleggerendo il file che
andrete a esportare. Per deselezionare e riselezionare le singole tabelle, basta cliccare
tenendo premuto il tasto Ctrl. Si tratta di una scelta che richiede ovviamente cognizione di
causa, quindi, se non sapete realmente cosa state facendo, è preferibile evitarlo ed
esportare tutte le tabelle presenti nel database.
Passate quindi alle due opzioni da selezionare per un’esportazione corretta del file SQL,
che conterrà tutte le tabelle del database. La prima è quella della Compressione e si trova
nella sezione Output: lasciando la voce Nessuno otterrete un file non compresso, che
tuttavia potrebbe essere troppo grande per l’importazione, quindi assicuratevi di ripetere
l’esportazione scegliendo, la volta successiva, la voce compresso con zip o compresso
con gzip.

Figura 7.4 – L’importantissima opzione Aggiungi l’istruzione DROP TABLE…, che


rende il file maggiormente adatto per il ripristino del database.
La seconda opzione si chiama Aggiungi l’istruzione DROP TABLE… e si trova
nell’area Opzioni di creazione dell’oggetto: quest’opzione (Figura 7.4) rende
maggiormente adatto al ripristino il file che andrete a esportare.
nota
La compressione del database in fase di esportazione è utile in tutti quei casi che non
ne richiedono la successiva modifica, tuttavia è buona norma esportare anche una
versione non compressa proprio per tutte le altre eventualità.
Una volta selezionata la compressione e attivata l’opzione per DROP TABLE, basterà
cliccare sul pulsante Esegui a fine schermata per salvare il file del database.
È sicuramente da menzionare, a proposito di quanto visto finora, il plugin Adminer
(wpaz.it/096), che permette di utilizzare un’interfaccia stile phpMyAdmin direttamente da
WordPress per mezzo della nuova voce chiamata Adminer e aggiunta alla fine della
sezione Strumenti del CMS. Si tratta di un plugin che può tornare comodo per
l’esportazione del database, ma meno consigliabile per l’operazione inversa, cioè quella di
importazione/ripristino, che affronteremo nel prossimo paragrafo.
Qualora non voleste complicarvi la vita con l’uso di phpMyAdmin nelle operazioni di
backup del database, potreste installare il plugin WP-DB-Backup (wpaz.it/094), che
aggiunge una nuova voce backup alla sezione Strumenti di WordPress e permette, dalla
relativa schermata, di deselezionare eventuali tabelle aggiuntive e scegliere fra un backup
immediato e uno programmato. Nel primo caso potrete salvare il file sul server (viene
indicato il percorso della cartella), scaricarlo sul vostro computer oppure inviarlo come
allegato email; nel secondo caso sarà disponibile soltanto quest’ultima opzione. Per
quanto riguarda, invece, il backup di cartelle e file di WordPress, avete tre possibilità:
utilizzare un programma “client” FTP come FileZilla, gli strumenti disponibili nel vostro
pannello di hosting oppure un plugin dedicato che non si limiti al solo database, ma
includa nel backup anche le cartelle e i file desiderati.
Le prime due possibilità riguardano strumenti di cui abbiamo già ampiamente parlato
nel primo capitolo, ricordandovi che potete procedere sia con un download integrale di
WordPress, includendo quindi tutto quanto è presente nel vostro spazio di hosting, sia con
un download parziale, limitandovi al file wp-config.php e alla cartella wp-content, che
come avete visto rappresentano gli elementi realmente importanti.
Per un backup completo automatizzato e programmato, potete invece usare un plugin
come BackWPup Free (wpaz.it/095), considerato il migliore in quest’ambito e disponibile,
come fa intuire il nome, anche in una versione a pagamento. Questo plugin aggiunge la
possibilità di backup differenziale, vale a dire in grado di discriminare quali siano i file
modificati e aggiornare solo il relativo backup. Appena installato il plugin inserisce una
nuova sezione omonima all’area di amministrazione di WordPress, visualizzando una
schermata di presentazione: cliccate subito sulla voce Add new job nella nuova sezione
BackWPup per procedere con la creazione di un backup automatico programmato (Figura
7.5).
Figura 7.5 – Una parte della schermata iniziale di creazione di un backup programmato
con BackWPup; si noti a sinistra la nuova sezione creata dal plugin con le diverse voci e, a
destra, le opzioni di compressione e quelle per la destinazione dell’archivio di backup.
La schermata di creazione del backup automatico è formata da sei schede principali
(Figura 7.6), richiamabili per mezzo delle rispettive etichette: General, Schedule, DB
Backup, Files, Plugins e To: Folder.
Figura 7.6 – La sezione Schedule della schermata di creazione del backup automatico di
BackWPup; si notino le etichette delle schede che si riferiscono alle altre sezioni in alto e
il link Run now per avviare il backup manualmente nell’immediato.
Nella sezione General, che viene visualizzata automaticamente accedendo alla creazione
del backup automatizzato, potrete definire il nome del nuovo processo (job) di backup
assegnato al plugin e definire prima di tutto quali saranno le operazioni da compiere (Job
Tasks) se al backup del database e di cartelle e file volete aggiungere: il salvataggio di un
elenco dei plugin installati, un’esportazione dei contenuti del sito in un file XML e un
controllo sull’integrità delle tabelle del database. Ogni opzione aggiuntiva scelta attiverà
la corrispondente scheda selezionabile poi con le etichette in alto, per definirne le
specifiche opzioni. Potrete poi scegliere che nome dare all’archivio salvato, in parte
formato dalla data e dall’ora, oltre che da una serie di lettere e numeri casuali, per
questioni di sicurezza, stabilire il tipo di compressione e la destinazione cui sarà inviato
l’archivio compresso generato dal backup: anche quest’ultima opzione attiverà, alla scelta
di ogni voce, una nuova scheda di configurazione. Infine, potrete decidere a che recapito
email inviare il rapporto (log) di ogni operazione di backup eseguita e che mittente
includere nel messaggio.
La sezione Schedule (Figura 7.6) riguarda invece l’esecuzione immediata o
programmata del backup, per il quale è possibile impostare una frequenza (oraria,
giornaliera, settimanale e mensile) oppure l’avvio immediato da un apposito link Run
now in alto oppure da un link che è possibile cliccare in qualsiasi momento.
Nella sezione DB Backup potrete escludere eventuali tabelle dal backup del database e
decidere il nome di quest’ultimo e l’eventuale compressione, mentre nella sezione Files
potrete definire fin nei minimi particolari quali cartelle e file includere o escludere, salvo
che non decidiate di creare un backup integrale dell’intero spazio Web (root). Infine, nella
scheda Plugin, attiva solo se avete scelto di salvare l’elenco dei plugin nel vostro backup,
potrete decidere il nome del file di testo che conterrà l’elenco dei plugin installati e
l’eventuale compressione dello stesso.
Tutte le schede aggiuntive attivate dall’eventuale inclusione delle diverse destinazioni
di backup sono ovviamente da configurare in modo specifico. Per il backup su cartella
nell’hosting sarà definita una cartella predefinita che potrete modificare, mentre per
l’invio del backup come allegato email potrete stabilire, oltre al destinatario, una
dimensione massima del file e il metodo di invio (standard, SMTP e così via). Tutte le
altre destinazioni richiederanno ovviamente l’inserimento dei rispettivi parametri, che si
tratti di uno spazio FTP oppure di un servizio di cloud come DropBox o altri simili.
Il plugin permette, infine, di definire varie altre impostazioni e consultare l’elenco dei
backup impostati, di quelli eseguiti e dei log di questi ultimi, usando le apposite voci Jobs,
Backups e Logs.
Ora che abbiamo esaminato i diversi metodi di backup, è fondamentale capire come
funziona il ripristino di un sito a partire dalla sua copia salvata in uno dei modi descritti in
questo paragrafo, prendendo anche in esame un sistema ancora più automatizzato per il
backup e il ripristino, riferendoci alle operazioni di trasloco del sito.
7.3 Ripristino e migrazione
Le operazioni incluse nel trasloco, o “migrazione”, di un sito comprendono ovviamente
quelle di backup e il conseguente ripristino, con la differenza che sarà necessario
specificare e impostare la nuova destinazione nel file wp-config.php e del file dal database,
nel caso si tratti di portare il sito su un diverso dominio oppure nei casi di spostamento da
sito locale a remoto e viceversa. Ma procediamo per gradi partendo dal semplice
ripristino, che potrebbe rivelarsi necessario, per esempio, nel caso il sito subisse dei danni
e voleste ripristinarne una copia precedente ancora integra.
Nelle operazioni di ripristino di un sito WordPress, così come in quelle di backup,
avremo due diverse fasi che coinvolgono rispettivamente il database e le cartelle e file del
CMS.
Ripristinare un database di WordPress significa accedere necessariamente al
phpMyAdmin: sebbene un plugin come Adminer, già menzionato nel paragrafo
precedente, permetta in teoria di ripristinare, importandolo, il database del sito, è sempre
consigliabile gestire questa delicatissima operazione dall’esterno.
L’utilizzo di phpMyAdmin ci permette, infatti, non solo di operare in modo autonomo
rispetto al sito, ma anche di creare eventualmente un nuovo database da usare in
alternativa a quello precedente, importando al suo interno le tabelle di quest’ultimo in fase
di ripristino (e ricordandoci ovviamente di modificare di conseguenza i parametri del
database nel file wp-config.php in questo caso). Si tratta di una strategia da prendere
senz’altro in considerazione, qualora si abbia la possibilità di avere database multipli per
lo stesso sito/dominio.
Ma torniamo al ripristino del database: l’operazione si riduce semplicemente alla
selezione di quello già esistente nel pannello di phpMyAdmin (Figura 7.7), cliccando poi
sull’etichetta Importa, selezionando il file del database e confermandone infine
l’importazione con il pulsante Esegui. Tutte le tabelle del database esistente saranno così
sostituite da quelle contenute nel file selezionato, quindi fate attenzione a non commettere
errori in questa fase delicata del ripristino.

Figura 7.7 – La scheda dell’operazione Importa in phpMyAdmin; si noti il pulsante


Scegli file per la selezione del file SQL da importare, cui seguirà semplicemente la
conferma con il solito pulsante Esegui in fondo alla schermata.

nota
Il problema più frequente che si presenta in fase di importazione di un database è
dovuto alle eventuali dimensioni eccessive del file SQL, che conviene quindi
comprimere in formato ZIP qualora sia visualizzato un messaggio di errore di questo
tipo. In genere il database di un sito standard, cioè privo di una sezione blog/news o
comunque con un numero di articoli non altissimo, produce in fase di esportazione un
file molto piccolo che non causa problemi in fase di importazione.
Anche per quanto riguarda il ripristino di cartelle e file si può adottare una strategia di
“duplicazione” simile a quella sopra esposta per il database, che consenta di avere una
scappatoia in caso di problemi: prima di caricare le cartelle e i file del backup potete
creare una cartella temporanea nello spazio di hosting e spostarvi dentro tutto il contenuto
della root. In questo modo, potrete riportare velocemente tutto al suo stato originale nel
caso vi accorgeste che il ripristino non ha avuto successo per un qualsiasi motivo. In ogni
caso, una volta ricostruito il database e l’insieme di cartelle e file, il sito dovrebbe
ritornare allo stato in cui si trovava quando il backup dei due elementi era stato creato,
sempre che l’obiettivo fosse quello di ripristinare il sito nel suo spazio originale di hosting
e dominio.
Quando, invece, si intende utilizzare il backup di un sito WordPress (quindi database
insieme a cartelle e file) per ricrearlo altrove, per esempio in locale oppure per un trasloco
su un diverso hosting o dominio, vi ritroverete a dovere gestire due fattori extra: i dati del
nuovo database da utilizzare e l’eventuale nuovo nome di dominio, che nel caso di
un’installazione locale sarà il classico localhost o simile, come abbiamo visto nel primo
capitolo.
Dovrete, quindi, sia aggiornare il file wp-config.php con i riferimenti al nuovo database
con le stesse modalità viste nel primo capitolo, sia sostituire, nel file del database
esportato, tutte le occorrenze del precedente dominio con quelle del nuovo.
Facciamo un esempio pratico: volendo ripristinare su un sito in locale il database e
l’insieme di cartelle e file contenuti nel backup di un sito Web che si trova all’indirizzo
nomedominio.it, dovrete prima di tutto rimpiazzare tutte le occorrenze di
http://www.dominio.it con http://localhost all’interno del file SQL da importare (cercate di
lavorare sempre su una copia, in questi casi) e poi aggiornare il file wp-config.php
inserendo i dati del database MySQL che avete creato in locale.
Come sempre, cercate di utilizzare un editor di codice per questo genere di operazioni,
soprattutto quelle relative alla ricerca e sostituzione del dominio all’interno del file SQL
(Figura 7.8), in questo modo eviterete di compromettere il formato del file.

Figura 7.8 – L’uso della funzione “cerca e sostituisci” in un editor di codice come
NotePad++ (wpaz.it/991) per cambiare tutte le occorrenze del nome di dominio
all’interno di un file di database prima di importarlo su un hosting associato a un dominio
diverso dall’originale; si noti il pulsante con l’opzione Sostituisci tutti.
Una soluzione alternativa alla modifica manuale del file di un database in caso di trasloco
su dominio diverso può essere offerta dal plugin WP Migrate DB (wpaz.it/099), che
permette di creare un file di esportazione del database in cui siano già inclusi i riferimenti
al nuovo dominio: nella schermata richiamata dalla nuova voce Migrate DB della sezione
Strumenti di WordPress (Figura 7.9) bisognerà inserire, in questo caso, anche il nuovo
percorso della cartella di hosting, che nel caso di un server locale sarà ovviamente quella
della cartella htdocs sul vostro computer.

Figura 7.9 – La schermata per le impostazioni di esportazione del database in Migrate DB


(wpaz.it/099); si notino in questo caso l’URL del dominio (New Address) e il percorso di
destinazione (New File Path) che si riferiscono a un hosting locale di XAMPP.
Potete, infine, gestire eventuali operazioni di trasloco, o addirittura duplicazione del sito,
con plugin come Duplicator (wpaz.it/097), che utilizza un unico archivio compresso per
sito e database, velocizzando e semplificando di molto la migrazione.
Duplicator (Figura 7.10) consente, infatti, di creare, cliccando sull’etichetta Create
New al primo accesso alla schermata d’uso, un file di installazione in PHP abbinato a un
archivio compresso che contenga sia il database, sia le cartelle e i file di WordPress
(l’insieme dei due file viene definito “package”): caricando entrambi sull’hosting di
destinazione e lanciando il file PHP dal browser, è possibile inserire i dati relativi al nuovo
sito, vale a dire il dominio e i riferimenti al database, per far sì che su di esso sia installata
una copia perfetta del sito originale, in modo completamente automatizzato. Questo plugin
è stato ulteriormente potenziato nelle versioni più recenti e permette ora di creare un file di
installazione pronto per l’uso, selezionando l’opzione Installer anziché Archive e
inserendo i dati relativi al nuovo dominio e al nuovo database, esclusa la password che
sarà fornita come unico parametro avviando l’installazione sul sito di destinazione.
Figura 7.10 – La schermata di creazione del package (archivio del sito e file di
installazione) di Duplicator (wpaz.it/097) avviata cliccando sull’etichetta Create New; si
noti il processo in tre fasi (setup, scan, build), la barra che contiene il risultato e i dettagli
del test preliminare di compatibilità (Requirements) e le due opzioni in basso che creano,
rispettivamente, un package da configurare alla destinazione (Archive) e un vero e proprio
pacchetto di installazione già configurato (Installer).
Come si può comprendere si tratta di un plugin prezioso nelle fasi di migrazione, o
clonazione, di un sito, oltre che per un uso in situazioni di ripristino, visto che permette sia
di automatizzare tutte le fasi descritte nelle pagine precedenti, sia di superare nello stesso
tempo le difficoltà che si possono incontrare, per esempio, con le dimensioni eccessive di
un database o con la lentezza di un upload di cartelle e file via FTP.
Tuttavia è giusto evidenziare come l’utilizzo di procedure manuali come quelle descritte
nelle pagine precedenti offra sempre un maggiore controllo sulle diverse fasi
dell’operazione ed è importante familiarizzare con questo tipo di procedure, proprio per
ovviare agli eventuali insuccessi, dovuti per esempio a incompatibilità o altri
inconvenienti legati al singolo caso, che potrebbero sorgere con l’utilizzo di plugin come
quelli finora descritti.
A tale proposito, proviamo a questo punto a riepilogare sinteticamente le fasi di backup
e ripristino manuale, prima di concludere l’argomento e il paragrafo.
Cominciamo con le fasi del backup:
1. esportazione del database
va eseguita da phpMyAdmin selezionando il database e usando il comando
Esporta in modalità personalizzata, assicurandosi di impostare l’opzione DROP
TABLE; salvare sempre sia il formato compresso, sia quello non compresso.
2. salvataggio di cartelle e file
se non volete salvare tutto il contenuto dell’hosting è possibile creare una copia
del solo file wp-config.php e della cartella wp-content; se il pannello di hosting
lo permette, create un archivio compresso e scaricate quello, ricordandovi poi di
cancellarlo dall’hosting.
Fasi di un normale ripristino:
1. importare il database esportato
da phpMyAdmin si seleziona il database da ripristinare e si usa il comando
Importa selezionando il file precedentemente esportato; le tabelle di
quest’ultimo andranno a sostituire quelle del database esistente.
2. rimuovere cartelle e file esistenti
eliminare o spostare le cartelle, e i file, che saranno sostituiti da quelle salvate in
precedenza, oppure spostarle in una cartella temporanea sullo spazio di hosting.
3. caricare cartelle e file del backup
caricare sull’hosting le cartelle e i file del backup eseguito i precedenza; se si
trattasse di un backup parziale (per es. solo la cartella wp-content e il file wp-
config.php), assicurarsi di rimuovere o spostare cartelle e file corrispondenti
dall’hosting prima di procedere con l’upload.
Fasi di un ripristino per migrazione/trasloco:
1. modificare il riferimento al dominio nel database
aprire il database non compresso (possibilmente usando un editor di codice) ed
effettuare una ricerca e sostituzione, seguita dal comando Sostituisci tutto, per
rimpiazzare tutte le occorrenze del dominio originale con il nuovo dominio,
usando la forma completa di http://.
2. importare il backup del database nel nuovo database
stessa procedura del punto 1 del ripristino, con la differenza che in questo caso
utilizzate come destinazione un nuovo database.
3. modificare i riferimenti al database nel file wp-config.php
sostituire i dati relativi al database (nome db, utente, password e server/host) nel
file wp-config.php del backup, indicando quelli del nuovo database.
4. rimuovere eventuali cartelle e file esistenti
non necessario se la destinazione è un hosting vuoto, altrimenti come al punto 2
del ripristino.
5. caricare cartelle e file del backup
come al punto 3 del ripristino.
I passaggi sopra elencati saranno perfettamente comprensibili se avete seguito con
attenzione e soprattutto messo in pratica quanto spiegato in questo capitolo e nel primo.
Esercitandosi sarà facile familiarizzare con la procedura fino a eseguirla senza alcun
timore, tuttavia è sempre importante procedere con la massima attenzione, verificando di
non aver saltato alcun passaggio, soprattutto nel caso delle operazioni di
trasloco/migrazione.
7.4 Sicurezza
Sugli aspetti legati alla sicurezza dei siti Web in generale, e di quelli basati su WordPress
in particolare, si potrebbe scrivere un intero libro, ma proveremo in questo paragrafo a
illustrare i più importanti e scoprirete come tenerne conto per proteggere il vostro sito per
mezzo di un ottimo plugin che, da solo, svolge il lavoro altrimenti affidato a tutta una serie
di plugin minori.
Prima di entrare nel vivo dell’argomento, potrebbe essere utile fare un elenco sintetico
dei fattori di sicurezza più noti e importanti, seguendo un ordine non necessariamente
prioritario poiché si tratta di fattori tutti ugualmente fondamentali:
• password sicure e accesso limitato
l’uso delle password in generale, e la sua gestione in WordPress in particolare, è
fondamentale, difatti nelle versioni più recenti del CMS la solidità (o forza) di una
password viene valutata in maniera ben più severa che in passato; non bisogna quindi
trascurare di affidarsi a password sicure per ogni accesso, da quello dell’hosting e del
database a quello del backend di WordPress; inoltre, è importante limitare i privilegi
d’accesso degli utenti che non devono necessariamente occuparsi della gestione
tecnica del sito, ma solo dei contenuti. Affronteremo questo aspetto più avanti.
• prefisso del database
assolutamente da evitare la forma standard wp_ come prefisso per le tabelle di un
database di WordPress, poiché essendo standardizzato è il primo obiettivo degli
attacchi informatici.
• backup periodici
non si sottolineerà mai abbastanza la necessità di procedere con backup regolari del
database e delle cartelle e file di WordPress: un backup regolare è l’unica, vera
soluzione in grado di permettervi di ripristinare il vostro sito da qualunque incidente
o attacco.
• utilizzo di temi e plugin da fonti affidabili
attenzione a installare temi o plugin scaricati da siti non ufficiali, dal momento che
potrebbero contenere codice malevolo nascosto.
• controlli di sicurezza
lavorare sul proprio sito e hosting da un computer su cui è installato un antivirus
affidabile e aggiornato è la regola principale, seguita dai controlli periodici del sito
con servizi Web dedicati come quello offerto da Sucuri (wpaz.it/101).
• aggiornamenti regolari
a questo aspetto dedicheremo un paragrafo più avanti, ma è importante anticipare che
il regolare aggiornamento di WordPress, dei temi e dei plugin è alla base di una
solida strategia di sicurezza, oltre che di una corretta manutenzione del sito.
Uno dei plugin in questo momento più completi e potenti per quanto riguarda la sicurezza
dei siti WordPress è iThemes Security (wpaz.it/102), in precedenza noto col nome di
Better Security. Passeremo ora in rassegna alcune delle impostazioni principali del plugin
per esporre le varie problematiche di sicurezza e le relative soluzioni. Non sarà possibile,
per motivi di spazio, descrivere ogni singola opzione in questo paragrafo, tuttavia sul sito
wpaz.it ci saranno tutti gli approfondimenti necessari per un aiuto ulteriore sull’utilizzo di
un plugin complesso e articolato, ma tutto sommato fondamentale, come iThemes
Security.

nota
Dal momento che iThemes Security interviene in modo anche radicale sulla struttura
e sulle impostazioni di WordPress, è sempre consigliabile creare un backup completo
del sito prima di installare e soprattutto di attivare e configurare il plugin.
Appena attivato il plugin visualizza un banner nella parte alta del backend dove invita a
procedere subito con la messa in sicurezza del sito, cliccando sul pulsante Secure Your
Site Now. Da qui si accede all’area principale delle impostazioni, detta Dashboard,
accessibile anche con la prima delle voci disponibili nella nuova area Security aggiunta
dal plugin al backend di WordPress, e al primo accesso ci si trova di fronte a una finestra
in sovraimpressione che contiene quattro pulsanti (Figura 7.11).
Il primo pulsante, Make a backup, consente di creare un backup del database a scopo
precauzionale, ma è sempre consigliabile effettuare questo backup ancora prima di
installare il plugin, per maggiore sicurezza.
Il secondo pulsante, Allow file updates, autorizza il plugin a modificare alcuni file
importanti di WordPress, come .htaccess o wp-config.php, allo scopo di inserire al loro
interno del codice legato alla sicurezza e relativo ad alcune delle impostazioni che
vedremo fra poco.
Il terzo pulsante, One-Click Secure, permette di impostare immediatamente una serie
di regole di sicurezza fondamentali e predefinite, che normalmente non vanno in conflitto
con temi e plugin.
Figura 7.11 – La finestra che compare in sovrimpressione dopo l’attivazione di iThemes
Security (wpaz.it/102); si noti il primo pulsante che invita a creare un backup preliminare
del database, operazione che in ogni caso è preferibile effettuare autonomamente prima
ancora di installare il plugin.
Il quarto pulsante consente al plugin di raccogliere dati statistici ai fini del suo
miglioramento, in forma anonima, quindi senza alcun rischio per la vostra privacy, ma sta
a ognuno decidere individualmente se cliccare o no per attivare questa funzionalità.
Una volta attivate le quattro impostazioni preliminari, potete chiudere il riquadro e
visualizzare la Dashboard (traducibile come “cruscotto”), vale a dire l’area principale di
configurazione del plugin: in alto noterete subito che sono presenti altre cinque etichette
per accedere ad altrettante schermate, che esamineremo più avanti.

nota
La protezione messa in atto da iThemes Security è veramente completa e robusta,
tanto che può addirittura “tagliarvi fuori” dal sito, se per esempio sbagliaste più volte
la password di accesso oppure attuaste o qualche altra azione che possa essere
interpretata come una minaccia alla sicurezza. Il plugin ha, infatti, una funzione che
permette di bloccare determinati utenti per un tempo prestabilito o “bannarli”
definitivamente impedendogli qualunque accesso futuro, azione che viene compiuta
in base all’indirizzo di rete (IP) dell’utente, che nel secondo caso sarà inserito in una
“lista nera” (blacklist). È importante ricordare, tuttavia, che l’indirizzo IP è spesso
dinamico, cioè cambia quando ci si ricollega a Internet, di conseguenza si tratta di
solito di misure temporanee.
La Dashboard di iThemes Security contiene, oltre a un riquadro che invita tramite pulsante
a proteggere il proprio indirizzo IP dalla blacklist, un secondo riquadro in cui si viene
invitati ad acquistare due o più licenze della versione commerciale del plugin. L’area
principale, invece, è sotto a questi due pannelli ed è indicata come Security Status
(Figura 7.12) e suddivisa in cinque schede di cui la prima (All) raccoglie tutte le
informazioni presenti nelle altre quattro.

Figura 7.12 – L’area Security Status nella Dashboard di iThemes Security; si notino le
cinque etichette per accedere alle diverse visualizzazioni raccolte nella prima, All, che è
immediatamente visibile.
In quest’area della Dashboard sono visualizzati tutti gli elementi riguardanti la sicurezza
del sito, che potremmo definire come “punti deboli” o “falle”, affiancati da un pulsante per
attivare la protezione corrispondente, Fix it, oppure per configurarla se fosse già attivata,
Edit. Questi aspetti legati alla sicurezza sono poi raggruppati per tre livelli di importanza,
High, Medium e Low, cioè alto, medio e basso, consultabili singolarmente nelle tre
schede successive, mentre nella quarta scheda, Completed, sono raggruppati tutti gli
elementi “risolti”, per i quali sono state attivate le misure necessarie. Si tratta di quelli
attivati immediatamente dal pulsante One-Click Secure della finestra iniziale. Gli
elementi elencati potrebbero cambiare con successivi aggiornamenti del plugin, tuttavia
proveremo a esaminare alcuni di quelli più importanti facendo riferimento alla loro frase
descrittiva (che purtroppo al momento di scrivere è in inglese o spagnolo, non essendoci
ancora la lingua italiana nel plugin).
Nell’area High Priority trovate semplicemente un avviso riguardante l’assenza di un
backup programmato del database, “Your site is not performing…”, quindi il relativo
pulsante vi permette di attivare questa funzione accedendo all’area Database Backups
della schermata generale Settings e attivando l’opzione Enable Scheduled Database
Backups che chiederà subito con che intervallo, in giorni, effettuare il backup prima di
confermare il tutto cliccando su Save All Changes. Se non avete ancora impostato alcun
backup programmato del database o globale, potrebbe essere l’occasione giusta per
attivare questa importante precauzione.

nota
Diverse funzioni di iThemes Security impongono restrizioni tali da entrare
potenzialmente in conflitto con altri plugin o addirittura con dei temi. Ricordiamo,
quindi, di tener presente quest’aspetto se decideste di attivare molte delle possibilità
attive e di prendere in considerazione la loro temporanea disattivazione qualora
doveste notare dei problemi nell’uso di qualche tema o plugin, o addirittura del
pannello di gestione di WordPress.
Premesso che avrete già attivato tutte le protezioni di base proprio grazie all’uso del
pulsante One-Click Secure nella finestra iniziale, restano diverse misure ancora attuabili
per alzare altre barriere difensive contro gli attacchi che coinvolgono quotidianamente il
vostro sito, come scoprirete presto: avendo, infatti, già attivato, con il suddetto pulsante,
anche il monitoraggio, il blocco (lockout), e la segnalazione via email degli attacchi
cosiddetti “a forza bruta” (brute force attacks), vi capiterà quasi sicuramente di ricevere
periodicamente dei messaggi email di avviso perché questa difesa è entrata in azione.
In teoria potreste attivare tutte le opzioni disponibili all’interno di iThemes Security, ma
come avete visto alcune potrebbero causare dei conflitti con altri plugin oppure con il
tema attivo o addirittura limitare il vostro stesso intervento come amministratori. Fate
quindi attenzione al tipo di protezione attivata da ogni singola opzione offerta dal plugin.
Fra le opzioni che non presentano particolari controindicazioni potreste attivare, con la
prima opzione dell’area Medium (You are not blocking any user…) il ban degli indirizzi
IP già “schedati” nella blacklist di HackRepair.com e utilizzare il campo Ban Hosts della
sezione Banned Users per inserire voi stessi quelli che vi vengono segnalati ripetutamente
tramite email.
Ugualmente, potreste attivare la protezione dal cosiddetto “errore 404”, utilizzato da
molti pirati informatici per scoprire le vulnerabilità del sito, usando la prima opzione
dell’area Medium Priority (Your website is not protected against bots…), che porta nella
sezione 404 Detections dove potete semplicemente selezionare l’opzione Enable 404
detection e confermare cliccando su Save All Changes, configurando opzionalmente ogni
singolo aspetto di questa protezione, ma non è strettamente necessario.
Altre opzioni di sicurezza attivabili riguardano lo spam nei commenti, che affronteremo
più avanti nel capitolo, e l’utilizzo di questi ultimi come veicolo per inserire codice
malevolo, oppure la protezione dei file o delle cartelle di WordPress e così via, ma come
dicevamo per motivi di spazio le opzioni di iThemes Security saranno tutte approfondite
nel sito wpaz.it, per chi, non conoscendo sufficientemente l’inglese, volesse capirne bene
il funzionamento prima di decidere se attivarle.
7.5 Accesso a contenuti e backend
L’accesso al frontend e al backend del sito può essere gestito e protetto in vari modi, e in
questo paragrafo proveremo a esaminarli tutti suggerendo per ognuno almeno una
soluzione efficace.
Cominciamo dal momento in cui inizia lo sviluppo del sito, quando cioè dovete ancora
inserire i contenuti e costruire la struttura, in pratica appena conclusa l’installazione di
WordPress: il tempo occorrente perché il vostro sito sia “presentabile” al pubblico e abbia
nello stesso tempo dei contenuti indicizzabili dai motori, può variare moltissimo, di
conseguenza è importante avere a disposizione un sistema per scoraggiare questi ultimi
dal curiosare e qualcosa da offrire ai visitatori nell’attesa che il sito sia pronto.
Per evitare che il sito sia indicizzato quando non è ancora pronto, potete provare ad
attivare l’opzione Scoraggia i motori di ricerca ad effettuare l’indicizzazione di questo
sito presente nella schermata raggiungibile con la voce Lettura della sezione
Impostazioni di WordPress. Sotto quest’opzione è scritto chiaramente “È compito dei
motori di ricerca onorare o meno questa richiesta”, quindi non è garantito in modo
assoluto che i motori passino oltre senza indicizzare, ne consegue che la soluzione
migliore, per qualunque sito, è avere almeno i contenuti principali pronti nel nel più breve
tempo possibile.
Ciò vale anche per la cosiddetta “pagina di cortesia”, vale a dire quella pagina in cui
annunciate al pubblico che il sito è in costruzione, o in manutenzione, e rendete
inaccessibili le altre pagine nel caso siano già in fase di allestimento o modifica: se un
motore di ricerca trovasse questa pagina, si limiterà a indicizzare soltanto il suo contenuto
e nei risultati potrebbe capitare di ritrovare il vostro sito con il testo della pagina stessa,
anche dopo che il sito è stato già pubblicato (non potete decidere voi i tempi di
reindicizzazione da parte dei motori, purtroppo).
A proposito delle pagine di cortesia, uno dei plugin gratuiti più flessibili e completi per
il loro allestimento è sicuramente Ultimate Coming Soon (wpaz.it/103), che aggiunge una
voce omonima alla sezione Impostazioni di WordPress con cui accedere a un’area di
impostazioni dove potrete configurare diversi aspetti della vostra pagina (Figura 7.13):
nella sezione superiore (Impostazioni) potrete, infatti, abilitare la pagina e inserire
un’immagine, un titolo e un testo descrittivo, includendo un’eventuale campo di
registrazione per FeedBurner, se utilizzate questo servizio, e usando anche del codice
HTML personalizzato se lo desideraste; nella sezione inferiore (Stile) della schermata,
invece, potrete configurare lo sfondo della pagina di cortesia, usando un colore o
un’immagine, con la possibilità di “stirare” la figura, e anche definire colore e font per
titolo e descrizione con la possibilità di usare dei fogli stile CSS personalizzati. Infine,
usando l’etichetta Live Preview in alto, potrete visualizzare un’anteprima dei risultati
prima di abilitare la pagina, purché abbiate confermato le impostazioni delle due
schermate con i rispettivi pulsanti Save Changes.
Figura 7.13 – La schermata di configurazione del plugin Ultimate Coming Soon
(wpaz.it/103); si noti la casella da spuntare per attivare la pagina di cortesia e, in alto a
destra, l’etichetta da cliccare per ottenerne l’anteprima.
Esistono in ogni caso innumerevoli plugin di questo tipo, con caratteristiche diverse, ed è
possibile individuarli usando il campo di ricerca della pagina di installazione dei plugin di
WordPress usando parole chiave come “under construction”, “maintenance mode” o
“coming soon”.
Una volta che il sito sarà attivo, potrebbe invece sorgere il problema di dare l’accesso
ad altri utenti per la creazione e/o modifica di eventuali contenuti. Nella creazione di
nuovi utenti, che avviene attraverso la voce Aggiungi nuovo della sezione Utenti di
WordPress, oltre a inserire il nome per l’utente e il suo indirizzo email, configurando una
password che andrà ripetuta per conferma, è necessario assegnare al nuovo utente un
“ruolo”: in ordine inverso di privilegi potrete scegliere fra Amministratore, Editore,
Autore, Collaboratore e Sottoscrittore. Una tabella molto chiara e completa con l’elenco
comparato dei privilegi per i diversi ruoli utente è disponibile, in inglese, sul sito ufficiale
di WordPress all’interno dell’area informativa detta Codex (wpaz.it/104): osservandolo a
partire dal basso è abbastanza facile capire come i diversi privilegi d’accesso al backend
aumentino da un ruolo all’altro.
La definizione di un utente con capacità limitate può essere utile, per esempio, nel caso
di un sito realizzato per un cliente che dovrà aggiornare nel tempo determinate pagine
oppure aggiungere dei post sotto forma di notizie e offerte: in questo caso un efficace
utilizzo dei ruoli utente consentirà di impedire che il cliente possa involontariamente
provocare danni intervenendo sulle impostazioni di WordPress, del tema o di qualche
plugin; per quanto anche in questo caso è assolutamente consigliato creare un backup del
sito prima di concedere qualsiasi accesso ad altri.
La soluzione più rapida e semplice è di creare, dalla schermata Aggiungi nuovo utente,
un nuovo utente al quale assegnare il ruolo di Autore, dopodiché creerete un nuovo
articolo, assegnando come autore il nuovo utente: per quest’ultima operazione avrete
bisogno di visualizzare, se non fosse già presente, il pannello Autore nella schermata di
creazione e modifica dei contenuti, usando il pulsante Impostazioni schermata in alto a
destra, il pannello visualizzato dalla voce Modifica Rapida che, come abbiamo già visto
nel secondo capitolo, è disponibile nel menu di scelta rapida visualizzato sotto ogni titolo
nella schermata di elenco degli articoli.
Il nuovo utente con ruolo Autore, accedendo al backend con le sue credenziali, vedrà
soltanto l’articolo che gli avete assegnato e potrà modificarlo o cestinarlo, così come potrà
creare e pubblicare nuovi articoli, ma non gli sarà possibile fare nient’altro. In realtà il
nuovo utente avrà anche accesso alla libreria Media, dovendo essere in grado di
aggiungere immagini al proprio contenuto, quindi ricordate sempre che il backup è una
precauzione fondamentale prima di consentire qualsiasi accesso al sito a nuovi utenti.
Un ruolo con maggiori privilegi è invece quello di Editore, che, pur non potendo
accedere alle impostazioni di WordPress, sarà in grado di intervenire su tutti i contenuti
pubblicati (pagine e articoli), anche non suoi, oltre a crearne di nuovi e pubblicarli
autonomamente. La pubblicazione di nuovi contenuti è invece impossibile a chi ha un
ruolo di Collaboratore: quanto da lui creato potrà soltanto essere “inviato per revisione” e
dovrà essere necessariamente pubblicato da un utente con ruolo di Editore o
Amministratore.

nota
Un buon sistema per esercitarsi e comprendere appieno i privilegi assegnati ai diversi
tipi di utente in WordPress è, naturalmente, quello di creare una serie di utenti
assegnandogli come nome proprio quello del ruolo, accedendo poi con ognuno di essi
per verificare le relative possibilità d’azione nel backend.
Potete, in ogni caso, ricorrere come sempre a dei plugin specializzati per modificare i
privilegi associati ai diversi ruoli utente disponibili o addirittura aggiungere dei nuovi
ruoli personalizzati.
Uno dei plugin più efficaci in quest’ambito è User Role Editor (wpaz.it/105), che
aggiunge una voce omonima sia alla sezione Impostazioni che alla sezione Utenti di
WordPress: la prima permette di configurare alcune opzioni generali del plugin, non
indispensabili, la seconda di accedere a una schermata (Figura 7.14) dove, selezionando
ognuno dei ruoli presenti in WordPress, potrete attivare o disattivare determinati privilegi
Figura 7.14 – La schermata di User Role Editor richiamata dall’omonima voce aggiunta
dal plugin alla sezione Utenti di WordPress; si noti l’elenco dei privilegi assegnati o non
assegnati al ruolo di Editore, selezionato in questo caso dal menu in alto, e, a destra, i
pulsanti che permettono di aggiornare le impostazioni, creare nuovi ruoli o privilegi o
resettare questi ultimi per il ruolo selezionato.
Anche se è possibile resettare, ripristinando quindi le sue impostazioni originali, qualsiasi
ruolo predefinito in caso di errori o problemi, è consigliabile creare subito un nuovo ruolo
usando il pulsante Add Role. Questo visualizza una finestra in cui, oltre ad assegnare il
nome per esteso e quello identificativo (ID) al nuovo ruolo che state creando, potete
attribuirgli per comodità i privilegi di un ruolo esistente, selezionandolo dal menu Make
copy of. In questo modo potrete sperimentare liberamente l’aggiunta o l’esclusione dei
privilegi per il nuovo ruolo e verificarne il risultato accedendo con un nuovo utente cui lo
avrete assegnato.

nota
Nell’assegnare o revocare un privilegio, ricordate sempre che edit_pages ed
edit_published_pages consentono all’utente di modificare solo le pagine di cui
risulta autore. Allo stesso modo, delete_posts e delete_published_posts
permettono di cancellare solo gli articoli creati dallo stesso utente. I privilegi che
coinvolgono contenuti (articoli e pagine) creati o assegnati ad altri sono identificati
dalla parola “others” (es. delete_others_posts oppure edit_others_pages). Infine,
non dimenticate che, per concedere la possibilità di pubblicare autonomamente i
contenuti, è necessario il privilegio “publish” (publish_pages e publish_posts).
User Role Editor permette, inoltre, di modificare i privilegi di un utente esistente
indipendentemente dal ruolo che gli era stato assegnato: per farlo basterà cliccare sul
nuovo link Capabilities che compare nei menu di scelta rapida, sotto ogni utente nella
schermata Utenti.
Un altro plugin che offre le stesse funzionalità è Capability Manager Enhanced (wpaz.
it/106), che per quanto sia basato su un’interfaccia tradotta in italiano, presenta i privilegi
nella loro forma originale e non permette la modifica ai singoli utenti già creati.
Se, invece, aveste semplicemente bisogno di un ruolo utente già pronto, che impedisca
al suo utilizzatore di fare troppi danni pur concedendogli privilegi sui contenuti e
sull’aspetto del sito, potreste provare un plugin come Webmaster User Role (wpaz.it/107),
che aggiunge un nuovo ruolo chiamato Admin dove però sono esclusi quei privilegi che
permettono l’accesso alle sezioni Strumenti, Impostazioni e Plugin di WordPress,
lasciando l’accesso alla sezione Aspetto e tutti i privilegi di gestione dei contenuti,
compresa la cancellazione di pagine e articoli.
Un ultimo aspetto da prendere in considerazione prima di chiudere questo paragrafo
sull’accesso ai contenuti e la protezione degli stessi, è quello riguardante la lotta contro il
plagio, cioè l’utilizzo non autorizzato dei vostri contenuti su siti altrui.
Per quanto riguarda i contenuti di testo, al di là del cercare manualmente frasi scelte
dalle vostre pagine e articoli inserendole fra doppi apici nel campo di Google, potreste
servirvi di servizi come CopyScape (wpaz.it/108) o PlagSpotter (wpaz.it/109), dove è
possibile inserire una pagina del sito e ottenere eventuali segnalazioni di contenuti
duplicati presenti altrove (Figura 7.15). Sebbene i due servizi siano simili, CopyScape è
più popolare, essendo più efficiente nelle ricerche, quindi è preferibile usarlo per primo.

Figura 7.15 – La home page del servizio PlagSpotter, che come CopyScape richiede
l’inserimento dell’URL di una pagina del vostro sito della quale volete cercare eventuali
contenuti duplicati su altri siti.
In alternativa, potete provare a installare il plugin Plagiarism (wpaz.it/110), che svolte due
funzioni: da una parte controlla, come i servizi appena citati, la presenza di vostri
contenuti duplicati su altri siti, dall’altra verifica se quanto state per pubblicare non sia già
presente sul Web: utile nei casi in cui un contenuto non è vostro, ma vi è stato inviato, per
esempio, da un redattore o da un cliente. Il plugin aggiunge un nuovo pannello
(Plagiarism) all’area di editing dei contenuti, dove potete selezionare un motore di ricerca
e verificare la presenza di copie del contenuto cliccando sul pulsante Check for Duplicate
Content: otterrete così un elenco degli eventuali duplicati e il loro conteggio, in rosso,
mentre un calcolo in verde segnalerà le porzioni di testo che non sono state trovate altrove
(Figura 7.16).

Figura 7.16 – Il risultato di una verifica sui contenuti duplicati con Plagiarism
(wpaz.it/110); si noti il pannello omonimo aggiunto dal plugin sotto l’area di editing del
contenuto e il risultato di una ricerca effettuata usando Google e per la quale sono stati
riscontrati 8 contenuti duplicati.
Potreste, in teoria, scoraggiare il copia e incolla dei vostri contenuti con un plugin che
disabiliti l’uso del click destro del mouse sulle pagine del sito, come WP Content Copy
Protection (wpaz.it/111), che oltre a disabilitare il click col tasto destro del mouse
impedisce anche altre azioni volte ad appropriarsi dei contenuti presenti sul sito, come il
trascinamento della immagini dal browser al desktop, l’uso delle combinazioni di tasti e
così via. Per quanto riguarda le immagini, inoltre, potrebbe essere utile un plugin che
permetta di aggiungere la cosiddetta “filigrana” (“watermark” in inglese) su ogni
immagine pubblicata, come Image Watermark (wpaz.it/112) o Smart Watermark
(wpaz.it/113). Entrambi, rispetto ad altri plugin dello stesso tipo, permettono di
aggiungere la filigrana anche alle immagini già presenti, oltre che a quelle caricate dopo
l’installazione e l’attivazione del plugin.

Figura 7.17 – Una parte delle impostazioni del plugin Image Watermark (wpaz.it/112); si
notino in alto i due messaggi d’avviso che evidenziano rispettivamente la necessità di
caricare l’immagine da usare per la filigrana e selezionare i formati delle immagini cui
applicarla.
L’utilizzo di questi plugin è abbastanza intuitivo, dato che la loro impostazione
comprende, ovviamente, l’inserimento del testo o dell’elemento grafico (per es. un logo)
da sovrapporre alle immagini, l’indicazione del suo posizionamento e la scelta dei formati
di immagine su cui andrà applicato; come sappiamo WordPress genera, al caricamento di
un’immagine, una serie di formati diversi fra cui la miniatura. Image Watermark offre,
inoltre, anche un’opzione per aggiungere la protezione dal click col tasto destro e il
trascinamento delle immagini.
Fin qui abbiamo esaminato tutte le problematiche inerenti la gestione e la protezione
dell’accesso ai contenuti e al backend, che saranno come sempre ampliate e approfondite
sul sito wpaz.it, quindi possiamo passare ai restanti argomenti legati alla sicurezza e
manutenzione, cui saranno dedicati rispettivamente gli ultimi tre paragrafi di questo
capitolo: lo spam, gli aggiornamenti e l’ottimizzazione del sito.
7.6 Protezione dallo spam
Lo spam viene spesso sottovalutato da chi ha un’attività online, associata a un sito oppure
a un blog, almeno finché non assume proporzioni tali da far sentire decisamente la sua
presenza.
Il rischio associato allo spam, tuttavia, non è soltanto quello di un sovraccarico di
contenuti inutili il cui smaltimento finisce con rubare tempo prezioso e provocare stress,
perché i messaggi e i commenti veicolati in questo modo possono anche contenere codice
malevolo oppure link in grado di provocare una penalizzazione di Google nei confronti del
nostro sito.

nota
In questo paragrafo ci occupiamo non solo dello spam nei commenti di WordPress,
che sono più che altro legati ai blog e a tutte quelle forme di comunicazione Web
dove è sollecitata l’interazione con gli utenti, ma anche di quello veicolato attraverso
i moduli (form) dei contatti, che sono invece molto più comuni in ogni genere di sito.
Alla luce di queste conseguenze negative, quindi, proveremo a individuare una
serie di strategie e soluzioni in grado di ridurre al minimo la minaccia di questa
“spazzatura digitale” contrastando l’azione degli spammer per mezzo di plugin
dedicati.

Figura 7.18 – Un esempio di commenti di spam filtrati da WordPress; si notino gli


indirizzi email del mittente che presentano solo piccole variazioni e, in particolare, il suo
indirizzo IP che tradisce la provenienza dei messaggi da un’unica fonte.
Partiamo dai commenti, dove il primo passo consiste nella corretta configurazione della
schermata Impostazioni discussione, accessibile dalla voce Discussione della sezione
Impostazioni di WordPress. È in questa schermata che si decide, per esempio, se i
commenti lasciati dai visitatorio dagli “spam bot”, ovvero i software di spam automatico,
potranno comparire immediatamente sul sito o richiederanno una “moderazione”, Il
commento deve essere approvato manualmente: in questo secondo caso riceverete una
notifica via email ogni volta che un commento sarà inviato e dovrete accedere alla sezione
Commenti nel backend, per decidere se approvarne la pubblicazione, contrassegnarli
come spam o cestinarli. Se non utilizzate questa precauzione rischiate di ritrovarvi una
marea di commenti di spam già pubblicati, che potrebbero contenere link a siti considerati
non affidabili da Google e causare quindi una penalizzazione nei vostri confronti dal
momento che li state promuovendo sul vostro sito.

Figura 7.19 – Alcune delle impostazioni per i commenti nella schermata Impostazioni
discussione di WordPress; si noti l’attivazione della condizione Il commento deve essere
approvato manualmente.
Altre impostazioni, come la necessità per l’utente di essersi registrato prima di poter
inserire un commento, vanno invece valutate bene, poiché potrebbero trasformarsi in un
deterrente per quei visitatori che in realtà vogliono semplicemente contribuire
commentando realmente un contenuto e che, trovandosi di fronte a una richiesta del
genere, potrebbero desistere dall’interagire.
Oltre alle impostazioni di base relative ai commenti su WordPress, che vanno quindi
gestite secondo i propri criteri e a seconda della situazione, ci sono altre misure che
possono aiutare a prevenire un utilizzo improprio di questo importante strumento di
interazione col pubblico: la prima è basata sui plugin nati per combattere lo spam, la
seconda sull’utilizzo di una barriera che riesca quasi sempre a scoraggiare i cosiddetti
spam bot. Akismet (wpaz.it/114) è considerato il plugin più importante nella lotta allo
spam ed è infatti quasi sempre incluso nelle installazioni di WordPress. Il suo utilizzo
richiede un’attivazione tramite chiave API e per ottenere quest’ultima è necessario
registrarsi sul sito ufficiale e scegliere una delle licenze disponibili, che nella versione
base per siti e blog senza fini commerciali, è gratuita e può essere utilizzata anche su più
siti. Akismet è incredibilmente efficace nel filtrare i commenti di spam, essendo basato su
un database continuamente aggiornato dove vengono raccolti i dati degli spammer proprio
attraverso l’utilizzo del plugin su un numero sconfinato di siti e blog in tutto il mondo.
Un’alternativa totalmente gratuita ad Akismet può essere Antispam Bee (wpaz.it/115),
che oltre a offrire un’opzione di verifica dell’indirizzo IP dell’utente con un database
pubblico antispam, permette di filtrare direttamente i commenti provenienti da specifiche
aree geografiche o lingue (Figura 7.20).

Figura 7.20 – Le opzioni per l’origine geografica e la lingua dei commenti in Antispam
Bee (wpaz.it/115); si noti l’utilizzo dei codici ISO, reperibili dall’apposito link, per le aree
geografiche e la possibilità di definire sia una “blacklist” sia una “whitelist”.
Infine, anche iThemes Security, di cui abbiamo parlato nel paragrafo sulla sicurezza, offre
un’opzione per il controllo dello spam che va sicuramente tenuta in conto da chi ha deciso
di adottare questo plugin.
Oltre all’utilizzo di plugin specifici in grado di filtrare lo spam per mezzo di criteri e
verifiche su database specializzati, lo spam nei commenti si può ovviamente combattere
con il famoso (o dovremmo dire famigerato) “captcha”: questo sistema di controllo,
progettato per scoraggiare l’invio di dati da fonti “non umane”, tipicamente i software
detti spam bot, si è andato evolvendo nel tempo cercando di contrastare i metodi che
cercavano di controbatterlo e rappresenta ancora oggi un ottimo deterrente per gli
spammer sebbene da qualcuno venga visto come un ostacolo anche per chi desidera
commentare realmente.
In ogni caso è possibile evitare che il captcha sia visualizzato agli utenti “verificati”,
usando un plugin come Conditional CAPTCHA (wpaz.it/116), che nella sua impostazione
predefinita utilizza il captcha solo per gli utenti che non sono loggati e non hanno altri
commenti approvati. Se Akismet è presente sul sito, visualizza il captcha in tutti i casi
classificati come spam da quest’ultimo plugin, in modo da risparmiare eventuali utenti
erroneamente identificati come spammer. Conditional CAPTHA può essere usato con il
suo captcha predefinito oppure con il reCAPTCHA di Google: quest’ultimo si ottiene
accedendo all’apposito indirizzo (wpaz.it/117) con un qualsiasi account di Google (per es.
quello di Gmail) e registrando l’URL del sito per ottenere le due chiavi necessarie, Public
key e Private key, e incollarle negli appositi campi visualizzati quando si sceglie il
reCAPTCHA nella pagina di configurazione del plugin (Figura 7.21).

Figura 7.21 – La schermata di configurazione di Conditional CAPTCHA (wpaz.it/116); si


notino i due campi per inserire le chiavi del reCAPTCHA di Google visualizzate quando
si seleziona questa seconda modalità.
Conditional CAPTCHA offre, fra le varie opzioni, anche la possibilità di personalizzare il
codice della finestra visualizzata, usando HTML e CSS, e di visualizzarne l’anteprima.
Esistono innumerevoli plugin per aggiungere il captcha ai commenti di WordPress e basta
cercarli dalla schermata di installazione del backend usando la parola chiave captcha per
accorgersi della loro varietà e quantità, e sebbene molti di essi abbiano un funzionamento
pressoché simile, alcuni si distinguono per particolari caratteristiche. Non essendoci qui
spazio sufficiente per illustrarli, l’appuntamento è come sempre sul sito wpaz.it per una
serie di articoli dedicati agli specifici plugin.
Come dicevamo all’inizio del paragrafo, la minaccia dello spam non riguarda, tuttavia,
solo i commenti, ma anche i moduli (form), di conseguenza i plugin come Contact Form 7
(che abbiamo già menzionato nel quarto capitolo) si sono attrezzati per offrire a loro volta
una barriera contro gli spammer, sia con strumenti interni, sia appoggiandosi, ancora una
volta, al captcha. Per quanto riguarda Contact Form 7, nel secondo caso è necessario
installare anche il plugin Really Simple CAPTCHA (wpaz.it/118), mentre utilizzando
l’opzione Quesito invece di Captcha potrete inserire una o più domande (per es. semplici
calcoli aritmetici) configurate con le relative risposte in alternativa al captcha (Figura
7.23).

Figura 7.22 – Un esempio di configurazione del captcha in un modulo creato col plugin
Contact Form 7 (wpaz.it/054); si noti il codice a sinistra collocato prima del pulsante di
invio del modulo e corredato da un testo informativo.
Figura 7.23 – Un esempio di controllo antispam in Contact Form 7 realizzato col metodo
Quesito; si noti il codice a sinistra con il testo informativo aggiunto e, a destra, il campo
dove viene definito l’elenco di domande e risposte usando il carattere “|” per dividere le
prime dalle seconde.
Come si intuisce, le soluzioni contro lo spam sono innumerevoli e vanno valutate a
seconda del caso specifico, ma è piuttosto semplice implementarle e difendere il sito o
blog da questa piaga che probabilmente non avrai mai fine.
7.7 Aggiornamenti
Un sito WordPress non aggiornato è considerato una fonte potenziale di problemi e
pericoli per la sicurezza: gli aggiornamenti del CMS, dei temi e dei plugin sono, infatti, in
molti casi delle correzioni volte a risolvere un problema di codice o riparare una falla che
potrebbe consentire un attacco informatico.
Figura 7.24 – La segnalazione di due aggiornamenti disponibili nel backend di
WordPress; si noti a sinistra la doppia notifica, nell’area dei plugin e nella sezione
generale degli aggiornamenti e, in alto, un avviso di aggiornamento non completato (ne
parleremo fra poco).
Fortunatamente, da ormai diverso tempo tanto le notifiche quanto gli aggiornamenti per
WordPress stesso, ma anche per temi e plugin, sono gestiti per mezzo di un sistema
automatizzato e molto efficiente: le notifiche degli aggiornamenti disponibili sono
immediatamente visibili nella parte sinistra del backend (Figura 7.24) e si possono
effettuare singolarmente o in gruppo, con funzioni specifiche tanto all’interno di ogni area,
quanto nella schermata generale degli aggiornamenti (Figura 7.25).
Figura 7.25 – Un aggiornamento dei temi predefiniti di WordPress segnalato e applicabile
direttamente dall’area Aggiornamenti del backend; si noti come sono selezionati tutti e
tre i temi per effettuare l’aggiornamento contemporaneo.
In teoria tutto si riduce, quindi, a prendere atto delle diverse notifiche e cliccare sul
singolo aggiornamento o procedere con aggiornamenti multipli, e nella maggior parte dei
casi è realmente così, nel senso che non ci sono particolari difficoltà o controindicazioni
nell’utilizzare questo pratico strumento di upgrade messo a disposizione dal CMS. Non
dimenticate, in ogni caso, che, come in ogni operazione che coinvolga direttamente il
database e le cartelle e file di WordPress e dei suoi componenti, anche durante o dopo un
aggiornamento potrebbero sorgere dei problemi, quindi ricordatevi di aggiornare prima di
tutto la copia di backup del database e delle cartelle e file importanti prima di procedere.

nota
Per quanto l’aggiornamento di un plugin o di un tema non sia radicale come quello di
WordPress, il consiglio di creare un backup almeno del database prima di procedere
può essere valido anche in questi casi. La possibilità che emergano conflitti con la
nuova versione del tema o del plugin che si va ad aggiornare suggerirebbe, inoltre,
che sia ancora più indicato un backup generale o quantomeno della cartella
contenente la versione precedente. Si tratta di eventualità abbastanza rare, tuttavia,
come si suol dire, la prudenza non è mai troppa.
Se WordPress è stato aggiornato usando uno degli strumenti disponibili in alcuni pannelli
di hosting, inoltre, è possibile attivare l’aggiornamento automatico del CMS, ma è bene
tener presente quanto sottolineato nella nota precedente, ovvero la necessità di un backup
preliminare almeno del database. Come sappiamo è possibile recuperare le versioni
precedenti di WordPress e sostituirle a quella aggiornata nel caso fosse necessario, ma una
volta che il database è stato aggiornato lo si può ripristinare solo da un suo backup.
Se per WordPress e per i temi e i plugin gratuiti l’aggiornamento è automatico e si
riduce a cliccare su un pulsante o link, le cose potrebbero essere leggermente diverse
quando si ha a che fare con plugin e temi commerciali: molti degli sviluppatori e fornitori
di questi componenti mettono a disposizione metodi per aggiornare i loro prodotti con la
stessa facilità e immediatezza, ma quando ciò non è previsto si può ricorrere al plugin
Easy Theme and Plugin Upgrades (wpaz.it/119) per evitare di dover procedere
disattivando e cancellando la versione precedente del tema o del plugin da aggiornare, per
poi installare e attivare la nuova versione manualmente.

Figura 7.26 – La nuova opzione introdotta dal plugin Easy Theme and Plugin Upgrades
(wpaz.it/119) quando si installa un plugin caricandolo manualmente, per sostituire una
vecchia versione che non prevede l’aggiornamento automatico (per es. per i plugin
commerciali); la stessa opzione sarà presente anche per il caricamento manuale dei temi.
Una volta installato Easy Theme and Plugin Upgrades, infatti, quando si accederà alla
schermata di installazione di un nuovo tema o plugin e si userà il comando Caricare per
l’upload del file aggiornato (Figura 7.26), sarà possibile selezionare l’opzione Yes dal
menu della nuova voce Upgrade existing plugin? (Si vuole aggiornare un plugin
esistente?) e ottenere, in questo modo, che il vecchio plugin sia compresso e spostato nella
libreria Media, il sito sia messo temporaneamente in manutenzione e poi riattivato dopo il
caricamento della nuova versione del plugin. Lo stesso tipo di opzione viene introdotta
anche per il caricamento dei temi, quindi sarà possibile aggiornare allo stesso modo temi
esistenti che non prevedano l’aggiornamento automatico.

nota
Può capitare, durante un aggiornamento, che a causa di un temporaneo problema nel
collegamento al server dell’hosting o al database, l’operazione non venga completata,
provocando così la visualizzazione del messaggio “Un aggiornamento automatico di
WordPress non si è installato completamente - riprovare l’aggiornamento adesso”. Se
cliccando sul link del messaggio non ottenete alcun risultato e l’errore è avvenuto
durante l’installazione di un tema o di un plugin, provate eventualmente a
disinstallarlo e reinstallarlo. Per liberarvi del messaggio dovrete eliminare il file
invisibile “maintenance” presente nella directory principale (root) del sito, usando
come sempre la gestione file del pannello di hosting o un client FTP e ricordandovi di
attivare la visualizzazione dei file invisibili.
Per quanto riguarda il discorso sugli aggiornamenti non c’è da aggiungere altro, mentre
rimane ancora da dedicare un po’ di spazio all’argomento dell’ottimizzazione, che
conclude questo capitolo per lasciare spazio ai progetti pratici.
7.8 Ottimizzazione
Ottimizzare un sito, se si esclude il discorso legato alla SEO che abbiamo già affrontato,
significa fare in modo che venga caricato velocemente dai browser e che risponda in modo
altrettanto veloce durante l’utilizzo da parte del pubblico: questi risultati, escludendo le
prestazioni dell’hosting utilizzato, si possono ottenere cercando di raggiungere un
equilibrio ottimale fra l’utilizzo delle immagini, che influiscono in modo determinante sui
tempi di caricamento del sito, e l’assorbimento di risorse dovuto al funzionamento del
CMS, del tema e dei plugin.
In questo paragrafo conclusivo proveremo a definire ognuno dei fattori coinvolti in
questo equilibrio per ottenere un sito più veloce, che in quanto tale non solo sarà utilizzato
più volentieri dal pubblico, ma sarà anche premiato da Google e dagli altri motori, che
sono sempre più attenti alle prestazioni oltre che ai contenuti.
Figura 7.27 – Una valutazione delle prestazioni del sito di prova realizzato nel quarto
capitolo, ottenuta per mezzo dello strumento di test di Google chiamato PageSpeed
(wpaz.it/120); si notino le due schede con i risultati e i consigli per l’ottimizzazione
mobile e desktop.

nota
Per testare le prestazioni di un sito Google mette a disposizione il suo strumento
PageSpeed (wpaz.it/120): cliccando sul link Analyze your site online sarà possibile
inserire l’URL del sito e ottenere una valutazione delle sue prestazioni tanto su
dispositivo mobile quanto su desktop (Figura 7.27), corredata da una serie di
suggerimenti fra cui l’ottimizzazione delle immagini. PageSpeed può tornare
comunque utile per valutare l’ottimizzazione di un sito dopo un intervento volto a
migliorarne le prestazioni, misurando queste ultime prima e dopo l’operazione, ma
potete anche usarlo sulla demo di un tema WordPress commerciale, per capire quanto
è ottimizzato il suo codice prima di acquistarlo.
Cominciamo quindi dalle immagini, che come avevamo sottolineato nel secondo capitolo
devono essere possibilmente ottimizzate in modo da ottenere la migliore qualità con il
minimo peso, quindi definendo prima di tutto le dimensioni massime utili ai fini del loro
utilizzo e poi applicando un fattore di compressione grafica tale da ridurne il più possibile
la dimensione in Kilobyte, senza che si notino conseguenze sulla loro qualità visiva.
Come sempre ci ritroviamo di fronte a due possibili scenari: un sito che deve ancora
essere sviluppato oppure un sito sul quale sono stati già caricati i contenuti, immagini
comprese. Nel primo caso si potrebbe cominciare con l’ottimizzare le immagini, prima di
caricarle, usando un software in grado di elaborare più file contemporaneamente, come
Caesium per Windows (wpaz.it/121) o ImageOptim per Mac OS X (wpaz.it/122).
Si tratta di due fra i numerosi programmi gratuiti che permettono di applicare un fattore
di compressione a vostra scelta su intere cartelle di immagini, semplicemente
trascinandole sulla finestra del programma, riducendone così il peso in Kilobyte e
permettendovi non solo di caricarle più velocemente sul sito, ma soprattutto di renderne
più veloce la visualizzazione quando il pubblico navigherà fra le pagine che le
contengono.

nota
In realtà anche le immagini già caricate su un sito potrebbero essere ottimizzate con
un software, scaricando la sotto-cartella “uploads” contenuta in “wp-content” e poi,
dopo averla fatta elaborare dal software eliminando dalle sue sotto-cartelle file che
non sono immagini, ricaricandola al posto di quella originale. In ogni caso
ricordiamo di conservare una copia di tutti i file prima della compressione, per poter
ripristinare eventuali immagini la cui qualità dovesse risultare eccessivamente
deteriorata.
Molte immagini conservano una qualità accettabile anche con fattori di compressione
inferiori al solito 80% che la maggior parte dei programmi applica come valore
predefinito, quindi potete provare, dopo aver creato un backup delle immagini, a
impostare una compressione del 50% e verificare i risultati.
Volendo invece ricorrere ai plugin, potreste affidare questo lavoro di ottimizzazione a
plugin come EWWW Image Optimizer (wpaz.it/123) che, rispetto a tantissimi altri plugin
dello stesso tipo, consente l’intervento anche sulle immagini già caricate oltre a
ottimizzare quelle che saranno caricate dopo la sua installazione e attivazione. Sebbene il
plugin sia dotato di una pagina di configurazione ricca di opzioni, in realtà basta installarlo
e attivarlo perché ottimizzi in modo automatico ogni nuova immagine caricata: la
percentuale di ottimizzazione sarà visualizzata sotto, in nuova colonna chiamata Image
Optimizer (Figura 7.28), nell’elenco delle immagini quando visualizzate la libreria
Media.
Figura 7.28 – La nuova colonna aggiunta da EWWW Image Optimizer (wpaz.it/123)
all’elenco delle immagini nella libreria Media con la percentuale di ottimizzazione
applicata dal plugin dopo il caricamento dell’immagine; si noti a sinistra la nuova voce
Bulk Optimize che consente di ottimizzare tutte le immagini caricate prima
dell’installazione del plugin.

nota
Su alcuni hosting, plugin come quelli per l’ottimizzazione automatica delle immagini
potrebbero visualizzare un errore relativo a una funzione mancante sul server,
chiamata exec (), che viene spesso disabilitata per motivi di sicurezza. L’unico modo
per risolvere il problema è aprire un ticket con il provider richiedendo l’attivazione di
tale funzione per il vostro sito.
Per l’ottimizzazione automatizzata delle immagini può rivelarsi altrettanto efficace, se non
ancora più semplice da utilizzare, il popolare plugin WP Smush.it (wpaz.it/125),
recentemente acquisito da WPMUDev e basato su un servizio gestito tramite server
esterno, che a volte potrebbe non essere raggiungibile. Il suo funzionamento è simile a
quello di EWWW Image Optimizer e offre anch’esso un’opzione di ottimizzazione
multipla per le immagini esistenti, aggiunta con la voce Bulk Smush.it nella sezione
Media di WordPress.
Va da sé che, una volta ottimizzate le immagini esistenti con un plugin come quelli
appena menzionati, potete decidere di disattivarlo, per tenerlo attivo solo durante il
caricamento di nuove immagini oppure potreste ottimizzarle manualmente prima di
caricarle e disinstallare del tutto il plugin. In ogni caso non perdereste il lavoro di
ottimizzazione che ha già svolto sulle immagini esistenti.
Un altro sistema, infine, che può rivelarsi utile per ottimizzare la velocità del sito in
relazione alle immagini, è l’aggiunta del cosiddetto sistema del “lazy loading” (traducibile
con “caricamento pigro”), ovvero la strategia che consiste nel caricare soltanto le
immagini immediatamente visibili nella parte alta della pagina (detta “over the fold”) e
rimandare il caricamento di quelle presenti nella parte inferiore, man mano che compaiono
quando l’utente fa scorrere la pagina in verticale. Per ottenere questo effetto si può usare
un qualsiasi plugin fra quelli visualizzati usando la chiave di ricerca “lazy load” nella
pagina di installazione dei plugin di WordPress.

nota
Una piccola ma importante parentesi per un principio da tener presente quando
scegliete un plugin fra quelli visualizzati nei risultati di ricerca della schermata
“Installa Plugin” di WordPress: scegliete soprattutto quelli che hanno una valutazione
(numero di stellette) maggiore, ma anche un aggiornamento più recente, desumibili
cliccando sul link “Dettagli” e una scheda informativa più professionale, nella pagina
ufficiale del plugin, raggiungibile dal link “Pagina del plugin” di WordPress.org,
presente nella schermata dei Dettagli. Il numero della versione, inoltre, è preferibile
che sia intero e non inferiore a 1, evitate quindi, quando è possibile, versioni che
iniziano con 0.
Come nei vari casi già esaminati, anche in quest’ambito esistono più plugin in grado di
svolgere lo stesso compito, ma la soluzione migliore rimane quella di tenere basso il
numero di plugin installati e attivi, che, come vedremo fra poco, incide a sua volta sulle
prestazioni del sito, e ottimizzare le immagini a monte utilizzando un software prima di
caricarle sul sito, in modo da verificare in tempo reale anche l’eventuale degrado visuale.
Quindi valutate bene la soluzione più adatta in funzione delle prestazioni globali del sito.
A proposito dei plugin e del ruolo che possono avere nelle prestazioni del sito, è bene
sapere che esiste un plugin in grado di valutare l’impatto dei “colleghi” utilizzati
permettendovi così di decidere se è il caso di evitarne l’uso: si chiama P3, acronimo di
Plugin Performace Profiler (wpaz.it/126) e, una volta installato, aggiunge una voce
omonima alla sezione Strumenti di WordPress, permettendovi di accedere a una
schermata (Figura 7.29) in cui potete cliccare sul pulsante Start Scan e ottenere un’analisi
dettagliata dell’impatto che gli altri plugin presenti nel sito hanno sulle prestazioni dello
stesso.
Figura 7.29 – La schermata iniziale di P3 Plugin Performance Profiler (wpaz.it/126) con
il pulsante Start Scan e, a destra, i valori di caricamento e impatto dei plugin installati
sulle prestazioni del sito ancora non stimati.
Una volta eseguita la scansione, potete scegliere inizialmente quella automatica, ovvero
Auto Scan, otterrete un rapporto dettagliato (Figura 7.30) sui tempi di caricamento globali
e per ogni singolo plugin, calcolati in secondi o frazioni. Le informazioni sono fornite
sotto forma di grafici corredati da valori precisi e possono permettere ai più esperti di
analizzare a fondo le risorse assorbite da ogni plugin presente sul sito e attivo, valutandone
l’eventuale disattivazione e disinstallazione qualora non fosse indispensabile, o la
sostituzione con un plugin in grado di svolgere funzioni analoghe, ma con un minore
assorbimento di risorse.
Figura 7.30 – Un esempio dei dati ottenuti dopo una scansione automatica o manuale con
P3 Plugin Performance Profiler; si notino le diverse etichette per le schede di dettaglio
presenti in alto e in basso nella schermata e le informazioni visualizzate al passaggio del
puntatore del mouse su ogni elemento.
L’ultima strategia che vale la pena menzionare in un’ottica di miglioramento delle
prestazioni globali del sito riguarda i cosiddetti plugin di “caching”, cioè quelli che creano
una versione statica delle pagine del sito facendo in modo che il pubblico carichi questa
invece di quella dinamica creata in tempo reale attraverso l’interpretazione del codice
PHP.

nota
WordPress, come qualsiasi altro CMS, è basato sul linguaggio PHP, di conseguenza
le sue pagine sono generate dinamicamente attraverso l’interpretazione che il browser
fa dei relativi comandi all’interno del codice del CMS. Questo processo viene avviato
ogni volta che un utente carica una pagina del sito, che viene così tradotta in una
pagina HTML in modo da poter essere visualizzata nel browser. I plugin di caching
fanno in modo che la versione statica delle pagine sia utilizzata al posto di quella
generata dinamicamente, riducendo il carico sul server e velocizzandone la
visualizzazione.
Esistono anche in questo caso numerosi plugin, contraddistinti da una maggiore o minore
complessità di configurazione e utilizzo. Fra i più semplici da utilizzare c’è sicuramente
Quick Cache (wpaz.it/127), che può anche essere semplicemente installato e attivato se
non si desidera intervenire sui parametri di configurazione della sua schermata (Figura
7.31) richiamando quest’ultima dalla nuova voce Quick Cache che il plugin aggiunge al
backend di WordPress. Cliccando sul pulsante Yes, enable Quick Cache! e confermando
l’impostazione col pulsante Save All Changes a fondo pagina, il plugin sarà attivato con
le impostazioni predefinite e comincerà subito a creare la cache per il sito.

Figura 7.31 – La schermata di Quick Cache (wpaz.it/127) richiamata dall’omonima voce


che il plugin aggiunge al pannello di gestione di WordPress; si noti il pulsante Yes, enable
Quick Cache!, che permette di attivare subito il caching con le impostazioni predefinite.
Altri due plugin molto popolari per il caching sono W3 Total Cache (wpaz.it/128) e WP
Super Cache (wpaz.it/129), per la cui configurazione non basterebbe un intero paragrafo,
quindi rimandiamo come sempre un eventuale approfondimento al sito wpaz.it per chi
volesse provare a utilizzarli e non riuscisse a districarsi fra le diverse impostazioni.
Il discorso sull’ottimizzazione di un sito WordPress potrebbe proseguire all’infinito, e lo
spazio a disposizione sulla carta è sempre limitato, quindi l’invito è come sempre di
visitare il sito wpaz.it per eventuali approfondimenti su questo e altri argomenti trattati.
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
situazioni. 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
comprendere 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
configurazione 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.
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
classificazioni 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
(Figura 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:
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
immobiliari, “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
professionale, 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
complesse 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 possono 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
dinamici 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’inserimento 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 della 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.
7. gallery e portfolio
quando un tema viene classificato con il termine “gallery” e/o “portfolio”,
significa 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 indicano 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 automaticamente 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 è
“responsive” 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 contratto. 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
risoluzione 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 sfocate.
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 temi
Un 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 strumenti di
impaginazione visuale o shortcode, per quei temi o applicazioni che ne fanno uso.
Familiarizzando con questi elementi strutturali, potrete imparare a configurarli e
utilizzarli 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.
Prima, però, è importante aprire una parentesi: spesso le immagini utilizzate nella
versione dimostrativa di un tema distolgono l’attenzione dalla sua struttura e dai suoi
singoli 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.

nota
Non lasciatevi incantare dalla bellezza che le immagini usate dagli sviluppatori 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 utilizzare immagini diverse all’interno dei singoli
elementi del layout.
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 possono
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ò
essere in alcuni casi verticale anziché orizzontale (come abbiamo visto al punto
10 del precedente elenco) oppure può essere predisposto per un layout di
navigazione complesso in grado di contenere molte voci distribuite su colonne e
corredate da immagini, “megamenu”.
2. slider
dall’inglese “slide” (diapositiva), è in genere l’area predisposta per visualizzare
immagini 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
contenuti 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 piena, con testo sovrapposto alle immagini, oppure ridotta per
affiancare del testo, in molti casi con immagini scontornate; può contenere
anche solo quest’ultimo oppure 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), entrambi 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
“soffietto 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 “service” 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, bypassando i limiti della larghezza del layout. Alcuni slider
utilizzano un elemento 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ù
colonne, 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 magazine, 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
informazioni 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
composte da un riquadro sormontato, o affiancato, nella versione verticale, da
etichette che fanno da pulsanti e rivelano le diverse schede contenute all’interno
dell’elemento.
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 testimonial
è in genere formato da un riquadro in cui scorrono o si susseguono in altro 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 registrazione
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
contiene 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 offerta, seguite dal
prezzo e dal pulsante d’acquisto, spesso nello stesso elemento.
Quelli elencati sono, naturalmente, solo gli elementi più comuni che si possono
riconoscere 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
presenti 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 suddivisione 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.
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 addirittura
da un vero e proprio menu di navigazione (Figura 8.6).

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.

nota
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 disponibili 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.
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 individuare,
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 utilizzare
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 troverete temi
dall’aspetto molto professionale come Attitude, Spacious, Fruitful, Tempera 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
considerazione 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 potrete 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).

nota
La funzione Dettagli & Anteprima attivabile sulle miniature dei temi visualizzati
nella schermata di ricerca Aggiungi Tema del backend è fondamentale per capire
quanto sia professionale un tema. Sarà, infatti, nella sua scheda informativa, 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 vostra 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à.

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
sviluppatore 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
disponibilità di font alternativi o di shortcode, tanto per fare qualche esempio
significativo.

nota
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 semitrasparente (overlay)
visualizzando il testo in negativo, mentre Attitude mostra il testo, 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.
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 passando da
un tema all’altro.
Per fare un esempio, lo slider viene in genere configurato in due modi diversi, cioè
inserendo per ogni slide i dati relativi all’immagine, al titolo, al testo e alla pagina da
collegare (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 iniziale, 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.

nota
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 troncamento 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.
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 elementi
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 elementi una
volta collocati nell’area predisposta e configurati.
nota
La diversità di configurazione fra i singoli temi gratuiti rende impossibile prevedere e
illustrare tutte le modalità di utilizzo con cui ci si può trovare a lavorare una volta
scelto un particolare tema, quindi dedicheremo un progetto pratico a un tema a caso,
scelto fra quelli che offrono i risultati estetici e strutturali più professionali.
Nel capitolo che segue si proverà a realizzare un sito con il tema Spacious, facendo
riferimento 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 gratuito
Il tema Spacious, già esaminato nel capitolo precedente, possiede tutte le caratteristiche
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 aggiunta 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 scegliere se
visualizzarlo da solo (Header Logo Only) o assieme al titolo del sito in formato 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.

nota
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 esistenti 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…”.
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
barre 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 Impostazioni Lettura di WordPress.
Usando il pannello Attributi Pagina selezionate il modello Business Template,
lasciando 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.

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 contenuto;
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.

nota
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.
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).

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: questo
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 evidenza:
ricordatevi di caricare quest’ultima in ognuna delle pagine scelte e di utilizzare
un’immagine del formato adatto, possibilmente usando elementi grafici con sfondo
trasparente 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 disponibili
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
frasi, 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
Business 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 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
evidenza 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 precedere 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 testo (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.
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
visualizzata quando non viene trovato alcun contenuto. Non bisogna dimenticare, inoltre,
che per ogni pagina è possibile scegliere, oltre al layout standard, anche due con barra
laterale 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
articoli, 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.
9
Creare un layout con Divi
Il tema Divi (wpaz.it/013), come abbiamo già visto, è qualcosa di più di un semplice tema
professionale per WordPress, perché si colloca a metà strada fra quei temi commerciali di
nuova generazione dotati di strumenti visuali di composizione e quella categoria che
raccoglie i framework e i theme builder di cui abbiamo parlato nel terzo capitolo.
Anche se si tratta di un tema commerciale, possiamo utilizzarlo gratuitamente nella sua
versione precedente (la 1.9.1.1) creando un account su Altervista (wpaz.it/008) e
scegliendo l’opzione blog in modo da avere la possibilità di utilizzare subito WordPress e
di accedere gratuitamente ai temi professionali di Elegant Themes, fra cui Divi. Potete,
volendo, anche scegliere l’opzione sito di Altervista, ricordandovi però di selezionare
WordPress come piattaforma nella fase di attivazione successiva: alla fine vi ritroverete
comunque un sito con il CMS già installato, ma dovete ricordarvi di cliccare sulla voce
Mostra Avanzate (Show Advanced) in fondo al pannello di gestione di WordPress per
attivare e rendere visibili tutte le altre voci di amministrazione.

nota
La parte pratica di questo capitolo è basata sulla versione 2 del tema Divi, di
conseguenza molte delle caratteristiche illustrate saranno assenti nella versione
gratuita disponibile per chi decidesse di utilizzarlo con un account di Altervista. La
praticità e flessibilità di questo tema, tuttavia, giustifica l’investimento di un account
base su Elegant Themes (wpaz.it/049) da parte di chi intendesse creare uno o più siti
di livello professionale, usufruendo anche del 20% di sconto, se si usa il link
wpaz.it/049.
Una volta creato l’account scegliendo un nome di dominio di terzo livello (es.
testdivi.altervista.org) e registrandovi inserendo i vostri dati, riceverete un messaggio
email con un link di attivazione e potrete accedere al sito e installare il tema Divi
selezionandolo tra quelli presenti nella prima scheda, Featured. Trattandosi di una
versione precedente del tema, mancheranno molte delle funzionalità descritte in questo
capitolo, ma sarà comunque possibile farsi un’idea dell’utilizzo e del funzionamento del
tema, prima di valutare la registrazione sul sito ufficiale per il download della versione più
recente e completa.

nota
Il tema Divi è in continua evoluzione e, per quanto le caratteristiche di base restino
invariate, essendo così facile familiarizzare con il suo utilizzo, gli sviluppatori
aggiungono periodicamente nuove funzionalità e nuovi strumenti che lo rendono
sempre più flessibile e potente. Sul sito wpaz.it saranno esaminati in dettaglio tutti gli
aspetti del tema e saranno pubblicate le novità sul suo sviluppo ed esempi pratici di
utilizzo professionale.
9.1 Installazione e primi passi
Una volta installato, come tutti i temi di Elegant Themes, anche Divi consiglierà di
accedere al pannello di configurazione generale del tema, ePanel, con il link nel
messaggio visualizzato sulla parte alta dell’area di lavoro di WordPress oppure dalla
nuova voce Divi Theme Options della sezione Aspetto: in questa schermata (Figura 9.1)
potrete, per esempio, caricare l’immagine del logo da usare per il sito e l’eventuale
favicon, se volete avere un’icona personalizzata associata all’indirizzo del sito nel
browser; entrambe le operazioni si possono effettuare cliccando sui rispettivi pulsanti
Upload Image. In generale potreste anche lasciare, per il momento, tutte le opzioni così
come sono preconfigurate e cliccare semplicemente sul pulsante Save in fondo alla
schermata, anche perché molte sono riferite a funzioni che potreste anche non aver
bisogno di attivare. In generale, l’opzione Fixed Navigation Bar, che risulta attivata,
infatti il pulsante è in verde e riporta la scritta “This is Enabled”, serve a tenere la barra del
menu principale ferma in alto invece che farla scorrere insieme alla pagina come accade di
solito nei siti, mentre le quattro opzioni per i profili social e il feed RSS richiedono solo
l’inserimento dei link ai vostri profili personali nei primi tre campi sotto i pulsanti.
Appena avrete salvato le impostazioni, il messaggio in alto sparirà e potrete cominciare
a lavorare alla creazione della vostra home page con Divi: avrete a questo punto bisogno
di una pagina vuota, quindi createne una, potrete anche chiamarla Home, oppure
selezionate una pagina esistente e ancora priva di contenuti.

Figura 9.1 – La schermata principale del pannello di configurazione ePanel, del tema
Divi, simile a quella di tutti i temi di Elegant Themes; si notino i diversi link per accedere
alle altre schede, a sinistra, i due campi per il link all’immagine del logo e della favicon
caricabili coi rispettivi pulsanti Upload Image e, in basso, l’opzione (attiva) per la barra
di navigazione del menu fissa.
Noterete subito la presenza di un pulsante in alto a destra nell’area di editing dei contenuti:
inizialmente il pulsante riporta la scritta Use Page Builder e cliccandovi attiverete, infatti,
lo strumento visuale di composizione delle pagine presente in Divi. In tal modo
compariranno, al posto della tradizionale area di editing dei contenuti, tre pulsanti e una
serie di riquadri, che ora andremo a esaminare, mentre il pulsante riporterà la scritta Use
Default Editor per indicare che cliccando si ritorna all’editor predefinito di WordPress
(Figura 9.2).

Figura 9.2 – Il pulsante che attiva lo strumento di composizione visuale di Divi una volta
attivato; si noti la scritta che ora indica la possibilità di tornare all’editor standard di
WordPress e, in basso, i tre pulsanti principali e una serie di pannelli che, come vedremo
fra poco, fanno parte degli elementi di composizione del tema.
Prima di fare la conoscenza con gli elementi visuali che Divi mette a disposizione per
costruire le pagine, vediamo a cosa servono i tre pulsanti nella parte alta dell’area di
composizione: Save Layout permette di memorizzare all’interno di WordPress il modello
che avrete creato per poterlo poi riutilizzare nel caso voleste applicarlo a una nuova
pagina, Load Layout fornisce un elenco di modelli già pronti ai quali si aggiungeranno
quelli che avrete salvato con il primo pulsante, Clear Layout cancella tutti gli elementi
presenti nel modello corrente, quindi è da usare con molta attenzione. Nel caso voleste
esaminare subito uno dei modelli predefiniti disponibili, vi basterà cliccare sul pulsante
centrale Load Layout e scegliere il modello desiderato (Figura 9.3), ricordando che
l’opzione Replace the existing content with loaded layout, se attiva, elimina qualsiasi
altro modello già creato nella pagina corrente, sostituendolo con quello scelto.
Disattivandola potrete invece riutilizzare gruppi di elementi memorizzati in modelli
parziali aggiungendoli a quelli già presenti nella pagina.
Figura 9.3 – Una parte dei modelli (layout) preimpostati che potete scegliere dalla finestra
che compare cliccando sul pulsante Load Layout; si noti in alto a sinistra l’opzione che,
quando selezionata, elimina ogni traccia del layout esistente per rimpiazzarlo con quello
scelto, anziché aggiungerlo.
Esaminando, invece, i due elementi che vengono inseriti automaticamente attivando il
Page Builder, noterete subito alcuni particolari, che ora andremo a esaminare per
cominciare a comprendere subito la filosofia di utilizzo di questo strumento.
Prima di tutto notiamo, continuando a fare riferimento alla Figura 9.2, che l’insieme è
composto da un elemento più grande nel quale è inserito quello con dimensioni inferiori e
che l’area sul lato sinistro di ognuno dei due elementi ha un colore diverso: l’elemento
esterno con dimensioni maggiori è una sezione (section), ovvero rappresenta un’area
orizzontale sulla pagina, all’interno della quale potete collocare una o più righe (row) di
altri elementi più piccoli che saranno disposti a loro volta su una o più colonne (column).
Man mano che procederete con gli esempi questo concetto rivelerà tutta la sua reale
semplicità, anche se ora può apparire un po’ astratto. Sotto l’elemento più piccolo, infatti,
noterete la voce Add Row (aggiungi riga) preceduta da un segno “+”, mentre al di sotto
dell’elemento esterno ci sono tre voci: Add Section, Add Fullwidth Section e Add
Specialty Section, quest’ultima presente solo dalla versione 2 di Divi, che rispettivamente
permettono di aggiungere una sezione standard a larghezza piena oppure con suddivisione
complessa delle aree, come vedremo più avanti.
Notate inoltre, come dentro l’elemento interno più piccolo sia presente la scritta Insert
Column(s) (inserisci colonna/e), che come scoprirete fra poco è il punto di partenza per
esplorare gli elementi disponibili in Divi.
Infine, notate su entrambi gli elementi la X che permette di eliminarli singolarmente,
ricordando che rimuovendo l’elemento contenitore esterno si cancelleranno tutti quelli
interni, e il simbolo dei due riquadri sovrapposti, aggiunto nella versione 2 del tema, che
consente di “clonare” l’elemento creandone quindi un perfetto duplicato. L’elemento
contenitore include anche un altro pulsante rappresentato da tre righe orizzontali, grazie al
quale potete accedere alle sue impostazioni, come vedremo fra poco.
9.2 Aree ed elementi
Cominciamo quindi a entrare nel vivo della composizione del layout, partendo proprio
dagli elementi che trovate già inseriti nel momento in cui passate al Page Builder: notate
prima di tutto come, cliccando sull’area rettangolare interna con la scritta Insert
Column(s), vi verrà presentata in una finestra in sovrimpressione la scelta fra undici
combinazioni di suddivisione in colonne che spaziano dalla colonna unica agli
abbinamenti misti, con una suddivisione massima di quattro colonne in tutto (Figura 9.4).

Figura 9.4 – La finestra di scelta della combinazione di colonne che compare cliccando su
Insert Column(s); si notino le possibilità di suddividere fino a quattro volte l’elemento
orizzontale interessato.
Indipendentemente dalla vostra scelta, una volta selezionata una delle soluzioni proposte,
la scritta Insert Column(s) sarà sostituita da Insert Module(s), cioè potrete inserire uno o
più elementi a seconda del numero di aree/colonne scelte.

nota
Quando progettate una pagina Web, e in particolare utilizzate uno strumento di
composizione visuale come Divi a tale scopo, dovete abituarvi a ragionare in termini
di aree orizzontali (righe) suddivise singolarmente in aree verticali (colonne)
all’interno di una struttura dalle misure precise e composta da elementi collocati in
modo ordinato e proporzionale. Si tratta di un sistema “a griglia” simile a quello
usato nell’impaginazione delle pubblicazioni per la stampa. ed è importante
familiarizzare con questo tipo di struttura per sviluppare al meglio le vostre pagine.
Fino a questo momento, se provate a visualizzare un’anteprima della pagina, vedrete
soltanto la barra dei menu e il piè di pagina, poiché non avete in realtà inserito alcun
contenuto nell’elemento interno, né in quello esterno che a sua volta lo contiene. C’è un
modo però per visualizzare la presenza del contenitore esterno: cliccate sul simbolo delle
tre righe orizzontali e accederete alle sue impostazioni, che sono presentate in una finestra
in sovrimpressione (Figura 9.5) chiamata Section Module Settings (impostazioni modulo
di sezione) e che determinano le caratteristiche dell’area orizzontale corrispondente.

Figura 9.5 – La finestra con una parte delle impostazioni disponibili per il modulo di
sezione, Section Module Settings, dove potete definire le caratteristiche dell’area
orizzontale che contiene i diversi elementi di riga (Rows), suddivisi in colonne
(Columns); si noti l’opzione per definire un’immagine di sfondo (Background Image) e,
subito dopo, quella per la definizione di un colore di sfondo (Background Color) in
alternativa e il pulsante Pulisci che riporta il colore a quello di partenza (bianco).
Queste caratteristiche riguardano l’eventuale colore di fondo Background Color, oppure
l’utilizzo di un’immagine o di un video al posto del semplice colore, la presenza di
un’ombra interna (Inner Shadow) o dell’effetto parallasse (Parallax Effect) nello
scorrimento verticale della pagina. Provate a impostare, per esempio, un colore qualsiasi e,
dopo aver cliccato sul pulsante Save, visualizzate l’anteprima della pagina: l’area
orizzontale definita dal modulo di sezione ora è perfettamente visibile, sebbene molto
ridotta in quanto non contiene ancora alcun elemento interno.
Sarà proprio inserendo degli elementi all’interno del contenitore rappresentato dal
“modulo di sezione”, che determinerete anche le sue reali dimensioni oltre, ovviamente,
all’aspetto che assumerà grazie a tali elementi.
Cliccate quindi su Insert Module(s) per visualizzare la finestra che contiene i diversi
elementi disponibili per il Section Module di tipo standard (Figura 9.6): nella prima
versione di Divi per questo modulo erano disponibili diciassette tipi di elementi, che sono
diventati ventotto nella seconda versione.

Figura 9.6 – La finestra per la scelta dei moduli da inserire nelle colonne definite
all’interno di una riga del layout, Insert Module; si notino i diversi elementi che avete già
incontrato esaminando le parti che formano un tema.
Proviamo a passare in rapida rassegna i tipi di elementi disponibili per il modulo standard,
contrassegnando con un numero tra parentesi la versione del tema in cui sono presenti:
• Image (1, 2)
permette, come lascia intuire il nome, l’inserimento di una semplice immagine cui è
possibile associare un link e un eventuale effetto di animazione verticale oppure
orizzontale per la sua comparsa; nella versione 2 di Divi è stato aggiunto l’effetto
lightbox opzionale nel caso si voglia visualizzare l’immagine invece di associarle un
link quando si clicca su di essa.
• Gallery (2)
serve a inserire una galleria di WordPress sotto forma di slider oppure come griglia di
immagini che, una volta ingrandite, diventano navigabili.
• Text (1, 2)
un semplice elemento di testo, che può essere composto usando l’editor standard di
WordPress.
• Blurb (1, 2)
uno degli elementi che si trovano generalmente a gruppi di tre o più e servono a
evidenziare servizi o altro; il blurb può essere composto da un titolo, un testo e
un’immagine ed è associabile a un link. Nella versione 2 di Divi è stata introdotta la
possibilità di abbinare al blurb un’icona selezionabile da una libreria e racchiudibile
in un cerchio.
• Tabs (1, 2)
il classico elemento a schede, dove queste possono essere create singolarmente e in
numero virtualmente illimitato definendo semplicemente un titolo che formerà
l’etichetta e un contenuto.
• Slider (1, 2)
anche questo è un elemento noto e ovviamente è possibile definire gli elementi di
navigazione manuale, impostare uno scorrimento automatico e la sua velocità, e
aggiungere l’effetto di parallasse; anche in questo caso le singole slide possono essere
create in numero teoricamente illimitato, definendo titolo, video o immagine di
sfondo, immagine o video in sovrimpressione, testo descrittivo, testo e link per
l’eventuale pulsante.
• Testimonial (1, 2)
visualizza il classico riquadro delle testimonianze sulla qualità del prodotto o del
servizio. Nella versione 1 di Divi era possibile inserire solo il nome del testimonial,
l’eventuale URL al suo sito e ovviamente il testo della testimonianza; nella versione
2 è stata aggiunta l’icona dei doppi apici, la possibilità di inserire la foto del
testimone, l’eventuale azienda di cui fa parte e la sua mansione in essa, e
impostazioni per il colore del testo e dello sfondo.
• Pricing Table (1, 2)
si tratta delle tabelle di offerte comparate che si vedono spesso nei siti, con la
possibilità di metterne in evidenza una rispetto alle altre; per ogni offerta si possono
inserire diversi parametri correlati a titolo e sottotitolo, prezzo e valuta, periodicità
dei pagamenti in caso di abbonamenti, testo e link del pulsante e ovviamente l’elenco
delle caratteristiche incluse o escluse da ogni singola offerta, usando il segno + e –
prima di ogni riga dell’elenco.
• Call to Action (1, 2)
anche questo è un elemento noto e consiste in una frase seguita da un pulsante e
corredata eventualmente di un testo descrittivo, per spingere l’utente a un’azione; si
può definire, oltre al testo del titolo e del pulsante, anche il link di quest’ultimo e il
colore del testo e dell’eventuale sfondo.
• Audio (2)
introdotto con la seconda versione di Divi, questo componente permette di caricare
dei brani audio assegnando anche i relativi attributi: titolo del brano, nome dell’artista
e dell’album ed eventuale immagine di quest’ultimo.
• Subscribe (1, 2)
si utilizza per far iscrivere gli utenti a una newsletter oppure a un feed, predisposto
nella prima versione di Divi solo per il servizio di autoresponder Mail-Chimp, al
quale sono stati aggiunti nella seconda versione i servizi dell’altro noto
autorisponditore Aweber e del servizio di gestione dei feed RSS Feedburner; oltre al
titolo e al testo del pulsante, si può scegliere la lista cui l’utente si iscriverà quando è
selezionato un autoresponder.
• Login (2)
permette di creare un’area per l’accesso dove inserire nome utente e password,
preceduta da un titolo ed eventuale testo addizionale, cui vengono aggiunti
automaticamente i due campi da compilare e un pulsante Login; si può scegliere di
indirizzare l’utente sulla stessa pagina dov’è collocato questo elemento.
• Portfolio (1, 2)
con questo elemento possiamo visualizzare una o più categorie di contenuti, creati
usando il nuovo formato Project presente in Divi, associandovi un’immagine in
evidenza, disponendoli come elenco esteso (Fullwidth) con immagini e testi oppure
sotto forma di mosaico (Grid) con le sole immagini; può tornare utile, quindi, non
solo per un portfolio di lavori ma per qualsiasi altro genere di contenuti, compresi
veri e propri articoli oppure anche dei prodotti per un sito vetrina.
• Filterable Portfolio (2)
rispetto al modulo Portfolio, questo gestisce solo la modalità Grid e permette di
visualizzare sopra il mosaico di immagini di anteprima delle etichette corrispondenti
alle categorie impostate, cliccando sulle quali si passa in tempo reale alla
visualizzazione dei contenuti relativi alla categoria scelta.
• Animated Counters (1)
permette di creare un grafico composto da una serie di barre animate; potete
aggiungere tutte le barre che desiderate specificando, per ognuna, il titolo e la
percentuale che determinerà la lunghezza della barra nel grafico finale.
• Bar Counters (2)
è l’equivalente del modulo Animated Counters presente nella precedente versione di
Divi, rinominato per evitare confusione con i due nuovi elementi Circle Counter e
Number Counter (si veda punto successivo).
• Circle/Number Counter (2)
Simile all’elemento precedente, ma in questo caso vengono animati dei numeri,
eventualmente associati a una barra circolare animata, che gli fa da cornice se si usa
il Circle Counter; ogni elemento contiene un singolo numero, quindi vanno inseriti
più elementi per comporre un gruppo di numeri affiancati ed è possibile affiancare ai
numeri un simbolo di percentuale.
• Accordion (2)
traducibile con fisarmonica, indica quei gruppi di elementi espandibili singolarmente
composti da un titolo e da un contenuto; la caratteristica dell’Accordion è che rimane
aperto sempre un solo elemento fra quelli presenti nel gruppo.
• Toggle (1,2)
simile all’Accordion, ma in questo caso ogni elemento contiene un solo contenuto di
cui è possibile anche definire lo stato iniziale: aperto o chiuso; per creare un gruppo
di elementi espandibili bisognerà quindi utilizzare più elementi toggle nella stessa
riga.
• Contact Form (1,2)
un semplice modulo di contatti formato dai campi fondamentali (nome, indirizzo,
messaggio) di cui si può impostare il titolo e l’indirizzo di ricezione, oltre a scegliere
se dovrà essere corredato da captcha, basato su una somma algebrica.
• Sidebar (1,2)
permette di inserire aree widget ovunque nella pagina e, associato alla possibilità di
definire aree widget personalizzate, offre possibilità quasi infinite di collocare
elementi con funzioni particolari in qualsiasi area del layout; l’unica opzione presente
è ovviamente quella per scegliere l’area widget da utilizzare.
• Divider (1,2)
un elemento di spaziatura verticale fra le altre aree, con la possibilità di definirne
l’altezza e visualizzare una linea orizzontale di cui si può scegliere il colore.
• Team Member (2)
come suggerisce il nome, questo elemento visualizza un profilo/scheda di un membro
del team, per il quale si può specificare nome e ruolo, associando anche una foto e gli
indirizzi dei profili social più noti: Facebook, Twitter, Google+ e LinkedIn.
• Blog (1, 2)
rappresenta la classica visualizzazione degli articoli in formato blog, con la differenza
che in questo caso si può ovviamente definire un’area specifica del layout in cui
ospitarli; decidere il formato di visualizzazione, per esteso oppure a mosaico, come
per il portfolio; l’eventuale visualizzazione dell’immagine in evidenza e di un estratto
del testo e, naturalmente, i metadati: autore, categoria, data; è possibile anche
aggiungere i link di navigazione in caso il numero di articoli visualizzati sia inferiore
a quello degli articoli effettivamente presenti.
• Shop (1, 2)
essendo Divi predisposto per il plugin di ecommerce Woocommerce, con questo
modulo si possono visualizzare i prodotti presenti scegliendo fra le cinque categorie
promozionali disponibili: saldi, prodotti più richiesti, ecc.; è possibile decidere il
numero di prodotti e il numero di colonne in cui distribuirli, ma anche l’ordinamento:
standard, per data o prezzo, e così via.
• Countdown Timer (2)
visualizza un contatore che scandisce giorni, ore, minuti e secondi mancanti a un
tempo specifico, che si può definire scegliendo la data e l’orario attraverso un
calendario e due selettori a scorrimento; utile per mettere in evidenza il lancio di un
sito/progetto oppure la scadenza di un’offerta.
• Map (2)
come il nome suggerisce, consente di inserire una mappa di Google specificando
l’indirizzo e aggiungendo anche dei segnalini (pin) in punti precisi della mappa
specificandone gli indirizzi corrispondenti.
• Social Media Follow (2)
in questo elemento si possono inserire le icone di vari social network e altre
piattaforme, oltre una dozzina fra cui i più noti, compresi YouTube, Vimeo e Flickr,
associando a ognuna il relativo link del profilo desiderato; è possibile scegliere se
visualizzarle in un riquadro o in un cerchio e personalizzarne il colore, oltre che
associare l’eventuale pulsante Follow di fianco a ogni icona.
Com’è facile capire dopo aver scorso l’elenco degli elementi utilizzabili in Divi, le
possibilità di composizione sono virtualmente infinite e non sarà difficile ricreare layout
simili a quelli dei temi professionali cosiddetti “one page” dove la home si sviluppa in
verticale e contiene tutta una serie di aree dotate di un buon impatto comunicativo.
Ogni elemento è configurabile secondo le sue particolari caratteristiche ed è possibile
inserirlo in un’area orizzontale (riga) e verticale (colonna) specifica, determinandone così
oltre alla posizione anche le proporzioni rispetto all’intera pagina.

nota
Nel momento in cui si inserisce un elemento viene visualizzata una finestra in cui si
possono scegliere le diverse opzioni che ne definiscono le caratteristiche: un’opzione
comune a tutti è quella chiamata “Admin Label”, che permette di assegnare
un’etichetta all’elemento per identificarlo più facilmente all’interno del layout,
funzione particolarmente utile quando si creano pagine molto complesse e ricche di
elementi.
Gli altri due tipi di area orizzontale disponibili in Divi sono, come abbiamo visto in
precedenza, la Fullwidth Section e la Specialty Section (quest’ultima introdotta con la
versione 2 di Divi): la prima si differenzia dalla Section standard per il fatto che occuperà
tutto lo schermo e si adatterà quindi alle dimensioni di quest’ultimo, mentre la seconda
introduce schemi di layout più complessi rispetto a quelli inizialmente disponibili (Figura
9.7) abbinando diverse combinazioni di righe e colonne e aumentando così le possibilità,
tanto da un punto organizzativo quanto creativo.

Figura 9.7 – Le combinazioni di colonne e righe disponibili quando si utilizza una


Specialty Section; si notino gli abbinamenti resi possibili dalla presenza di elementi
singoli che occupano più righe per allinearsi a quelli adiacenti.
Gli elementi utilizzabili nelle Specialty Section sono praticamente gli stessi già elencati,
mentre per le Fullwidth Section avremo soltanto versioni a pieno schermo degli elementi
Slider, Portfolio e Map in aggiunta a due elementi specifici di questa sezione che sono la
testata (Header) e la barra di navigazione (Menu).
Nel resto di questo capitolo Divi sarà illustrato in concreto utilizzandolo per un progetto
pratico di sviluppo del sito wpaz.it associato al libro.
9.3 Sviluppo di un sito con Divi
In questo primo progetto Divi sarà utilizzato per sviluppare interamente un layout che
useremo in seguito per la home page del sito associato a questo libro: wpaz.it. Proveremo
a impiegare diversi elementi del layout suggerendo di volta in volta anche le eventuali
alternative d’uso nella creazione di siti diversi.
Il layout della home page del sito sarà ispirato ai temi cosiddetti “one page”, quindi
conterrà oltre agli elementi classici (slider, blurb/services, ecc.) anche quelli che
migliorano la comunicazione visuale globale della pagina.
Prima di tutto utilizzate le possibilità presenti nel pannello di configurazione del tema,
ePanel, per caricare il logo ed eventualmente la favicon (Figura 9.1), ricordando che
quest’ultima consiste essenzialmente in un’immagine con dimensioni di 16x16 pixel in
uno dei formati compatibili con i browser: PNG, GIF o il vecchio formato ICO. Dal
pannello Personalizza della sezione Aspetto selezionate lo stile per la testata, Header
Style, in Theme Settings, in questo caso centrato, Centered, invece che allineato a
sinistra per il logo e a destra per il menu come nel formato predefinito, Default. Nella
sezione Theme Settings potete anche scegliere se visualizzare le icone social e quella della
ricerca, se usare un layout rigido, Boxed Layout, anziché fluido e se attivare il menu
verticale a sinistra invece che quello in alto, Vertical Navigation, definire il numero di
telefono e l’email da visualizzare nella barra del menu secondario mostrata nella parte alta
dello schermo e il colore del testo per i due menu (Figura 9.8).
Figura 9.8 – Il menu Theme Settings con alcune delle possibilità di personalizzazione del
tema Divi visualizzate tramite la solita voce Personalizza della sezione Aspetto di
WordPress; si noti a destra l’anteprima dove per ora è visibile solo la testata e il piè di
pagina.
Create quindi una pagina vuota che chiamerete in questo caso “WPAZ Home” per
distinguerla, nella creazione del menu, dalla voce Home predefinita, e attivate il sistema di
composizione visuale di Divi usando il pulsante Use Page Builder in alto a sinistra
nell’area di editing.
Il primo elemento che inserirete sarà uno slider, decidendo fra il formato a schermo
intero oppure quello standard che segue le dimensioni del layout: in questo caso opterete
per il primo, quindi inizierete inserendo una sezione a schermo intero cliccando su Add
Fullwidth Section ed eliminate la sezione standard predefinita, quindi cliccate su Insert
Module(s) e selezionate Fullwidth Slider fra i componenti elencati nella finestra di
scelta. Avrete così creato il vostro slider a schermo intero, pronto per essere configurato
(Figura 9.9)
Figura 9.9 – La sezione a schermo intero, Fullwidth Section, in basso, con l’elemento
slider già inserito e pronto per essere configurato; si noti in alto la sezione standard
predefinita, che in questo caso eliminerete cliccando sulla X in basso a sinistra, e le barre
di diverso colore che distinguono i due tipi di sezione.

nota
È sempre importante avere una cura particolare nel selezionare, ridimensionare e/o
ritagliare le immagini che si utilizzeranno nello sfondo dello slider, tenendo conto di
come sarà poi posizionato il testo per essere sicuri che questo risulti leggibile. Se si
ha a disposizione un programma di grafica, può essere utile applicare dei “filtri”
scuri, ottenuti sovrapponendo immagini astratte a quelle dello slider e regolandone la
trasparenza, oppure usando effetti di sfocatura o altro. Inoltre, in base a come saranno
eventualmente adattate in automatico dallo slider stesso, le foto potranno essere
nuovamente ridimensionate o ritagliate e infine reinserite per ottenere un risultato
migliore.
Nel momento in cui si seleziona l’elemento Fullwidth Slider, viene visualizzata la finestra
di configurazione dello slider (Figura 9.10), dove potete aggiungere le singole slide
cliccando sul primo riquadro in alto, Add New Slide, e accedendo così alla relativa
schermata di impostazione, Slide Settings, dove potrete inserire, nell’ordine: il testo del
titolo, il testo e il link per il pulsante, l’immagine o il colore di sfondo (si escludono a
vicenda) e l’eventuale immagine o video in sovrimpressione.
Figura 9.10 – La finestra che compare selezionando l’elemento slider; si noti in alto il
pulsante per l’aggiunta delle slide, cliccando sul quale accederete alla finestra di
configurazione della singola slide.
Nella finestra di configurazione generale dello slider (Figura 9.10), invece, potete decidere
se visualizzare le frecce laterali, Arrows, e i pallini di navigazione in basso, Controls,
sulle slide e attivare l’eventuale scorrimento automatico di cui potete impostare il tempo in
millisecondi (per esempio 4000) e l’eventuale effetto di parallasse nello scorrimento
verticale della pagina.
Inserite quindi le slide, ricordando che potete anche cambiarne l’ordine semplicemente
trascinando i diversi elementi che si vengono a creare man mano, quindi salvate le
impostazioni dell’intero elemento e aggiornate la pagina per verificare i risultati.
Volendo dare maggiore enfasi allo slider potete eliminare la testata del sito solo per la
home page, selezionando il modello Blank Page nel riquadro Attributi pagina. In questo
modo potrete anche aumentare l’area above the fold, cioè quella visualizzata senza
scorrere la pagina, e introdurre un eventuale elemento che incoraggi a scorrere il resto
della facciata: per ottenere quest’ultimo risultato userete l’elemento Fullwidth Header,
che è presente fra quelli della sezione a schermo intero, collocandolo nella stessa sezione
che ospita lo slider, in modo che sia visualizzato immediatamente al di sotto.
L’elemento Fullwidth Header richiede soltanto l’inserimento di un titolo e di un
sottotitolo, oltre alla scelta del colore del testo, chiaro o scuro, che dovrà avvenire in
funzione dello sfondo: in questo caso sarà usato come sfondo dell’intera sezione che
contiene slider e header lo stesso background astratto usato in trasparenza sulle foto dello
slider, quindi selezionerete il testo chiaro. Per impostare lo sfondo della sezione basterà
cliccare sull’icona delle tre righe orizzontali in alto a sinistra nella barra della sezione e
caricare o scegliere l’immagine che volete utilizzare come sfondo dell’intera sezione,
ricordandovi di usare un’immagine con dimensioni appropriate.

nota
Ricordiamo che le immagini utilizzate come sfondo non devono necessariamente
avere una qualità e definizione particolarmente alte, quindi provate sempre ad
aumentare il loro fattore di compressione prima di utilizzarle in modo da ridurne il
peso e ottenere così tempi di caricamento più rapidi, soprattutto per la home page,
che generalmente contiene molti elementi.
Nel caso in esame siamo intervenuti sull’altezza dell’elemento Fullwidth Header e sullo
spessore del font utilizzato per il suo titolo (Figura 9.11), usando del codice personalizzato
per il foglio stile CSS. Ricordiamo che queste modifiche possono essere applicate tanto
all’intero sito, inserendo il codice CSS nel campo Custom CSS del pannello del tema,
ePanel, quanto a una singola pagina, usando un plugin come CSS Plus, o addirittura al
singolo elemento: in quest’ultimo caso potrete usare i campi CSS ID e CSS Class presenti
in fondo alla schermata di configurazione della sezione, in abbinamento a una serie di stili
personalizzati definiti nel campo Custom CSS dell’ePanel.

Figura 9.11 – Lo slider utilizzato nella home dopo avere escluso la testata scegliendo il
modello Blank Page; si noti in basso il Fullwidth Header con le modifiche al codice CSS
che ne hanno ridotto l’altezza e inspessito il carattere usato per il testo del titolo.
Sotto la sezione a schermo intero che contiene il Fullwidth Header inserirete ora una
sezione standard, quindi cliccate su Add Section per crearla: in questa sezione inserirete
tre elementi, che formeranno un’area con dei contatori animati e, al di sotto, un’area con
dei loghi preceduti da una riga di testo: quest’ultima è contenuta in un elemento testo
indipendente.
I contatori animati possono essere utili per fornire delle statistiche o altri valori
numerici attinenti a un argomento, in questo caso saranno riferiti a WordPress e
riguarderanno la media di siti creati ogni giorno usando questo CMS e il numero di temi e
di plugin attualmente disponibili. Configurerete quindi il primo elemento di questa nuova
sezione con un layout a tre colonne, inserendo in ognuna un elemento Number Counter
(Figura 9.12), che configurerete con il testo descrittivo e il valore numerico, in questo caso
senza aggiungere il segno di percentuale.

Figura 9.12 – La configurazione del Number Counter; si noti come il segno di


percentuale in questo caso sia disattivato poiché si tratta di una quantità numerica
semplice.
Ripeterete quindi l’operazione aggiungendo gli altri due Number Counter alle rispettive
colonne che seguono, inserendo i relativi dati in ognuno degli elementi.
L’elemento successivo dovrà contenere il testo che precede i loghi di aziende famose
che utilizzano WordPress, quindi create una nuova riga all’interno della sezione attuale
usando il link Add Row e configurate il nuovo elemento affinché sia composto da una
sola colonna, nella quale inserirete un Text Module. Quest’ultimo va configurato
inserendo semplicemente il testo da visualizzare come si fa quando si crea un articolo o
una pagina e assegnandogli il colore (Text Color) scegliendo fra chiaro (Light) o scuro
(Dark) come al solito, e l’eventuale l’allineamento (Text Orientation) per mezzo delle
impostazioni della schermata.
Infine, inserite l’ultima riga di questa sezione configurandola con quattro colonne, in
cui inserirete altrettanti elementi Image Module, che come dicevamo conterranno i loghi
di aziende che usano WordPress per la comunicazione. Alla sezione che ospita questi
elementi, assegnerete un’immagine di sfondo in linea con il resto dello stile grafico scelto
per la home.

Figura 9.13 – Una parte delle impostazioni per l’Image Module; si noti la disattivazione
del lightbox, l’URL che punta a una risorsa esterna e si apre in una nuova scheda del
browser, URL Opens: In The New Tab, e, infine, il tipo di animazione, Top to Bottom.

nota
L’utilizzo di loghi nella home page è in genere associato a un’area in cui si
evidenziano i marchi di clienti o di partner che possono dare valore all’attività
promossa attraverso il sito, ma ovviamente si presta a qualsiasi genere di utilizzo. Le
immagini usate vanno anche in questo caso ridimensionate in modo da occupare
un’area uguale, quindi avranno le stesse misure in pixel per allinearsi e spaziarsi
perfettamente. In questo caso, i loghi sono stati anche invertiti e impostati come
immagini in scala di grigio per risaltare al meglio sullo sfondo scuro adottato per la
home.
Per ogni Image Module caricherete il relativo logo, associando un’eventuale link alla
risorsa esterna collegata, che sarà aperto in una nuova scheda del browser anziché nella
stessa pagina. Associate anche un’animazione (in questo caso dall’alto in basso) e
disattivate la visualizzazione dell’immagine con lightbox, poiché associata a un link
esterno (Figura 9.13).
Ricordate sempre che è possibile clonare un elemento più volte nel caso quelli da creare
successivamente contengano una configurazione più o meno simile: nell’esempio appena
visto è bastato, infatti, cambiare l’immagine e l’URL della risorsa esterna per ottenere i tre
nuovi elementi partendo dalla clonazione del primo.

Figura 9.14 – L’area della home contenente i numeri animati e i loghi con i link ai marchi
famosi; si noti il testo al quale sono stati applicati anche due link e l’immagine di sfondo
utilizzata per l’intera area.
Completata questa seconda area della home (Figura 9.14) potete passare alla successiva,
che sarà a schermo intero come la prima, quindi cliccherete su Add Fullwidth Section per
crearla: in questa sezione inserirete un indice visuale che permetta di accedere alle risorse
interne al sito, suddiviso per argomenti.
Per ottenere un risultato di questo tipo avrete bisogno prima di tutto di creare
normalmente articoli (post), associando le relative categorie, come si fa di solito quando si
crea un blog o un’area dello stesso tipo all’interno del sito. Una volta realizzati gli articoli,
creerete dei nuovi contenuti usando il formato Project, che ha la stessa forma degli
articoli, introdotto da Divi, inserendo in ogni project gli articoli di una specifica categoria
e associando un’immagine in evidenza; per quest’ultima sono state usate le stesse
immagini dello slider, che vengono ridotte in automatico. In sostanza, l’indice visuale che
state creando è una versione più compatta di quanto è già presente nello slider.
Figura 9.15 – Una parte dei project creati usando questo formato specifico di articolo
introdotto da Divi; si noti la categoria “argomenti” associata a ogni project, che sarà poi
utilizzata nella creazione dell’indice visuale.
Tutti i project saranno in questo caso associati a una stessa categoria, che abbiamo
chiamato “argomenti” (Figura 9.15) ed è associata agli articoli del blog, e conterranno,
singolarmente, tutti gli articoli sull’argomento specifico cui fanno riferimento. Per inserire
questi ultimi, in ogni project userete il Page Builder e inserirete in una sola colonna
l’elemento Blog selezionando la categoria di articoli corrispondente a quella associata al
project stesso ed evidenziata nel suo titolo (Figura 9.16).
Figura 9.16 – L’impostazione di un singolo project con l’unico elemento rappresentato da
un componente Blog nel quale è configurata la visualizzazione degli articoli associati alla
categoria corrispondente al titolo del project.

nota
L’elemento Blog può essere configurato per visualizzare un elenco di articoli
associati a una o più categorie ed è possibile selezionare sia la classica modalità di
visualizzazione a elenco, Fullwidth, contenente la miniatura dell’immagine in
evidenza corredata da una parte del testo; sia quella a mosaico, Grid, dove invece
sono visualizzate solo le immagini in evidenza.
Una volta creati i contenuti del blog, quindi, associando le diverse categorie ai relativi
project, potrete aggiungere l’elemento che vi permette di visualizzarli sotto forma di
immagini a scorrimento singolarmente selezionabili e collegate alle rispettive aree del sito.
Per farlo userete il componente Fullwidth Portfolio, impostando la categoria argomenti
utilizzata per i project sopra descritti e ottenendo così la visualizzazione delle loro
immagini in evidenza (Figura 9.17). Queste potranno essere cliccate per accedere a ogni
singolo project e di conseguenza alla relativa sezione del blog con gli articoli
corrispondenti all’argomento specifico.
Figura 9.17 – La sezione a schermo intero contenente il Fullwidth Portfolio seguita delle
due sezioni standard contenenti rispettivamente il testo e il widget di ricerca su due
colonne di larghezza diversa e la call to action su colonna intera.
Sotto il “carousel” con l’indice visuale, aggiungerete altre due sezioni: nella prima troverà
posto un layout con una colonna da 2/3 a sinistra e una colonna da 1/3 a destra, che
ospitano rispettivamente un elemento di testo con l’invito a cercare e un’area widget
personalizzata contenente il widget di ricerca standard di WordPress, Nella sezione
successiva inserirete una Call to Action, con immagine di sfondo, che invita il pubblico a
richiedere informazioni, utilizzando uno sfondo e impostando un colore chiaro per il testo
e il pulsante; per quest’ultimo sarà necessario intervenire nuovamente con un codice CSS
personalizzato.

nota
Non dovete mai dimenticare la flessibilità offerta dalle aree widget personalizzate,
che potete creare in quantità virtualmente infinita nella schermata Widget di
WordPress e assegnare così al relativo componente, posizionandolo in un’area
precisa della pagina.
Figura 9.18 – L’area contenente il Fullwidth Portfolio con le immagini in evidenza dei
singoli project, cliccando sulle quali accederete a un elenco di articoli riguardanti
l’argomento specifico, seguita dalle due sezioni successive.
Al posto del Fullwidth Portfolio avreste potuto utilizzare un Filterable Portofolio, che
richiede però una sezione standard invece di una Fullwidth Section, ma la scelta dipende
dal modo in cui sono organizzati i contenuti, dal momento che questo secondo tipo di
indice visuale presuppone che i project contengano proprio il contenuto finale e non un
elenco di articoli del blog. Nessuno vieta, in ogni caso, di usare entrambe le soluzioni
qualora vi sia una ricchezza di contenuti dinamici, così com’è possibile usare i project per
contenuti che normalmente sarebbero collocati nelle pagine, in modo da sfruttare le
funzioni portfolio come indice visuale in sostituzione o in aggiunta alla navigazione
tradizionale offerta dalla barra del menu.
La parte inferiore della home potrà ospitare un’area standard con layout a quattro
colonne nelle quali inserire le quattro aree widget del piè di pagina (“Footer Area #1”,
ecc.) corredandole dei widget più adatti, che in questo caso potrebbero essere quelli degli
articoli e commenti più recenti, quello della tag cloud e così via.
Figura 9.18 – Gli elementi del layout finora sviluppato usando il Page Builder; si noti la
sezione a schermo intero in alto e a seguire le sezioni standard con layout a una o più
colonne, con le etichette identificative assegnate ai singoli moduli usando il loro campo
Admin Label.
Da notare, infine, come durante la creazione e l’inserimento dei singoli elementi sia stato
utilizzato il più spesso possibile il campo Admin Label presente in ogni modulo per
assegnare a tutti gli elementi un’etichetta identificativa che vi permetterà, in seguito, di
gestire più facilmente il layout (Figura 9.18).
Riguardo i codici CSS personalizzati che avete utilizzato per modificare alcuni elementi
della home, ricordiamo come il loro inserimento diretto nel campo Custom CSS del
pannello di configurazione del tema influisca su tutto il sito. È possibile definire nello
stesso campo degli stili con nomi personalizzati associandoli agli stili presenti nel tema,
richiamando poi i primi dai campi per il codice CSS personalizzato presenti in ogni
sezione. Infine, potete installare un plugin come CSS Plus (wpaz.it/071) e inserire il
codice CSS modificato direttamente nella finestra che il plugin aggiunge sotto l’area di
editing della singola pagina o del singolo articolo (Figura 9.19).
Figura 9.19 – La finestra che il plugin CSS Plus (wpaz.it/071) aggiunge sotto l’area di
editing di pagine e articoli, con un riepilogo commentato dei codici CSS personalizzati
utilizzati per modificare alcuni elementi della home, per chi volesse esaminarli ed
eventualmente utilizzarli.
Quello visto finora è ovviamente solo un esempio delle infinite possibilità di
composizione offerte da strumenti come Divi e della libertà creativa che ne risulta rispetto
all’uso di temi preimpostati. Sul sito wpaz.it continueremo a esaminare, in articoli
specifici, gli strumenti di composizione che Divi mette a disposizione e il loro utilizzo
pratico.
Appendice
WordPress 4
Ogni nuova versione di WordPress porta con sé dei miglioramenti che a volte includono
anche perfezionamenti nell’interfaccia di amministrazione del CMS, per questo motivo gli
utenti attendono con ansia l’annuncio delle nuove caratteristiche e non vedono l’ora di
installare e provare ogni aggiornamento disponibile.
Anche la quarta versione di WordPress non ha fatto eccezione, ecco perché in
quest’ultima parte del volume vogliamo presentare tutte le novità che, pur apportando dei
rilevanti miglioramenti nel backend, non producono cambiamenti radicali nelle modalità
di utilizzo fondamentali del CMS, così come sono state descritte nelle pagine precedenti.
In sostanza, il passaggio dalla versione 3 alla versione 4 è soprattutto un ulteriore
passaggio evolutivo, che pur non implicando modifiche estetiche all’interfaccia, come
accaduto con gli ultimi aggiornamenti della terza versione, offre nuovi strumenti che
aumentano la produttività del webmaster.
10.1 Le novità di WordPress 4
La prima novità di questa quarta versione sarà immediatamente visibile a chi installa
WordPress seguendo la procedura già illustrata nella prima parte di questo volume,
giacché le schermate delle varie fasi che accompagnano l’installazione saranno ora
precedute dalla scelta della lingua (Figura 10.1).
Ciò consente un download centralizzato per il CMS evitando il “dirottamento” degli
utenti sulla pagina specifica della loro lingua.
Figura 10.1 – La finestra di scelta della lingua che precede le fasi di installazione di
WordPress.
Questa novità si riflette anche nella schermata Generali delle Impostazioni, dove le voci
riguardanti il formato della data e dell’ora sono seguite da una nuova opzione chiamata
Lingua del sito, il cui menu permette la scelta della lingua.
La seconda novità immediatamente visibile è quella che riguarda l’area di creazione e
modifica del contenuto: la barra degli strumenti rimane ora sempre a portata di mano,
mentre la finestra del contenuto si adatta dinamicamente alla quantità di testo e agli altri
media inseriti durante la composizione (Figura 10.2).
Figura 10.2 – Dalla versione 4 di WordPress la barra degli strumenti di editing del
contenuto rimane sempre a portata di mano durante la composizione di articoli e pagine.
Altro importante cambiamento riguarda la modalità di inserimento dei video in pagine e
articoli e la visualizzazione della loro anteprima: con la quarta versione si può inserire il
link di condivisione del video ottenendo in pochi secondi la sua sostituzione con
un’anteprima che è più rappresentata dal solito riquadro neutro, in quanto riflette il video
stesso (Figura 10.3). Cliccando sull’anteprima vengono visualizzate, oltre al pulsante di
riproduzione, le icone che di solito vediamo sulle foto, che ci permettono così di
modificare il link e il titolo oppure di eliminare il video stesso.
Figura 10.3 – Un video inserito con il link di condivisione in WordPress 4; si notino le
icone di modifica e cancellazione usate anche per le foto e, al centro dell’anteprima, il
pulsante di riproduzione.
Anche la visualizzazione delle immagini nella Libreria Media ha avuto un miglioramento
con il passaggio alla quarta versione del CMS, in quanto alla visualizzazione classica ora
si accompagna quella “a griglia” (Figura 10.4) che rende la consultazione della libreria
ancora più agevole. Questa praticità di consultazione si riflette anche nella visualizzazione
delle singole immagini, poiché ora è possibile scorrerle usando dei pulsanti di
navigazione.
Figura 10.4 – La nuova modalità di visualizzazione “a griglia” permette di navigare più
facilmente e velocemente fra le immagini della Libreria Media.
Nell’area dedicata alla personalizzazione del tema corrente, raggiungibile dalla voce
Personalizza della sezione Aspetto, è stata inoltre aggiunta la gestione dei widget, che ora
possono essere, infatti, inseriti e posizionati direttamente da quest’area del backend
(Figura 10.5), ottenendo l’anteprima in tempo reale del risultato nel frontend. Il pulsante
Chiudi di questa schermata è stato inoltre sostituito da un riquadro con il simbolo di
chiusura a forma di X.
Figura 10.5 – La gestione dei widget è ora presente anche nell’area di personalizzazione
del tema, con tanto di anteprima in tempo reale delle modifiche apportate alle diverse aree
widget disponibili.
Infine, la quarta versione di WordPress ha introdotto una nuova schermata per l’aggiunta
dei plugin (Figura 10.6), che fornisce immediatamente le informazioni più importanti per
ogni plugin (compresa la valutazione degli utenti, l’aggiornamento più recente e la
compatibilità con la versione corrente del CMS) e permette di visualizzare e consultare
direttamente in questa schermata del backend la pagina ufficiale del plugin, caricandola in
una finestra in sovraimpressione anziché aprirla in una nuova scheda del browser.

Figura 10.6 – La nuova schermata per la scelta e l’installazione dei plugin; si notino i
riquadri con le informazioni più importanti e, sotto al pulsante di installazione, il link per
visualizzare direttamente in questa schermata la pagina con la scheda completa ufficiale
del plugin.
Come sempre, ciò che non abbiamo fatto in tempo a segnalare in queste pagine troverà
posto nel sito wpaz.it, che indicherà periodicamente le novità di ogni nuova versione di
WordPress facendo riferimento, ove necessario, ai contenuti di questo volume.
Risorse utili
Un regalo per i lettori
In seguito ai suggerimenti di molti lettori dei precedenti volumi, giunti attraverso i relativi
blog, abbiamo deciso di includere in appendice a questo nuovo manuale una promozione
per l’accesso gratuito e scontato a risorse utili ad approfondire online la conoscenza di
WordPress, basata su prodotti e servizi che possono rivelarsi preziosi nel lavoro di
sviluppo dei siti.
Collegandovi all’indirizzo http://www.wpaz.it/omaggiolettori e digitando la password
363promoguida88 accederete a una pagina riservata da cui potrete inviare uno speciale
modulo per ricevere gratuitamente tre guide in PDF dedicate rispettivamente alla SEO,
alla manutenzione e alla sicurezza di WordPress; nel messaggio ricevuto, inoltre, saranno
presenti una serie di sconti e promozioni su videocorsi e su training personalizzato via
Internet dal vivo e per l’acquisto di temi professionali per WordPress.
Ricordiamo, inoltre, che sul sito wpaz.it saranno periodicamente inseriti contenuti
speciali e promozioni accessibili esclusivamente ai lettori del libro, per accedere ai quali
sarà necessario quindi fare riferimento ad alcuni punti precisi del contenuto. Si
utilizzeranno, infatti, alcune parole estratte da specifiche didascalie delle immagini
presenti nel testo del libro, in modo da permetterne l’uso anche a chi acquista il volume in
formato ebook.
Indice analitico
A
accordion
Adminer
AdWord
aggiornamenti
Akismet
Altervista
Antispam Bee
articoli
articoli, formato
Artisteer
audio, playlist
B
Bacheca
backend
backup e ripristino
BackWPup Free
Bing Translator
blog, area nel sito
blurb
Broken Link Checker
Builder (iThemes)
C
caching
Caesium
call to action
Capability Manager Enhanced
captcha
carousel
categorie
chat
child theme (tema figlio)
colori (valore esadecimale)
commenti, disattivazione
commenti, gestione
Conditional CAPTCHA
Contact Form 7
contenuti, ottimizzazione
contenuti, protezione
CopyScape
correlati, post/articoli
cPanel, gestione file
CSS Plus
CSS, foglio stile
Cyberduck
D
database MySQL, creazione
database, backup
database, contenuto
database, creazione utente
database, ripristino
Divi (Elegant Themes)
DMS (ex PageLines)
documenti, pubblicazione
dominio, registrazione
Duplicate Theme
Duplicator
Dynamik Website Builder
E
Easy Contact Form 7 Widget
Easy Theme and Plugin Upgrades
editing, strumenti
editor di codice
EWWW Image Optimizer
F
Facebook
Facebook, widget
Fantastico Deluxe
Feedburner
Feedburner Email Subscription
Filezilla
filigrana (vedi watermark)
Floating Social Media Icon
footer (piè di pagina)
form (vedi moduli)
framework
FTP
G
gallerie
Genesis (StudioPress)
Google Doc Embedder
Google Language Translator
Google Maps
H
header (testata)
Headway Themes
hero section
home, voce del menu
hosting condiviso
I
Image Watermark
ImageOptim
immagine di sfondo
immagine in evidenza,
immagini, dettagli e modifica
immagini, inserimento
immagini, ottimizzazione
immagini, SEO
indicizzazione, blocco
installazione automatica
Isuu
iThemes Security
J
JetPack
K
keyword
Kstats Reloaded
L
lazy loading
lettura, impostazioni
lightbox
lingua, file della
link interni, creazione
link rotti
M
mappe di Google
Media File Renamer
menu, creazione e modifica
moduli, creazione
MotoPress Content Editor
N
newsletter
Newsletter
NextGen Gallery
nofollow
NoFollow Free
Notepad++
O
One-Click Child Theme
P
P3 (Plugin Performace Profiler)
PageLines (vedi DMS)
PageSpeed, Google
pagina iniziale (home), impostazione
pagina, attributi
pagine
pagine, ordinamento
parola chiave (vedi keyword)
password, contenuto protetto da
permalink
phpMyAdmin
piè di pagina (vedi footer)
Plagiarism
plagio
PlagSpotter
playlist audio
playlist video
plugin, gestione
plugin, installazione
PoEdit
prestazioni
Q
Quick Cache
Quick Page/Post Redirect
R
Really Simple CAPTCHA
reCAPTCHA (vedi captcha)
redirect (per i link)
Responsive Lightbox by dFactory
revisioni
rinomina file immagini
S
schermo intero, modalità
SEO Friendly Images
SEO, analisi
SEO, ottimizzazione
sfondo, colore
sfondo, immagine
Shareaholic
shortcode
Shortcodes Ultimate
sicurezza, fattori
Simple Custom CSS
Simple Links
sitemap
slider
Smart Watermark
Social Auto Poster
social, icone e pulsanti
Softaculous
sotto-pagine
SoundCloud, audio da
spam
StatCounter
statistiche
StatPress Reloaded
StatPress Visitors
Styles with Shortcodes
Subscribe to Comments Reloaded
Sucuri Site Check
T
tag
tema figlio (vedi child theme)
temi commerciali
temi gratuiti
temi, editor
temi, personalizzazione
temi, template
template pagina
testata (vedi header)
testata, personalizzazione
testimonial
Testo, modalità di editing
TextWrangler
theme builder
ThemeForest
Thesis
toggle
traduzione automatica
U
Ultimate Coming Soon
Ultimate NoFollow
Ultimatum Theme Builder
under construction
User Role Editor
utenti, nome (nickname)
utenti, ruolo
V
velocità (vedi prestazioni)
Very Simple Google Maps
video, inserimento
video, playlist
Vimeo, inserimento video da
Viper’s Video Quicktags
Visual Composer
Visual Composer
Visuale, modalità di editing
W
W3 Total Cache
watermark
Webmaster User Role
widget
Widget Contact Form 7
WordPres ShortCodes
WordPress Language
WordPress SEO by Yoast
WordPress, cartelle e file
WordPress.com
WP Content Copy Protection
WP Migrate DB
WP Smush.it
WP Super Cache
WP Translate
WP-DB-Backup
WPML
WP-Translation-Box
X
XAMPP
Y
YARPP (Yet Another Related Post Plugin)
YouTube, inserimento video da
Z
Zopim
Informazioni sul Libro
WordPress è utilizzato in tutto il mondo per creare un numero sempre più vasto di siti e
blog di ogni genere, grazie alla semplicità di installazione e utilizzo, alla sua f essibilità e
alla particolarità di essere facilmente indicizzato dai motori di ricerca.
Questa guida completa, aggiornata alla quarta versione del CMS, fornisce tutte le
informazioni per installare, conf gurare e utilizzare al meglio WordPress, illustrandone poi
ogni aspetto fondamentale con step graduali, immagini ed esempi pratici.
Tutte le funzionalità del CMS sono descritte nella loro forma originale e in seguito
ampliate con l’uso di plugin che estendono e potenziano ogni aspetto importante del
programma.
Particolare risalto viene dato all’argomento design, con una serie di capitoli dedicati alla
scelta, all’utilizzo e alla modif ca dei temi gratuiti e commerciali, e agli strumenti che
permettono di creare da zero la graf ca dei siti.
Oltre alla promozione del sito sui motori di ricerca e sui social media, ampio spazio è
dedicato alla manutenzione e alla sicurezza di WordPress, aspetti fondamentali per
conservare l’integrità e l’eff - cienza di ogni sito nel tempo.
Sul sito del libro, wpaz.it, sono disponibili approfondimenti, aggiornamenti e contenuti
esclusivi destinati ai lettori di questo volume.
Circa l’autore
Bonaventura Di Bello è giornalista, consulente e trainer in diversi ambiti
dell’informatica, del Web e della comunicazione digitale. Ha realizzato numerose
pubblicazioni di carattere pratico e didattico, e da oltre due decenni è autore di numerosi
articoli su riviste di informatica e online. Oltre allo sviluppo di progetti per il Web basati
su WordPress, si occupa di formazione e consulenza individuale e di gruppo, in presenza e
a distanza, sull’utilizzo degli strumenti per la pubblicazione e la promozione di contenuti e
brand sul Web e nei social media.
Table of Contents
Frontespizio
Copyright
Indice
Perché questo libro
Capitolo 1: Hosting, installazione e configurazione
1.1 Oltre il blog
1.2 Dominio e hosting
1.3 Il database MySQL
1.4 Installazione automatica di WordPress da cPanel
1.5 Creazione del database MySQL
1.6 Installazione di WordPress su hosting
1.7 Installazione di WordPress “in locale”
1.8 L’area amministrativa (backend)
Capitolo 2: Contenuti e navigazione
2.1 Pagine e strumenti di composizione
2.2 Impostazioni di pubblicazione
2.3 Attributi pagina
2.4 Menu e altri elementi di navigazione
2.5 Articoli
2.6 Permalink
2.7 Gestione di gruppo per pagine e articoli
2.8 Immagini
2.9 Video
2.10 Audio
2.11 Altri formati di file
Capitolo 3: Struttura e layout
3.1 Anatomia di un tema
3.2 Temi gratuiti
3.3 Temi commerciali
3.4 Impostazioni e personalizzazione
3.5 Widget
3.6 Editor e child theme
3.7 Strumenti per la creazione di layout e temi
Capitolo 4: Sviluppo di un sito di base
4.1 Dopo l’installazione
4.2 Scelta e personalizzazione del tema
4.3 Creazione pagine e menu
4.4 Modifiche al codice del tema
4.5 Inserimento di una mappa di Google
4.6 Inserimento di un modulo contatti
4.7 Creazione di un’area blog o news
Capitolo 5: Traduzioni e multi-lingua
5.1 Traduzione di WordPress e dei relativi temi e plugin
5.2 Traduzione automatica dei contenuti di un sito
5.3 Siti multi-lingua con WPML
Capitolo 6: Promozione del sito
6.1 Ottimizzare i contenuti per il pubblico
6.2 Ottimizzare i contenuti per i motori
6.3 Plugin aggiuntivi per la SEO
6.4 WordPress e social media
6.5 Interazione e fidelizzazione
Capitolo 7: Manutenzione e sicurezza
7.1 Cartelle, file e database
7.2 Backup
7.3 Ripristino e migrazione
7.4 Sicurezza
7.5 Accesso a contenuti e backend
7.6 Protezione dallo spam
7.7 Aggiornamenti
7.8 Ottimizzazione
Capitolo 8: Scelta e utilizzo dei temi
8.1 Scelta del tema
8.2 Layout dei temi
8.3 Creazione di un sito con un tema gratuito
Capitolo 9: Creare un layout con Divi
9.1 Installazione e primi passi
9.2 Aree ed elementi
9.3 Sviluppo di un sito con Divi
Appendice: WordPress 4
10.1 Le novità di WordPress 4
Risorse utili
Un regalo per i lettori
Indice analitico
Informazioni sul Libro
Circa l’autore