Créer une page d'article avec plusieurs colonnes dans wordpress

Créer une page d’article avec plusieurs colonnes

Dans ce mémo, on va voir comment modifier sur wordpress l’apparence visuelle de la page des articles : l’index.php ou la page des catégories : category- ».php, ou encore la page qui recence tous vos custom posts dans une page dédiée.

Nous utiliserons ici une vieille méthode, le modulo, qui déterminera le nombre de colonnes. Il existe bien sur d’autres techniques, notamment en css.
Ici pour définir trois colonnes on utilise donc un ($i % 3 == 0).

Voici à titre d’exemple, une page index.php

<?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();?>
</div>
<?php echo ($i % 3 == 0) ? '<div></div>' : ''; ?>
<?php endwhile; else : ?>
Désolé! il n'y a rien ici...<?php endif; ?>

Si jamais vous voulez faire la même chose avec votre page de custom posts type : il suffit de modifier la boucle en nommant votre custom post , dans les arguments de votre requête :(‘post_type’ => ‘photos’)

<?php get_header(); ?>
 <section> 
 <h1><?php the_title();?></h1> 
<?php
$loop = new WP_Query(array('post_type' => 'photos', 'posts_per_page' => 10));
 $i=0;
 while ( $loop->have_posts() ) : $loop->the_post();
 $i++
 ?>
 <div class="post-preview">
 <div class="thumbnail">
 <?php the_post_thumbnail(); ?>
 <h2><a href="<?php the_permalink() ?>" ><?php $tit = the_title('', '', FALSE);
 echo substr($tit, 0, 20);
 if (strlen($tit) > 20)
 echo " (...)";?></a></h2>
<div class="meta"><?php the_time('M j, Y') ?> par <?php the_author() ?></div>
</div>
</div>
<?php echo ($i % 3 == 0) ? '<div class="cb"></div>' : ''; ?>
<?php endwhile; ?> 
</section>
<?php get_footer(); ?>

Et dans le css, il suffit juste de styliser nos deux éléments :

.cb {clear:both;}
.post-preview {float:left;margin-left:40px;width: 290px;}

04/03/2014 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress