Comment afficher uniquement la catégorie enfant dans votre boucle de publication WordPress

D'après notre expérience, si vous ajoutez beaucoup de catégories à vos articles WordPress, les choses peuvent commencer à paraître un peu encombrées. Plusieurs catégories, en particulier les catégories parentes et enfants, peuvent surcharger vos mises en page et rendre plus difficile pour les lecteurs de trouver ce qu'ils cherchent.

Ne serait-il pas plus clair d'afficher uniquement la catégorie enfant pour chaque article ?

Ce guide vous montrera comment modifier le fichier de votre thème WordPress pour afficher uniquement les catégories enfants dans votre boucle d'articles, donnant à votre blog une apparence plus épurée et conviviale.

Pourquoi afficher uniquement la catégorie enfant dans votre boucle d'articles WordPress ?

Lors de la création d'un blog WordPress, vous pouvez organiser votre contenu à l'aide de catégories et d'étiquettes.

Pour aider les lecteurs à trouver plus rapidement du contenu intéressant, vous pourriez même créer des catégories enfants (ou sous-catégories).

Par exemple, si vous avez un blog de voyage, vous pourriez créer une catégorie « Destinations » puis avoir des catégories enfants comme « Europe », « Amérique » et « Australie ».

Par défaut, la plupart des thèmes WordPress affichent toutes les catégories parentes et enfants pour un article.

Cependant, si vous utilisez beaucoup de catégories, vos pages de blog peuvent commencer à paraître désordonnées et compliquées. Cela peut également rendre plus difficile pour les lecteurs de trouver la catégorie qui les intéresse.

Pour cette raison, vous pourriez vouloir masquer les catégories parentes génériques d'un article et n'afficher que les catégories enfants. Cela étant dit, voyons comment vous pouvez afficher uniquement les catégories enfants dans la boucle d'articles WordPress.

Avant de modifier un fichier de thème WordPress : points clés à retenir

Ce guide s'adresse aux personnes à l'aise avec le codage et la modification des fichiers de thème WordPress. Voici quelques points à considérer avant de suivre le tutoriel :

1. Tout d'abord, vous devez connecter votre site web via FTP ou ouvrir le gestionnaire de fichiers de votre hébergeur pour pouvoir accéder à ces fichiers.
2. Si vous êtes débutant, vous pouvez consulter notre guide pour débutants sur la façon de coller des extraits du web dans WordPress pour vous préparer.
3. Nous vous recommandons de créer une sauvegarde ou d'utiliser un site de staging pour suivre cette méthode. Ainsi, si quelque chose tourne mal, votre site en direct ne sera pas affecté.

Enfin, ce guide ne s'applique qu'aux thèmes WordPress classiques. Les thèmes de blocs ont une structure de fichiers différente.

Afficher uniquement la catégorie enfant dans la boucle de publication WordPress

Dans ce tutoriel, nous vous montrerons comment modifier le fichier de votre thème en utilisant le gestionnaire de fichiers de Bluehost. Mais quel que soit votre hébergeur, les étapes devraient être similaires.

Tout d'abord, connectez-vous à votre tableau de bord Bluehost et accédez à l'onglet « Sites Web ». Ensuite, cliquez sur « Paramètres » pour le site que vous souhaitez modifier.

Ensuite, faites défiler jusqu'à la section Liens rapides.

Puis, cliquez sur le bouton « Gestionnaire de fichiers ».

Cela ouvrira le gestionnaire de fichiers.

Vous devrez maintenant trouver le code dans le fichier de votre thème qui est responsable de l'affichage des catégories. Vous pouvez commencer par aller dans le dossier public_html de votre site » wp-content » themes » le dossier de votre thème actuel.

À ce stade, vous devrez peut-être ouvrir chaque fichier et dossier un par un pour trouver le bon fichier à modifier. Une chose que vous pouvez faire est d'essayer de trouver du code lié aux catégories, comme has_category ou get_the_category_list. Si vous les trouvez, vous devriez être dans le bon fichier.

Si vous ne trouvez pas le bon fichier de modèle, consultez notre feuille de triche sur la hiérarchie des modèles WordPress et notre guide sur comment trouver le bon fichier de thème à modifier.

Si vous utilisez le thème Twenty Twenty-One, le fichier que vous devriez rechercher est le fichier template-tags dans le dossier « inc ». Une fois que vous l'avez trouvé, vous pouvez cliquer dessus avec le bouton droit de la souris et sélectionner « Modifier ».

Dans le fichier, voici l'extrait responsable de l'affichage des catégories et des étiquettes :

if ( has_category() || has_tag() ) {

				echo '<div class="post-taxonomies">';

				$categories_list = get_the_category_list( wp_get_list_item_separator() );
				if ( $categories_list ) {
					printf(
						/* translators: %s: List of categories. */
						'<span class="cat-links">' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . ' </span>',
						$categories_list // phpcs:ignore WordPress.Security.EscapeOutput
					);
				}

				$tags_list = get_the_tag_list( '', wp_get_list_item_separator() );
				if ( $tags_list && ! is_wp_error( $tags_list ) ) {
					printf(
						/* translators: %s: List of tags. */
						'<span class="tags-links">' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . '</span>',
						$tags_list // phpcs:ignore WordPress.Security.EscapeOutput
					);
				}
				echo '</div>';
			}
		} else {

Maintenant que vous avez trouvé le bon code, vous pouvez remplacer cet extrait entier par ceci :

if ( has_category() || has_tag() ) {

    echo '<div class="post-taxonomies">';

    // Get the list of categories
    $categories = get_the_category();
    $child_cat_IDs = array(); // Array to store child category IDs
    $parent_cat_IDs = array(); // Array to store parent category IDs
 
    foreach ( $categories as $category ) {
        if ( $category->parent > 0 ) {
            $child_cat_IDs[] = $category->term_id; // Store the child category ID
        } else {
            $parent_cat_IDs[] = $category->term_id; // Store the parent category ID
        }
    }

    // Output child categories if there are any
    if ( !empty($child_cat_IDs) ) {
        $output = '<span class="cat-links">' . esc_html__( 'Categorized as ', 'twentytwentyone' ) . ' ';
        foreach ( $child_cat_IDs as $cat_id ) {
            $cat_link = get_category_link($cat_id);
            $cat_name = get_cat_name($cat_id);
            $output .= '<a href="' . esc_url($cat_link) . '">' . esc_html($cat_name) . '</a> ';
        }
        $output .= '</span>'; // Close the span tag after the loop
        echo $output; // Output the child category links

    // Output parent categories if there are no child categories
    } elseif ( !empty($parent_cat_IDs) ) {
        $output = '<span class="cat-links">' . esc_html__( 'Categorized as ', 'twentytwentyone' ) . ' ';
        foreach ( $parent_cat_IDs as $cat_id ) {
            $cat_link = get_category_link($cat_id);
            $cat_name = get_cat_name($cat_id);
            $output .= '<a href="' . esc_url($cat_link) . '">' . esc_html($cat_name) . '</a> ';
        }
        $output .= '</span>'; // Close the span tag after the loop
        echo $output; // Output the parent category links
    }

    // Handle tags
    $tags_list = get_the_tag_list('', wp_get_list_item_separator());
    if ( $tags_list && ! is_wp_error( $tags_list ) ) {
        printf(
            /* translators: %s: List of tags. */
            '<span class="tags-links">' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . '</span>',
            $tags_list // phpcs:ignore WordPress.Security.EscapeOutput
        );
    }

    echo '</div>'; // Close post-taxonomies div
}
} else {

Cet extrait de code identifie d'abord toutes les catégories attribuées à l'article. Ensuite, il vérifie si chaque catégorie a un parent.

Si c'est le cas, cela signifie qu'il s'agit d'une sous-catégorie, et elle est ajoutée à la liste d'affichage. Les catégories parentes sont ignorées, ce qui donne un affichage plus propre et plus spécifique de la catégorisation de votre article.

Voici à quoi cela devrait ressembler lorsque vous remplacez le code :

Une fois terminé, enregistrez simplement vos modifications.

Maintenant, vous devez visiter un article qui a une ou plusieurs sous-catégories. Vous verrez que la catégorie parente est masquée, et WordPress affiche maintenant uniquement les sous-catégories.

Nous espérons que cet article vous a aidé à apprendre comment afficher uniquement la catégorie enfant dans vos articles WordPress. Ensuite, vous voudrez peut-être consulter notre article sur comment styliser différemment les catégories individuelles dans WordPress et notre guide pour débutants sur comment rechercher par catégorie dans WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.