webmaster con wordpress

BONAVENTURA DI BELLO

CREARE RAPIDAMENTE E FACILMENTE

SITI WEB PROFESSIONALI A COSTO ZERO[ ]

Webmaster con WordPress

Web Pro+

NUOVA EDIZIONE

Webmastercon 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

Webmastercon WordPress

Creare rapidamente e facilmente siti web professionali a costo zero

Nuova edizione

Bonaventura Di Bello

EDITORE ULRICO HOEPLI MILANO

Copyright © Ulrico Hoepli Editore S.p.A. 2017via Hoepli 5, 20121 Milano (Italy)tel. +39 02 864871 – fax +39 02 8052886e-mail [email protected]

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: [email protected] 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 ([email protected])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 ............................................................................................................................7Identificare la tipologia del sito/tema .....................................................................................................8Installare e configurare WordPress ...................................................................................................... 10Creare il contenuto e la struttura ......................................................................................................... 11Scegliere e installare il tema ................................................................................................................ 12Personalizzare il tema .......................................................................................................................... 13Consegna del sito ................................................................................................................................. 13

Capitolo 3 Anatomia di un sito WordPress 15

La home page ....................................................................................................................................... 19Testata e logo ........................................................................................................................................ 21Menu principale e secondario .............................................................................................................. 25Slider e “hero image” ........................................................................................................................... 27Corpo centrale e contenuto .................................................................................................................. 29Piè di pagina e “aree widget” ............................................................................................................... 32Responsiveness .................................................................................................................................... 37

Capitolo 4 Scegliere un tema 39

Temi gratuiti .......................................................................................................................................... 40

Sommario

VI

Temi commerciali ................................................................................................................................. 46Creazione di temi e layout .................................................................................................................... 53Da Photoshop a WordPress .................................................................................................................. 55Utilizzo di framework ............................................................................................................................ 57Modifica di temi esistenti ...................................................................................................................... 60Builder e visual composer .................................................................................................................... 62Software per la creazione di temi ......................................................................................................... 66Scoprire il tema utilizzato da un sito .................................................................................................... 68

Capitolo 5 Sviluppo di un sito di base 73

Impostazioni iniziali .............................................................................................................................. 74Installare e configurare un plugin per “sito in costruzione” ................................................................ 78Creare una pagina con testo e immagini ............................................................................................. 85Inserire contenuto fittizio ..................................................................................................................... 91Gli articoli (post) .................................................................................................................................... 94Link, codice e shortcode ....................................................................................................................... 98Home page, blog e menu .................................................................................................................... 104Personalizzazione del tema ................................................................................................................ 108Le aree widget .................................................................................................................................... 112Child theme e modifiche al codice ..................................................................................................... 117

Capitolo 6 Creare un sito standard 125

Creazione di un sito standard con GeneratePress ............................................................................. 126Creare un sito standard con Square (Quadrata) ................................................................................. 134

Capitolo 7 Creare un sito e-commerce 143

Installazione del plugin WooCommerce ............................................................................................. 144Importazione dei prodotti di esempio ................................................................................................. 147Configurazione e test del negozio ...................................................................................................... 150

Capitolo 8 Dal blog al web magazine 153

Sviluppare un blog professionale ....................................................................................................... 154Dal 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

Sommario

VII

Capitolo 12 Traduzioni e siti multi-lingua 237

Traduzione di temi e plugin ................................................................................................................ 238Traduzione dei contenuti e siti multi-lingua ...................................................................................... 245

Capitolo 13 WordPress: installazione, configurazione, manutenzione 255

Dominio e hosting ............................................................................................................................... 256Installare WordPress .......................................................................................................................... 265Configurazione iniziale ....................................................................................................................... 271Backup e aggiornamenti .................................................................................................................... 278Impostazioni di sicurezza ................................................................................................................... 284Miglioramento delle prestazioni ......................................................................................................... 289Migrazione del sito .............................................................................................................................. 293Configurazione della SEO e statistiche .............................................................................................. 296Consegna del sito o dell’accesso ai contenuti .................................................................................... 301

Capitolo 14 Risorse utili 305

Un regalo per i lettori .......................................................................................................................... 305

Prefazione

Come usare questo libroIn 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

X

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!

X

Ringraziamenti

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

nota

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

154

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 professionaleAll’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 contenutoGli 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. ImmaginiLe 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. RiassuntiLa 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.


155

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 tagClassificare 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 widgetI 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 widgetLa 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.

Capitolo 8

156

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

nota


157

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

Capitolo 8

158

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.


159

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

Capitolo 8

160

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

nota


161

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.

Capitolo 8

162

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.


163

Gli strumenti che Jetpack mette a disposizione sono diversi ed è facile confon-dersi, anche a causa dei frequenti cambiamenti nell’interfaccia apportati dai 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.

nota

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.

Capitolo 8

164

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.


165

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 GallerySi 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 PageIn 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. TypographySi 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 pageSi 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

Capitolo 8

166

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 PageQuesta è 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. FullwidthUna semplice pagina cui è stato associato il layout 1 Column Wide (Full Width) per ottenere una pagina piena, ovvero senza barre laterali.

7. Sidebar / ContentIdem come sopra, ma ottenuta associando il layout 2 Columns: Sidebar / Content per posizionare la barra laterale a sinistra del contenuto.

8. Content / SidebarAnche 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 magazineA 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.


167

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.

Capitolo 8

168

Per “popolare” facilmente il vostro sito di test durante l’esercitazione con que-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.

nota

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.


169

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

nota

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 PostsRaccoglie 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 PopularVisualizza 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.

Capitolo 8

170

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 CommentsUna 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. TagsIn questa scheda saranno semplicemente visualizzate le etichette associate ai di-versi articoli pubblicati.

5. Tab OrderDa 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 InfoQuest’ultima area serve semplicemente a stabilire se nelle schede dovranno esse-re visualizzati i meta dati di categorie e data associati ai diversi articoli.


171

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

nota

Capitolo 8

172

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


173

Per illustrare al meglio le opzioni disponibili nell’area di personalizzazione (Fi-gura 8.19) procederemo secondo la loro successione, che segue ovviamente la 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.

nota

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

Capitolo 8

174

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.


175

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

nota

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.

Capitolo 8

176

La sezione Intestazione (Header) contiene, come si può intuire, le impostazioni relative all’area della testata. Oltre a quelle più comuni come il caricamento di un logo grafico in sostituzione dell’accoppiata titolo+motto, la prima sotto-sezione Design dell’Header (Hea-der Design) consente di personalizzare in modo esteso questo aspetto, per esempio defi-nendo l’altezza dell’area riservata al logo, disabilitando la visualizzazione del motto op-pure sostituendo con un’immagine grafica, in questo caso definita “immagine di banner”, tali elementi. L’uso di quest’ultima, tuttavia, impedisce anche la visualizzazione dell’e-ventuale widget destinato a banner o altri elementi grafici, gestito a sua volta dalla se-conda sotto-sezione, Widget Pubblicitario nell’header (Header Advertisement Widget).

La sezione Contenuto (Content) del pannello di personalizzazione del tema è la più ricca di opzioni in assoluto (Figura 8.22), dal momento che gestisce diversi elementi che vanno dalla home al blog, fino ai singoli articoli e alle miniature. Proviamo a riassumerne le varie sotto-sezioni:

1. Contenuto della pagina inizialePermette di definire cosa sarà visualizzato nella home page, e contiene tre opzioni di cui due sono quelle già note (configurabili in Impostazioni>Lettura del back-end di WordPress) per la visualizzazione degli articoli in modalità blog e la definizione di una pagina statica, mentre una terza opzione aggiuntiva nella prima voce di menu, Non mostrare nessun articolo o pagina, elimina semplicemente il contenuto centrale della home e non risulta di particolare utilità.

Figura 8.22 – La sezione Contenuto (Content) del pannello di personalizzazione di Hueman. Si notino le diverse sotto-sezioni a sinistra e la presenza del logo e delle icone social a destra, inseriti nel frattempo attraverso le opzioni precedenti.


177

2. Opzioni di layout per il contenuto principaleGestisce la struttura globale del tema, Global layout, che nella sua modalità prede-finita è impostata con un’area centrale principale per il contenuto cui sono affian-cate le due aree widget sui due lati. È possibile variare tale struttura eliminando le aree laterali, usandone solo una oppure affiancandole entrambe, e scegliendo ov-viamente il lato destro o sinistro per questi due ultimi casi. Oltre che globalmente, queste impostazioni possono essere poi personalizzate per ogni tipo di pagina, dal-la home agli articoli e così via.

3. Barre laterali: Design e impostazioni MobileLe due sole opzioni presenti in questo pannello riguardano rispettivamente la vi-sualizzazione dei due riquadri che sormontano le aree widget laterali, Box in cima alle barre laterali (Sidebar Top Boxes), e la visualizzazione delle due aree sui dispo-sitivi mobili.

4. Design del Blog e del ContenutoIn questa sotto-sezione si può decidere se visualizzare un’intestazione personaliz-zata per l’area centrale e definirne titolo, sotto-titolo e lunghezza dell’estratto (Lun-ghezza del riassunto o Excerpt Lenght), definendo anche la modalità di visualizzazio-ne dei post usando il più tradizionale elenco invece della disposizione su due colon-ne predefinita. La seconda metà della sotto-sezione è dedicata, invece, agli articoli in primo piano (featured post), ovvero quelli “in evidenza”, di cui possiamo scegliere la categoria e la quantità; quest’ultima, se superiore a uno, produce la visualizza-zione di uno slider, di cui possiamo impostare l’animazione e relativa velocità.

5. Impostazioni Articolo SingoloQuesta sotto-sezione influenza la struttura dei singoli articoli, con la possibilità di visualizzare dopo il contenuto il nome, la biografia dell’autore e un elenco di “post correlati” (Figura 8.23). Inoltre, è disponibile un elemento di navigazione fra gli articoli, Navigazione degli Articoli (Post Navigation), visualizzabile a sinistra, a destra o sotto il contenuto.

6. Impostazioni delle MiniatureL’ultima sotto-sezione riguarda le miniature di anteprima, con le due sole opzioni che determinano, rispettivamente, la visualizzazione di un’immagine generica se-gna-posto (placeholder) qualora mancasse quella in evidenza e la presenza del numero di commenti nell’angolo in alto a destra delle miniature.

Alla sezione del contenuto segue quella dedicata al piè di pagina (footer). Qui possia-mo attivare la visualizzazione dell’area widget a larghezza massima (full width widget area) e decidere la presenza dell’area widget standard a più colonne nel piè di pagina, selezionando dal menu il numero di queste ultime (fino a 4) in alternativa alla prima op-

Capitolo 8

178

zione, Disattiva (Disable), che per impostazione predefinita esclude quest’area widget dal tema. Inoltre, possiamo includere un logo anche nel piè di pagina e personalizzare il testo visualizzato in basso, con l’opzione per escludere i riconoscimenti (credits). Questi ultimi si potranno modificare, volendo, usando l’editor del tema e agendo sul rispettivo codice del file footer.php (Figura 8.24), facendo come sempre attenzione a non modificare altro codice ed eventualmente agendo su un tema figlio anziché sull’originale.

Escludendo la sezione dedicata alla gestione dei menu, il cui funzionamento è già stato illustrato in precedenza, rimane come ultima sezione quella denominata Sidebar dinamiche e Widget (Dynamic Sidebars and Widget). Oltre alle opzioni che abbiamo già esa-minato in precedenza, gestite anche dalla schermata Aspetto>Widget, in questo caso abbiamo a disposizione un pulsante con cui creare nuove aree widget e la possibilità di personalizzarle, insieme a quelle già esistenti (Figura 8.25).

Per ogni area widget potremo così decidere la posizione predefinita all’interno del tema e le regole di visualizzazione relative ai diversi contesti, ovvero se l’intera area dovrà essere presente solo nella home oppure anche altrove, come nelle pagine, negli articoli e così via.

Un’ultima nota prima di concludere la descrizione di questo bellissimo tema riguarda i suoi menu, che nel caso di Hueman sono tre, di cui due posizionati nella parte alta (Topbar e Header) e l’ultimo come sempre nella parte inferiore (Footer).

Figura 8.23 – Le opzioni disponibili per il singolo articolo. Si noti il menu che determina la “relazione” da utilizzare per i post correlati, in questo caso le categorie, e l’opzione che visualizza e posiziona il riquadro di navigazione.


179

Figura 8.24 – La porzione di codice relativa al piè di pagina con, evidenziato, quello specifico dei “credits”, in questo caso appartenente a un child theme di Hueman; si noti a destra il file footer.php selezionato.

Figura 8.25 – Il pannello per la personalizzazione delle aree widget di Hueman. Si notino il pulsante per la creazione di nuove aree e, al di sotto, le opzioni per il posizionamento e la visibilità di una di esse, in questo caso quella principale.

Capitolo 8

180

Altre funzionalità non presenti nella versione di Hueman scaricabile dal sito ufficiale di WordPress, come la barra di condivisione social (Share bar) e gli shortcode, possono essere integrate per mezzo del plugin Hueman Addons (wpaz.it/360). Per un elenco de-scrittivo degli shortcode e del risultato prodotto da ognuno di essi, invece, potete fare ri-ferimento alla documentazione sul sito ufficiale (wpaz.it/361).

Come per gli altri progetti di questo libro, anche i contenuti e il backup di quel-lo dedicato alla creazione di un sito web magazine con Hueman potranno es-sere scaricati dopo la registrazione, seguendo le istruzioni presenti nell’ultimo capitolo del volume. È importante sottolineare ancora una volta come i suc-cessivi aggiornamenti del tema potranno produrre cambiamenti nell’interfac-cia di gestione, rendendo meno fedeli le immagini e le descrizioni finora utiliz-zate. In caso di difficoltà fate riferimento all’area dedicata al libro sul sito bo-naventuradibello.com, utilizzando eventualmente il modulo contatti del sito per segnalare eventuali incongruenze e permettere così un aggiornamento.

nota

webmaster con wordpress

Documents