Hiérarchiser ses catégories dans wordpress

Comment distinguer les catégories parents et enfants ?

Par défaut, wordpress ne fait pas clairement la distinction entre les catégories principales et secondaires. On retrouve un seul fichier category.php pour l’ensemble des niveaux de catégories du site. En principe, chacun procède à la hiérarchie de ses catégories, notamment via l’interface d’administration des catégories dans wordpress.

Une fois sa hiérarchie en place, on se rend sur une page de sous catégorie et on retrouve les classes par défaut « archive » et « category« .

archive category category-wordpress category-3 

Dans une catégorie parente, le body contiendra aussi les mêmes classes par défaut, sans distinction de niveau.

archive category category-dev category-79

Créer un fichier pour une catégorie spécifique

Afin de créer une page de catégorie radicalement différente d’une autre,, on peut par exemple créer un template nommé ‘category-‘ suivi du nom de notre catégorie.  Au clic sur un lien vers cette catégorie, WordPress ira alors chercher en premier lieu le fichier correspondant.

Sinon, on peut décider de créer un fichier spécifique pour toutes les catégories parentes. On crée donc un fichier nommé par exemple category-custom-template ( nom choisi au hasard).

La nouvelle catégorie parente doit afficher toutes les sous catégories. Voici un exemple de code

<section id="categposts">
	<div class="container-fluid">
		<?php
	
		$cat = get_query_var('cat');
		$args = array(
			'child_of' => $cat,
			'orderby' => 'name',
			'order' => 'ASC'
			);
		$categories = get_categories($args);
			foreach($categories as $category) {
			?>
		<div class="row "> 
			<div class='<?php echo ( ++$j % 2 == 0) ? 'evenpost' : 'oddpost'; ?>'>
				<div class="col-lg-6 col-sm-12 archive-img">
					<a rel="bookmark"  href="<?php echo get_category_link( $category->term_id );?>" itemprop="url">	
						<div class="card-image">
							<img src="<?php the_field('categimg',  $category ); ?>" alt="<?php  $category->name ;?>">
						</div>
					</a>
				</div>
				<div class="col-lg-6 col-sm-12 archive-bloc  mb-4 mb-sm-4 mb-lg-0">
					<div class="categ-overlay">	
						<h2 class="entry-title text-center wow flipInX" data-wow-delay="0.3s" itemprop="headline">
							<?php echo  $category->name ;?>
						</h2>
						<div class="categ__description">
							<?php echo  mb_strimwidth($category->description, 0, 600, "...") ;?>
						</div>
						<div class="text-center">
							<a href="<?php echo get_category_link( $category->term_id );?>" class="btn btn-outline-dark mt-sm-4 mt-1 wow zoomIn">Voir nos articles</a>
						</div>						
					</div>	
				</div>	
		 	</div> 
		</div>

	<?php } ;wp_reset_postdata();?>
	</div>

</section>

On appelle nos catégories enfants, et on affiche par exemple les titres et les descriptions. Pour l’image, j’utilise ici un champ image crée grâce au plugin ACF.

Maintenant, puisqu’on ne compte pas créer de catégories appelées « custom template » dans le backoffice, mais se servir de ce fichier pour afficher toutes les catégories parentes, comment faire pour ensuite distinguer les deux niveaux de catégories, parent et enfant ?

La fonction magique

On a la possibilité d’inclure un nouveau fichier grâce au filtre add_filter( ‘template_include’,… ) qui va forcer wordpress à utiliser notre nouveau template. Dans l’exemple ci-dessous, la fonction calcule la profondeur de la catégorie et vérifie qu’elle est une catégorie principale ( $cat_depth == 0). Si c’est vrai et qu’il y a un template spécifique ( » != $new_template) alors on force wordpress à remplacer le template de catégorie par défaut par notre fichier category-custom-template.php.

function cc_template_check( $template ) {
    if ( is_category() &&  !(is_category('Ressources')) ){
        // Get category information
        $cat = get_query_var( 'cat' );
        $cats_str = get_category_parents( $cat, false, '%#%' );
        $cats_array = explode('%#%', $cats_str);
        $cat_depth = sizeof( $cats_array )-2;

        // Check category depth
        $new_template = locate_template( array( 'category-custom-template.php' ) );
        if ( $cat_depth == 0  && '' != $new_template ) {
            return $new_template;
        }
    }
    return $template;
}
add_filter( 'template_include', 'cc_template_check' );

Le fait de créer ce fichier spécifique nous permettra ensuite de créer un gabarit de page unique, avec les fonctions, les boucles et l’apparence que l’on souhaite.

Attribuer une classe spécifique par niveau de catégories

Il y a également la possibilité d’attribuer des classes spécifiques aux différents niveaux de catégories, grâce au filtre  add_filter( ‘body_class’, …)

add_filter( 'body_class', 'cc_custom_cat_archiev_class' );
function cc_custom_cat_archiev_class( $classes ) {
    if ( is_category() ) {
        $cat = get_queried_object();
        $ancestors = get_ancestors( $cat->term_id, 'category', 'taxonomy' );
        $classes[] = 'catlevel-' . ( count( $ancestors ) + 1 );
    }
    return $classes;
}

Avec cette fonction, vos catégories principales auront une classe level-1 dans le body, et les sous catégories auront la classe level-2. Cela peut permettre de les distinguer plus facilement et d’appliquer un style distinct.