Guida WordPress, tutorial 6: gestione dei Widget e personalizzazione del tema

WordPress si conferma sempre più come il software più semplice da utilizzare per l'implementazione di blog e siti Internet. In questa lezione spiegheremo come personalizzare il pochi clic la home page, introducendo il concetto di widget.

Nel quinto tutorial della guida dedicata a WordPress abbiamo imparato a installare e attivare nuovi temi per variare l’aspetto grafico del blog. Adesso visitiamo il front end del sito e soffermiamoci sulla struttura della home page.

WordPress home page

Nel caso in figura, in alto alla pagina trova spazio il logo aziendale, a seguire (barra in grigio) è posizionato il menu principale del sito (top menu), nella parte centrale trovano spazio gli articoli, mentre sulla colonna posta a destra vi sono una serie di moduli, chiamati widget, ognuno dei quali compie una particolare funzione.

Al di là del tema, è possibile personalizzare ulteriormente la pagina, variando la disposizione dei Widget. Prima di procedere con il loro spostamento, però, cerchiamo di capire bene cosa sono.

Il termine deriva dalla contrazione delle due parole window e gadget, pertanto sta a significare un elemento grafico (aggeggio) che si apre all’interno della pagina e consente di migliorare l’uso dell’applicazione. In WordPress i widget sono degli “aggeggi” grafici che, posizionati all’interno della pagina Web, hanno la funzione di migliorare l’usabilità del sito. Affinché ciò sia possibile, essi sono associati a dei moduli, ossia a dei piccoli programmi che consentono di sfruttare appieno tutte le potenzialità messe a disposizione dalla piattaforma WordPress.

La gestione dei widget, dal back end, avviene tramite l’omonima scheda, raggiungibile dalla voce Aspetto del menu laterale. Poiché essi sfruttano la tecnologia Ajax, possono essere spostati facilmente in pochissimi clic, come vedremo nella pagina successiva.

Spostiamo i widget in un clic

La scheda di gestione dei widget è molto semplice e intuitiva e non richiede assolutamente alcuna conoscenza dal punto di vista informatico. Spostare i widget nelle varie posizioni, per personalizzare le pagine, è davvero un gioco da ragazzi. WordPress quindi si riconferma ad ogni passo, sempre più, come il software ideale per gli inesperti del settore.

WordPress_widget

La pagina di gestione si compone di tre aree: quella dei widget disponibili, quella dei widget non attivi e quella riguardante l’area del tema che può contenere al suo interno i widget attivi.

All’interno dell’area Widget disponibili vengono elencati tutti i widget che sono presenti di default in WordPress. Tra questi ritroviamo:

  • Archivi: il widget che consente di accedere con facilità agli articoli catalogati su base mensile;
  • Articoli recenti: il widget che consente di visualizzare gli ultimi articoli che sono stati pubblicati;
  • Calendario: un semplice calendario che consenta di raggiungere gli articoli di interesse in funzione della data
  • Categoria: una lista di tutte le categorie attive nel blog. Cliccando su ognuna di esse è possibile raggiungere tutti gli articoli ad essa appartenenti;
  • Cerca: un modulo di ricerca all’interno dello stesso sito;
  • Commenti recenti: l’elenco di tutti gli ultimi commenti che sono stati rilasciati dagli utenti;
  • Menu personalizzato: un modulo che da la possibilità di inserire un menu nella aggiuntivo nella colonna laterale del sito;
  • Meta: elenca i link per il log in e log out al sito e inoltre da la possibilità di aggiungere link e feed a pagine esterne;
  • Pagine: elenca tutte le pagine statiche del sito;
  • RSS: elenca tutte le voci di qualsiasi feed RSS o Atom;
  • Tag Cloud: elenca tutti i tag che sono maggiormente utilizzati negli articoli;
  • Testo: un modulo che la da possibilità di scrivere del testo libero.

Ogni qual volta che installiamo dei nuovi plugin, cui sono associati dei widget, vedremo comparire all’interno di quest’area nuovi box che li rappresentano.

Disattivare i widget è una procedura semplicissima: basta selezionare con il mouse il widget desiderato e trascinarlo all’interno dell’area Widget non attivi.

Per attivare un widget invece, è necessario selezionarlo e trascinarlo all’interno dell’area più a destra della pagina. Nel caso in figura lo trascineremo nell’area che va sotto il nome di Vortex Primary Sidebar.

WordPress trascinamento widget

Per accedere alle impostazioni di ogni widget è necessario cliccare sulla freccia verso il basso della barra principale.

Wordpress widget

Nel caso del widget Articoli recenti, ad esempio, possiamo impostare il titolo da assegnare al widget, il numero di articoli che intendiamo vengano elencati e la possibilità di visualizzare o meno la data. Per applicare le impostazioni facciamo clic su Salva e per chiudere la finestrella facciamo clic su Chiudi. Qualora invece, volessimo disattivare il widget possiamo o trascinarlo nell’area Widget disponibili o nell’area Widget non attivi, come spiegato poc’anzi, oppure cliccare su Cancella.

Per personalizzare la pagina e spostare i widget nelle posizioni volute, basta trascinarli all’interno della stessa area e sistemarli dove meglio si crede.

Per terminare la personalizzazione della home page vediamo nella pagina successiva le altre voci contenute nel menu aspetto.

Personalizziamo il tema

Sistemati i widget nelle posizioni volute, non resta che terminare la personalizzazione della home page con le ultime funzionalità messe a disposizione all’interno del menu Aspetto. Unica voce che vedremo nelle prossime lezioni è quella di Menu, che studieremo dopo aver introdotto le Pagine del sito.

Dal menu Aspetto facciamo clic su Testata.

WordPress testata

All’interno di questa pagina possiamo variare l’immagine principale che compare nella testata del sito. Dovremo sostituire al posto dell’immagine di default quella del nostro logo. Per farlo è molto semplice: da Selezionare immagine clicchiamo su Scegli file e indichiamo l’immagine presente nel nostro nel PC. Al termine facciamo clic su Salva le modifiche. Portiamo nel front end e vedremo comparire il nostro logo in alto alla pagina.

Qualora volessimo aggiungere una immagine di sfondo spostiamoci nell’omonima sezione e sempre da Seleziona immagine, cliccando su Scegli file, indichiamo lo sfondo prescelto. Facciamo clic su Salva le modifiche.

Ogni tema installato mette a disposizione una funzione che consente di configurare le impostazioni di base. Nel caso in esame, viene indicata all’interno del menu Aspetto la voce Vortex Options. Ognuno di noi troverà la voce relativa al tema prescelto. All’interno di questa sezione, che varia da tema a tema, è possibile specificare opzioni riguardanti l’aspetto grafico e contenutistico del blog.

Nella prossima lezione introdurremo il concetto di Pagina e vedremo come costruire passo passo le pagine statiche del nostro sito Internet.