WordPress: visualizzare i post su più colonne

WordPress: visualizzare i post su più colonne

Per visualizzare i post su più colonne in WordPress non è necessario utilizzare un plugin, ma semplicemente aggiungere delle classi CSS ai post a seconda della posizione che vogliamo fargli assumere sulla pagina. Per esempio, solo nella home page vorremmo avere i post organizzati su due colonne. Vediamo come fare.

Per prima cosa dobbiamo impostare delle classi CSS alternate sui post a seconda se il loro indice nel Loop è pari o dispari:

[php htmlscript="true"] <?php $i = 0;?> <?php if (have_posts()) : while (have_posts()) : the_post(); $i++; $class = ($i % 2 == 0) ? 'even' : 'odd'; ?> <div class="post-single <?php if(is_home()) { echo $class;}?>"> <!--contenuto del post--> </div>

Quindi dobbiamo modificare il CSS per formattare i post di conseguenza:


body.home #content {
	width: 90%;
}

div.post-single.even {

	float: right;
	width: 45%;
	margin: 0;
	clear: right;
}

div.post-single.odd {

	float: left;
	width: 45%;
	margin: 0;
	clear: left;
}

Nella home page abbiamo allargato il contenitore principale e usato il floating sui post. Ecco il risultato.

[caption id="attachment_2787" align="aligncenter" width="527" caption="I post organizzati in colonne"][/caption]
Torna su