Modificare la sidebar WordPress
Posted December 31, 2005
Comments: 15
In questo articolo modificheremo l’aspetto della colonna laterale (sidebar) standard di WordPress, utilizzando le regole CSS. In sei semplici passi, trasformeremo una sidebar Kubrick (fig. 1) in una sidebar “Almost Spring” (fig. 7); Kubrick è il tema WordPress standard, mentre “Almost Spring” è un tema WordPress realizzato da Becca Wei. Per comodità dei lettori, i file modificati sono disponibili qui per il download.
Il metodo illustrato può essere impiegato per realizzare diversi stili di sidebar, secondo le nostre preferenze individuali. Queste istruzioni sono state testate con Internet Explorer 6.0, Firefox 1.5 e Konqueror 3.2.3.
Partiamo da un tema Kubrick pulito, la cui sidebar è riprodotta in fig. 1.
Fig. 1
Per prima cosa andiamo nella cartella wp-content/themes della nostra installazione WordPress, e facciamo una copia di backup della cartella default con tutto il suo contenuto; in realtà modificheremo solo due file, sidebar.php e style.css nella cartella default, ma un backup completo non guasta mai, giusto?
Adesso apriamo il file sidebar.php nella cartella default, con il nostro text editor preferito.
Come possiamo vedere, il tema Kubrick realizza la sidebar con una unica sezione div chiamata “sidebar”, la quale contiene una unica grande ul (unordered list, lista non ordinata), i cui li (list items, elementi di lista) sono le varie sezioni della sidebar (Archives, Categories, e così via).
Ciascuna di queste sezioni è composta a sua volta da un titolo h2, seguito da un’altra lista ul, i cui li sono finalmente i singoli elementi della sezione (link agli archivi mensili, o categorie, o altro ancora).
Ora abbiamo bisogno di disattivare tutte le preesistenti regole CSS relative alla sidebar, perciò cambiamo il nome della intera sezione div in “mysidebar”, o qualsiasi altro nome di nostro gradimento, come segue:
<div id=”sidebar”>
<div id=”mysidebar”>
Quindi apportiamo alcuni cambiamenti alla sezione Search, per renderla simile alle altre sezioni della sidebar, in questo modo:
<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>
<h2>Search</h2>
<ul><li>
<form method=”get” action=”<?php bloginfo(‘home’); ?>/”>
<input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” />
</form>
</li></ul>
L’ultima modifica che apportiamo al file sidebar.php rimuove il contatore opzionale degli articoli dopo ciascun nome di categoria:
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0’); ?>
<?php wp_list_cats(’sort_column=name&optioncount=0&hierarchical=0’); ?>
Ora possiamo chiudere il file sidebar.php e aggiornare la finestra del nostro browser: il risultato è mostrato in fig. 2. Possiamo vedere che la maggior parte degli stili della sidebar sono stati disattivati, la sezione Search ha lo stesso formato delle altre sezioni, e non ci sono contatori nella sezione Categories.
Fig. 2
Dobbiamo adesso inserire le regole CSS per “mysidebar”. Apriamo il file style.css nella cartella default, e aggiungiamo in fondo al file due regole. La regola #mysidebar specifica la posizione della sidebar nella schermata WordPress, mentre la regola #mysidebar ul specifica la posizione della lista principale all’interno della sidebar, e toglie i pallini dalle liste:
#mysidebar {
margin: 0 0 0 527px;
padding: 0;
width: 223px;
}
#mysidebar ul {
margin: 0;
padding: 15px 15px;
list-style: none;
}
Il risultato è mostrato in fig. 3. La sidebar è posizionata correttamente, e non ci sono pallini nelle liste.
Fig. 3
Aggiungiamo ancora due regole: la regola #mysidebar ul ul definisce il colore del bordo superiore di ciascuna sezione della sidebar, e la regola #mysidebar ul ul li definisce i colori dello sfondo e del bordo inferiore di ciascun elemento della sezione.
#mysidebar ul ul {
margin: 0;
padding: 0;
border-top: 1px solid #6c83b0;
}
#mysidebar ul ul li {
background: #eaedf3;
border-bottom: 1px solid #b0c1e5;
}
Il risultato di questo passo è mostrato in fig. 4. Si comincia a intravedere l’aspetto finale della nostra sidebar.
Fig. 4
Le regole che inseriamo successivamente definiscono l’aspetto e il comportamento dei link all’interno degli elementi di una sezione, come segue:
#mysidebar ul ul li a {
margin: 0;
padding: 4px 10px 2px 10px;
display: block;
text-decoration: none;
}
#mysidebar ul ul li a:link, ul ul li a:visited {
color: #6c83b0;
}
#mysidebar ul ul li a:hover, ul ul li a:active {
color: #e58712;
background: white;
}
Il risultato di questo passo si vede in fig. 5.
Fig. 5
Dobbiamo quindi specificare la regola CSS per il titolo di una sezione di sidebar:
#mysidebar h2 {
margin: 0;
padding: 14px 0px;
font-size: 1.2em;
color: #6c83b0;
}
Il risultato è mostrato in fig. 6.
Fig. 6
E l’ultimo ritocco è per la sezione Search, come segue:
#mysidebar form {
margin: 0;
padding: 2px 10px;
}
Il risultato finale si vede in fig. 7.
Fig. 7
Ovviamente possiamo modificare le regole CSS qui suggerite, secondo le nostre preferenze (su tipi di carattere, dimensioni, colori, spaziature, eccetera) e realizzare la nostra sidebar ideale.
Per comodità dei lettori, i due file modificati sidebar.php e style.css sono disponibili qui per il download; potete utilizzarli così come sono, oppure come base per i vostri esperimenti.
Ringraziamenti: grazie a Becca Wei, che ha realizzato il tema WordPress Almost Spring; al sito Arch Linux Blog, da dove provengono i colori qui suggeriti; e, naturalmente, grazie alle specifiche HTML 4.01 Specification e CSS level 1 Specification.
Dajeeeeee, metti questi file disponibili per il download che ho fatto un casino
Ciao ciao e grazie
Emiliano
Ciao Emiliano,
ho appena caricato i file di cui parla l’articolo. Spero che ti siano utili!
Ciao e buon lavoro.
Mittticco.
Senti, sto lavorando alla nuova versione del mio sito (inutile dirti che mi sei utilissimo), sai dirmi per caso perchè cavolo mi compare una barra sotto l’header (appena sotto il menu orizzontale) con explorer? (non con firefox)
http://www.villadilivia.it/3/
ciao ciao e 1000000000 grazie
Ah dimenticavo… invece con firefox c’è un disallineamento dell’immagine dell’header, si vede bene nei 2 angoli in alto
L’indirizzo corretto è http://www.villadilivia.it/roma-nord/index.php
Comunque credo sia lo stesso problema che si manifesta in due modi diversi con explorer e firefox. Ora ho risolto alla buona allungando il menu, così la strisciolina di 1 px non si vede, ma si nota comunque un disallineamento alla base del menu che con firefox non c’è (ma in compenso c’è in alto)
Ciao Emiliano,
hai lavorato parecchio stanotte! Ma andiamo in ordine.
Il menu orizzontale è sfasato di un pixel in giù in IE: ho anch’io lo stesso problema e non riesco a risolverlo. Puoi provare a mettere un background blu all’intera navbar per mascherare lo sfasamento.
L’immagine di testa ha una imperfezione negli angoli superiori: prova a sostituire l’immagine di testa secondo le istruzioni del mio post sul menu orizzontale, vale a dire dimensioni 740 per 200 e rimpiazzare la immagine originale. Ora stai usando una immagine 760 per 200, e la stai sovrapponendo all’immagine originale.
Ciao, fammi sapere se funziona!
Porca miseria… ieri alla fine ho fatto le 6.00!
Alla fine per il pixel ho risolto mettendo il menu orizzontale bianco che mi piace pure parecchio.
Ho ridimensionato l’immagine come mi avevi detto ma lo fa lo stesso… boh, che altro può essere?
Emiliano,
la tua immagine di testa deve rimpiazzare l’immagine originale, non sovrapporsi ad essa. Puoi seguire le istruzioni del mio post sul menu orizzontale, o puoi provare semplicemente a cancellare l’immagine di testa originale dalla cartella ‘images’.
Ciao!
Innanzitutto mi complimento per il tuo sito, è chiarissimo!!
Ciao andrea ho appena iniziato ad usare word press e sarebbe mia intenzione crearne uno mio. Spero di non disturbarti troppo con le mie domande.
Magari le cose che chiederò potranno sembrare banali ma ribadisco che sono proprio alle prime armi
quello che mi interessa è come tu sia riuscito ad organizzare la strutture di pagine tipo diario di bordo; l’ utente clicca sulla barra orizzontale , gli appare l’elenco di tutte le sotto pagine e tutte queste non presentano più la side bar . Spero tanto di essere riuscito a spiegarmi
Ti ringrazio anticipatamente per l’attenzione
ciao antonio
per quanto riguarda la struttura sono riuscito a capirla ma non riesco a farmi presentare come permalink solo il titolo dell’articolo ma mi scrive tutto e continua a rimanermi il problema di come si faccia sparire la sidebar
Ciao Antonio,
. Nel frattempo ti anticipo che si tratta di un template di pagina, descritto ad esempio su WordPress Italy:
stavo proprio scrivendo un articoletto sul tema, e visto che ho trovato un lettore cercherò di pubblicarlo in questo fine settimana
http://www.wordpress-it.it/wiki/Main/UtilizzarePagine#toc12
A presto!
è una settimana che ci provo e non sono venuto ad una soluzione, continuo a non riuscire a farmi apparire solo il titolo del post invece di avere tutto l’articolo
scusa nuovamente per il disturbo
Nessun disturbo, ho solo impiegato più tempo del previsto, ma ora il post è pronto:
http://www.dontdream.it/home/2006/05/07/indici-per-un-sito-wordpress/
Buon lavoro!
Ciao Ragazzi,
prima di tutto i mie complimenti per i lavori realizzati e l’attenzione che prestate alle esigenze di tutti.
Detto questo, sono nuovo del mondo Wordpress e, devo dire, ne sono affascinato. Non ho molta dimestichezza però con i CSS e perciò ho un pò di difficoltà nel capire alcune cose.
Sto realizzando un sito per conto di un’associazione e, prima di comprare uno spazio web ad hoc, mi sono registrato su altervista per delle prove tecniche. Ho caricato un template e sto cercando di personalizzarlo. Alcune cose le ho fatte ma altre non riesco. Mi aiutate a capire come fare per
1) Midificare il colore dello sfondi della Sidebar di destra?
2) Mi aiutate a capire come cambiare il colore dell’effetto roolover per le voci Home, Chi Siamo in alto sull’Header?
Il sito,per chi volesse dare un’occhiata, per ora è all’indirizzo http://www.ciopin.altervista.org/
Vi ringrazio per quanto vorrete fare per me!
Grazie
Umberto
Ciao Umberto,
potresti indicare il tema che usi? Diversamente è difficile dare dei suggerimenti. Poi, se già non lo conosci, ti segnalo anche il sito di WordPress Italy, http://www.wordpress-it.it/ , dove trovi una quantità di documentazione e di informazioni utili. A presto!