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

crcad12 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(); ?>

moidjio 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;}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.