Flavio's blog

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

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

wordpress logo 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 , 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:

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:

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:

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:

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:

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!

twitter HOWTO : Tecnica definitiva per aggiungere una sidebar in Wordpress (widget ready)oknotizie HOWTO : Tecnica definitiva per aggiungere una sidebar in Wordpress (widget ready)share save 171 16 HOWTO : Tecnica definitiva per aggiungere una sidebar in Wordpress (widget ready)



...Forse ti potrebbe interessare...

Scritto il 27 aprile 2009 in webdesign, web 2.0 and seo | Tags: , , , , | 35 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.


35 Commenti


  • FrancescoNo Gravatar

    Ottimo articolo, solo che non sto siuscendo ad sucire dalla mia situazione.

    In questa pagina:

    http://www.soldiwebonline.com/contattaci/

    le du sidebar che dovrebbero stare a destra si vanno a mettere sotto il post, mentre nelle altre pagine no.

    Puotresti darmi una mano?

    Grazie anticipatamente

    Francesco

  • flapaneNo Gravatar

    Ciao, grazie per i complimenti.
    La questione, prevedibile, è dovuta al fatto che si deve giocare molto col foglio di stile.
    Se usi una posizione fissa per le sidebar, come l’esempio nell’articolo, che recita per esempio 840pixel a partire dal bordo dello schermo, per la sidebar alla destra degli articoli, le barre si troveranno sempre in quella posizione, qualune cosa accada.
    Sicuramente ci deve essere un conflitto con qualche altra classe del tuo css, controllalo tutto da cima a fondo, all’inizio è inevitabile perderci del tempo, buona fortuna!

  • GiovanniNo Gravatar

    Grazie per aver condiviso questo HOWTO, l’ho applicato con successo: http://www.quacos.com/2009/07/13/consulenza-su-wordpress-per-mk-arredamenti/

  • flapaneNo Gravatar

    Ciao,
    grazie a te per averlo segnalato, felice che sia riuscito ad usarlo con successo!

  • FabioNo Gravatar

    Ho seguito passo per passo la tua guida, ma non sono assolutamente riuscito ad inserire una colonna aggiuntiva, anzi non mi viene neanche vista dal cms, c’e’ qualche altra forma di aiuto possibile?
    Grazie

  • flapaneNo Gravatar

    Ciao,
    la cosa è curiosa in quanto, oltre me, ci sono due utenti che hanno testimoniato l’effettivo inserimento della sidebar.
    A questo punto i motivi potrebbero essere i più disparati, dal foglio di stile (o dal tema) “strano”, che la blocca o la nasconde chisà dove, a qualche plugin, o qualche precedente modifica che hai fatto al codice php di WP, sarebbe davvero arduo da dire, purtroppo.

  • ChiaraNo Gravatar

    Grazie mille mi hai salvato!!! =) Funziona alla perfezione ed è spiegato davvero bene!

    Ho ancora una domanda da farti per l’ultimo step che mi manca!

    In pratica mi appare il div per la sidebar, riesco a stilarlo con la posizione corretta etc, ma come faccio ora a fare in modo che nella sidebar mi compaiano le pagine di secondo livello che mi interessano?!

    Grazie in anticipo!

    Chiara

  • flapaneNo Gravatar

    Di niente, figurati!
    Cosa intendi per pagine di secondo livello?
    In ogni caso puoi decidere COSA far apparire nelle sidebar dal pannello di amministrazione, sezione SIDEBAR.
    ciao

  • ChiaraNo Gravatar

    Ciao Flavio,

    scusami sto ancora un pò smattando su questa cosa. Ho visto cosa intendi dal pannello sidebar, con il campo exclude e gli id delle pagine. Da li posso escludere le pagine che non voglio visualizzare.
    Il mio problema è che devo far funzionare questa sidebar in modo che appaia su ciascuna pagina SOLO nel caso esistano delle pagine di secondo livello sotto di lei, e in quel caso deve mostrare le pagine di secondo livello.
    (deve funzioanre così perchè deve poi essere usata dal cliente che non ha un’idea di mettere le mani nei file!).

    Ho cercato un pò in giro e ho trovato la funzione wp_list_pages che ha anche un parametro “depth” ma non riesco a farlo funzionare =(

    Purtroppo non posso mandarti un link perchè il lavoro che sto facendo è tutto protetto da password, ma magari hai un’idea da darmi! Spero di avere spiegato bene il problema, capisco sia un casino senza qualcosa da vedere!

    Grazie mille ancora!

    Chiara

  • flapaneNo Gravatar

    Ciao,
    ho capito che dici, purtroppo però, non ne so abbastanza :)
    Andrei a leggermi il manuale e a cercare questa funzione in google… in genere c’è SEMPRE qualcuno che prima di noi ha utilizzato queste funzioni, e ne ha parlato/spiegato sul web.

    Flavio

  • tattooNo Gravatar

    Grazie per la condivisione, è fantastico!

  • flapaneNo Gravatar

    Prego, figurati!

  • IgorNo Gravatar

    Ciao ,grazie mille per la condivisione!
    Effettivamente funziona :-) aleno nel Csm mi ha creato la possibilità di aggiungere widget nella Sidebar.
    Il mio problema è che ho voluto aggiungere una Left Sidebar , dato che la Right l’avevo Già.
    Quindi ho provveduto a fare le modifiche da te segnalate , pero’ i widget che aggingo me li crea sempre sotto quelli già esistenti sulla Right.

    Spero di essermi spiegat e ti ringrazio ancra!

  • flapaneNo Gravatar

    Ciao!
    Ottimo, mi fa piacere che funzioni, il tuo problema credo stia proprio nel sistemarla per bene nel css.

    Dando per scontato che sia racchiusa nel tag div id="navigation_left", bisogna giocare con i valori, in particolare RIGHT e TOP, tutto sta nell’adattare il codice al tuo blog, ammettendo che il tuo blog e foglio di stile non abbiano errori di validazione che ti impediscono per qualche motivo di fare apparire la sidebar proprio dove vuoi tu.

    #navigation_left {
    right: 840px;
    position: absolute;
    top: 340px;
    width: 190px;
    overflow: visible;
    }

    p.s
    A breve dovrei inserire un post con la Rom che sto usando sul mio Spica, cucinata tramite Samdroid, magari tienilo d’occhio appena lo scrivo, potrà servirti per il tuo blog!

    ciao

  • IgorNo Gravatar

    Ciao , grazie mille per l’aiuto , pero’ sono un po’ imbrannato!!
    Scusa questa parte qui :
    #navigation_left {
    right: 840px;
    position: absolute;
    top: 340px;
    width: 190px;
    overflow: visible;
    }

    dove deve andare ? le sto provando tutto .
    Per l’identificazione era giusta , Navigation -Left

    Per La Rom , Grande News , appena l’hai fatta , mandami un e-mail cosi’ facciamo un post!!

    Sono stra preso con la migrazione del sito …. :-(

  • flapaneNo Gravatar

    Nel foglio di stile (.css) del blog.

    Per la rom ho controllato, il post è dato in pubblicazione per domani verso le 19, ti basterà dare uno sguardo :)

  • IgorNo Gravatar

    Grande Flavio!!!!
    Ho quasi risolto , finalmente si è spostato !! :-)
    Adesso pero’ che ho visto cosa ha fatto , mi metto le mani nei capeli , è tutto da modificare il layout della pagina !!
    Una domanda , i widget che inserisco, non mi mostra la loro “Tag” con il nome del widget, mentre per gl’altri si , hai idea ?
    Posso in ualche modo mandarti un veloce print screen che gli dai un’occhiata?

    Per la ROM, prometto che voglio ricordarm in assoluto , è una bella Chicca , che nessun altro avrà ! mi dai i diritti di farci un post ? :-)

  • flapaneNo Gravatar

    E sì, ci sarà da sistemare il layout del blog per fare spazio alla nuova barra laterale :)
    Sulle tag dei widget, onestamente non saprei dirti, però alcuni di norma non ne hanno, in effetti.

    Per la rom, certo, i backlink fanno sempre piacere :D
    Ormai è acceso da 20 giorni e si aspetta solo Froyo, in quanto con Samdroid si è raggiunto l’optimum per Spica e 2.1

  • FaustoNo Gravatar

    Ciao, perdonate l’ignoranza ma sono nuovo di wp… e se la sidebar volessi aggiungerla in basso e in orizzontale?

    Grazie!

  • flapaneNo Gravatar

    Ciao!
    Dovresti un pò giocare col foglio di stile, ma temo sarà dura, non ho mai vista una sidebar di WP in orizzontale.

  • FaustoNo Gravatar

    Ciao, ho seguito i passi indicati e tutto funziona.
    Ho solo un problema: ogni volta che accedo all’amministrazione dei widget, il contenuto delle sidebar inserite mi si resetta e quindi devo ogni volta reinserire i widget.
    Come devo fare?

    Grazie in anticipo

  • flapaneNo Gravatar

    Ciao, è stranissimo, sarebbe la prima persona a cui capita.
    Sicuro di avere l’ultima versione di WP?

  • FaustoNo Gravatar

    la versione è 3.0.1

  • flapaneNo Gravatar

    Una cosa che sicuramente proverei a fare (dopo essermi assicurato di non aver saltato alcuna linea di codice della guida, o aver sbagliato a copiare qualche carattere), è disabilitare tutti i plugin (e relative widget, se ce ne sono) “esterni”, di terze parti, e a provare a distribuire sulle due sidebar solo le widget incluse in WP, in modo da essere sicuri che non ci sia qualche plugin strano che crei problemi.

  • IreneNo Gravatar

    Ciao! grande! articolo funziona tutto. L’unica cosa con cui ho dei problemi è il posizionamento assoluto della nuova sidebar, che ovviamente si muove con il variare della posizione dello schermo.

  • IreneNo Gravatar

    Come non detto! mi trovo, avevo pasticciato con i css! grazie mille :)

  • flapaneNo Gravatar

    Ottimo, mi fa piacere tu abbia risolto. ;)

  • PamelaNo Gravatar

    Ciao, ho seguito le tue indicazioni ed ora sul pannello posso vedere la sidebar2, il problema è che non me la fa vedere sul blog anche se ho inserito alcuni widget di prova… ho giocato con il foglio di stile ma visualizzando la sorgente della pagina, è come se non me la leggesse… sul pannello c’è però…
    forse ho sbagliato qualcosa nell’ultima parte:

    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:

    me lo spiegheresti di nuovo per favore? GRAZIE!

  • flapaneNo Gravatar

    Ciao!
    Ti faccio un esempio: nel template che uso ora, ho solo una sidebar a destra, e quindi, usando il codice tradizionale (e che con due sidebar va sostituito), nel mio file index.php (e negli altri file elencati) ho:
    “< ?php get_sidebar(); ?>”

    Sostituisci questa linea con le due linee (attenzione, le virgolette non vanno incluse, le ho messe io per evidenziare le righe di codice):
    “< ?php include (TEMPLATEPATH . '/sidebar1.php'); ?>”
    “< ?php include (TEMPLATEPATH . '/sidebar2.php'); ?>“

  • PamelaNo Gravatar

    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

  • PamelaNo Gravatar

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

  • flapaneNo Gravatar

    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

  • PamelaNo Gravatar

    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!

  • crazyhorseNo Gravatar

    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…

  • flapaneNo Gravatar

    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.


  • 3 Trackbacks/Pingbacks

    1. diggita.it
    2. ZicZac.it, clicca qui e vota questo articolo!
    3. Consulenza su Wordpress per MK Arredamenti | WebLogiX

    Lascia un Commento