Une page d’archives dynamique pour WordPress


Les pages d’archives sont utiles pour centraliser tous les posts d’un blog, mais une fois que le blog a eu une durée de vie assez longue, les pages d’archives deviennent interminables.
Pour remédier à cela, nous allons créer une page d’archives qui permettra de filtrer les posts par categorie avec un tout petit peu de magie jQuery….

Le code du template en PHP

Nous allons créer une page template qui l’on sélectionnera dans l’interface d’administration de WordPress. Pour cela, il faut ajouter un commentaire d’entête à votre page php. Je vous conseille donc de créer une page archives.php si cette page n’existe pas dans votre thème. Ensuite ajouter le code suivant en entêtes de votre fichier :

<?php
/*
Template Name: Archives
*/
?>

Ensuite, ajouter le code standard pour votre thème avec les appels classiques aux méthodes WordPress get_header(); get_sidebar(); get_footer();. Voici venu le code de la génération de toutes les posts de votre blog trier par date. J’ai choisi de découper par mois, car je trouvais cela bien plus lisible.

<div id="archives">
      <div>Filter par catégorie : 
        <?php 
          $args = array('show_option_all'=>'Toutes les catégories',
            'name'=>'category_list');
          wp_dropdown_categories($args); 
        ?>
      </div>
      <?php         
        // Declare some helper vars
        $previous_year = $year = 0;
        $previous_month = $month = 0;
        $ul_open = false;
 
        // Get the posts
        $myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC');         
      ?>
 
      <?php foreach($myposts as $post) : 
      	// Setup the post variables
      	setup_postdata($post);
      	$year = mysql2date('Y', $post->post_date);
      	$month = mysql2date('n', $post->post_date);
      	$day = mysql2date('j', $post->post_date);
      ?>
 
    	<?php 
    	  if($year != $previous_year || $month != $previous_month) : 
    	?>
       <?php
         if($ul_open == true) : 
      	?>
       </ul>
       <?php 
  	  endif; 
       ?>
       <?php
         if($month == 4 || $month == 8 || $month == 10){
       ?>
         <h3>&raquo; Articles d'<?php the_time('F Y'); ?></h3>
       <?php 
       } else{
       ?>
          <h3>&raquo; Articles de <?php the_time('F Y'); ?></h3>
       <?php 
       }
       ?>
         <ul>
       <?php
	  $ul_open = true; 
          endif; 
       ?>
 
  	<?php
  	  $previous_year = $year;
  	  $previous_month = $month; 
    	  $category = get_the_category();
  	?>
 
  	<li class="<?php echo $category[0]->cat_name;?>">
  	  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  	</li>
 
    <?php endforeach; ?>
  </ul>
</div>

Voila, tout le code de la page, c’est plutôt simple, non ? Je vais m’attarder à expliquer deux petits détails, je ne vais pas m’attarder sur la gestion de la liste par mois.
Pour choisir la catégorie que l’on veut afficher, une liste déroulante est ce qui correspondrait le mieux. J’ai donc ajouté un appel à une fonction WordPress qui me génère automatique cette liste :

<div>Filtrer par cat&eacute;gorie : 
  <?php 
    $args = array('show_option_all'=>'Toutes les catégories',
      'name'=>'category_list');
    wp_dropdown_categories($args); 
  ?>
</div>

Dans les arguments passés à la méthode, je donne une string qui correspond au cas ou aucune catégorie n’est sélectionnée et un id qui me permettra de faire le traitement jQuery.

En effet, pour rendre la page dynamique, j’ai ajouté une classe à chaque élément de la liste qui n’est autre que le nom de la catégorie. Le bout de code qui s’en occupe est le suivant :

  	<?php
    	  $category = get_the_category();
  	?>
 
  	<li class="<?php echo $category[0]->cat_name;?>">
  	  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  	</li>

Maintenant vous devriez déjà avoir une page d’archives avec tous vous articles triés par mois.

Le code Javascript avec jQuery

Encore une fois, c’est très simple, il suffit d’affecter un comportement sur la liste déroulante sur chaque changement effectué, ensuite on affiche seulement les éléments désirés. Avec jQuery, cela se fait très rapidement :

$('#category_list').change(function(){
  if($(this).val() == 0){
    $('ul li:hidden', "#archives").slideToggle('fast');
  }else{
    var categoryName = $('#category_list option[value='+$(this).val()+']').text();
    $('ul li:hidden', "#archives").slideDown('fast');
    $('ul li:not(.'+ categoryName +')', "#archives").slideUp('fast');
  }
});

Petite explication du code… Comme je vous l’avais expliqué dans la partie PHP, j’ai utilisé un ID pour la liste déroulante category_list, c’est sur cet élément que nous allons détecter les changements.
Ensuite nous vérifions que l’utilisateur n’a pas remis la liste déroulante à la position initiale, c’est à dire sans aucune catégorie sélectionnée, si tel est le cas, nous affichons tous les articles.
Si la liste déroulante pointe sur une catégorie, alors nous récupérons le nom de cette catégorie et nous appliquons un slideUp(); à tous les articles qui ne sont pas de cette catégorie qui disparaitront de la page. Pour gérer le cas ou l’utilisateur passe d’une catégorie à une autre, il est primordial de ré-afficher tous les posts, pour cela il suffit d’appliquer un slideDown(); à tous les articles cachés qui vont réapparaître sur la page.
Il ne vous reste plus qu’à placer le code JavaScript dans un fichier que vous inclurez dans votre template.

La création de la page dans le back-office

Maintenant nous avons toutes les cartes en mains pour créer notre page d’archive dans l’administration WordPress, connectez-vous et rendez vous dans la section « Page ». Ajouter une nouvelle page qui aura comme titre Archives et ne saisissez aucun texte. En revanche dans le panneau latéral, il suffit de sélectionner le modèle que nous venons de créer qui s’appelle Archives.

Voila, c’est aussi simple que cela ! J’espère que cet article vous aura plu, pour voir le rendu final, je vous conseille d’aller voir ma page d’Archives. Si jamais vous voyez des coquilles ou si vous ne comprenez pas quelques chose, n’hésitez pas à laisser un commentaire…

Une partie du code php de la page provient d’un article sur le blog WPGuy : WP Guy.

9 commentaires

Désolé, les commentaires sont fermés!