Afficher une liste d’articles en 2 colonnes

27 Commentaires

1. Merci pour cette astuce.
   Le code que tu as fourni est à mettre dans index.php ?

2. @ 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 !

3. Merci !!

4. 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?

5. @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.

6. ok, dit moi si je remplace comme cela ca va?

   http://nsa21.casimages.com/img/2012/01/10/120110124154636736.jpg

7. Oui il faut remplacer cette boucle ;).

8. Ok, ca marche :) merci !

   Par contre j ‘est que la colonne de gauche

9. 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

10. 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)

11. 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..

12. 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.

13. 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; ?>
    

14. 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 ;).

15. 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..

16. Bonjour,
    un plugin qui fait ça :
    Post Theming

17. merci pour l’ info..malheureusement pas compatible avec mon thème on dirait ..

18. 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.. :/

19. 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

20. ça suffit pas de mettre chaque news dans un float left et width 49% ?

21. Bonjour

    Dommage, pas de réponse…

    Alain

22. @Alain: slowflex vous a répondu ;)

23. Bonjour Jonathan

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

    @+
    Alain

24. 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

25. Bonjour,
    Comme Gwen juste la colonne de gauche, pas de colonne à droite.
    avec Twenty Twelve

26. 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

27. 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?