Vivre du Web

Utiliser WordPress comme un CMS (3)

24 juin 2006

Je poursuis ma série d’articles sur des astuces pour utiliser WordPress comme un CMS. J’avais déjà abordé la mise en place d’un menu pour un site classique dans mon article précédent, mais je vais revenir aujourd’hui encore sur la mise en place de la navigation d’un site WordPress.

Et oui, je ne peux pas me contenter simplement d’un menu ! Un site classique a souvent aussi une sous-navigation par rubrique. Je ne vais pas parler ici de menus imbriqués avec des sous-menus, mais plutôt du menu spécifique qui s’affiche lorsque l’on visite une rubrique. Mon objectif est qu’il soit constitué de la liste des articles contenus dans cette rubrique, comme on peut le voir en oeuvre sur ce site .

Il s’agit donc ici de customiser le fichier sidebar.php.

Prenons tout d’abord le cas, où l’on affiche la page de la catégorie (ce qui correspond en général au fichier archive.php, à moins que l’on ait défini un fichier spécifique par catégorie).

Au niveau de sidebar.php, on fait tout d’abord un test pour vérifier si on se trouve dans une page categorie :

 <?php if (is_category()) { ?>

 <?php }  ?>

Ensuite, on va chercher à afficher le titre de la catégorie. Comme on se trouve dans une page catégorie, on peut tout simplement y accéder en utilisant la fonction :

<?php echo single_cat_title(); ?>

Puis, on va afficher la liste des articles contenus dans cette catégorie. A ce niveau-là, il faut se rappeler que l’on est dans une page catégorie, qui a déjà affiché dans son contenu principal - voir archive.php - la liste des articles contenus dans cette catégorie.

Il n’y a donc pas besoin de refaire une nouvelle requête. On peut tout simplement refaire tourner la loop :

<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></li>
endwhile; ?>

Et voila, le tour est joué et on se dit que tout est parfait. Mais attention, c’est sans compter les caprices de Internet Explorer 6. Et oui, lorsque l’on développe un site classique, même si on est un fan de Firefox ou autre navigateur, on peut difficilement ignorer 80% des visiteurs qui utilisent IE.

Et alors, qu’est-ce qui se passe au niveau de IE6 ? Sans trop savoir pourquoi, il ajoute des sauts de ligne ENORMES entre chaque ligne de la liste.

En fait, je me suis souvenue d’un article de A List Apart qui expliquait très bien ce phénomène sur Internet Explorer :

To bypass some browser inconsistencies, I’ve taken to marking up my lists like this:
<ol
><li>Aloe</li
><li>Bergamot</li
><li>Calendula</li
></ol>

I’ve moved the last closing angle-bracket > of each row to the beginning of the next row. This keeps each list item on a row by itself for the benefit of human readers and at the same time effectively eliminates all of the white space between tags, this producing more consistent rendering across browsers.

(My pet theory as to why Internet Explorer includes the white space between list-item tags in its rendering calculations is that it’s a hold-over from that prehistoric era when list items, like table cells, didn’t have closing tags. Back then, a browser properly paid attention to all text including white-space from one start-tag <li> to the next. When closing tags were added to the mix, apparently no one at Microsoft remembered—or deemed it important enough—to adjust the logic to stop parsing between one closing tag </li> and the next start-tag <li>.)

Je ne vais donc pas détailler ici le css correspondant à un affichage correct de la liste, car de toutes façons le problème ne vient pas de là. Même si vous faites bien attention de supprimer toutes margin et padding sur les <li>, Internet Explorer réussit encore à mettre des écarts entre chaque ligne.

Comme expliqué dans l’article ci-dessus, tout cela vient du saut de ligne dans le html entre chaque <li></li>

Et oui, alors qu’en principe, un espace en html n’a aucun impact visuel, pour Internet Explorer, si, dans ce cas précis. La seule solution, c’est de ne plus laisser d’espace entre </li> et le <li> suivant. C’est-à-dire de tout écrire à la suite.

Pour cela, on est obligé de changer légèrement la syntaxe php en utilisant la fonction "echo". En effet, cette fonction ne fait pas de saut de ligne à la fin de chaque occurence. Donc au final, cela donne :

 <?php if (is_category()) { ?>
 
 <li>
  <h2><?php echo single_cat_title(); ?></h2>
  <ul>

  <?php
  while (have_posts()) : the_post();

    echo ‘<li><a href="’;
    the_permalink();
    echo ‘" title="’;
    the_title();
    echo ‘">’;
    the_title();
    echo ‘</a></li>’;

   endwhile;
   ?>

  </ul>
  </li>

 <?php } ?>

Et voila, cette fois, l’affichage est correct. On a ainsi défini un sous-menu spécifique pour une page catégorie et qui liste les articles contenus dans cette catégorie.

Article dans : WordPress