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: , , , , | 39 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.

  • http://www.ilcibodellamente.it Pamela

    Ciao, eccomi di nuovo alle prese con le sidebar.. Sono la stessa del 19 luglio e mi ritrovo con il medesimo problema, eccetto per il fatto che ora la seconda sidebar, oltre a leggermela nel pannello dei widget, me la legge anche nel codice. Peccato che analizzando il codice con Firebug, all’interno della “sidebar2″ è come se non leggesse i widgets… Con i css le ho provate tutte e non penso sia quello il problema, ho allargato il template, assegnato alla seconda sidebar lo stesso id della prima per vedere se in quel modo si visualizzava qualcosa, e invece niente.

    Praticamente questa stringa:

    risulta vuota…

    Ti dico quello che ho fatto vediamo se può essere un problema una di queste cose:

    - innanzitutto non ho potuto rinominare sidebar.php con sidebar1.php perchè non mi leggeva più i css, non so per quale motivo. Allora l’ho lasciata così e ho creato un file sidebar2.php con all’interno:

    E’ un problema non aver rinominato sidebar con sidebar1.php? Nel caso in cui lo fosse, perchè quando rinomino il file in sidebar1.php non funzionano più i css?

    - Ho inserito la funzione in functions.php, solo che io già avevo il file e c’era già scritto questo:

    ‘Sidebar’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”
    ));

    Allora dopo il punto e virgola ho ripetuto quanto scritto prima, modificando il nome della Sidebar in Sidebar2:

    if (function_exists(‘register_sidebar’) )
    register_sidebar(array(
    ‘name’ => ‘Sidebar2′,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”
    ));

    Quindi ora nel mio file functions, oltre tutto quello che c’è all’interno che riguarda altre cose del template presumo, c’è scritto:

    ‘Sidebar’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”
    ));

    if (function_exists(‘register_sidebar’) )
    register_sidebar(array(
    ‘name’ => ‘Sidebar2′,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”
    ));

    - Ho inserito infine le due stringe alla fine di index.php, page.php, front-page.php, archive.php:

    TEMPLATEPATH va sostituito con qualcosa?

    Comunque sia il risultato è che la seconda sidebar si vede nel pannello dell’inserimento widget e nel codice, ma non si legge niente di quello che ho inserito all’interno e non ha nessuna formattazione css… Potresti aiutarmi? Non riesco veramente a capire quale potrebbe essere il problema, e se fosse legato a quel sidebar.php che non posso rinominare penso che la soluzione sia più semplice di quanto pensi.. o no?

    Fammi sapere
    Grazie
    Pamela

  • http://www.ilcibodellamente.it Pamela

    come non detto, ho risolto :P dovevo richiamare la sidebar2 nel file sidebar.php, ora si vede !!! grazie

  • http://www.flapane.com flapane

    Esatto, fortunatamente hai risolto subito! :)
    A proposito, bel blog davvero, l’accostamento di colori e l’ombreggiatura in secondo piano mi piacciono molto. Posso consigliare il libro che ora è sul… mio comodino? Antologia di Spoon River (dopo aver fatto di recente un viaggio nel Midwest ho colto la scusa per iniziarlo).
    Qui su Firefox, però, il codice per lo scambio banner mi finisce fuori la sidebar: http://i.imgur.com/yIP7t.jpg

  • http://www.ilcibodellamente.it Pamela

    Grazie! Ogni consiglio per un buon libro è sempre benaccetto! :) mh, che strano, io il textarea lo vedo dentro la sidebar su firefox… ora controllo meglio :) grazie ancora!

  • crazyhorse

    Ciao, come posso fare, invece, per inserire una sidebar inferiore, immediatamente prima del footer? Sto usando il tema “Sliding Door 2.6.1″, usando i tuoi suggerimenti riesco a vedere la widget area nel pannello di controllo, ma non sul blog…

  • http://www.flapane.com flapane

    Ciao, non la vedi perchè il codice css mostrato nell’articolo è specifico per le classiche sidebar verticali, e probabilmente adesso viene forzatamente nascosta da qualche altro elemento del tuo blog.
    E’un css generico, perchè ovviamente ogni blog ha una struttura diversa, quindi sarebbe stato impossibile indicare un foglio di stile universale per la sidebar.
    Devi giocare tu (e molto) con il codice del foglio di stile della sidebar, per crearne una che si sviluppi solo in orizzontale, e che mostri la sidebar proprio dove vuoi tu.

  • Pingback: Consulenza su Wordpress per MK Arredamenti - weblogix.biz