Creare un Tema WordPress – La Sidebar

Siamo arrivati quasi alla fine del primo ciclo di articoli dedicati alla realizzazione di un tema per WordPress poiché le lezioni future saranno incentrate sull’aggiunta di funzionalità avanzate al nostro tema appena creato come, ad esempio, un pannello amministrativo per poter gestire alcuni parametri del tema stesso oppure widget personalizzati. Ma torniamo a noi, nella lezione di oggi vedremo come aggiungere la sidebar al nostro tema. Creiamo un file nuovo e rinominiamolo sidebar.php e includiamolo in single.php, archive.php e search.php aggiungendo, dopo il richiamo al loop, la funzione get_sidebar():

<?php get_sidebar(); ?>

È possibile indicare una sidebar specifica, inserendone il nome tra parentesi.

<?php 
/* Caricherà il file sidebar-right.php */
get_sidebar('right'); ?>

Mentre, all’interno della sidebar, scriviamo:

<div id="sidebar">
<h2>Cerca nel sito</h2>
<?php get_search_form(); ?>
</div>
<div class="clear"></div>

Invece, nel foglio di stile, aggiungiamo:

/* Sidebar */

#sidebar ul { list-style:none; }
#sidebar h2 { font-size:16px;font-family:Verdana, Geneva, sans-serif;line-height:2.4em; color:#262626; text-shadow:1px 1px 1px #fff; text-align:left; margin:10px}
#sidebar input[type=text] { width: 100px; height:12px; padding: 8px; float:left; border: 1px solid #DBDBDB; margin:0 0 0 10px; }
#sidebar input[type=submit] { cursor: pointer; height:30px;  width:76px; background:#007fa6; text-align:center; font-size:14px;line-height:29px; border:none; color:#fff; float:right; margin:0 10px 0 0}

Ora predisponiamo la sidebar ad ospitare i widget, ovvero elementi gestibili dal front end di WordPress da Aspetto e poi su Widget. Per aggiungerne uno basta trascinarlo all’interno dello spazio predisposto ai widget che desideriamo, infatti è possibile aggiungere più di un’area, ad esempio in punti diversi della sidebar o del sito, come nel footer. Ora, andando in Widget nell’area amministrativa del nostro sito in WordPress, verrà visualizzato un errore o non sarà comunque possibile andarci. Niente paura, basta utilizzare la funzione register_sidebar(), all’interno di function.php. Accetta 8 parametri, vediamoli insieme:

1. $name, il nome della sidebar, deve essere un nome identificativo e univoco, per evitare incomprensioni.
2. $id, l’id della sidebar, deve essere in minuscolo e senza spazi. Di default è un valore che si auto incrementa
3. $description , la descrizione della sidebar, che comparirà nel pannello di amministrazione di WordPress.
4. $before_widget, eventuale codice HTML da visualizzare prima del widget.
5. $after_widget, eventuale codice HTML da visualizzare dopo il widget.
6. $before_title, eventuale codice HTML da visualizzare prima del titolo del widget.
7. $after_title, eventuale codice HTML da visualizzare dopo il titolo del widget.

if (function_exists('register_sidebar')) {
 register_sidebar(array(
 'name' => 'sidebar',
 'id'   => 'sidebar-area',
 'description'   => 'La nostra widget area.',
 'before_widget' => '<div class="widget-box">',
 'after_widget'  => '</div>',
 'before_title'  => '<h2>',
 'after_title'   => '</h2>'
 ));
}

Per richiamarla nel punto desiderato, quindi in sidebar.php, aggiungiamo

<?php (dynamic_sidebar('sidebar-area')) ?>

Grazie alla funzione dynamic_sidebar(), andremo a richiamare l’area widget creata precedentemente.

Nel caso non fosse stato aggiunto nessun widget e volessimo inserire un contenuto statico o un messaggio di errore, scriviamo:

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar-area')) :
else: 
/* Azioni da eseguire o testo da visualizzare, nel caso la sidebar non fosse attiva */
endif; ?>

In questo modo controlliamo se esiste la funzione dynamic_sidebar e se corrisponde a quella creata precedentemente, se cosi non fosse possiamo caricare un contenuto statico oppure un messaggio di errore. Possiamo ulteriormente sintetizzare il tutto nel seguente modo:

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-area')):
/* Azioni da eseguire o testo da visualizzare, nel caso la sidebar non fosse attiva */
endif; ?>

Ora possiamo aggiungere i widget alla nostra sidebar.

Tornando al sito, troverete la lista degli ultimi articoli e delle pagine presenti.

Ora andiamo a personalizzare lo stile delle liste non ordinate, aggiungendo nel file style.css:

#sidebar li a { font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:1.6em; color:#007fa6; text-decoration:none;text-shadow:1px 1px 1px #fff; margin:0 0 0 10px; }
#sidebar li a:hover { color:#262626;}

Ecco il risultato:

Se vogliamo aggiungere una nuova sidebar, ad esempio per il footer
(teniamo in sospeso questa parte per l’ultima lezione, il footer non è ancora presente ma questo esempio vale anche per altre situazioni)

if (function_exists('register_sidebar')) {
 register_sidebar(array(
 'name' => 'Sidebar',
 'id'   => 'sidebar-area',
 'description'   => 'La nostra widget area.',
 'before_widget' => '<div class="widget-box">',
 'after_widget'  => '</div>',
 'before_title'  => '<h2>',
 'after_title'   => '</h2>'
 ));
 
 register_sidebar(array(
 'name' => 'Footer Sidebar',
 'id'   => 'footer-sidebar-area',
 'description'   => 'La nostra widget area.',
 'before_widget' => '<div class="widget-box">',
 'after_widget'  => '</div>',
 'before_title'  => '<h2>',
 'after_title'   => '</h2>'
 ));
 
}

Tornando al front end del nostro sito, troveremo un nuovo spazio dove aggiungere i widget.

Per farli visualizzare nel footer dovremmo scrivere, al suo interno:

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-sidebar-area')):
/* Azioni da eseguire o testo da visualizzare, nel caso la sidebar non fosse attiva */
endif; ?>

Bene, in questa lezione abbiamo visto come rendere la nostra sidebar, grazie all’utilizzo dei widget. Nella prossima lezione vedremo come gestire la ricerca. Alla prossima settimana.