Lister des catégories en image avec wordpress

category-list

Afficher des images de catégories avec wordpress de la même manière que les thumbnails des posts n’est pas une fonction native de wordpress.
Autant cette fonction est prévue pour les posts, il s’agit de la fonction image à la une, autant il n’y a pas de telle fonction ou de plugin qui puisse répondre clairement à certaines attentes.

Je vous propose ici une solution qui peut rapidement être mise en œuvre dans l’attente de l’écriture d’un plugin.

Vous trouverez un exemple sur larbreetlepigment.fr.

Le contexte

Vous avez besoin de lister en image des catégories de produits.
Vous publiez un article pour chaque produit de votre boutique de la même manière que vous publiez un post sur un blog classique et y assignez une catégorie parent (par exemple créations) et une sous-catégorie (par exemples vases).
Ces posts appartiennent à différentes sous-catégories ayant une catégorie parent.
Dans votre menu, vous positionnez comme élément de menu principal la catégorie parente.

Un click sur ce lien affiche, en principe, la page category.php de votre template.
Ici on cherche à modifier cette page.

Le principe

Créez un dossier nommé « images » à la racine de votre site.

Faites un copier-coller de la page category.php de votre template et renommez-la en category-x.php.
x est l’ID de la catégorie parent, celle qui, lorsqu’on l’affiche, doit lister en image ses sous-catégories.
Cette page sera affichée automatiquement par wordpress à la place de category.php.

La page category-x.php

Pour trouver l’ID de la catégorie, rendez-vous dans l’interface d’administration et choisissez le menu article puis catégorie.
Survolez une catégorie à la souris, un lien s’affiche en bas à gauche de votre navigateur avec tag_ID=x.
C’est ce nombre x qui nous intéresse.

Le code suivant récupère, dans le dossier images à la racine du site, le fichier dont le nom correspond à celui de chaque sous-catégorie.

<div class="archives">
<div <?php post_class() ?>>

	<div class="archive_parent">
		<ul>
		<?php
		global $ancestor;
		foreach ($childcats as $childcat) {
   		   if (cat_is_ancestor_of($ancestor, $childcat->cat_ID) == false){
		        echo '<li><a href="'.get_category_link($childcat->cat_ID).'">';
		        echo '<img src="/images/'.$childcat->cat_name.'.jpg" alt="'.$childcat->cat_name.'" /></a>';
		        echo '<p>'.$childcat->cat_name.'</p>';
		        echo '</li>';
		        $ancestor = $childcat->cat_ID;
		}

		}?>
		</ul>
	</div>
</div>
</div>

Conclusion

C’est une solution pour lister les catégories en image qui n’est certes pas la plus souple.
On aurait pus utiliser l’ID de la catégorie pour nommer les images et ainsi modifier le script comme suit

echo '<img class="categorie_img" src="/images/'.$childcat->cat_ID.'.jpg" alt="" /> 

Cette solution permettrait une plus grande souplesse pour le nommage/renommage des catégories et des images.

avatar

À propos de Rodolphe

Autodidacte passionné de la création web

Faites nous part de votre commentaire