Creer une page d’articles en plusieurs colonnes

Creer une page d’articles en plusieurs colonnes

Aujourd’hui on va voir comment on peut créer automatiquement une page d’archives(type index.php) en trois colonnes. On va pouvoir réaliser cela grace aux loops wordpress.

En fait on va crée trois loops que l’on va insérer dans des div contenant des classes particulières, et on va dans notre css disposer ces div sous formes de colonnes..on obtiendra au final une page en trois colonnes. On peut tout aussi bien faire une colonne pour les articles et une deuxième pour les custom posts etc… Dans la requête de la boucle, on peut par exemple faire en sorte de n’afficher que les 3 derniers articles. Dans une deuxième boucle, les 3 premiers, ou ceux d’une certaine catégorie etc..les possibilités sont nombreuses et cela permet de diversifier un peu sa page.

Voici une idée de structure à appliquer dans son fichier index.php:

on crée nos différents div qui seront nos colonnes, et à l’intérieur de chacune d’entre elles, on insère le code de la boucle wordpress, avec les arguments de son choix.

<div id="column_01">
Notre première boucle modifiée
</div> 
<div id="column_wrap"> 
<div id="column_02"> 
Notre deuxième boucle modifiée
</div> 
<div id="column_03"> 
notre troisième boucle modifiée
</div> 
</div>

C’est ensuite via le css qu’on pourra créer nos différentes colonnes :

div#column_01 {
	float: left;
	clear: none;
	width: 30%;
        border:1px solid #eee;
	}
div#column_wrap {
	float: right;
	clear: none;
	width: 60%;
	}
	div#column_02 {
		float: left;
		clear: none;
		width: 45%;
                border:1px solid #eee;
        } div#column_03 { 
                float: right; 
                clear: none; 
                width: 45%;
                border:1px solid #eee;
}