Comment ajouter des images de taxonomie (icônes de catégories) dans WordPress

Voulez-vous afficher des images de taxonomie ou des icônes de catégories dans WordPress ?

Par défaut, WordPress n’a pas d’option pour téléverser une image de taxonomie ou une icône de catégorie. Il se contente d’afficher le nom d’une catégorie ou d’une taxonomie sur les pages d’archives.

Dans cet article, nous allons vous afficher comment ajouter facilement des images de taxonomie ou des icônes de catégories dans WordPress. Nous allons également vous afficher comment afficher les images de taxonomie sur vos pages d’archives.

Pourquoi ajouter des images de taxonomie dans WordPress ?

Par défaut, votre site WordPress ne dispose pas d’une option permettant d’ajouter des images pour vos taxonomies comme les catégories et les identifiants (ou toute autre taxonomie personnalisée).

Il utilise simplement les noms de taxonomie partout, y compris dans les archives de catégories ou les pages d’archives de taxonomie.

Cela semble plutôt banal et ennuyeux.

Si vos pages de taxonomie génèrent beaucoup de trafic de recherche, vous pouvez les rendre plus attrayantes.

Le moyen le plus simple de rendre une page plus intéressante est d’y ajouter des images. Vous pouvez ajouter des images de taxonomie ou des icônes de catégorie pour rendre ces pages plus simples/simples d’utilisation et plus attrayantes.

Un bon exemple est un site comme NerdWallet qui utilise des icônes de catégories dans son en-tête :

Vous pouvez également l’utiliser pour créer de belles sections de navigation sur votre page d’accueil, comme Bankrate :

Ceci étant dit, voyons comment ajouter facilement des images de taxonomie dans WordPress.

Ajouter facilement des images de taxonomie dans WordPress

La première chose à faire est d’installer et d’activer l’extension Categories Images. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, vous pouvez simplement vous rendre sur la page Posts  » Categories. Vous remarquerez que l’extension affichera une image de remplacement pour vos catégories existantes.

Pour choisir votre propre icône de catégorie, vous devez cliquer sur le lien Modifier situé sous une catégorie.

Sur la page Modifier la catégorie, défilez vers le bas et vous trouverez un formulaire pour téléverser votre propre image de taxonomie.

Il vous suffit de cliquer sur le bouton « Téléverser/Ajouter une nouvelle image » pour téléverser l’image que vous souhaitez utiliser pour cette catégorie particulière.

N’oubliez pas de cliquer sur le bouton Ajouter une catégorie ou Mettre à jour pour enregistrer vos modifications.

Ensuite, vous pouvez répéter le processus pour téléverser des images pour d’autres catégories. Vous pouvez également téléverser des images pour vos identifiants et toute autre taxonomie.

Le problème est qu’après avoir ajouté les publicités, si vous visitez une page de catégorie, vous ne verrez pas l’image de votre catégorie.

Pour l’afficher, vous devrez modifier votre thème WordPress ou votre thème enfant ou utiliser l’extension WPCode pour ajouter le code.

Nous vous afficherons les deux méthodes afin que vous puissiez choisir celle qui vous semble la plus facile.

Option 1. Afficher les icônes de la catégorie à l’aide de WPCode (recommandé)

Cette méthode est plus simple car vous n’avez pas à déterminer quel fichier de thème modifier et vous pouvez ajouter le code en toute sécurité sans casser votre site.

Il est également recommandé aux utilisateurs/utilisatrices qui utilisent un thème en bloc avec le support des éditeurs/éditrices de site.

Tout d’abord, vous devez installer et activer l’extension WPCode. Pour plus de détails, consultez notre tutoriel sur l ‘installation d’une extension WordPress.

Une fois activé, allez sur la page WPCode  » + Add Snippet  » et cliquez sur le bouton Use Snippet sous la case  » Add Your Custom Code (New Snippet) « .

Dans l’écran suivant, donnez à votre extrait un titre qui vous aide à l’identifier.

Sélectionnez ensuite l’extrait PHP comme type de code.

Dans la boîte de Prévisualisation du code, copiez et collez l’extrait de code suivant :

if( is_category() ) { ?> 
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>"  alt="" / >
</div>
<?php 
} else {  
//do nothing
} 

Ensuite, défilez jusqu’à la section Insertion et choisissez Shortcode comme méthode d’insertion.

Vous remarquerez que WPCode affiche automatiquement un code court. Cependant, pour que votre code court soit facile à retenir, vous pouvez également créer un code court personnalisé.

Cliquez ensuite sur le bouton Copier du client/cliente court personnalisé.

Vous pouvez désormais utiliser ce code court pour afficher l’image de la catégorie sur vos pages d’archives.

Ajout d’un code court dans l’éditeur/éditrices du site

Si vous utilisez un thème d’Éditeur de blocs avec support de l’éditeur/éditrices de site, allez à la page Apparence  » Éditeur pour lancer l’Éditeur de site.

Ici, vous pouvez ajouter un bloc de codes courts juste avant le bloc Titre de l’archive.

Collez maintenant le code court que vous avez copié plus tôt dans le bloc de code court.

N’oubliez pas d’enregistrer vos modifications pour les appliquer. Vous pouvez maintenant visiter la page des archives de votre catégorie pour voir le code court en action.

Ne vous inquiétez pas si l’image n’a pas l’air correcte. Nous vous afficherons ultérieurement comment la corriger à l’aide de CSS personnalisés.

Option 1. Afficher manuellement les icônes des catégories

Pour cette méthode, vous devrez ajouter le code personnalisé aux fichiers de votre thème WordPress.

Si c’est la première fois que vous modifiez des fichiers WordPress, vous pouvez consulter notre guide sur la façon de copier et coller du code dans WordPress.

Tout d’abord, vous devez vous connecter à votre site WordPress à l’aide d’un client FTP ou du gestionnaire de fichiers de votre hébergeur WordPress.

Une fois connecté, vous devrez trouver le Modèle responsable de l’affichage de vos archives de taxonomie. Il peut s’agir des fichiers archives.php, category.php, tag.php ou taxonomie.php.

Pour plus de détails, consultez notre guide pour trouver les fichiers à modifier dans un thème WordPress.

Une fois que vous avez trouvé le fichier, vous devez le télécharger sur votre ordinateur et l’ouvrir dans un éditeur de texte tel que Notepad ou TextEdit.

Collez maintenant le code suivant à l’endroit où vous souhaitez afficher l’image de votre taxonomie. En général, vous voudrez l’ajouter avant le titre de la taxonomie ou l ‘identifiant the_archive_title().

<?php if( is_category() ) { ?> 
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>"  alt="" / >
</div>
<?php 
} else {  
//do nothing
} 
?>

Après avoir ajouté le code, vous devez enregistrer ce fichier et le téléverser sur votre site à l’aide du protocole FTP.

Vous pouvez maintenant visiter la page d’archive de la taxonomie pour voir l’image de votre taxonomie s’afficher. Voici ce que cela donne sur notre page d’archive de démonstration.

Cela peut sembler un peu bizarre, mais ne vous inquiétez pas. Vous pouvez personnaliser cela en utilisant un peu de client/cliente/cliente.

Outil de personnalisation des icônes de catégories avec un CSS personnalisé

Après avoir ajouté l’icône de catégorie ou les images de taxonomie à votre thème WordPress, il se peut que votre image ne soit pas très belle.

Pour corriger cela, vous devrez ajouter du code CSS pour l’aligner correctement.

Si c’est la première fois que vous ajoutez du code CSS dans WordPress, jetez un coup d’œil à notre guide pour débutants sur l’ajout de CSS personnalisés dans WordPress.

Voici le CSS personnalisé que nous avons utilisé pour l’image de la taxonomie.

img.taxonomy-img {
    float: left;
    max-height: 100px;
    max-width: 100px;
    display: inline-block;
    padding: 20px;
}

En fonction de votre thème, il se peut que vous deviez également styliser les éléments environnants tels que le titre de l’archive, le titre de la taxonomie et la description.

Nous avons simplement enveloppé le titre et la description de notre archive de taxonomie dans un élément <div> et ajouté une classe CSS personnalisée. Nous avons ensuite utilisé le code CSS suivant pour ajuster le titre et la description.

.taxonomy-title-description {
    display: inline-block;
    padding: 18px;
}

Voici ce que cela donne ensuite sur notre site de test.

Exclure les taxonomies de l’affichage des images de taxonomie

Or, certains utilisateurs/utilisatrices peuvent vouloir utiliser des images de taxonomie uniquement pour des taxonomies spécifiques.

Par exemple, si vous stockez une boutique en ligne à l’aide de WooCommerce, alors vous voudrez peut-être exclure les catégories de produits.

Il suffit de revenir à la page Catégories Images dans la zone d’administration de WordPress et de cocher les taxonomies que vous souhaitez exclure.

N’oubliez pas de cliquer sur le bouton Enregistrer les modifications pour stocker vos réglages.

Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement des images de taxonomie sur WordPress. Vous voudrez peut-être aussi voir ces hacks et extensions de catégories utiles pour WordPress ou rechercher nos astuces pour obtenir plus de trafic à partir des moteurs de recherche.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.