Aggiungere un’area widget ad un tema WordPress

La maggior parte dei temi WordPress consente l’inserimento dei widget in una o più posizioni nel layout, dette aree widget o sidebar dinamiche. Queste sono ubicate solitamente in una o più sidebar, nel footer o nell’header. Può capitare però di avere un tema non più aggiornato che non supporta i widget, oppure di voler aggiungere una nuova area. In entrambi i casi si deve innanzitutto scegliere il punto in cui si vogliono inserire i widget, quindi modificare il file di competenza. Per sapere di quale file si tratta, si può far riferimento alla guida  “Struttura di un tema WordPress“.

Aggiungere l’area widget al tema

Come esempio prendiamo in considerazione una sidebar (file sidebar.php) il più semplice possibile.

<ul id="sidebar">
 <li id="about">
  <h2>About</h2>
  <p>This is my blog.</p>
 </li>
 <li id="links">
  <h2>Links</h2>
  <ul>
   <li><a href="http://example.com">Example</a></li>
  </ul>
 </li>
</ul>

Come si può notare, è costituita da una lista non ordinata (<ul>) in cui sono presenti diversi elementi (<li>).  Ciascuno di questi elementi di solito è costituito da un titolo (<h2> o <h3>) e da un contenuto, che può essere un paragrafo (<p>), un’altra lista ecc. Le funzioni dei Widget consentono di sostituire la sidebar statica con una dinamica, nella quale poter inserire tutti i widget che si vogliono. Per abilitare una sidebar dinamica è sufficiente aggiungere il codice

<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>

subito dopo l’inizio della lista che costituisce la sidebar e il codice

<?php endif; ?>

subito prima della fine. La sidebar diventa dunque così:

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
 <li id="about">
  <h2>About</h2>
  <p>This is my blog.</p>
 </li>
 <li id="links">
  <h2>Links</h2>
  <ul>
   <li><a href="http://example.com">Example</a></li>
  </ul>
 </li>
<?php endif; ?>
</ul>

In questo modo, se non esiste la sidebar o non sono presenti widget, viene generata la sidebar di default, il cui codice è compreso tra i tag if e endif. Se invece la sidebar dinamica esiste e non è vuota, vengono visualizzati i widget. Sui file di template non sono necessarie altre operazioni, ma si deve ancora comunicare a WordPress che si utilizza nel tema una sidebar dinamica.

Registrare l’area widget del tema

Per far sapere a WordPress che il nostro tema contiene un’area widget, è necessario inserire nel file functions.php del tema il seguente codice:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
	'name'          => 'Nome della sidebar',
	'id'            => "sidebar-top",
	'before_widget' => '',
	'after_widget'  => '',
	'before_title'  => '',
	'after_title'   => '' ); ?>
);
?>

I parametri da passare alla funzione register_sidebar sono:

  • name: il nome che verrà dato alla sidebar nella pagina dei widget.
  • id: l’identificativo della sidebar, può contenere solo numeri, lettere e il trattino.
  • before_widget: il codice html da inserire prima di ogni widget
  • after_widget: il codice html da inserire dopo ogni widget
  • before_title: il codice html da inserire prima del titolo di ogni widget
  • after_title: il codice html da inserire dopo il titolo di ogni widget

I campi before_widget e after_widget servono nel caso la sidebar del proprio blog non sia standard ( non basata su liste), ma sia basata su div e quindi i widget debbano essere inseriti a loro volta all’interno di div. Per esempio, se la sidebar viene generata in questo modo

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('sidebar-top') ) : ?>
 <div>About</div>
 <p>This is my blog.</p>
 <div>Links</div>
 <ul>
  <li><a href="http://example.com">Example</a></li>
 </ul>
<?php endif; ?>
</div>

in functions.php si dovrà impostare i parametri così:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'Nome della sidebar',
        'id' => 'sidebar-top',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<div>',
        'after_title' => '</div>',
    ));
?>

Assegnare una classe CSS all’area widget

I campi con i prefissi after e before possono inoltre essere utilizzati per specificare delle classi  da assegnare agli elementi, in modo da modificarne lo stile grafico via CSS. Il codice nell’esempio qui sotto consente di utilizzare all’interno del foglio di stile del tema (style.css) la classe sidebar-top-title per modificare le dimensioni e il colore dei caratteri usati nel titolo dei widget. Tramite la classe sidebar-top-widget invece si possono modificare il padding, i margini o inserire dei bordi attorno ai widget.

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'Nome della sidebar',
        'id' => 'sidebar-top',
        'before_widget' => '<li class="sidebar-top-widget">',
        'after_widget' => '</li>',
        'before_title' => '<h3 class="sidebar-top-title">',
        'after_title' => '</h3>',
    ));
?>

Attenzione a non inserire una linea vuota in functions.php prima del tag <?php o dopo il tag ?>, altrimenti potreste riscontrare dei problemi nella generazione dei feed o altri malfunzionamenti!

Attenzione anche a non utilizzare i caratteri maiuscoli: consiglio vivamente, per esperienza personale, di usare sempre e solo il minuscolo per ogni nuovo file creato o per il nome della nuova area widget, per evitare problemi soprattutto per quel che riguarda l’attivazione dei widget nelle nuove sidebars.

Una volta terminato il tutto, comparirà nella sezione Aspetto->widget la sidebar appena creata e potremo utilizzarla per inserire i nostri widget. Seguendo questa guida, si puossono aggiungere tutte le sidebar dinamiche che si vogliono, in qualsiasi posizione del tema, avendo solo l’accorgimento di assegnare a ciascuna un id differente. Per esempio si potrebbe inserire una sidebar nell’header per poter aggiungere dei widget di testo con dentro il codice javascript dei banner, oppure di potrebbero aggiungere delle aree nel footer per inserire una fan box di Facebook e della classifiche di post. L’unico limite è la fantasia. Come ultima nota, a seconda di dove si inserisce l’area widget, potrebbe essere necessario intervenire via CSS per sistemare il layout.

Precedente WordPress Android: aggiornamento alla versione 1.3.9 Successivo Antisnews: tema magazine free completamente personalizzabile con slideshow
  • Adonella

    Ciao
    Come si fa a cambiare l’altezza del font in un widget testo?

    • Invece che inserire solo testo dentro al widget, usa un <div style="font-size:12px"> </div> per racchiudere il testo. In questo modo puoi variare la dimensione del testo specificando quella che preferisci.

  • Paolo

    Ciao!
    Bella guida!
    Ti volevo chiedere una cosa: io sto cercando di creare un tema strutturato in questo modo: voglio creare delle sidebar al cui interno voglio inserire dei div “widgettabili”; cioè la widget-area non è più il sidebar contenitore, bensì i vari div che lo suddividono.
    Come potrei fare secondo te? Io sono alle prime armi con wordpress e le sue funzioni…
    Ciao e grazie

    • Non ho capito molto bene cosa vorresti fare. Vuoi creare una sidebar con un div che contiene tutte le widget area, ciascuna con dentro un solo widget? Non capisco che utilità possa avere… Forse se spieghi meglio che risultato vuoi ottenere, possiamo trovare una soluzione migliore…

      • Paolo

        Ciao,
        allora, io voglio dividere una sidebar in più div, e in ciascuno di questi div (che sono widget areas) ci metto tutti i vari widget (anche più d’uno per div).
        Spero di essere stato un po’ più chiaro XD

        • Allora dividi la sidebar (in sidebar.php) in tutti i div che vuoi e crea un’area widget diversa all’interno di ciascuno. Ammetto che mi sfugge il risultato grafico/funzionale che vorresti ottenere, ma è l’unico modo per farlo.

          • Paolo

            Grazie mille! 🙂

  • angevent

    Per inserire un widget nell’header il processo è simile?

  • Non so se puoi rispondermi, ma sto cercando di fare una cosa molto semplice, che si sta rivelando assai complessa.

    Ho creato un hook per un foter widget, con più widget all’interno, e creato gli stili css per allineare il contenuto alla mia grdi.

    Andrebbe tutto bene, se potessi diffrenzioare l’ultimo stile css, per togliere il margine che mi serve ad allineare i vari widget alla grid. In pratica l’ultimo widget mi sfora.

    Se potessi assegnare a questo ultimo widget una classe, starei a posto, ma non riesco a trova un mod odi inserire un valore numerico dentro

    ‘before_widget’ => ”,

    Se potessi inserire un valore numerico sarei a cavallo, perché potrei differenziare per l’ultimo widget e assegnarlo alla classe corretta.

    Hai idea di come fare?

    • Se il widget è sempre lo stesso, dovrebbe avere un id univoco su cui poter lavorare.

  • Alessandro

    Ciao Niccolò, premetto che sono un neofita nel campo della progettazione web…vorrei creare un mio blog e con qualche reminiscenza di html+css (e con vari tentativi) vorrei personalizzare il tema Portfolium (questo l’indirizzo del template: http://wpshower.com/themes/portfolium/) prodotto dalla Wpshower.
    Come puoi vedere questo template non comprende una sidebar che io vorrei aggiungere per poter magari inserire widget come quello per Twitter.
    Ho seguito la tua guida, che sembra semplice e intuitiva anche per il mio livello, però non ha sortito nessun risulta.
    Saresti così gentile da aiutarmi e dandomi magari qualche dritta?
    Ti ringrazio in anticipo per la pazienza e la disponibilità.

    • Il consiglio migliore che ti posso dare è cercare un altro tema. Anche io che lavoro tutti i giorni su wordpress evito di fare interventi del genere perché sono molto complessi. Un conto è allargare una sidebar, un conto è aggiungerla dove non è prevista. Si devono modificare molti file e riscrivere buona parte del css. Il tema in questione inoltre è proprio studiato per non averla e a livello di design la nome ne risulterebbe impoverita.

  • Ciao Niccolò,
    ho bisogno di nuovo del tuo prezioso aiuto e non ho capito bene se quest’articolo mi può essere d’aiuto oppure no.
    Il problema è presto detto. Se guardi le colonne sx e dx dei blog www!automotivespace!it e www!automotivespace!eu, vedi che hanno un carattere diverso i widget (tipo LINGUE o SEGUICI).
    Io vorrei che fossero tutti come quelli in .eu, che poi è la stessa della barra di navigazione.
    Come faccio? Ho visto lo style .css, ma sono identici, ed anche il widget .css.
    Puoi darmi qualche indicazione?
    Grazie

    • c’è il selettore #newheader h2 che sovrascrive le direttive che vorresti fossero applicate. Cerca di capire in che CSS è stato specificato, con il minify attivo non si può vedere.

      • Grazie della celerità!

        Minify disattivato….ma i due selettori sono identici….e sono questi (in style.css)

        /*#newheader h2 {color: #666; font-size: 1em; padding-left: 20px; font-weight: normal; border: 0; margin-top: 10px; margin-bottom: 10px;}*/

        #newheader h2 {color: #666; font-size: 1.6em; font-weight: normal; border: 0; font-family: “Lucida Grande” ;}

        #newheader h2 {padding: 10px 0 0px 20px; }

        • sembra che il div con id newheader non sia chiuso correttamente e quindi i suoi stili vengono applicati all’intero blog.

          • …e tu che mi consigli?…a questo punto prendo lo style.css di eng e lo copio pari pari in quello ita? (ovviamente prima faccio backup.
            Oppure c’è una modifica da fare in modo meno invasivo?

            p.s.:Guarda che sono un neofita autodidatta, quindi molte cose sono per me oscure…

  • Niccolò,
    nella mia immensa ignoranza ci sono riuscito…sono andato in hedare.php, ho confrontato i file e ho trovato un in meno, l’ho aggiutno e ora è tutto ok!!!!!

    Grazie, senza la tua dritta non ci sarei riuscito….;)

    • Sapessi quante volte succede di dimenticare la chiusura di un div 😉

  • Alex

    Ciao Niccolo’, ho letto la guida ma non ho ben chiara una cosa : come faccio ad assegnare un bordo al widget che devo inserire? devo utilizzare uno del plugin newsletter ma lo da senza bordo e graficamente risulta poco intrigante. grazie della collaborazione

    • Ad ogni widget viene assegnato un ID univoco per poterlo personalizzare via CSS. Tramite firebug devi capire qual è l’ID del tuo widget, quindi inserire nel file style.css del tema il codice necessario ad aggiungere i bordi.

  • Alessio

    Salve,
    io ho l’esigenza di modificare il tema TwentyTen dove c’è un menu orizzontale. Voglio replicare la barra del menu e posizionarla sotto a quella già esistente in modo da avere due menu orizzontali separati. Come faccio ?