RootsLabs

More than a tool ! GitHub Google+ LinkedIn RSS

WordPress : Ajouter une image aux catégories

Progi1984 - Commentaires (10)

Avec WordPress, la personnalisation d’un site peut aller très loin. Dans cet article, nous allons parler images, articles et catégories.
Voici l’état des lieux :

  • Actuellement, ni les articles ni les images n’ont d’images liés.
  • Dans le futur, un article pourra avoir une image liée (image à la une) ;
  • Si ce n’est pas le cas, on utilisera l’image liée à la catégorie de l’article.

Comment allons nous faire ?

Toutes les modifications se font dans le fichier functions.php de votre thème WordPress.

Activer le support des images à la une dans le thème WordPress

On active les miniatures pour les articles.

On définit les tailles des miniatures

Désormais, nous avons, pour les articles, la possibilité d’avoir une image à la une.

Lier une image à une catégorie

On crée un hook pour s’intégrer au formulaire d’édition de la catégorie dans le BO WordPress :

On crée un hook qui s’activera lors de la sauvegarde d’une catégorie :

Récupérer l’image à la une ou l’image de la catégorie

Pour cela, j’ai crée une fonction qui retourne d’abord si elle est présente l’image à la une sinon l’image liée à la catégorie.

Désormais, à vous de jouer ! Dans mon cas, j’ai intégré cela dans mon header pour gérer les og:image de Facebook.

Commentaires

1. LN, le 24 juin 2013 à 15:08

Mais ça, l’histoire des miniatures, la plupart des thèmes le propose par défaut, non ? (enfin en tout cas moi je la vois souvent par défaut)

A moins que l’idée soit de proposer une seule image commune à tous les articles d’une même catégorie ?

2. Progi1984, le 26 juin 2013 à 10:54

Erreur. Cela est proposé si cela a été développé dans le thème.

De plus, associer une image à une catégorie permet qu’un article ait une image même si l’article n’a pas d’image à la une.

3. LN, le 1 juillet 2013 à 15:50

oki dac, je vois mieux l’intérêt de la chose 😉

4. biboupat, le 2 septembre 2013 à 19:22

Merci pour ce tuto mais où est-ce que je met ces lignes de code dans le fichier fonction.php de mon thème ?? J’utilise « Twenty Thirteen  » !
J’ai tout mi dans le fichier fonction.php de mon thème. J’ai bien la ligne dans catégories pour ajouter le lien vers une image de médias. Mais je ‘nai toujours pas d’image à la une de l’article de le catégorie concernée. Je n’ai pas mi d’image à la une dans l’article pour justement n’avoir que l’image de la catégorie. Je comprend pas où mettre ce code sur mon thème ??

Merci

5. Progi1984, le 8 septembre 2013 à 17:51

Bonjour

Pour le code, il est à mettre dans le fichier functions.php du thème.

Pour avoir l’OG Image, il faut ajouter cela dans le fichier header.php du thème entre les balises <head> & </head>

6. jean-luc, le 22 octobre 2013 à 10:29

cela fonctionne t il pour les articles déjà écrits ?
sur http://test.jbmm.fr/category/business
je ne vois pas le résultat….
merci

7. Progi1984, le 17 décembre 2013 à 23:30

De mémoire, cela fonctionne bien.
Qu’avez vous fait ?
Avez vous bien ajouté l’URL d’une image dans la catégorie ?
Avez vous bien affiché cette image dans votre thème ?

8. edouard, le 3 mai 2014 à 15:13

Bonjour, je cherche a mettre une image a la une pour chaque catégories.
j ‘ai donc suivi votre tuto mais je ne comprend pas la fin. l’image ne s’affiche pas, par contre j’ai bien la possibilité de mettre l’url de l’image dans le B.O.

ou je doit mettre ceci:

et ceci est il necessaire:

merci pour votre réponse qui va je l’espère m’éclairer.

9. Progi1984, le 5 mai 2014 à 15:48

Bonjour,

Cette fonction est à mettre dans le fichier functions.php de votre thème.
Pour afficher l’image, vous devez utilisez la fonction en situation.

Ainsi, appeler le code PHP dans votre balise meta ou dans une balise img.

Les balises meta sont nécessaires si vous souhaitez supporter les Twitter Cards.

10. Eric, le 27 mai 2015 à 16:56

Bonjour,
je cherche à afficher dans un post la liste des catégories associées avec leurs images ?
pouvez-vous me dire ce que je doit mettre ?
merci beaucoup

Ajouter un commentaire

Commentaire :