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

L’ajout d’images de taxonomie ou d’icônes de catégories sur votre site WordPress peut vous aider à faire ressortir les catégories.

Cependant, WordPress ne propose pas d’option pour téléverser ces images par défaut. Il affiche uniquement les noms de catégories ou de taxonomies sur les pages d’archives. Cela peut sembler banal et ennuyeux.

Dans notre tutoriel, nous vous afficherons comment ajouter des images de taxonomie ou des icônes de catégories sur WordPress. Vous apprendrez également à les afficher sur vos pages d’archives, ce qui rendra votre site plus attrayant et plus simple/simple d’utilisation.

Pourquoi ajouter des images de taxonomie dans WordPress ?

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

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

Cela semble ennuyeux.

Si vos pages de taxonomie reçoivent beaucoup de trafic de recherche, vous voudrez peut-être les rendre plus attrayantes.

Nous avons vu des pages ennuyeuses et pleines de texte se transformer en pages attrayantes simplement en ajoutant des images pertinentes. Ce n’est pas parce que les images étaient spéciales, mais parce que les humains préfèrent les repères visuels au texte.

Vous pouvez ajouter des images de taxonomie ou des icônes de catégorie pour rendre ces pages plus simples/simples d’utilisation.

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.

Voici un exemple tiré du site de 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 jusqu’en 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 identifiés 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 ajouter le code à l’aide de l’extension WPCode.

Nous vous afficherons les deux méthodes, et vous pourrez 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, vous pouvez également créer un code court personnalisé pour vous en souvenir plus facilement.

Ensuite, cliquez sur le bouton  » Copier  » pour le 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 sur blocs avec support de l’éditeur 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 2. 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 comment elle affiche l’image de votre taxonomie. Voici ce que cela donne sur notre page d’archive de démonstration.

Il se peut que l’apparence soit encore bizarre, mais ne vous inquiétez pas. Vous pouvez la personnaliser à l’aide d’une feuille de style CSS.

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 dans WordPress. Vous pouvez également consulter ces hacks et extensions de catégories utiles pour WordPress ou notre article sur la façon de modifier l’ordre des catégories dans WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.