Come dividere in colonne una lista non ordinata? Facile con i css!

Oggi ti mostro come dividere in colonne gli elementi dei widget Categorie e Archivi di WordPress, pratica utile quando il tuo blog inizia a contenere molti articoli e vuoi ottimizzare lo spazio, migliorando la leggibilità della sidebar o del footer. Più in generale, con questo metodo puoi dividere in colonne qualsiasi lista non ordinata del tipo <ul> <li>, semplicemente aggiungendo qualche riga in più al tuo foglio di stile.

Così manterrai un codice pulito senza la necessità di ricorrere a modifiche sul modo in cui vengono generati i dati e senza dover introdurre nessuna tabella.

L’unica complicazione, nel caso dei widget Categorie e Archivi, è dovuta al fatto che WordPress non assegna nativamente alcun id alle liste generate da questi widget: li devi aggiungere a mano.

Per farlo apri il file /wp-includes/default-widgets.php e alla riga 237 cerca il tag <ul>. Quello è relativo al widget dell’Archivio. Aggiungi un id a piacere, io ad esempio l’ho modificato così: <ul id=”archivio”>.

Analogamente procedi con il widget delle Categorie. Questa volta vai a riga 459 e aggiungi un id al tag <ul>, io ho fatto così: <ul id=”argomenti”>.

Nota: queste informazioni sono relative alla versione 3.3.1 di WordPress.

Ovviamente nel caso non abbiano differenze di posizionamento e non necessitino di parametri personalizzati, puoi utilizzare una classe unica per entrambe le liste al posto di due id differenti.

Io ho deciso di dividerle una su due e l’altra su tre colonne, perciò ho dovuto mantenerle separate.

Ricorda comunque che gli id devono essere unici e non puoi assegnare lo stesso a più elementi. Se vuoi applicare la stessa formattazione a più liste, devi perciò utilizzare le classi al posto degli id.

Una volta assegnato l’id alle liste, devi aggiungere il seguente codice nel tuo css (ovviamente ripetuto per ogni differente id, o modificato opportunamente se utilizzi le classi!):

Il numero delle colonne che otterrai dipende dal parametro di larghezza assegnato agli elementi di lista, che nell’esempio è del 50% e rappresenta la larghezza della singola colonna.

Non potendo indicare direttamente il numero di colonne, questo dipenderà dalla larghezza parziale di ogni colonna rispetto all’elemento contenitore della lista.

Ad esempio se assegni una larghezza del 50%, come nel codice in esempio, otterrai due colonne, mentre per dividere la lista in tre dovrai assegnare un valore del 33%.

Questo è quanto. Spero ti sia utile per migliorare l’aspetto delle tue liste!