Archives de taxonomie : lister les posts par terme

French (Français) translation by Camille B (you can also view the original English article)

Final product image — What You'll Be Creating

Par défaut, WordPress crée des archives listant tous les posts par ordre décroissant. Lorsqu'un utilisateur souhaite consulter les posts d'une catégorie particulière ou d'un terme de taxonomie, il doit visiter la page archive de cette catégorie ou de ce terme.

Comment rendre cette page plus conviviale ? Dans ce tutoriel, nous allons voir comment créer la page archive d'un type de custom post. Cette page listera tous les posts catégorisés et triés par taxonomie.

Ce dont vous avez besoin

Pour suivre ce tutoriel vous aurez besoin d'un WordPress fonctionnel et d'un éditeur de texte. Vous allez créer un thème enfant de twentyfouteen.

Nous présumons ici que vous savez déjà le faire. Si vous êtes bloqué vous pouvez consulter la feuille de styles du paquet fourni avec ce tutoriel.

1. Commençons : Créez le custom post et la taxonomie

D'expérience cette technique est peu utilisée pour les catégories ou tags classiques. Nous allons commencer par créer un custom post et une taxonomie.

Note : j'utilise le même type de post "animal" enregistré dans le tutoriel "Créer une archive basée sur les images". Si vous souhaitez aller plus loin vous pouvez combiner la technique utilisée dans les deux tutoriaux. Vous pourrez ainsi afficher aussi les images de la taxonomie.

Dans le fichier functions.php de votre thème, ajoutez le code suivant, il permet de créer le custom post.

// register a custom post type called 'animals'
function wptp_create_post_type() {
    $labels = array( 
  	'name' => __( 'Animals' ),
		'singular_name' => __( 'animal' ),
		'add_new' => __( 'New animal' ),
		'add_new_item' => __( 'Add New animal' ),
		'edit_item' => __( 'Edit animal' ),
		'new_item' => __( 'New animal' ),
		'view_item' => __( 'View animal' ),
		'search_items' => __( 'Search animals' ),
		'not_found' =>  __( 'No animals Found' ),
		'not_found_in_trash' => __( 'No animals found in Trash' ),
	);
	$args = array(
		'labels' => $labels,
		'has_archive' => true,
		'public' => true,
		'hierarchical' => false,
		'supports' => array(
			'title', 
			'editor', 
			'excerpt', 
			'custom-fields', 
			'thumbnail',
			'page-attributes'
		),
		'taxonomies' => array( 'post_tag', 'category'), 
	);
	register_post_type( 'animal', $args );
} 
add_action( 'init', 'wptp_create_post_type' );

Ensuite, ajoutez ce code pour créer la taxonomie :

// register a taxonomy called 'Animal Family'
function wptp_register_taxonomy() {
    register_taxonomy( 'animal_cat', 'animal',
		array(
			'labels' => array(
				'name'              => 'Animal Families',
				'singular_name'     => 'Animal Family',
				'search_items'      => 'Search Animal Families',
				'all_items'         => 'All Animal Families',
				'edit_item'         => 'Edit Animal Families',
				'update_item'       => 'Update Animal Family',
				'add_new_item'      => 'Add New Animal Family',
				'new_item_name'     => 'New Animal Family Name',
				'menu_name'         => 'Animal Family',
			),
			'hierarchical' => true,
			'sort' => true,
			'args' => array( 'orderby' => 'term_order' ),
			'rewrite' => array( 'slug' => 'animal-family' ),
			'show_admin_column' => true
		)
	);
}
add_action( 'init', 'wptp_register_taxonomy' );

Une fois ceci fait créez quelques animaux, ajoutez des données fictives dans le back-office de WordPress. Ci-dessous quelques données d'exemple que nous utilisons pour le tutoriel. Je n'ai aucune prétention concernant l'adéquation terminologique des familles d'animaux, donc, s'il vous plaît, ne postez pas de commentaire à ce sujet.

2. Mettons en place le template Archive

Etape suivante : créons le fichier template archive pour le nouveau type de post. Dans votre thème, créez un fichier nommé archive-animal.php.

Comme ce thème est un thème enfant de twentyfourteen, le template archive nécessitera de copier/coller le code du thème parent. Ce code encadrera la boucle que vous allez faire. Ajoutez donc ceci dans votre template archive.

<?php
/*
WpTutsPlus tutorial for creating archive to display posts by taxonomy term
Archive template for animal custom post type
*/
?>

<?php get_header(); ?>

    <div id="main-content" class="main-content">

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<header class="archive-header">
				<h1 class="archive-title">
					<?php post_type_archive_title(); ?>
				</h1>
			</header><!-- .archive-header -->
			
						
		</div><!-- #content -->
	</div><!-- #primary -->
	<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->

<?php
get_sidebar();
get_footer();

Note : si vous travaillez sur un autre thème prenez le code de cet autre thème.

3. Allons chercher les termes de taxonomie

Afin que votre archive affiche les animaux par termes de taxonomie, la première étape est de récupérer ces termes.

Dans votre fichier template, juste après la balise fermante </header> (ou en dessous de la partie ouvrante du code d'encadrement de votre thème perso), récupérez les termes en utilisant get_terms() :

<?php //start by fetching the terms for the animal_cat taxonomy
$terms = get_terms( 'animal_cat', array(
    'orderby'    => 'count',
	'hide_empty' => 0
) );
?>

Notez que nous utilisons deux paramètres ici :

orderby - ceci vous permet de spécifier l'ordre d'affichage des termes. La valeur count permet d'afficher les termes en fonction du nombre d'éléments qui leur sont liés. Vous pouvez aussi les afficher par name ou ID. Si vous laissez vide, WordPress ordonnera par défaut par name. Consultez la documentation get_terms() du Codex pour plus d'informations.
hide_empty - ceci dit à WordPress de ne pas récupérer les termes auxquels aucun post n'est lié. Cela vous évite d'avoir à vérifier si vôtre requête renvoie des résultats ou non.

4. Construisons la requête

Pour ce faire, nous utilisons foreach() pour dire à WordPress de passer par chacun des termes et de lancer la requête que nous lui donnons. Sous le code que vous venez d'ajouter, insérez cela :

<?php
// now run a query for each animal family
foreach( $terms as $term ) {

    // Define the query
	$args = array(
		'post_type' => 'animal',
		'animal_cat' => $term->slug
	);
	$query = new WP_Query( $args );
    
}

Nous demandons à WordPress de lancer la requête pour chacun des termes. Dans les arguments que nous donnons, nous précisons en type de custom post la taxonomie 'animal_cat' qui est la valeur de la variable $term.

5. Ajoutons notre boucle

Votre requête étant faite, vous devez maintenant ajouter votre boucle. Pour commencer, affichez le nom du terme que nous appellerons dans le titre. En dessous de la ligne commençant par $query mais à l'intérieur des accolades de votre foreach, ajoutez cette ligne :

1	echo'<h2>' . $term->name . '</h2>';

Ensuite, ajoutez l'HTML qui contiendra votre liste :

1	// output the post titles in a list
2	echo '<ul>';
3
4	echo '</ul>';

A l'intérieur de cette liste ajoutez votre boucle :

// Start the Loop
while ( $query->have_posts() ) : $query->the_post(); ?>

<li class="animal-listing" id="post-<?php the_ID(); ?>">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>

<?php endwhile;

Comme vous pouvez le voir il s'agit d'une boucle très simple affichant le titre et le lien de chacune des entrées, elle n'affiche aucun contenu. Si vous le souhaitez vous pouvez y ajouter l'extrait (exerpt) ou une l'image associée.

Enfin, réinitialisez la requête en utilisant wp_reset_postdata() en dessous de la ligne echo '</ul>';.

La boucle complète

Voici ce à quoi votre requête et votre boucle devraient ressembler :

<?php
// now run a query for each animal family
foreach( $terms as $term ) {

    // Define the query
	$args = array(
		'post_type' => 'animal',
		'animal_cat' => $term->slug
	);
	$query = new WP_Query( $args );
			
	// output the term name in a heading tag				
	echo'<h2>' . $term->name . '</h2>';
	
	// output the post titles in a list
	echo '<ul>';
	
		// Start the Loop
		while ( $query->have_posts() ) : $query->the_post(); ?>

		<li class="animal-listing" id="post-<?php the_ID(); ?>">
			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
		</li>
		
		<?php endwhile;
	
	echo '</ul>';
	
	// use reset postdata to restore orginal query
	wp_reset_postdata();

} ?>

Pour finir, sauvegardez votre template et rendez-vous sur l'archive du custom post. Vous constaterez qu'elle liste vos posts par terme de taxonomie plutôt que par une longue liste.

Résumé

Cette technique est utile lorsque vous souhaitez que vos visiteurs consultent rapidement vos données catégorisées sans avoir à parcourir de nombreuses pages. Ici nous avons tout dans un seul endroit et ordonné de manière pratique. Voici quelques idées pour adapter cette technique et aller plus loin :

Appelez les catégories et les tags plutôt que les termes. Pour ce faire vous utiliserez get_categories() ou get_tags().
Au lieu de créer une page archive alternative pour un custom post, modifiez directement index.php et affichez-y les catégories, les tags ou les termes de taxonomie.
Plutôt que lancer une boucle pour chaque terme, lancez-en deux : la première permettra d'afficher le post le plus récent en entier, la seconde affichera la liste de tous les autres termes (donc sans le premier). Utilisez posts_per_page et offset dans votre requête pour cela. Pour plus d'informations sur leur fonctionnement consultez la page WP_Query du Codex.
Utilisez posts_per_page pour limiter le nombre de posts à afficher afin que chaque liste contienne le même nombre d'éléments. Vous pouvez ajouter un peu de style pour afficher les listes côte à côte.
Pour chaque terme, ajouter un lien vers le terme de la page archive après la liste des posts. Ceci est particulièrement utile si vous n'affichez pas l'intégralité des posts sur cette page. Utilisez get_term_link() pour cela.