Flavio's blog

Di tutto di più, il blog del sito flapane.com

HOWTO : Tecnica definitiva per aggiungere una sidebar in WordPress (widget ready)

Nelle ultime settimane ero alla ricerca di qualche trick per aggiungere una sidebar (barra laterale) in un tema per , come quello che uso, che presenta originariamente una sola sidebar (quella che al momento è a sinistra).

Dopo aver cheisto in giro ed anche nel Forum ufficiale di WordPress Italia, non ho trovato alcuna soluzione che funzionasse davvero, e che fosse -ready, cioè permettesse di visualizzare la sidebar nella sezione Widget del pannello di admin, e di aggiungere (con successo) una qualsiasi widget.

Nel migliore dei casi, la sidebar appariva, ma erano presenti solo il calendario ed il blogroll, e qualsiasi widget aggiungessi, non veniva visualizzata. In altri casi, aggiungendo le widget e cliccando su SALVA, appariva un errore php, segno che qualcosa era sbagliato!

Unendo i consigli trovati in giro e quelli di questo articolo, sono giunto ad una soluzione “personale”, e che si è concretizzata con la nuova sidebar, che in questo tema appare alla destra degli articoli.

Prima di tutto bisogna andare nella cartella del proprio tema WordPress e, in caso non esistesse, creare un nuovo file chiamato functions.php così composto:

<?php

if ( function_exists('register_sidebar') )
{
{
    register_sidebar(array(
	'name' => 'prima',
        'before_widget' => '<div class="widget">',
    'after_widget' => '</div>',
 'before_title' => '<h2 class="side_title">',
        'after_title' => '</h2>',
    ));
}
{
    register_sidebar(array(
	'name' => 'seconda',
        'before_widget' => '<div class="widget">',
    'after_widget' => '</div>',
 'before_title' => '<h2 class="side_title">',
        'after_title' => '</h2>',
    ));
}
}
?>

Come si può vedere, nel campo ‘name’ bisogna indicare dei nomi per individuare facilmente le sidebar, e i campi ‘before/after’ servono per definire gli stili delle widget, e sono quindi relativi al proprio foglio di stile. Per esempio, nel mio caso:

.widget {margin-bottom: 1em; font-size: 0.9em;}
.widget ul {padding-bottom: 0;}

.side_title {
	background: url('img/decay.gif') no-repeat left center;
	color: #F00;
	font: normal 2em Impact,sans-serif;
	letter-spacing: 1px;
	padding: 0 0 12px 22px;
}
h2.side_title {
	background: url('img/decay-small.gif') no-repeat left center;
	padding-top: 6px;
}

Dando per scontato che il vostro tema presenta di default una sola sidebar, bisogna andare a rinominare il file sidebar.php in sidebar1.php.
Questo file rappresenta la prima sidebar originale (nel mio caso la sidebar di sinistra).

Bisogna poi creare un file chiamato sidebar2.php composto da questo codice:

<div id="navigation_right">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
<?php endif; ?>
</ul>
</div>

Dove il div navigation_right l’ho aggiunto io ed è relativo al mio foglio di stile, ed a grandi linee effettua un posizionamento assoluto della sidebar:

#navigation_right {
	left: 840px;
	position: absolute;
	top: 340px;
	width: 190px;
		overflow: visible;
}

Adesso non rimane che aggiungere entrambe le sidebar nelle pagine di Template del vostro tema (es. index.php page.php single.php archive.php).
Bisogna sostituire, in queste pagine, il codice che si trova press’a poco nella parte finale del codice, e che presenta un get_sidebar con:

<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>

Fatto? Adesso basterà andare nel pannello di admin, sezione Widget, e dovreste visualizzare, in alto a destra, una finestra per selezionare una delle due sidebar. Provate ad aggiungere delle widget, e vedrete che, come il tema qui utilizzato nel mio sito, appariranno due sidebar a destra e sinistra del testo.

Consigli, esperimenti, varie ed eventuali? Scrivetele pure nei commenti!

Share

Scritto da flapane il 27 aprile 2009 in Webdesign, Web 2.0 & SEO | Tags: , , , , | 40 Commenti »
Puoi rimanere aggiornato e leggere tutte le risposte attraverso il feed RSS 2.0, e puoi lasciare un commento, o un trackback (backlink) dal tuo sito.