WEBMASTER CON WORDPRESS - CREARE RAPIDAMENTE E FACILMENTE SITI WEB PROFESSIONALI A COSTO ZERO WEB PRO + - WORDPRESS GUIDA COMPLETA
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
NU
OV
A
ED
IZ
BONAVENTURA DI BELLO IO
NE
Webmaster
con WordPress
[ CREARE RAPIDAMENTE E FACILMENTE
SITI WEB PROFESSIONALI A COSTO ZERO
]
Web Pro +Webmaster con WordPress Nuova edizione
Dedico questo manuale a tutti coloro che sapranno trarne beneficio per migliorare le proprie competenze nell’uso di WordPress, riconoscendo e apprezzando l’impegno con cui è stato realizzato. Bonaventura Di Bello
Bonaventura Di Bello
Webmaster
con WordPress
Creare rapidamente e facilmente
siti web professionali a costo zero
Nuova edizione
EDITORE ULRICO HOEPLI MILANOCopyright © Ulrico Hoepli Editore S.p.A. 2017 via Hoepli 5, 20121 Milano (Italy) tel. +39 02 864871 – fax +39 02 8052886 e-mail hoepli@hoepli.it www.hoepli.it Tutti i diritti sono riservati a norma di legge e a norma delle convenzioni internazionali Le fotocopie per uso personale del lettore possono essere effettuate nei limiti del 15% di ciascun volume/fascicolo di periodico dietro pagamento alla SIAE del compenso previsto dall’art. 68, commi 4 e 5, della legge 22 aprile 1941 n. 633. Le fotocopie effettuate per finalità di carattere professionale, economico o commerciale o comunque per uso diverso da quello personale possono essere effettuate a seguito di specifica autorizzazione rilasciata da CLEARedi, Centro Licenze e Autorizzazioni per le Riproduzioni Editoriali, Corso di Porta Romana 108, 20122 Milano, e-mail: autorizzazioni@clearedi.org e sito web: www.clearedi.org. ISBN 978-88-203-7820-2 Ristampa: 4 3 2 1 0 2017 2018 2019 2020 2021 Progetto editoriale: Maurizio Vedovati – Servizi editoriali (info@iltrio.it) Copertina: Sara Taglialegne Stampa: L.E.G.O. S.p.A., stabilimento di Lavis (TN) Printed in Italy
Sommario Prefazione IX Ringraziamenti XI Nota sull’autore XIII Capitolo 1 Perché WordPress 1 Capitolo 2 Le fasi di realizzazione del sito 7 Preparare il materiale............................................................................................................................. 7 Identificare la tipologia del sito/tema...................................................................................................... 8 Installare e configurare WordPress....................................................................................................... 10 Creare il contenuto e la struttura.......................................................................................................... 11 Scegliere e installare il tema................................................................................................................. 12 Personalizzare il tema........................................................................................................................... 13 Consegna del sito.................................................................................................................................. 13 Capitolo 3 Anatomia di un sito WordPress 15 La home page........................................................................................................................................ 19 Testata e logo......................................................................................................................................... 21 Menu principale e secondario............................................................................................................... 25 Slider e “hero image”............................................................................................................................ 27 Corpo centrale e contenuto................................................................................................................... 29 Piè di pagina e “aree widget”................................................................................................................ 32 Responsiveness..................................................................................................................................... 37 Capitolo 4 Scegliere un tema 39 Temi gratuiti........................................................................................................................................... 40
Sommario Temi commerciali.................................................................................................................................. 46 Creazione di temi e layout..................................................................................................................... 53 Da Photoshop a WordPress................................................................................................................... 55 Utilizzo di framework............................................................................................................................. 57 Modifica di temi esistenti....................................................................................................................... 60 Builder e visual composer..................................................................................................................... 62 Software per la creazione di temi.......................................................................................................... 66 Scoprire il tema utilizzato da un sito..................................................................................................... 68 Capitolo 5 Sviluppo di un sito di base 73 Impostazioni iniziali............................................................................................................................... 74 Installare e configurare un plugin per “sito in costruzione”................................................................. 78 Creare una pagina con testo e immagini . ............................................................................................ 85 Inserire contenuto fittizio...................................................................................................................... 91 Gli articoli (post)..................................................................................................................................... 94 Link, codice e shortcode........................................................................................................................ 98 Home page, blog e menu..................................................................................................................... 104 Personalizzazione del tema................................................................................................................. 108 Le aree widget..................................................................................................................................... 112 Child theme e modifiche al codice...................................................................................................... 117 Capitolo 6 Creare un sito standard 125 Creazione di un sito standard con GeneratePress.............................................................................. 126 Creare un sito standard con Square (Quadrata).................................................................................. 134 Capitolo 7 Creare un sito e-commerce 143 Installazione del plugin WooCommerce.............................................................................................. 144 Importazione dei prodotti di esempio.................................................................................................. 147 Configurazione e test del negozio....................................................................................................... 150 Capitolo 8 Dal blog al web magazine 153 Sviluppare un blog professionale........................................................................................................ 154 Dal blog al web magazine.................................................................................................................... 166 Capitolo 9 Siti mono-pagina 181 Creare un sito one page....................................................................................................................... 182 Capitolo 10 Siti portfolio e gallery 205 Creare un sito portfolio/gallery........................................................................................................... 206 Capitolo 11 Sviluppo di siti con builder 221 Usare un builder per creare un sito standard..................................................................................... 222 VI
Sommario
Capitolo 12 Traduzioni e siti multi-lingua 237
Traduzione di temi e plugin................................................................................................................. 238
Traduzione dei contenuti e siti multi-lingua....................................................................................... 245
Capitolo 13 WordPress: installazione, configurazione, manutenzione 255
Dominio e hosting................................................................................................................................ 256
Installare WordPress........................................................................................................................... 265
Configurazione iniziale........................................................................................................................ 271
Backup e aggiornamenti..................................................................................................................... 278
Impostazioni di sicurezza.................................................................................................................... 284
Miglioramento delle prestazioni.......................................................................................................... 289
Migrazione del sito............................................................................................................................... 293
Configurazione della SEO e statistiche............................................................................................... 296
Consegna del sito o dell’accesso ai contenuti..................................................................................... 301
Capitolo 14 Risorse utili 305
Un regalo per i lettori........................................................................................................................... 305
VIIPrefazione
Come usare questo libro
In modo simile alla prima edizione, affermatasi come guida di riferimento di WordPress
per diversi anni fino al completo esaurimento della versione a stampa, questa nuova edi-
zione non rappresenta un manuale “tradizionale”, anche perché nel frattempo quest’ul-
timo ha preso forma con il volume WordPress – La guida completa, che consigliamo di af-
fiancare a questo libro come guida di consultazione generale e riferimento per tutti gli
aspetti legati all’argomento.
L’approccio di Webmaster con WordPress rimane, quindi, quello originale e apprezzato
dai suoi lettori, relegando tutta la parte più tecnica, come l’installazione e la manutenzio-
ne del CMS, ai capitoli finali del libro, e dedicando invece un’ampia sezione del volume a
una serie di progetti pratici e a quelle tematiche potenzialmente più interessanti per un
webmaster che abbia deciso di “convertirsi” a WordPress o di muovere i suoi primi passi
nello sviluppo web proprio attraverso questa popolare piattaforma. La maggior parte de-
gli hosting è ormai dotata, infatti, di un sistema di installazione guidato del CMS, che sarà
comunque illustrato nella parte finale del libro, con il quale anche i meno esperti possono
essere rapidamente operativi nello sviluppo.
Se, quindi, avete già a disposizione un’installazione pronta per l’uso di WordPress,
potrete cominciare a fare pratica nella creazione delle tipologie di siti web professionali
descritti nella prima parte del libro, familiarizzando eventualmente con l’interfaccia del
CMS nella creazione di contenuti attraverso i capitoli che precedono i progetti, oppure
saltando questi ultimi se avete già maturato una certa esperienza con l’area amministra-
tiva e gli strumenti di creazione dei contenuti di WordPress. Se, al contrario, volete segui-
re l’iter tradizionale partendo dalla scelta dell’hosting e dall’installazione del CMS, vi ba-
sterà seguire le indicazioni presenti nella parte finale del volume, approfondendo gli ar-Prefazione
gomenti in base al vostro grado di esperienza e sorvolando su quelle informazioni e su
quei dettagli che, per quanto potrebbero risultare superflui a molti, non potevano essere
tralasciati, essendo quest’opera finalizzata a offrire tutti gli strumenti fondamentali per
lo sviluppo professionale di siti web a un pubblico più vasto possibile.
Il volume è strutturato, perciò, in modo da permettere un approccio graduale ma non
necessariamente sequenziale. I diversi capitoli rappresentano tutte le fasi di apprendi-
mento e utilizzo di WordPress nella creazione di un sito professionale e sono raggruppa-
ti e disposti in modo da evitare inutili ripetizioni e approfondimenti non necessari all’in-
terno di ogni singola sezione. Sta a voi scegliere l’approccio più adatto alla vostra espe-
rienza e alle vostre esigenze.
Per quanto riguarda i temi e i plugin utilizzati nei progetti descritti all’interno dei capi-
toli dedicati, ho ritenuto utile offrire ai lettori la possibilità di seguirli mostrandone la
versione utilizzata durante la stesura del libro, in modo da evitare possibili incongruenze
fra quanto illustrato nel testo e attraverso le immagini. Chi lo desidera, quindi, potrà sca-
ricare gratuitamente tale materiale, fornito in diversi formati per altrettante modalità di
utilizzo, seguendo le istruzioni inserite nell’ultima pagina del libro e sulla pagina a questo
dedicata sul sito bonaventuradibello.com. Inoltre, dalla stessa pagina sarà possibile vi-
sualizzare i siti creati attraverso i progetti stessi, usando i link forniti appositamente.
Parte di quanto è stato impossibile includere nelle pagine di questo manuale potrà
eventualmente essere trattata, qualora vi fosse una richiesta da parte di un numero suf-
ficiente di lettori, nell’area che gli è stata dedicata sul sito bonaventuradibello.com, oltre
che nelle aree riservate agli altri libri sullo stesso sito, dove sarà possibile intervenire con
commenti, suggerimenti e richieste per aggiungere alla staticità del libro l’interazione e
l’aggiornamento dinamico che solo il web riesce a offrire.
Infine, allo scopo di renderne più comoda la digitazione e nello stesso tempo consen-
tirne un aggiornamento futuro, la maggior parte dei link alle risorse segnalate nel volu-
me presenta una forma abbreviata che fa riferimento al sito wpaz.it, seguita da un valore
numerico (wpaz.it/XX). In questo modo sarà possibile correggere i diversi riferimenti qua-
lora la risorsa associata subisca un cambiamento nel suo indirizzo (URL), eventualità che,
nel caso, siete invitati a segnalare a vostra volta.
Non mi resta quindi che darvi il benvenuto in WordPress e augurarvi un sincero in
bocca al lupo per la vostra nuova (o rinnovata) carriera di webmaster!
XRingraziamenti La mia profonda gratitudine all’editore Hoepli e al team che mi ha sostenuto nella realiz- zazione di questa nuova opera con l’apprezzamento del suo progetto e la cura nella sua impaginazione e revisione. Grazie anticipato, infine, a chi mostrerà il suo apprezzamento promuovendo questo libro con una recensione o un commento positivi, tanto online quan- to offline.
Nota sull’autore
BONAVENTURA DI BELLO
Bonaventura Di Bello non è un webmaster come tutti gli altri: pur avendo
utilizzato il web in modo “attivo” da quando è stato creato, ha esplorato
ogni altra risorsa di Internet prima ancora che fosse introdotto il concetto
di “browser”, ovvero gli strumenti della Rete basati su testo e, prima an-
cora di questi, le banche dati e le BBS.
Il suo primo libro dedicato alla Rete è stato, infatti, Internet Tour ’95
(Xenia Edizioni, 1995) e già faceva seguito a una carriera giornalistica e divulgativa inizia-
ta almeno dieci anni prima e preceduta da quella di sviluppatore di “interactive fiction”,
un fenomeno videoludico allora noto in Italia come “giochi d’avventura”, storie interattive
create per gli home computer più diffusi dell’epoca. Nei decenni di evoluzione digitale, la
sua carriera giornalistica e divulgativa è passata in modo naturale dalla carta (mai ab-
bandonata del tutto) ai CD-ROM multimediali e, da questi, al web, dove il blogging, la SEO
e il content marketing hanno affiancato lo sviluppo e la sperimentazione con WordPress.
Al suo ruolo di divulgatore non ha mai smesso di affiancare quello di docente e trainer,
svolto in aula e in remoto, in sessioni individuali e di gruppo, con la possibilità di speri-
mentare la formazione con un pubblico eterogeneo e calibrare così la metodologia didat-
tica impiegata parallelamente in manuali e video-corsi.
Sempre attento alle mutazioni della tecnologia, ha seguito e trattato l’evoluzione dei
dispositivi informatici, dai primi personal computer agli attuali smartphone e tablet, così
come quella del web e dei social network, acquisendo di volta in volta gli strumenti e le
conoscenze che gli hanno permesso di trasmetterne in modo chiaro e originale, attraverso
la divulgazione, aspetti e caratteristiche a un pubblico sempre più vasto, con un linguaggio
adatto anche ai meno esperti, affinato dalla lunga carriera formativa oltre che editoriale.8
Dal blog
al web magazine
Essendo nato come piattaforma per il blogging, WordPress mantiene ancora questa sua
peculiarità che, inevitabilmente, influenza molti dei temi gratuiti presenti sul sito ufficia-
le. In effetti, i temi predefiniti di WordPress possono rappresentare, da soli, una soluzione
ottimale per qualsiasi blog, anche perché sono sempre più ottimizzati e curati dal punto
di vista del codice.
La scelta di un tema alternativo, tuttavia, può essere dettata sia da motivi puramente
estetici sia da esigenze funzionali e strutturali, e per fortuna la gamma di possibilità è
davvero ampia in questo senso.
Se, poi, dal semplice blog si decide di passare a un layout più complesso e sofisticato
e trasformare il blog in un “magazine”, anche in questo caso si avrà a disposizione un’am-
pia scelta tanto fra i temi gratuiti quanto fra quelli commerciali.
Giova ricordare come la differenza fra un tema gratuito e un tema commercia-
le sia rappresentata soprattutto dalla garanzia di aggiornamento e assistenza nota
che il secondo può offrire. Come abbiamo visto, tuttavia, esistono situazioni in
cui un tema commerciale (anche costoso) smette di essere aggiornato e se-
guito dallo sviluppatore, così come temi gratuiti continuano a evolversi e con-
quistare un pubblico sempre più vasto, spingendo i loro sviluppatori a prose-
guire tanto nell’aggiornamento quanto nell’assistenza. Restano quindi validi i
consigli dati nel Capitolo 4 a proposito della scelta di un tema.
In questo capitolo saranno utilizzati, per gli esempi pratici di sviluppo, due temi, di cui
il primo progettato specificamente per i blog e il secondo dedicato al più complesso lay-Capitolo 8
out di un web magazine. In questo caso proveremo a usare i dati di esempio del primo
progetto anche per il secondo, allo scopo di rendere più naturale la transizione fra le due
tipologie di sito.
Sviluppare un blog professionale
All’argomento specifico del blogging è stato dedicato un intero manuale, intitolato appunto
Blogging professionale con WordPress, di cui trovate i dettagli nell’area dedicata sul sito
bonaventuradibello.com. Questo capitolo ha soprattutto l’obiettivo di introdurre alle tecni-
che di sviluppo di questo genere di siti, con la scelta di un tema dall’aspetto professionale
e l’abbinamento di alcuni plugin idonei a migliorare ulteriormente l’estetica e la funziona-
lità del blog. Tutto ciò che per ovvi motivi di spazio, e obiettivi del libro, non è stato possibi-
le includere in queste pagine potrà quindi essere approfondito sul volume già menzionato.
Il tema scelto per il primo progetto di questo capitolo è il già menzionato Bulan (Figu-
ra 8.1), ma prima di procedere con il suo utilizzo sarà utile riepilogare le operazioni che
permettono di creare i contenuti adatti a un blog, basati in questo caso prevalentemente
sugli articoli (post). Anche in questo caso sarà possibile, per i lettori che si registreranno
sul sito, usufruire dei contenuti di esempio pronti da importare per procedere più facil-
mente e velocemente con lo sviluppo del sito di prova, ma naturalmente le indicazioni
fornite in questo capitolo sono perfettamente adattabili a un progetto i cui contenuti siano
stati già sviluppati.
Passiamo quindi a riassumere, brevemente, le caratteristiche e gli elementi che non
possono mancare in un blog professionale:
1. Articoli ricchi di contenuto
Gli articoli, detti in gergo post, sono il “succo” di un blog e ne denotano il valore
tanto per i lettori quanto per i motori di ricerca. Pubblicare articoli abbastanza lun-
ghi ma soprattutto interessanti e ben strutturati è ormai una premessa imprescin-
dibile per il successo di un blog.
2. Immagini
Le immagini giocano un ruolo altrettanto fondamentale all’interno del testo, sotto
forma di singole illustrazioni (eventualmente arricchite da didascalia) o gallerie.
Svolgono, inoltre, un’importante funzione come “immagini in evidenza”, che i temi
più professionali utilizzano come accattivante incentivo alla lettura.
3. Riassunti
La funzione di “riassunto”, utilizzabile per mezzo dell’apposito pannello disponibi-
le nell’area di editing degli articoli (e richiamabile dal solito pulsante Impostazioni
schermata), è utilissima per creare anteprime efficaci di un contenuto, ed è quindi
altamente consigliato il suo utilizzo.
154Dal blog al web magazine
Figura 8.1 – Un’anteprima del tema Bulan (wpaz.it/287), utilizzato per il progetto di blog
sviluppato nella prima parte di questo capitolo: si noti l’uso efficace delle immagini per
arricchire i contenuti e renderli più appetibili.
4. Categorie e tag
Classificare gli articoli con l’utilizzo efficace di categorie (e sotto-categorie, se ne-
cessario) e di etichette, o tag, è un altro aspetto che migliora la fruizione da parte
del pubblico e nel contempo l’indicizzazione e il posizionamento dei contenuti da
parte dei motori. Soprattutto nel caso dei web magazine, un uso intelligente delle
categorie si traduce in una migliore strutturazione dei contenuti nella home page.
5. Plugin e widget
I plugin, così come i widget, possono migliorare tanto la navigazione quanto l’inte-
razione con i lettori, aggiungendo per esempio i pulsanti di condivisione social op-
pure visualizzando un elenco di contenuti con tanto di anteprima. Ancora più utili,
in quest’ottica, sono quei plugin e quei widget che migliorano funzionalità già esi-
stenti in WordPress.
6. Layout e aree widget
La disponibilità di modelli strutturali (layout) diversi all’interno di un tema permet-
te di presentare i contenuti nel modo più adatto, migliorando l’esperienza del pub-
blico. Lo stesso avviene con le aree widget, che possono rappresentare uno spazio
idoneo per la presentazione dei contenuti e un incentivo per i lettori a rimanere sul
blog ed esplorarli.
155Capitolo 8
Tenendo in considerazione gli aspetti appena elencati, cercate sempre di ottimizzare i
vostri contenuti sfruttando gli strumenti che WordPress vi mette a disposizione e sfor-
zandovi di offrire al pubblico un valore unico e riconoscibile. Anche se nel progetto che
stiamo per sviluppare i contenuti sono fittizi, non vi sarà difficile riconoscere l’applicazio-
ne di molti degli aspetti appena descritti e il risultato che ne consegue.
Figura 8.2 – Un esempio di come appare la home del blog subito dopo l’installazione del tema.
Si noti l’assenza di vari elementi, come l’immagine della testata, e i widget aggiuntivi
nella barra laterale.
Una volta installato e attivato il tema Bulan con la solita procedura, caricando la home
page del sito sarà facile riscontrare le differenze rispetto alla versione dimostrativa del
tema visualizzata sul sito originale (Figura 8.2), ma come vedremo fra poco non è difficile
configurare e attivare tutte le caratteristiche alla base della veste elegante che la demo
rappresenta.
A differenza di quanto accade per i siti, i blog non richiedono necessariamente
nota l’impostazione di una home page con l’assegnazione di una “pagina statica”
come abbiamo visto nei progetti precedenti, né tantomeno la definizione di una
pagina “blog”, in quanto WordPress è già configurato, nella sua impostazione
predefinita, per visualizzare nella home un elenco degli articoli in ordine cro-
nologico inverso.
156Dal blog al web magazine
La prima operazione che possiamo fare riguarda la testata, che come sempre potre-
mo definire all’interno dell’area di personalizzazione del tema cliccando su
Aspetto>Personalizza e selezionando in questo caso Header e poi Immagine della testata
(Figura 8.3). In alcuni casi le traduzioni del tema possono riportare il termine originale
“header” al posto di “testata”, ma i comandi restano comunque validi. Utilizzando il pul-
sante Aggiungi nuova immagine potremo così selezionare quella desiderata, le cui dimen-
sioni consigliate sono di 2000x480 pixel ma che, se di maggiori dimensioni, potrà essere
facilmente ritagliata dopo il caricamento.
Figura 8.3 – L’inserimento di un’immagine per la testata del tema. Si noti l’opzione in basso
per utilizzare più immagini rendendone casuale la visualizzazione.
Un’altra differenza che salterà subito all’occhio confrontando l’anteprima del sito in
cui è stato appena installato il tema e la demo ufficiale di quest’ultimo è la lunghezza
degli articoli visualizzati nella home, che nel secondo caso risultano “troncati” e presen-
tano il pulsante Continue reading (ci occuperemo più avanti delle traduzioni di elementi
come questo).
La differenza è dovuta all’utilizzo del cosiddetto “tag more” (in italiano “leggi tutto”),
ovvero un marcatore che, inserito all’interno del contenuto, ne limita la visualizzazione
fino al punto in cui è presente, se il tema prevede questa funzione per le anteprime degli
articoli.
Per far sì che la visualizzazione di anteprima di un articolo si interrompa in un punto
specifico del testo, basta posizionare il cursore nel punto desiderato mentre si modifica
157Capitolo 8
l’articolo e cliccare sul penultimo pulsante della fila superiore di strumenti per l’editing
(Figura 8.4), ottenendo così la visualizzazione di una linea tratteggiata che riporta al cen-
tro la parola MORE e indica, appunto, la suddivisione fra anteprima e resto del contenuto,
che riguarderà soltanto l’anteprima e non sarà visibile, quindi, nella visualizzazione inte-
grale dell’articolo.
Figura 8.4 – L’inserimento del “tag more” (“Leggi tutto”) per mezzo dell’apposito strumento
presente nel pannello di editing dei contenuti di WordPress. Si noti come il marcatore venga
visualizzato sotto forma di tratteggio per indicarne la posizione nel testo dell’articolo.
Il passaggio successivo potrebbe essere la configurazione delle aree widget affinché
mostrino gli stessi elementi visibili nella versione dimostrativa del tema. Ciò comporte-
rà prima di tutto la rimozione di tutti i widget predefiniti che WordPress inserisce all’in-
terno della barra laterale del tema, che nel caso di Bulan si chiama Primary Sidebar
(Figura 8.5), e l’inserimento dei nuovi widget, ottenuto cliccando su questi ultimi e sele-
zionando l’area di destinazione o semplicemente trascinandoli al suo interno.
Il primo elemento visibile nella demo è semplicemente un widget di testo per il quale
è stato definito titolo e contenuto in modo da presentare il blog o l’eventuale autore, se
singolo (Figura 8.5).
Il secondo widget, invece, viene installato insieme al tema e si chiama Social Icons:
infatti permette di visualizzare le icone dei profili social associati al blog inserendo sem-
plicemente il link corrispondente a ognuno di essi.
158Dal blog al web magazine
Figura 8.5 – L’inserimento del widget Testo contenente la presentazione del blog o dell’autore
all’interno della barra laterale del tema (Primary Sidebar).
Per il terzo widget è stato usato quello predefinito delle Categorie, attivando semplice-
mente l’opzione Mostra conteggio articoli per visualizzare appunto i post presenti in ognu-
na delle categorie del blog.
Il quarto widget è ancora una volta fra quelli installati insieme al tema, ed è infatti una
versione alternativa di quello standard degli articoli recenti, in questo caso chiamato Re-
cent Posts Thumbnails in quanto permette di visualizzare anche le miniature, “thumbnail”
in inglese, delle immagini in evidenza associate ai singoli post. Nel widget è stata attivata,
in questo caso, l’opzione che visualizza la data dell’articolo (Figura 8.6).
159Capitolo 8
Figura 8.6 – I widget della barra laterale al completo: si notino i due elementi Social Icons
e Recent Posts Thumbnails, aggiunti dal tema a quelli predefiniti di WordPress, con in evidenza
le impostazioni del secondo.
Per quanto riguarda i widget presenti nel piè di pagina della demo, i primi due sono
semplicemente quelli delle categorie e degli articoli recenti con miniatura, già utilizzati
nella barra laterale, seguiti dal widget Tag Cloud. Il piè di pagina vero e proprio, invece, è
facilmente configurabile nella schermata Personalizza, cliccando sulla voce General e in-
tervenendo poi sulla sezione Social, dove basta aggiungere come sempre i link ai profili
esistenti, e infine sulla sezione Footer Text, che contiene appunto il testo visualizzato nel
piè di pagina. Nel modificare il contenuto di quest’ultimo è importante, come sempre,
fare attenzione a non introdurre errori nell’eventuale codice HTML, per esempio quello
relativo all’URL.
Il numero di articoli visualizzato nella home e nelle pagine seguenti è inizial-
nota mente impostato su 10 nella configurazione predefinita di WordPress, mentre
nella demo del tema si vedono cinque articoli per pagina. Per cambiare questa
impostazione basta agire sull’opzione Le pagine del blog visualizzano al massi-
mo all’interno della schermata raggiungibile cliccando su Impostazioni>Lettura.
160Dal blog al web magazine
Osservando i primi due articoli della versione dimostrativa del tema noterete sicura-
mente il breve testo di colore più chiaro e le gallerie di immagini presenti prima del con-
tenuto principale (Figura 8.7). Il primo è semplicemente il “riassunto” (in inglese
“excerpt”) definito per l’articolo per mezzo del pannello omonimo già descritto all’inizio
del capitolo. Le gallerie, invece, anche se composte usando la funzione predefinita di
WordPress che è stata già illustrata nel Capitolo 6, sono gestite in questo caso con uno
degli strumenti presenti all’interno del plugin Jetpack invece che utilizzando un plugin
“lightbox”, che rimane comunque valido come alternativa.
Figura 8.7 – Uno dei due articoli contenenti il riassunto e la galleria di immagini. Si noti come
la testata del tema cambi in funzione dell’immagine in evidenza associata all’articolo
visualizzato.
Jetpack è un plugin molto popolare in quanto permette di riprodurre, all’interno di una
installazione di WordPress su hosting personale, molte delle funzioni presenti sulla piat-
taforma di blogging WordPress.com, alla quale va tuttavia collegato, dopo l’installazione,
per poter essere utilizzato in tutte le sue funzionalità (Figura 8.8). Questo “collegamen-
to”, richiesto subito dopo l’attivazione del plugin, non implica ovviamente alcun obbligo
particolare riguardo alla registrazione sulla piattaforma associata, ma serve semplice-
mente per attivare tutte le funzionalità presenti, alcune delle quali gestite proprio dai
server di WordPress.org.
161Capitolo 8 Figura 8.8 – Un tipico messaggio di invito a creare il collegamento fra Jetpack e WordPress. com, registrandosi gratuitamente su quest’ultimo se non si possiede già un account. Il plugin visualizza questo messaggio, con il relativo pulsante, in vari punti del back-end finché non si procede, appunto, alla registrazione. Una volta collegato Jetpack a un account esistente (o creato ad hoc) su WordPress.com, confermando i vari passaggi intermedi e selezionando l’opzione gratuita nella parte finale del procedimento, si ritornerà all’area amministrativa del sito dove, attraverso il sotto- menu Impostazioni di Jetpack, sarà possibile attivare le diverse funzioni disponibili (Figura 8.9), fra cui quella detta Carousel, che visualizza appunto le gallerie di immagini con la modalità vista nella versione dimostrativa del tema ed è inclusa nel gruppo Appearance. Figura 8.9 – La schermata principale delle impostazioni di Jetpack. Si notino il nuovo menu di Jetpack aggiunto alla barra di amministrazione principale di WordPress e il sotto-menu Impostazioni che permette appunto di accedere all’elenco delle funzionalità del plugin e di gestirle. 162
Dal blog al web magazine
Gli strumenti che Jetpack mette a disposizione sono diversi ed è facile confon-
dersi, anche a causa dei frequenti cambiamenti nell’interfaccia apportati dai nota
vari aggiornamenti, tuttavia nella barra presente all’interno della schermata
delle impostazioni è presente una icona a forma di lente con cui si può cercare
la funzione desiderata (Figura 8.9). L’installazione e attivazione di Jetpack ren-
de disponibile, tra gli altri strumenti, la condivisione sui social network da par-
te del pubblico, gestita per mezzo delle relative icone la cui configurazione
avviene, come per tutte le altre funzioni del plugin, dalla relativa opzione pre-
sente nell’elenco dell’area Impostazioni di Jetpack.
Continuando con le impostazioni per ottenere tutto quanto mostrato dalla demo del
tema, possiamo creare le due modalità di visualizzazione del blog richiamate dal sotto-
menu Home Grid e Home List del primo menu visualizzato appunto nella versione dimo-
strativa sul sito ufficiale. Questi due diversi layout si ottengono creando le rispettive pa-
gine, vuote, e scegliendo dal menu presente sotto la voce Modello del pannello Attributi
pagina una delle due opzioni disponibili, ovvero rispettivamente Blog Grid Template e Blog
List Template (Figura 8.10).
Figura 8.10 – Le due opzioni di template per la visualizzazione a griglia e a elenco,
selezionabili nel pannello Attributi pagina per creare una pagina di indice degli articoli
strutturata in modo più elegante.
163Capitolo 8
Per quanto riguarda, invece, la visualizzazione dell’articolo in alto con dimensioni
maggiori, è possibile ottenerla utilizzando l’opzione di WordPress Metti questo articolo in
evidenza, che si trova nella sezione Visibilità del pannello Pubblica all’interno dell’area di
editing del contenuto (Figura 8.11).
Quest’opzione, sempre disponibile in WordPress, viene utilizzata anche nella visualiz-
zazione standard del blog, e serve appunto per posizionare in alto un articolo specifico in
modo che resti fisso e preceda quelli pubblicati di volta in volta nel tempo.
Figura 8.11 – L’opzione Metti questo articolo in evidenza, a destra nella sezione Visibilità
del pannello Pubblica, all’interno dell’area di editing degli articoli.
La pagina Gallery della demo, invece, è ottenuta per mezzo dell’opzione Gallerie af-
fiancate di Jetpack, vedi Figura 8.9, che va quindi prima di tutto attivata nell’elenco delle
opzioni del plugin, quindi confermata e configurata con le nuove impostazioni che questa
inserirà all’interno della schermata Impostazioni>Media, raggiunta cliccando sul link
Configura che sarà reso disponibile una volta attivato lo strumento di Jetpack sopra
menzionato.
Completate le operazioni appena descritte, potremo creare una galleria come già visto
con l’opzione Aggiungi media>Crea galleria presente in WordPress, selezionando poi una
delle nuove opzioni ora presenti nel menu della seconda schermata di creazione della
galleria, in questo caso Mosaico rettangolare (Figura 8.12), impostando eventualmente
durante la creazione della pagina il layout a pagina piena, 1 Column Wide (Full Width), nel
pannello Layout.
164Dal blog al web magazine
Figura 8.12 – Le nuove opzioni introdotte da Jetpack nella seconda schermata di creazione
della galleria in WordPress.
Le restanti pagine dimostrative sono ottenute con varie procedure e aggiunte poi al
menu utilizzando i due menu principali fittizi Features e Page Layout per mezzo dell’opzio-
ne Link personalizzati, con il cancelletto (#) al posto del link.
Volendone riassumere rapidamente la creazione, eccole descritte in sintesi:
1. Popup Gallery
Si tratta semplicemente dell’articolo In The Park, contenente appunto la galleria
con effetto lightbox di Jetpack, cui è stato cambiato il nome nella voce di menu
(etichetta di navigazione).
2. Attachment Page
In questo caso si tratta di un link personalizzato, per cui oltre a definire l’etichetta
di navigazione è stato incollato il link a una delle immagini della libreria media,
copiandolo da Vedi pagina allegato.
3. Typography
Si tratta di una semplice pagina, in cui è stato incollato il contenuto standard utiliz-
zato per testare la formattazione del testo nei temi di WordPress con i vari stili.
4. Author page
Si ottiene usando nel link personalizzato, dopo averne compilato l’etichetta della
voce di menu, il formato nomesito.it/author/nomeutente, dove nomeutente è quello
dell’autore. Le informazioni, testo descrittivo e link social, che compaiono prima
165Capitolo 8
dell’elenco degli articoli associati all’utente/autore, vanno compilate nel suo profi-
lo all’interno della relativa schermata di amministrazione di WordPress, e in que-
sto caso sono fittizie.
5. Category Page
Questa è semplicemente una pagina di categoria, creata selezionando quest’ultima
dal pannello Categorie nella schermata di gestione dei menu. La descrizione della
categoria va invece compilata nella schermata Articoli>Categorie di WordPress.
6. Fullwidth
Una semplice pagina cui è stato associato il layout 1 Column Wide (Full Width) per
ottenere una pagina piena, ovvero senza barre laterali.
7. Sidebar / Content
Idem come sopra, ma ottenuta associando il layout 2 Columns: Sidebar / Content
per posizionare la barra laterale a sinistra del contenuto.
8. Content / Sidebar
Anche in questo caso una semplice pagina, cui è stato applicato il layout 2 Columns:
Sidebar / Content, posizionando quindi la barra laterale a destra.
Nella seconda parte di questo capitolo vedremo come effettuare la transizione dal
tradizionale formato del blog a un vero e proprio web magazine, usando ancora una volta
un tema gratuito progettato per riprodurre questa seconda tipologia di sito.
Dal blog al web magazine
A differenza dei temi per blog, quelli per web magazine presentano, nella home, una
struttura più complessa che lascia spazio a elementi in grado di riassumere ed evidenzia-
re un maggior numero di contenuti, strutturandoli in maniera organizzata all’interno di
aree ben delineate.
Per ottenere tale struttura questi temi fanno quasi sempre uso di colonne multiple,
alcune delle quali basate su aree widget, su cui distribuire appunto gli elementi che elen-
cano o mettono in evidenza gli articoli presenti sul sito. Hueman (Figura 8.13) è uno dei
più popolari temi di questo tipo, ed è stato scelto soprattutto come sempre in virtù della
frequenza di aggiornamento e della cura con cui viene seguito dagli sviluppatori.
La ricerca del tema Hueman dalla schermata di installazione dei temi di WordPress
potrebbe produrre due risultati con nomi simili (Figura 8.14) quindi assicuratevi di sele-
zionare proprio il tema originale e non qualche altro tema “derivato”, che potrebbe esse-
re stato realizzato con un child theme dello stesso.
166Dal blog al web magazine
Figura 8.13 – La scheda del tema Hueman sul sito ufficiale di WordPress.org (wpaz.it/358):
si noti la struttura tipica del web magazine nell’anteprima.
Figura 8.14 – Nel corso della stesura di questo libro la ricerca del tema Hueman produceva
la visualizzazione di due temi di cui il primo, Being Hueman, era semplicemente un tema figlio
dell’originale.
167Capitolo 8
Per “popolare” facilmente il vostro sito di test durante l’esercitazione con que-
nota sto tema, potete utilizzare gli stessi dati già impiegati nello sviluppo del blog
descritto nella prima parte del capitolo. Durante la stesura del capitolo, infat-
ti, prima di installare il tema sono stati importati gli stessi articoli e pagine
dell’esempio usato per il blog, usando il sistema di esportazione e importazio-
ne dei contenuti già descritto in precedenza. Come sempre, inoltre, è stato
creato un child theme subito dopo l’installazione del tema.
Una volta installato il tema, durante l’esercitazione fate come sempre riferimento alla
sua anteprima in tempo reale visualizzabile dal sito dello sviluppatore (wpaz.it/359) per
un riscontro effettivo. Come noterete dall’anteprima, il tema si presenta con una struttu-
ra su tre colonne principali, ospitando nella parte centrale uno slider seguito da un elen-
co degli articoli su due colonne, in modo da visualizzare in alto gli articoli in evidenza e far
seguire gli altri nelle colonne sottostanti (Figura 8.15). La sezione centrale della home
riflette, in un certo senso, il design già visto nelle pagine precedenti per le due home page
alternative del blog realizzato col tema Bulan.
Figura 8.15 – L’anteprima del tema Hueman dal sito ufficiale. Si noti la struttura su tre colonne
principali con l’area centrale suddivisa in una parte superiore con slider e una inferiore a sua
volta divisa in due colonne.
168Dal blog al web magazine
Caricando il front-end del sito subito dopo l’installazione, se sono già presenti dei
contenuti li vedrete distribuiti nella parte centrale della home page, mentre nella colonna
di sinistra riconoscerete subito la barra laterale con i widget predefiniti. La colonna di
destra risulterà vuota, e verificando l’organizzazione della schermata di Aspetto>Widget
la potrete riconoscere con il nome Secondary, accompagnata da un’area widget chiamata
Header (next to logo/title), che come dice il nome è posizionata a destra dell’area destina-
ta al titolo o al logo, nella testata, e da un’ultima area chiamata Footer Full Width, che
viene collocata nella parte inferiore della home page e utilizzata in tutta la sua larghezza,
quindi si presta in modo particolare a contenuti dalla visualizzazione ampia, come una
mappa di Google oppure un banner orizzontale.
Per quanto non immediatamente visibile nella schermata dei widget, la tradi-
zionale area a colonne del piè di pagina è attivabile dal pannello Personalizza. nota
Il tema la gestisce in maniera completa e flessibile, come vedremo più avanti.
Inoltre è prevista la possibilità, già menzionata nel capitolo dedicato ai temi, di
creare aree widget personalizzate. Tutte le aree widget del tema Hueman, in-
fine, sono già predisposte per un controllo completo della loro visualizzazione.
Il tema installa tre nuovi widget, chiamati Hueman Dynamic Tabs, Hueman Posts e Hue-
man Videos. Saranno proprio questi elementi a creare, all’interno delle aree widget e
della home in particolare, i “sommari” utilizzati per visualizzare i contenuti in maniera
ordinata e accattivante. Mentre Hueman Videos e Hueman Posts non presentano una par-
ticolare complessità di configurazione, Hueman Dynamic Tabs risulta abbastanza articola-
to nelle opzioni (Figura 8.16) in quanto strutturato “a schede”, e sarà quindi utile riassu-
mere queste ultime per facilitarne l’utilizzo. Eccole in breve, descritte in base alle sezioni
presenti nell’interfaccia del widget:
1. Recent Posts
Raccoglie gli articoli di più recente pubblicazione, come il widget Articoli Recenti
predefinito di WordPress. La prima opzione permette di abilitarlo o disabilitarlo,
mentre la seconda (Show Thumbnails) determina la visualizzazione delle miniature
di anteprima basate come sempre sulle immagini in evidenza. Items to show stabi-
lisce il numero di articoli da visualizzare, e il menu Category permette di seleziona-
re tutte le categorie o una sola fra quelle esistenti.
2. Most Popular
Visualizza gli articoli che hanno ottenuto più commenti; l’ultimo menu permette di
decidere in base a quale arco di tempo questi ultimi saranno valutati. Tutte le altre
opzioni sono uguali a quelle già illustrate per la sezione Recent Posts.
169Capitolo 8
Figura 8.16 – Una parte delle opzioni del widget Hueman Dynamic Tabs, installato dal tema
Hueman insieme ad altri due widget specifici per gli articoli e i video.
3. Recent Comments
Una scheda è dedicata anche ai commenti, con tre sole opzioni, di cui la prima
come sempre abilita o disabilita la sezione, la seconda controlla la visualizzazione
degli “avatar” associati agli indirizzi email di chi ha commentato, mentre la terza
definisce il numero di commenti da visualizzare.
4. Tags
In questa scheda saranno semplicemente visualizzate le etichette associate ai di-
versi articoli pubblicati.
5. Tab Order
Da quest’area del widget sarà possibile controllare l’ordine in cui le schede saran-
no visualizzate, assegnando semplicemente un numero progressivo a ognuna di
quelle utilizzate.
6. Tab Info
Quest’ultima area serve semplicemente a stabilire se nelle schede dovranno esse-
re visualizzati i meta dati di categorie e data associati ai diversi articoli.
170Dal blog al web magazine
Inserendo semplicemente il widget nella barra laterale principale, Primary, e limitan-
doci ad assegnare solo il titolo e un numero di articoli da visualizzare, otterremo già un
risultato interessante (Figura 8.17), che tuttavia è suscettibile di miglioramenti. Per
esempio, potremmo decidere di non visualizzare le categorie e lasciare quindi solo il tito-
lo e la data, ottenendo così un layout più “pulito” nelle prime due schede, oppure di esclu-
dere una di queste ultime, abbinando magari in un widget solo la scheda degli articoli più
commentati, quella dei commenti e così via.
Figura 8.17 – Il widget Hueman Dynamic Tabs, visualizzato con la sua struttura a schede
nella barra laterale principale, a sinistra, nel front-end del sito; si notino le categorie e le date
visualizzate rispettivamente prima e dopo il titolo di ogni articolo e le tre schede dedicate
rispettivamente agli articoli più commentati, ai commenti e alle etichette.
La possibilità di selezionare le categorie per gli articoli da visualizzare nel wid-
get Hueman Dynamic Tabs non è casuale, infatti può essere utilizzata per collo- nota
care nelle aree widget, e in particolare nella home, una serie di elementi dedi-
cati alle diverse categorie di articoli: una modalità particolarmente indicata
nei casi in cui vi siano molti contenuti e con una buona frequenza di pubblica-
zione, caratteristiche tipiche dei web magazine.
171Capitolo 8
Il lavoro di “popolamento” della home potrebbe proseguire aggiungendo, a questo
punto, un paio di widget Hueman Posts nell’area widget destra, Secondary, e impostando-
li per la visualizzazione di specifiche categorie (Figura 8.18). È importante notare come le
due aree widget laterali di Hueman si adattino automaticamente alla larghezza dello
schermo, “contraendosi” quando questa diventa insufficiente, per lasciare visibile so-
prattutto l’area centrale, e visualizzando in questo caso un pulsante che permette di
espanderle.
Figura 8.18 – Un esempio di utilizzo di entrambe le aree widget laterali, con a sinistra due
versioni del widget Hueman Dynamic Tabs e a destra il widget Hueman Posts limitato a una sola
categoria.
Il lavoro di configurazione della home dovrà, a un certo punto, proseguire necessaria-
mente attraverso il pannello Personalizza di WordPress nel quale, come si accennava
all’inizio, sono ospitate numerose opzioni relative tanto all’area centrale quanto alle aree
widget del tema.
Le sezioni incluse nella schermata Personalizza sono in questo caso sei, almeno per
la versione del tema utilizzata durante la stesura del capitolo, con un’ampia sezione fina-
le dedicata proprio alle aree dinamiche del tema (Figura 8.19).
172Dal blog al web magazine
Per illustrare al meglio le opzioni disponibili nell’area di personalizzazione (Fi-
gura 8.19) procederemo secondo la loro successione, che segue ovviamente la nota
struttura del tema partendo dall’alto. Di conseguenza, il discorso relativo alle
aree widget sarà ripreso più avanti in quanto riservato proprio all’ultima sezio-
ne del pannello Personalizza. Ricordate che successivi aggiornamenti e tradu-
zioni del tema potrebbero implicare delle variazioni nella nomenclatura dei
diversi elementi, quindi cercate sempre di identificare razionalmente quanto
descritto nel testo e mostrato nelle immagini qualora non vi sia una corrispon-
denza esatta.
Figura 8.19 – La sotto-sezione dedicata alla gestione delle diverse aree widget nel pannello di
personalizzazione di Hueman, raggiungibile come sempre cliccando su Aspetto>Personalizza
nella barra laterale del back-end; si noti l’icona della matita che permette di accedere alla
configurazione di ogni singola area.
La prima sezione del pannello di personalizzazione, denominata Impostazioni globali
(Global Settings), come indica il nome riguarda le impostazioni generali del tema, fra le
quali ritroveremo ovviamente molte di quelle già illustrate in precedenza, a volte con pic-
cole variazioni o aggiunte. La sezione Identità del sito (Site identity), per esempio, oltre a
contenere le solite opzioni come titolo, motto e icona del sito, presenta in questo caso
delle opzioni per definire la dimensione massima in altezza per il logo nella testata.
La sezione Opzioni Generali di Design (General Design Options), invece, comincia con
l’opzione Stili Dinamici (Dynamic Styles), e permette di definire varie altre opzioni grafiche
173Capitolo 8
presenti nel resto del pannello, come quelle per i colori dei vari elementi, per la larghez-
za massima del sito e addirittura la possibilità di arrotondare gli angoli delle foto (Figu-
ra 8.20) in base al valore desiderato. In questa sezione è possibile anche definire la lar-
ghezza delle aree widget, Larghezza della Barra laterale (Sidebar Width), e scegliere un
Layout a larghezza fissa (Boxed Layout) invece che fluida per l’intero tema. La scelta dei
colori è molto ampia e riguarda anche i diversi elementi della testata.
Figura 8.20 – L’opzione Border Radius dell’immagine (Image Border Radius), in fondo
alla sezione Opzioni Generali di Design (General Design Options) dell’area di personalizzazione,
con lo strumento per definire l’angolo di arrotondamento delle foto, in questo caso impostato
su 25; si noti l’effetto sulle foto.
La sezione Social Links, sempre all’interno delle impostazioni globali, permette invece
di inserire, cliccando sul pulsante Aggiungi nuovo (Add New), le icone dei diversi profili
social, con la possibilità di sceglierle da un folto elenco e di assegnare un titolo persona-
lizzato al “tooltip” che compare sfiorandole e un colore specifico (Figura 8.21). Inoltre,
un’ultima opzione consente di definire l’apertura del link di destinazione assegnato all’i-
cona in una nuova scheda del browser.
Ognuna delle icone create potrà poi essere gestita singolarmente ed eventualmente
eliminata se non dovesse più servire, cliccando semplicemente sul simbolo del cestino a
destra del suo pannello dedicato. Quest’ultimo, infine, può essere compresso ed espanso
per consentire una maggiore praticità di lavoro.
174Dal blog al web magazine
Figura 8.21 – Il pannello di configurazione delle icone social di Hueman; si notino l’opzione
per definire il titolo del “tooltip”, che compare al passaggio del mouse, e quella per il colore
(in questo caso è stato usato il cancelletto al posto del link per visualizzare semplicemente
l’icona).
L’inserimento delle icone social nella barra avviene in due fasi, cliccando pri-
ma su Aggiungi nuovo e infine su Aggiungi, e determina la loro visualizzazione nota
tanto nell’area widget principale quanto nel piè di pagina, oltre che nel riqua-
dro opzionale in cima all’area widget; di conseguenza la scelta del loro colore
dovrà essere valutata in funzione dello sfondo utilizzato per questi due ele-
menti del tema.
Tralasciando l’opzione Commenti, che serve solo ad abilitare o disabilitare al volo que-
sti ultimi su articoli e pagine, le ultime tre opzioni rimanenti nella sezione Impostazioni
globali riguardano rispettivamente l’attivazione della modalità responsive, Dispositivi mo-
bile (Mobile Devices), due voci per l’ottimizzazione della SEO e delle prestazioni e altre due
per la visualizzazione degli elementi di Informazioni su Hueman (About) e Aiuto (Help) in
alto a destra nella barra di amministrazione di WordPress. A parte queste ultime due, che
possono risultare abbastanza superflue, tutte le altre andrebbero lasciate attive così
come già risultano nella loro modalità predefinita.
175Puoi anche leggere
