Per fare un uso migliore di spazio nella tua sidebar, piè di pagina o qualsiasi altra area sul tuo sito web WordPress-powered dove si utilizza il widget, è possibile utilizzare colonne nei tuoi widget. Questo consente di grandi blocchi di testo e lunghe liste occupano spazio più orizzontale e verticale sinistra. I visitatori hanno quindi fare a meno di scorrimento per visualizzare la totalità del tuo blog.

Widget

WordPress permette di utilizzare widget per aggiungere contenuto dinamico a sezioni del vostro lato, tra cui barre laterali e piè di pagina. Per impostazione predefinita, WordPress include alcuni widget, e plug-in possono aggiungere widget aggiuntivi per servire funzioni specifiche, come ad esempio mostrando il tuo post di Twitter recenti. È anche possibile utilizzare widget WordPress per aggiungere frammenti o di HTML o di testo al tuo sito Web senza modificare i file di tema. In questo modo, widget consentono di personalizzare il tuo sito anche se non siete abili con HTML in modo sicuro.

Aspetto di widget

Per impostazione predefinita, la maggior parte widget vengono visualizzati come una singola colonna. Ad esempio, archivio e Twitter widget appaiono come liste verticali ovunque li si installa nel vostro layout. Testo e altro contenuto si espande per adattarsi il contenitore assegnato, ad esempio la sidebar. Un contenitore stretto Mostra meno contenuti per riga, e il widget diventa così più a lungo quando contiene un sacco di contenuti.

Creazione di colonne

Per creare colonne in un widget di testo, utilizzare divs e renderli a insieme. Generalmente, potete galleggiare entrambi a sinistra e specificare una larghezza leggermente inferiore al 50 per cento per creare due colonne. Utilizzare una larghezza di circa il 33 per cento per creare tre colonne. Incollare il seguente codice in un widget di testo per creare due colonne con div. È possibile inserire qualsiasi contenuto all'interno del div:

< div style = "float: left; Larghezza: 45% "> contenuto qui < / div >< div style =" float: left; Larghezza: 45% "> contenuto qui < / div >

È anche possibile utilizzare la proprietà "float" e "larghezza" per spostare gli elementi di elenco in una colonna utilizzando una sintassi simile:

< ol >< stile li = "float: left; Larghezza: 45% "> elenco elemento </li >
< stile li = "float: left; Larghezza: 45% "> elenco elemento </li >
</ol >

Considerazioni

Se non si desidera modificare i file di tema, è più semplice creare widget con colonne con l'aggiunta di CSS per il tag HTML stessi, come nell'esempio precedente. Tuttavia, è possibile modificare direttamente il codice HTML per il widget generato. Inoltre, se si Visualizza il sorgente del tuo sito Web, puoi vedere la classe o ID applicato al widget e aggiungere CSS a un foglio di stile esterno per creare colonne. Ad esempio, se un widget elenco utilizza l'ID "widget-list", aggiungere quanto segue al file "Style. css" per creare elenchi con colonnati:

li. list-widget
{
float: left; Larghezza: 45%;
}

È possibile utilizzare una tattica simile per spostare CSS dai widget di testo al tuo foglio di stile esterno. Ad esempio, inserire quanto segue nel foglio di stile a galleggiare il vostro div a sinistra:

. div-nome
{
float: left; Larghezza: 45%;
}

Modificare il codice del widget in modo che appaia simile al seguente:

< div class = "div-nome" > contenuto qui < / div >