Formation WordPress

Afficher une liste d’articles en 2 colonnes

posté le par Rtransat | 20 commentaires | 1033 vues | FavoriteLoadingAjouter à mes favoris

Lorsque l'on veut mettre l'aperçu de ses articles sur 2 colonnes un problème arrive, si il n'y a pas de hauteur à la div qui contient l'aperçu 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 afficher 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 :

Votre contenu

), 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) ? '

' : '';) 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=&quot;post-preview&quot;>
		<h2><a href=&quot;<?php the_permalink(); ?>&quot;><?php the_title(); ?></a></h2>
		<a href=&quot;<?php the_permalink(); ?>&quot;><?php the_post_thumbnail(); ?></a>
		<?php the_excerpt(); // ou the_content(&#039;Lire la suite&#039;) ?>
	</div>

	<?php echo ($i % 2 == 0) ? &#039;<div class=&quot;cb&quot;></div>&#039; : &#039;&#039;; ?>
<?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

Auteur : Rtransat
Passionné par le web depuis 2007, je me suis tourné vers le développement PHP (CakePHP, Wordpress) et l'intégration HTML/CSS.
Avatar de Rtransat
Les commentaires 20 commentaires sur cet article
  1. Jérôme le

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

    Avatar de
  2. jonathan le

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

    Avatar de
  3. Joelle le

    Merci !!

    Avatar de
  4. gwen le

    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?

    Avatar de
  5. Rtransat le

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

    Avatar de
  6. gwen le

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

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

    Avatar de
  7. Rtransat le

    Oui il faut remplacer cette boucle ;) .

    Avatar de
  8. gwen le

    Ok, ca marche :) merci !

    Par contre j ‘est que la colonne de gauche

    Avatar de
  9. Rtransat le

    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

    Avatar de
  10. gwen le

    il me semble que c’est bon pourtant:

    &lt;?php
$i = 0;
if(have_posts()): while(have_posts()): the_post();
$i++;
?&gt;
	&lt;div class=&quot;post-preview&quot;&gt;
		&lt;h2&gt;&lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
		&lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;&lt;?php the_post_thumbnail(); ?&gt;&lt;/a&gt;
		&lt;?php the_excerpt(); // ou the_content('Lire la suite') ?&gt;
	&lt;/div&gt;

	&lt;?php echo ($i % 2 == 0) ? '&lt;div class=&quot;cb&quot;&gt;&lt;/div&gt;' : ''; ?&gt;
&lt;?php endwhile;else: ?&gt;
	Aucune actualit&Atilde;&copy;s.
&lt;?php endif; ?&gt;

    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)

    Avatar de
  11. gwen le

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

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

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

    Avatar de
  12. Rtransat le

    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.

    Avatar de
  13. gwen le

    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:

    &lt;?php
$i = 0;
if(have_posts()): while(have_posts()): the_post();
$i++;
?&gt;
	&lt;div class=&quot;post-preview&quot;&gt;
		&lt;h2&gt;&lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
		&lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;&lt;?php the_post_thumbnail(); ?&gt;&lt;/a&gt;
		&lt;?php the_excerpt(); ('Lire la suite') ?&gt;
	&lt;/div&gt;
&lt;div class=&quot;post-preview2&quot;&gt;
		&lt;h2&gt;&lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
		&lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;&lt;?php the_post_thumbnail(); ?&gt;&lt;/a&gt;
		&lt;?php the_content(); ('Lire la suite') ?&gt;
	&lt;/div&gt;

	&lt;?php echo ($i % 2 == 0) ? '&lt;div class=&quot;cb&quot;&gt;&lt;/div&gt;' : ''; ?&gt;
&lt;?php endwhile;else: ?&gt;
	Aucune actualit&Atilde;&copy;s.
&lt;?php endif; ?&gt;
    Avatar de
  14. Rtransat le

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

    Avatar de
  15. gwen le

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

    Avatar de
  16. rapetou le

    Bonjour,
    un plugin qui fait ça :
    Post Theming

    Avatar de
  17. Gwen le

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

    Avatar de
  18. Gwenm le

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

    Avatar de
  19. Alain RONK le

    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

    Avatar de
  20. slowflex le

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

    Avatar de
Laisser un commentaire
Balises autorisées dans les commentaires: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Suivre les commentaires de cet article par E-mail