WordPress: predisporre la sidebar per l’uso di widget
Dopo la pausa estiva riprendiamo il nostro corso dedicato alla realizzazione di un tema per WordPress: nello specifico oggi vedremo come creare una sidebar dinamica in modo che possa essere gestita mediante widget direttamente dal pannello di amministrazione, senza mettere mani al codice.
Indice dell’articolo
- Che cos’è un widget di WordPress?
- Perché utilizzare dei Widget sulla sidebar?
- Come predisporre la sidebar del nostro tema pronta per widget (widget ready)?
- Esempio pratico sul nostro tema
- Definire più sidebar dinamiche
- Conclusione
- Indice degli articoli trattati in questa guida
1. Che cos’è un widget di WordPress?
I widget, come i plugin, sono utili estensioni che possiamo integrare all’interno della nostra piattaforma per ampliarne le funzionalità.
WordPress dispone già di alcuni widget nativi presenti all’interno del core, come il widget per la visualizzazione degli ultimi commenti, quello per la visualizzazione degli ultimi articoli pubblicati, l’archivio del blog, ecc… ma tanti altri sono sviluppati da terze parti utilizzando le API messe a disposizione da WordPress.
2. Perché utilizzare dei Widget sulla sidebar?
Oltre a fornire funzionalità aggiuntive, un widget torna molto più comodo perché può essere posizionato facilmente nel punto desiderato del template – generalmente la sidebar o il footer – tramite un’azione di drag & drop.
Per rendere tutto più chiaro facciamo subito un esempio pratico con il tema che abbiamo sinora sviluppato per questa guida (Figura 1).
Figura 1 - Sidebar realizzata per il nostro tema
Se la sidebar del nostro tema fosse stata realizzata mediante widget, adesso sarebbe semplicissimo cambiare posizione (sempre all’interno della sidebar) a una qualsiasi delle sezioni attualmente presenti: per esempio, se volessimo visualizzare l’elenco delle categorie prima dell’archivio, basterebbe andare nel pannello di amministrazione e dal menù Aspetto->Widget trascinare mediante azione di drag & drop la sezione desiderata nel punto in cui vogliamo posizionarla.
Al momento, se dal pannello di amministrazione del nostro tema proviamo ad andare sul menù Aspetto->Widget, riceviamo un messaggio di errore: “Nessuna Sidebar definita” (Figura 2).
Figura 2 - Nessuna sidebar predisposta ad ospitare widget.
Perché questo messaggio di errore? Perché nel nostro tema non abbiamo ancora definito una sidebar predisposta a ospitare widget.
E come facciamo a rendere la nostra sidebar widget ready?
3. Come predisporre la sidebar del nostro tema pronta per widget (widget ready)?
Per rendere la sidebar del nostro tema widget ready basta semplicemente aggiungere una funzione nel file functions.php. Questo file, se presente all’interno della cartella del nostro tema, è incluso in modo automatico al caricamento di tutte le pagine del blog e serve a incorporare funzioni aggiuntive al tema che stiamo realizzando.
Quindi creiamo un nuovo file all’interno della cartella del tema e denominiamolo functions.php. La funzione per definire una sidebar predisposta a ospitare Widget da richiamare all’interno del file functions.php è la seguente: register_sidebar().
Vediamola in funzione:
// sidebar 1
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name'=>'sidebar1',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
}
Andiamo ad analizzare un po’ più nel dettaglio i parametri che abbiamo utilizzato per richiamare questa funzione. Se esiste la funzione register_sidebar allora la richiamiamo passando nell’ordine i seguenti parametri:
- name: questo è il nome che desideriamo assegnare alla nostra sidebar e sarà visualizzato nel pannello di amministrazione, Aspetto -> Widget (Figura 3).
- before_widget: eventuale codice html che desideriamo inserire prima dell’inizio di ogni widget presente sulla sidebar.
- after_widget: eventuale codice html che desideriamo inserire alla fine di ogni widget presente sulla sidebar.
- before_title: eventuale codice html che desideriamo inserire prima del titolo di ogni singolo widget.
- after_widget: eventuale codice html che desideriamo aggiungere alla fine del titolo di ciascun widget presente sulla sidebar.
Nell’esempio sopra citato abbiamo inserito il tag <li> all’inizio di ogni widget che sarà aggiunto alla sidebar e la chiusura dello stesso tag </li> alla fine di ogni widget, questo perché il contenuto della nostra sidebar è visualizzato all’interno di una lista non ordinata <ul>…</ul>, per tanto è necessario visualizzare ogni widget all’interno dell’elemento <li>…</li>.
Dopo aver definito la funzione dobbiamo apportare una piccola aggiunta al file sidebar.php che abbiamo realizzato nelle lezioni precedenti.
Apriamo dunque il file denominato sidebar.php e subito dopo l’apertura del tag <ul> aggiungiamo il seguente controllo condizionale:
<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
In questo modo stiamo dicendo a WordPress: se non esiste la funzione dynamic_sidebar (cioè nel caso in cui la versione di WordPress in uso è datata e non supporta questa funzione) o se non è utilizzata nessuna sidebar dinamica, carica sulla sidebar il contenuto che avevamo impostato in precedenza sul file sidebar.php nella lezione sei, diversamente carica il contenuto dinamico definito mediante Pannello di amministrazione Aspetto -> Widget (Figura 3).
Figura 3 - Definire la sidebar mediante widget direttamente dal pannello di amministrazione.
Sempre nel file sidebar.php aggiungiamo la fine del controllo condizionale prima di chiudere la lista non ordinata:
<?php endif; ?> </ul>
4. Esempio pratico sul nostro tema
Andiamo adesso a fare un esempio pratico sul nostro tema.
Dopo aver definito la nostra sidebar dinamica all’interno del file functions.php e apportato le relative modifiche al file sidebar.php, andiamo sul pannello di amministrazione e dal menù Aspetto -> Widget abbiamo accesso a una pagina suddivisa in due parti: nella prima parte della pagina sono mostrati tutti i widget disponibili sul tema, nella seconda sono mostrate le varie sidebar dinamiche che abbiamo creato; nel nostro caso ne abbiamo creata una sola e l’abbiamo denominata sidebar1, com’è possibile vedere in Figura 3.
Basta trascinare adesso i widget che desideriamo mostrare sulla sidebar e il gioco è fatto. Proviamo a spostare – mediante trascinamento del mouse – il widget denominato Categorie sotto la sezione sidebar1, così come mostrato in Figura 3.
Adesso andiamo a visualizzare il risultato sul nostro blog: come puoi notare la vecchia sidebar definita tramite codice è stata sostituita dalla nuova sidebar dinamica realizzata mediante widget (Figura 4).
5. Definire più sidebar dinamiche
Volendo è possibile anche definire più di una sidebar dinamica in modo da poter utilizzare le diverse sidebar in più punti del layout dei nostri template (per esempio una sidebar da posizionare nella sezione destra del blog e una sul footer).
Per definire più di una sidebar per il tema basta ripetere più volte il procedimento che abbiamo eseguito per la definizione della prima sidebar all’interno del file function.php.
Proviamo a definire una nuova sidebar, subito dopo la prima, denominandola “sidebar-footer”:
<?php
if ( function_exists('register_sidebar') ) {
// sidebar 1
register_sidebar(array(
'name'=>'sidebar1',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
// sidebar 2
register_sidebar(array(
'name'=>'sidebar-footer',
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
}
?>
Adesso se andiamo a vedere sul pannello di amministrazione dal solito menù Aspetto -> Widget possiamo notare che le sidebar a disposizione sono due: sidebar1 e sidebar-footer (Figura 5).
Figura 5 - Definizione di due sidebar dinamiche.
Per richiamare questa seconda sidebar all’interno dei nostri template basterà inserire la seguente riga di codice nel punto desiderato:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-footer') ) : ?>
….istruzioni da eseguire quando la sidebar dinamica non è attiva…
<?php endif; ?>
6. Conclusione
Eccoci giunti alla conclusione di questa nuova lezione del nostro corso dedicato alla realizzazione di un tema per WordPress. Nella lezione odierna abbiamo visto cosa sono i widget e come questi possono ampliare le funzionalità della piattaforma. Abbiamo anche visto come predisporre più sidebar affinché possano ospitare i vari widget che desideriamo integrare all’interno del nostro sito/blog.
Come avrai avuto modo di vedere il procedimento non è complesso, questo a dimostrazione del fatto che spesso le cose che sembrano più difficili, se ben comprese, si rivelano in realtà molto semplici e intuitive da realizzare.
A questo punto per concludere definitivamente il corso ci resta da affrontare la personalizzazione del template dei commenti che vedremo la prossima settimana. Ma prima di lasciarti voglio porti una domanda: dopo aver seguito le lezioni di questo breve corso online, pensi di essere in grado di realizzare un tema partendo da zero? Siamo riusciti a raggiungere l’obiettivo che ci eravamo prefissati all’inizio del corso?
Per scopo didattico ho messo a disposizione il tema finora realizzato, se lo desideri lo puoi scaricare cliccando sul pulsante sottostante.
Download7. Indice degli articoli trattati in questa guida
Per agevolarti la consultazione della guida alla fine di ogni articolo riporterò l’indice comprendente tutti gli argomenti trattati.
- Come Installare WordPress in Locale?
- WordPress: Diamo Uno Sguardo al Pannello di Amministrazione
- Come Creare un Template per WordPress Partendo da Zero?
- WordPress: Come Realizzare l’Header del Template? (Parte 1) | (Parte 2)
- Diamo Uno Sguardo al Loop di WordPress
- Aggiungiamo la Sidebar al nostro tema
- WordPress: come rendere dinamici Header e Sidebar del template?
- Gerarchia dei template e loro utilizzo: come creare un template per gli articoli?
- Come Creare Template Personalizzati per le Pagine di WordPress?
- WordPress: predisporre la sidebar per l’uso di widget
- Personalizzare il Template dei Commenti di WordPress (Parte 1) | (Parte 2)
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
43 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Ciao,
articolo utile per chi è alle prime armi con WP.
Io di solito uso i nomi senza trattini per le Sidebar multiple:
‘name’=>’Blocco di Sinistra’,
‘name’=>’Blocco di Destra’,
…
Se lo fai per te, ovviamente va bene anche il tuo esempio. Un cliente magari preferisce vedersi i nomi più intuitivi e senza trattini. ;)
Saluti.
Ciao Oleg, grazie per aver espresso il tuo parere.
Sono assolutamente d’accordo con quello che dici, ognuno è libero di usare i nomi che ritiene più opportuni al progetto che sta sviluppando, il mio è un banale esempio didattico.
A presto!
Bellissimo Nando! Spiegato alla perfezione!
Grazie, maurì!
p.s. Ti sei già convertito a WordPress? =)
Come no!
C’è anche un bellissimo plugin per le votazioni che mi fa impazzire :-)
Grazie Nando di questo utile articolo,
mi hai colmato delle lacune che ho avuto leggendo la documentazione di WP in agosto perché mi serviva andare avanti con il tema che devo per un cliente.
Sicuramente con tutta la guida che hai scritto si reisce a creare un tema partendo da zero.
In ogni caso c’è codex che ci aiuta sempre!
Ciao Luca, grazie a te per essere passato.
La documentazione di WordPress è quanto di più completo e lineare si possa desiderare per uno sviluppatore.
Finalmente!!! Era tutta l’estate che aspettavo questo momento!!!!
Ciao Vito, ben ritrovato!
Grande Nando, come sempre hai spiegato tutto benissimo.
Dopo la pausa estiva ho bisogno di rileggere tutta la guida dall’inizio, ma è una cosa che faccio volentieri, le spiegazioni sono molto fluide.
Complimenti ancora.
Ciao Paolo, ben ritrovato e grazie a te per i complimenti! Una bella ripassata alle precedente lezioni non fa mai male. =)
io avrei una domanda…in wordpress come si fa a sapere se un utente è loggato e se è amministrazione?
Credo che si debba usare la funzione “current_user_can”:
if(current_user_can(‘update_core’))
anche se ho trovato la funzione “get_role” di cui non trovo la documentazione… ma credo si usi così
if(get_role() == ‘administrator’)
Ciao jury, per verificare se un utente è loggato si utilizza la funzione is_user_logged_in(), dai un’occhiata alla documentazione, è molto semplice da utilizzare.
Per verificare se un utente è amministratore invece – come ti ha già correttamente suggerito scienzedellevanghe – si utilizza la funzione current_user_can().
grazie mille dell’aiuto…e di avermi indicato la documentazione che assolutamente non conoscevo…non ho mai lavorato in wp prima d’ora!
In bocca al lupo, jury =)
Di nulla, jury.
Comunque per il supporto in futuro ti consiglio di utilizzare il nostro forum, dove è molto più pratico interagire rispetto ai commenti del blog. A presto
Quando, smanettando, venni a conoscenza di questa cosa, mi sembrava di aver capito come girasse il mondo.
Sarò scontata, ma…bell’articolo e, soprattutto, utile. :D
Ciao Fran, è smanettando che si compiono le più grandi scoperte =)
Grazie per essere passata e a presto.
Io sono alle prime armi, per rispondere alla tua domanda non so se alla fine del corso riuscirò a fare un template. Sicuramente le tue lezioni sono molto utili, spieghi in maniera semplicissima. Mi spaventa poi l’implementazione dell’aspetto grafico. Io comunque ti chiedo se è possibile di allegare alla fine della lezione il file.php creato da scaricare, per le persone come me. Può aiutare a trovare eventuali errori, ad esempio ho seguito con attenzione questa ultima lezione ma mi ritrovo che i link della sidebar di destra mi sono andati a finire sotto i post di esempio. Mentre il menù che prima era orizzontale e centrale si è spostato a sinistra. Grazie della tua condivisione.
Ciao Luigi, se hai una buona dimestichezza con i CSS vedrai che gestire l’aspetto grafico sarà un gioco da ragazzi.
Ho messo a disposizione l’intero tema fin qui realizzato, puoi scaricarlo e controllare il file che ti da problemi.
A presto
Bentornata alla mia rubrica preferita :)
Ti dirò: ho approfittato della “pausa estiva” di questa guida per darmi da fare…
Ho usato wordpress per un paio di lavori e, pur non avendo usato sidebar e commenti (non servivano), devo dire che mi trovo discretamente bene.
Una cosa della quale non mi capacito è che non sembra possibile creare una pagina che faccia da “archivio” di tutti i post (ma ho trovato un trucco al punto 18 http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/)
Magari una volta finita questa guida si potrebbe pensare ad un “raccoglitore” per tanti “trucchetti” per wordpress (come l’assegnare classi odd/even).
Ciao scienzedellevanghe, ben ritrovato anche a te!
Mi fa piacere apprendere che non stai trovando problemi nello sviluppo di temi per WordPress.
Riguardo la realizzazione di un template personalizzato per l’archivio del blog ci sono diversi metodi che permettono di realizzare degli archivi ben organizzati e semplici da consultare. Che genere di archivio ti serve realizzare? Un semplice elenco di tutti gli articoli pubblicati?
Magari più in la riprenderò l’argomento dedicandogli un articolo.
Grazie per essere passato e a presto.
Il mio dubbio deriva da un’osservazione.
Considerando che dal pannello posso assegnare una pagina statica come home page mi sembra strano che poi io non possa spostare “tutti i post” altrove nella stessa maniera (e dallo stesso pannello)… ma debba invece creare una pagina chiamata archivio ed assegnarle un tema ad hoc.
Finché faccio riferimento alle categorie nessun problema… ma se devo fare una modifica e non so giocare col template … mi arrangio. Mi ha stupito, mi sembra una mancanza piuttosto banale.
In italiano ci sono davvero poche risorse come questa, nel mio caso trovare un punto di partenza nella mia lingua madre mi ha dato la spinta necessaria. Credo che ci sia tanto di quel materiale attorno a wordpress che se tu volessi avresti una rubrica assicurata :)
Alla prossima :D
mi sono appena accorto che l’opzione per spostare la pagina degli articoli si trovava esattamente dove ritenevo dovesse trovarsi, in impostazioni->lettura! come sia possibile che io non me ne sia accorto non lo so XD
quindi come non detto… facciamo finta di niente…
Si, scienze, con “archivio” infatti intendevo qualcosa di molto diverso dalla semplice home page di un blog che raccoglie gli articoli in ordine cronologico.
Una pagina archivio può contenere l’indice di tutte le categorie (con relativa descrizione per ciascuna categoria) con gli ultimi x articoli pubblicati per ciascuna categoria, può contenere un indice suddiviso per anni/mesi o per tag, ecc… In questo caso allora è necessario creare un template apposito.
Ciao Nando, complimenti davvero per tutta la tua guida, non ho perso una puntata.. non si finisce mai di imparare!!! :D
Ciao Marco, grazie per i complimenti. Assolutamente d’accordo, continuiamo ad imparare giorno dopo giorno dopo giorno…
Grazie Nando per aver allegato il file da scaricare. Ho risolto! Per risponderti.. no, non ho una buona dimestichezza con i CSS, quindi spero che alla fine di questa guida, che ormai è arrivata all’ultima puntata, magari ne farai una aggiuntiva (come proseguimento) trattando la veste grafica e magari, come ha fatto notare in un commento “scienzedellevanghe”, anche l’aspetto archivio.
Sarebbe veramente un ottima lezione e… completa!!!
Grazie di tutto. Ciao.
Ciao Luigi, ho intenzione di trattare gli ulteriori approfondimenti nell’eBook che sto realizzando, compreso un caso studio in cui si parte da un layout PSD fino ad arrivare alla realizzazione del tema in XHTML & CSS. Comunque di tanto in tanto qualche novità o personalizzazione di WordPress continuerò a trattarla anche sul blog, ma non voglio fossilizzarmi solo su questo argomento =)
ben tornato! e grazie del tuo lavoro :)
Ciao veronica, grazie a te per essere passata =)
Ok Nando, non vedo l’ora di leggere il tuo E-book!!! :D
ciao.bravo come sempre. bell’artico, interessantissimo.sono una principinate e sto’ cercando di creare un negozio on line, avrei una domanda, nel mio tema per l’ e-shop i wigget me li fa aggiungere solo nel footer. io li vorrei a destra. posso usare il tuo metodo senza sconvolgere la funzionalita’ del tema? sono una principinate e sto’ cercando di creare un negozio on line, grazie
Beh, è una guida perfetta. Tutte le basi per cominciare un lavoro da zero le hai date. Sono riuscito a creare un intero tema seguendo questa guida.
Complimenti e continuate a lavorare così!!
Nando, il tuo nuovo Ebook per Natale potrebbe essere un ottimo regalo per tutti i fan di YourIspirationWeb… dimmi che è pronto :D
Faccio i complimenti all’autore di questa guida! Mi definisco un web designer emergente o almeno ci provo, so utilizzare joomla a livello basso/intermedio e avrei dovuto usarlo anche per il mio blog che avrei voluto mettere all’interno del mio sito ma molti mi avevano detto che wordpress era più semplice/immediato, quindi spinto dalla voglia di scoprire un nuovo cms cosi da poer fare anche un confronto, mi sono imbattuto in questa guida…che dire, grazie a te, impostare wordpress e capire i suoi funzionamenti è stata veramente una passeggiata, ora di certo non posso dire di saper utilizzare wordpress, ma sto riuscendo tranquillamente a personalizzare alla perfezione il sito wordpress, sia dalla struttura che dal lato grafico. Ti faccio i miei più sentiti complimenti. Grazie
Ciao, ho seguito il corso avendo la necessità di realizzare un sito in wordpress per un cliente che vuole inserire le news autonomamente. corso perfetto, ma io sono alle prime armi e la mia sidebar all’inserimento del secondo articolo si posiziona in basso. ho cercato nel web una soluzione, ho provato a togliere il tag more, ma niente da fare, mi puoi aiutare?
Buon giorno Nando.
Seguo tutto quello che hai pubblicato su wordpress con grandissima attenzione.
C’è un qualcosa però che non riesco a risolvere (sono “novizio”, prima facevo tutto con joomla): secondo te è possibile inserire sul mio sito un banner in alto, sopra la foto dell’header?
Non riesco a venirne fuori…
Grazie
Stefano
ciao davvero utili i tuo articoli!
Io ho un problema che mi sta facendo uscire pazzo!
ho comprato questo template
http://themeforest.net/item/optimasales-responsive-html5css3-template/full_screen_preview/3036631
e vorrei che il mio sito internet http://www.strinet.it/contatti alla pagina contatti abbia lo stesso allineamento dei widget come l’anteprima del templete, o meglio non riesco ad allineare la side bar in orizzontale perchè va direttamente in verticale. vorrei che” mandaci una mail” e” contatti” siano uno accanto all’altro e non uno sotto l’altro ed in piu vorrei che mandaci una mail sia impostato come nel template originale! ho mandato una mail al produttore del template ma non ho ricevuto nessuna risposta!
qualcuno può spiegarmi come fare?
Grazie ancora per l’attenzione spero in un vostro aiuto
ma perchè io sotto Aspetto ho solo Temi, Personalizza, Editor e non Widget??
Anch’io ho il tuo stesso problema..sei poi riuscito a risolvere? Forse nel momento in cui è stato scritto l’articolo la versione di WordpPress era diversa
Ciao,
ho provato a seguire questa parte, ma nel mio tema non compare la sezione Widget, sotto Aspetto. Come faccio a inserircela?