Sous WordPress, afficher une liste d’articles à la manière de Joomla!

Avec Joomla!, il n’existe qu’un seul layout d’utilisable. Mais quel layout ! Pour ceux qui comme moi souhaitent reproduire l’excellent layout de Joomla! sous WordPress, voici le code PHP que j’utilise. Ce code est à coller dans un fichier « loop-joomla-layout.php » de votre thème WordPress.

<?php
$ctMainPosts = 1;
$ctCols = 2;
?>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
  <div class="nav nav-above">
    <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'cmstheme' ) ); ?></div>
    <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'cmstheme' ) ); ?></div>
  </div>
<?php endif; ?>

<?php if ( ! have_posts() ) : ?>
  <div id="post-0" class="post error404 not-found">
    <h1 class="entry-title"><?php _e( 'Not Found', 'cmstheme' ); ?></h1>
    <div class="entry-content">
      <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'cmstheme' ); ?></p>
    </div><!-- .entry-content -->
  </div><!-- #post-0 -->
<?php endif;
$ctCol = $ctMainPosts > 0 ? 0 : 1; // $ctCol contains the numero of the current column, or zero
$ctNewRow = false;
?>
<div class="joomla-layout joomla-layout-cols-<?php echo $ctCols; ?>">
<?php while ( have_posts() ) : the_post(); ?>
<?php
  if ($ctCol === 0) {
    $ctPostClasses = 'main-post';
    if (--$ctMainPosts <= 0)
      $ctCol = 1;
  } else {
    $ctPostClasses = 'post-col post-col-' . $ctCol;
    if ($ctCol < $ctCols) {
      $ctCol++;
      $ctNewRow = false;
    } else {
      $ctCol = 1;
      $ctNewRow = true;
    }
  }
?>
    <div id="post-<?php the_ID(); ?>" <?php post_class($ctPostClasses); // [TM] ?>>
      <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'cmstheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

  <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
      <div class="entry-summary">
        <?php the_excerpt(); ?>
      </div><!-- .entry-summary -->
  <?php else : ?>
      <div class="entry-content">
        <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'cmstheme' ) ); ?>
        <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'cmstheme' ), 'after' => '</div>' ) ); ?>
      </div><!-- .entry-content -->
  <?php endif; ?>
    </div>
  <?php if ($ctNewRow) : ?>
    <hr class="clearfloats"/>
  <?php endif; ?>
  <?php endwhile; ?>
<?php if ($ctCol > 0 && !$ctNewRow) : ?>
    <hr class="clearfloats"/>
<?php endif; ?>
</div>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
<div class="nav nav-below">
  <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'cmstheme' ) ); ?></div>
  <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'cmstheme' ) ); ?></div>
</div>
<?php endif; ?>

Le layout se configure au moyen des deux variables en début de code. La variable $ctMainPosts donne le nombre d’articles à afficher en grande largeur et la variable $ctCols donne le nombre de colonnes pour les articles suivants. Je n’ai pas reproduit l’affichage sous forme de liste de liens (en troisième partie sous Joomla!) car il me semble illogique dans un contexte multi-pages. Si le paramétrage doit changer selon les rubriques, utiliser des variables globales à initialiser depuis les fichiers « category-N.php » concernés.

Appelons maintenant notre fichier-layout lors de l’affichage des catégories concernées. Dans les fichiers « category-N.php » qui vont bien, se reporter à la ligne d’appel du fichier « loop » et remplacer le paramètre 'category' par 'joomla-layout' :

  get_template_part('loop', 'joomla-layout');

Ensuite, pour le cas d’un affichage sur deux colonnes, voici les styles CSS à utiliser (à ajouter dans le fichier « style.css » du thème) :

div.joomla-layout-cols-2 div.post-col {
  width: 47%;
}
div.joomla-layout-cols-2 div.post-col-1 {
  clear: left;
  float: left;
}
div.joomla-layout-cols-2 div.post-col-2 {
  clear: right;
  float: right;
}

… et votre site WordPress a un petit air de Joomla! !

2 Responses to Sous WordPress, afficher une liste d’articles à la manière de Joomla!

  1. Hadrien says:

    J’essaye de faire ça depuis un bail avec WordPress (à coup de loop et d’anti duplicate) sans succès pour les pages autre que la 1ere, et je le trouve enfin XD Merci ^^.

    Par contre, je ne comprend pas tout ton code, je vois qu’il est adapté à ton thème (cmstheme). T’es t-il possible de commenter un peu plus le code stp ?

    Merci.

  2. Cpag says:

    Bonjour ! J’ai ajouté… un commentaire. J’essaierai de trouver plus de temps prochainement.

    Ce code devrait en revanche pouvoir se passer du cmstheme. Les deux paramètres du layout ($ctMainPosts, $ctCols) prennent ici leurs valeurs en dur, tout au début du code. Il faut modifier cela avec des valeurs qui dépendent du thème.

    Les deux variables internes sont $ctCol (sans “s”) et $ctNewRow. La première contient le numéro de la colonne courante, là où ira s’afficher le prochain article de la boucle. Dans le cas d’un article s’affichant dans la zone principale, elle contient zéro. La deuxième variable est un booléen qui passe à “true” lorsque la dernière colonne est remplie et qu’il faut revenir à la première colonne.

    Le reste du code est repris du fichier “loop.php” du thème twentyten de WordPress 3.0.

Leave a Reply

Your email address will not be published. Required fields are marked *

Mesure anti-spam. Merci de copier le code « sNuq5n » dans le champ ci-dessous :