April 5
Per fare un uso migliore di spazio nel vostro barre laterali, piè di pagina o di qualsiasi altra area sul tuo sito web WordPress-powered in cui si utilizza i widget, utilizzare le colonne nei tuoi widget. Questo permette grandi blocchi di testo e lunghe liste di occupano spazio più orizzontale e spazio verticale sinistra. I visitatori quindi devono fare a meno di scorrimento per vedere la totalità del tuo blog.
WordPress consente di utilizzare i widget per aggiungere contenuti dinamici alle sezioni del tuo fianco, tra cui barre laterali e piè di pagina. WordPress include alcuni widget per impostazione predefinita, e plug-in può aggiungere widget aggiuntivi per servire funzioni specifiche, come ad esempio mostrare i tuoi ultimi post di Twitter. È inoltre possibile utilizzare i widget di WordPress per aggiungere snippet o HTML o testo al tuo sito web senza modificare i file del tema. In questo modo, i widget forniscono un modo sicuro per personalizzare il tuo sito anche se non siete abili con l'HTML.
Per impostazione predefinita, la maggior parte i widget appaiono come una singola colonna. Per esempio, archiviare e widget di Twitter appaiono come liste verticali ovunque li si installa nel layout. Il testo e altri contenuti si espande per adattarsi al contenitore assegnato, come il tuo barra laterale. Un contenitore stretto mostra meno contenuti per linea, e quindi il widget di diventa più lungo quando contiene un sacco di contenuti.
Per creare le colonne in un widget di testo, utilizzare div e di galleggiare insieme. Generalmente, si può galleggiare sia a sinistra e specificare una larghezza di poco inferiore al 50 percento 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; width: 45%"> Content Qui </ div> <div style = "float: left; width: 45%"> Content Qui </ div>
È inoltre possibile utilizzare il "float" e la proprietà "larghezza" per spostare gli elementi della lista in una colonna utilizzando una sintassi simile:
<Ol> <li style = "float: left; width: 45%"> List Item </ li>
<Style li = "float: left; width: 45%"> List Item </ li>
</ Ol>
Se non si desidera modificare i file a tema, è più facile creare widget colonnati con l'aggiunta di CSS per i tag HTML stessi, come nell'esempio precedente. Tuttavia, non è possibile modificare direttamente il codice HTML per i widget generati. Inoltre, se si visualizza sorgente del tuo sito web, è possibile vedere la classe o l'ID applicati al widget e aggiungere CSS a un foglio di stile esterno per creare colonne. Ad esempio, se un widget lista utilizza l'ID "lista-widget di" aggiungere il seguente al file "style.css" per creare elenchi colonnati:
.list-widget di li
{
float: left; width: 45%;
}
È possibile utilizzare una tattica simile per spostare CSS dai vostri widget di testo al vostro foglio di stile esterno. Ad esempio, inserire il seguente nel foglio di stile a stare a galla il tuo div a sinistra:
.div-nome
{
float: left; width: 45%;
}
Modifica il codice del widget in modo che appaia simile al seguente:
<Div class = "div-name"> Content qui </ div>