Tout savoir sur WordPress

Afficher une liste d’articles en 2 colonnes

Cette astuce permet d’afficher une liste d’articles sur deux colonnes sans destructurer le contenu.

Lorsque l’on veut mettre l’aperçu de ses articles sur 2 colonnes, un problème survient s’il n’y a pas de hauteur à la div qui contient l’aperçu. En effet, les blocs se positionnent par rapport au float de cette div, donc si vous avez 3 articles sur votre page et que le deuxième article à une hauteur plus petite que le premier article alors le troisième article sera affiché en dessous du second article. Pour parer ce problème il y a une astuce toute simple à mettre en place : l’utilisation du modulo (%).

Commencez par créer une variable $i = 0; avant la boucle WordPress, une fois dans cette boucle, incrémenter votre variable $i ($i++). Votre boucle doit maintenant contenir une div conteneur qui contiendra l’aperçu de votre article (exemple : <div class=’post-preview’>Votre contenu</div>), cette div sera flottante sur la gauche avec une marge à gauche et une largeur.

Il faut maintenant calculer le reste de la division par 2 de votre variable $i et vérifier si c’est égal à 0, pour ensuite afficher une div qui aura la propriété CSS clear:both si nous entrons dans la condition. (exemple avec un ternaire : echo ($i % 2 == 0) ? ‘<div class=’cb’></div>’ : ‘ ‘;) A chaque fois que $i vaut un nombre paire alors la div annulera le float.

Voici un code complet pour appuyer la théorie :

<?php
$i = 0;
if(have_posts()): while(have_posts()): the_post();
$i++;
?>

    <div class="post-preview">
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
	<?php the_excerpt(); // ou the_content('Lire la suite') ?>
    </div>

    <?php echo ($i % 2 == 0) ? '<div class="cb"></div>' : ''; ?>
<?php endwhile; else : ?>
	Aucune actualités.
<?php endif; ?>

Le CSS :

.cb {clear:both;}
.post-preview {float:left;margin-left:40px;width: 290px;}
Exemple de rendu en 2 colonnes
Exemple de rendu en 2 colonnes
Cet article a été publié il y a 2229 jours - Il n'est peut être plus à jour !

Article écrit par Rtransat

27 Commentaires

  1. @ Jérôme : L’astuce se place à l’endroit où tu veux afficher tes articles. Ca peut être index.php, category.php, tag.php, là où tu veux !

  2. Bonjour, cela ne fonctionne pas dans mon thème Caribou. J’ aimerais que cela s’ affiche en page index..faut il éventuellement le copier par dessus le script déjà existant?

  3. @GWEN : Je ne connais pas le thème Caribou. C’est pas qu’il faut éventuellement le copier par dessus le script déjà existant c’est qui faut tout simplement remplacer par la boucle wordpress de base tout en adaptant votre structure HTML.

  4. C’est une erreur avec un problème de fermeture d’accolade, attention dans mon exemple je n’ai pas d’accolade mais des « : » à la fin d’un if ou d’un while et je le referme avec endif; et endwhile; plutôt que d’utiliser des accolades.

    Edit : Je n’avais pas vu ton commentaire édité ;)

    Pour avoir les 2 colonnes il faut un div conteneur comme dans mon exemple et le mettre en float:left

  5. il me semble que c’est bon pourtant:

    <?php
    $i = 0;
    if(have_posts()): while(have_posts()): the_post();
    $i++;
    ?>
    	<div class="post-preview">
    		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
    		<?php the_excerpt(); // ou the_content('Lire la suite') ?>
    	</div>
    
    	<?php echo ($i % 2 == 0) ? '<div class="cb"></div>' : ''; ?>
    <?php endwhile;else: ?>
    	Aucune actualités.
    <?php endif; ?>
    

    Mais par contre quand j’ ai installé ce script j’ ai eut une parse error indiquant un « } » a la ligne 24 donc je l’est effacé et puis ca a fonctionné (1colonne)

  6. j ‘ ai put enfin faire apparaitre la colonne de droite comme ceci-ci :

    <div class="post-preview2">
    		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
    		<?php the_content(); ('Lire la suite') ?>
    	</div>
    puis :
    .post-preview2 {float:left;}
    

    mais c’est décalé..même en changeant les margin et width..

  7. Bah là comme ça je peux pas te dire, pas facile de dire comme ça. Mais tu dois avoir la div avec la classe .post-preview (voir mon article) en float:left; et une largeur fixe, par exemple 200px;

    Si tu mets une largeur de 400px et que le conteneur qui le reçoit fait 500px alors là, forcément ça ne sera pas bon.

  8. nan j’ y arrive pas:
    mon css:

    .cb {clear:both;}
    .post-preview {float:left;margin-left:10px;width: 190px;}
    .post-preview2 {float:right;}
    

    mais en plus les articles sont doublés..

    mon index:

    <?php
    $i = 0;
    if(have_posts()): while(have_posts()): the_post();
    $i++;
    ?>
    	<div class="post-preview">
    		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
    		<?php the_excerpt(); ('Lire la suite') ?>
    	</div>
    <div class="post-preview2">
    		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
    		<?php the_content(); ('Lire la suite') ?>
    	</div>
    
    	<?php echo ($i % 2 == 0) ? '<div class="cb"></div>' : ''; ?>
    <?php endwhile;else: ?>
    	Aucune actualités.
    <?php endif; ?>
    
  9. Normal que ça soit doublé, tu as 2 fois the_title_,the_permalink, etc. tu as juste besoin d’une div post-preview. Si tu regardes mon exemple ce n’est pas comme ça ;).

  10. j’ ai remis à neuf mon thème teste car avec tout ce que je lui est fait voire, j’ ai penser que le réinstaller ferais mieux passer la chose, et en faite il ne réagit pas du tout pareil car maintenant j ‘ai une parse error .. j’ ai décider d’ arrêter ce tutau..j’ y ai passé la journée, ca suffit..
    Merci pour ton temps, et ton site est très exactement ce que je cherche, à savoir customiser wordpress sans plugin..d’ aurte de tes (vos) articles m’ on bien servit et je reste bien sur à l » affut des nouveautés..très bonne continuation ;)merci encore de ta patience..

  11. Salut ;) je revient à la charge car j ‘aimerais bien que ma page d’ archive, category, tag soit comme cela..mais à chaque fois que je touche un code de mon thème j’ ai le droit à une parse error..
    je decide donc de me créer mon modèle de page d’archive en y ajoutant ton script entre:

    ton code

    mais bien sur c’est trop facile pour que cela marche ca me provoque encore une parse error..dans n ‘importe quel sens j’ ai cette parse erreur..

    Est ce que quelqu’un pourrait éventuellement me depanner et me creer mon modèle de page? Car je n’ y arrive vraiment pas.. :/

  12. Bonjour à tous !

    Je cherche depuis un bout de temps la possibilité d’afficher mes articles sur deux colonnes. Après avoir essayé pleins de choses, il y a toujours quelque chose qui cloche.
    A la lecture de cet article, j’ai peut-être trouvé ce que je cherche. Mais quand je lis les commentaires, j’ai peur de faire des bêtises…

    Pour afficher uniquement les articles sur deux colonnes au niveau de la page d’accueil, j’insère uniquement le premier bout de code tel quel dans index.php ? (avec bien sûr le second dans styles.css)

    Pour info, j’utilise le thème Graphène.

    Cordialement,
    Alain

  13. Bonjour Jonathan

    Le seul message de slowflex que je vois à l’écran, est une question, pas une réponse à la mienne.

    @+
    Alain

  14. Bonjour Jonathan,
    Ca marche super bien !
    Est-il possible d’exclure une catégorie et si oui comment , je galère désolé !
    et bon week end

  15. Bonjour,

    Super, merci pour ce bout de code !
    Je souhaite maintenant ajouter une pagination..
    Avez vous une idée ?

    Merci d’avance.
    Bonne journée

  16. Super mais sur le téléphone, la 1e colonne s’affiche puis la seconde, ce qui fait que les articles ne s’affichent pas dans le bon ordre. Une astuce pour ne pas avoir ce problème?

376ba651e5090ab2c31c1a6fde20c1b1FFFFF