Ajouter une image aux catégories wordpress sans plugin

Ce tutoriel vous permet d’ajouter un champ texte pour renseigner l’url d’une image pour chacune de vos catégories. Dans votre fichier functions.php : [php]add_action(‘init’, ‘ma_categorie_module’);[/php] [php]function ma_categorie_module() { add_action ( ‘edit_category_form_fields’, ‘add_image_cat’); add_action ( ‘edited_category’, ‘save_image’); }[/php] Function pour l’ajout du champ supplémentaire : [php]function add_image_cat($tag){ $category_images = get_option( ‘category_images’ ); $category_image =  »; if ( is_array( $category_images ) && array_key_exists( $tag->term_id, $category_images ) ) { $category_image = $category_images[$tag->term_id] ; } ?> <label for= »auteur_revue_image »>Image</label> <img src= »<?php echo $category_image;?> » alt= »" /> <input id= »category_image » name= »category_image » type= »text » value= »<?php echo $category_image; ?> » /> <span>Ce champ permet d’ajouter une image pour illustrer la catégorie. Uploader l’image depuis l’onglet médias WordPress et coller son url ici.</span> <?php }[/php] Function pour la sauvegarde : [php] function save_image($term_id){ if ( isset( $_POST['category_image'] ) ) { //load existing category featured option $category_images = get_option( ‘category_images’ ); //set featured post ID to proper category ID in options array $category_images[$term_id] =  $_POST['category_image']; //save the option array update_option( ‘category_images’, $category_images ); } } [/php] Affichage de l’image dans catégorie.php ou archive.php selon votre thème, prenez catégorie.php en priorité et rajouter ce code avant la boucle wordpress : [php] <img src= »<?php echo $category_image;?> » alt= »" /> [/php] Pour afficher l’image de la première catégorie dans les articles (single.php) :

[php] <?php $category = get_the_category(); if($category){ $category_images = get_option( ‘category_images’ ); $category_image =  »; if ( is_array( $category_images ) && array_key_exists( $category[0]->term_id, $category_images ) ){ $category_image = $category_images[$category[0]->term_id] ; ?> <img src= »<?php echo $category_image;?> »/> <?php } } ?> [/php] Mise à jour AFFICHER LES CATÉGORIES (image et description) sur la page d’accueil :

Dans le fichier functions.php :

[php] //get the current cat Id. function getCurrentCatID(){ global $wp_query; if(is_category() || is_single()){ $cat_ID = get_query_var(‘cat’); } return $cat_ID; } ///WP-SPIRIT.com get the cat thumbnail function getImageCatById($idCat = «  »){ $defautUrlNo = get_bloginfo(‘template_url’). »/images/no-thumb-cat.png »; $category_images = get_option( ‘category_images’ ); $category_image =  »; if($idCat != «  »){ //outside the loop (ex:index.php) if ( is_array( $category_images ) && array_key_exists( $idCat, $category_images ) ){ $category_image = $category_images[$idCat] ; return $category_image; } else{ return $defautUrlNo; } } else{ //category.php $catId = getCurrentCatID(); if($catId){ if ( is_array( $category_images ) && array_key_exists( $catId, $category_images ) ){ $category_image = $category_images[$catId] ; return $category_image; } else{ return $defautUrlNo; } } else{ return $defautUrlNo; } } } [/php] Dans le fichier index.php :
[php] <ul id= »category-bloc »> <?php $argsCat = array( ‘type’ => ‘post’, //’child_of’ => 0, //’parent’ => , ‘orderby’ => ‘name’, ‘order’ => ‘ASC’, ‘hide_empty’ => 0, ‘hierarchical’ => 1, // ‘exclude’ => , // ‘include’ => , //’number’ => , ‘taxonomy’ => ‘category’, ‘pad_counts’ => false ); $categories = get_categories( $argsCat ); foreach ($categories as $category) { //datas avalaible /* $category->term_id $category->name $category->slug $category->term_group $category->term_taxonomy_id $category->taxonomy $category->description $category->parent $category->count $category->cat_ID $category->category_count $category->category_description $category->cat_name $category->category_nicename $category->category_parent */ ?> <li> <?php $catID = $category->term_id; // Get the URL of this category $category_link = get_category_link( $catID ); ?> <h2><a href= »<?php echo $category_link;?> »><?php echo $category->cat_name; ?></a></h2> <img src= »<?php echo getImageCatById($catID);?> » alt= »<?php echo $category->cat_name; ?> » title= »<?php echo $category->cat_name; ?> »/> <p><?php echo $category->category_description; ?></p> </li> <?php } ?> </ul> [/php]

Dans la page des catégories (category.php):

[php] <img src= »<?php echo getImageCatById();?> »/> [/php]

Laisser un commentaire

34 Commentaires

  1. Merci pour ce tuto,
    Comment recupere-t-on l’image de la categorie pour les posts lui correspondant.
    j’ai essayé en collant le dernier code en dehors de la boucle de la page single.php et en remplacant if(is_category()) par if(is_post()) mais cela ne fonctionne guère.

    1. La solution pour afficher l’image dans single.php à la fin de cet article.

  2. C’est super merci

  3. Bonjour, j’ai un problème, j’ai placé les code dans le fichier functions.php mais sa me mais un message d’erreurs.

    « Parse error: syntax error, unexpected ‘}’ in /dofusmotion/wp-content/themes/wtb-video-green/functions.php on line 573″

    1. Bonjour,

      Utilise notepad++(éditeur de code) par exemple pour voir qu’elle apostrophe n’est pas fermée.

      Ajoute partie par partie pour faciliter la lecture.

      Bon courage.

  4. Le même soucis que Hiper-tofu, message d’erreur.

    J’utilise TextMate ou Coda sur mac et en collant le code pour la partie « Function pour l’ajout du champ supplémentaire : » que tu fournis, je vois qu’il y a un problème de syntaxe mais ne sais pas lequel.

    Peut être un apostrophe manquant effectivement, mais étant le fournisseur du code, tu devrais savoir aisément où est le problème.
    Copier et coller le code, quelque soit le logiciel utilisé, doit fonctionner si la source est correcte.

    Si tu as moyen de creuser un peu, grand merci à toi..

    1. Bonsoir,

      J’ai regardé de plus près normalement le problème est résolu.

      l’erreur ce trouvait ligne 13-14 : Function pour l’ajout du champ supplémentaire :

      Ce champ permet d'ajouter une image pour illustrer la catégorie. Uploader l'image depuis l'onglet médias WordPress et coller son url ici.
      < ?php
      }

      il manquait la balise < ?php

      Peux tu me confirmer si cela fonctionne pour toi ?

      1. bonjour tout le monde. L’érreur est a cause du copier coller. Je travail sur PDT comme IDE. avec le copier coller ca ne marchaist pas. Mais qund j’ai tapé le code moi meme ca a marché. Jespère que ca va vous aider cordiallement .

  5. Hello,

    Merci pour ce tutoriel tout fonctionne très bien sauf pour la dernière étape,

    Quand je définis une image sur une catégorie tout fonctionne comme par exemple là: (l’image c’est la bannière) http://tombeaucroft.net/site/category/news

    Mais sur l’accueil je n’ai rien :s http://tombeaucroft.net/site/

    Qu’entends tu par « première catégorie » car j’ai essayé de mettre une image sur chaque catégorie pourtant rien ne s’affiche sur l’accueil :s

    Un petit coups de pouce ?

    1. Bonjour,

      « Pour afficher l’image de la « première catégorie » dans les articles (single.php) » veut dire que ce code fonctionne uniquement lorsque l’on est sur la page d’un article et que l’on veut afficher l’image de sa première catégorie.

      Pour que ce code fonctionne ailleurs il faut remplacer le code ci dessous car la fonction get_the_category fonctionne uniquement pour un article:


      $category = get_the_category();

      Je donnerai les codes en fin de semaine (trop de travail) pour category.php et une fonction pour afficher toutes catégories qui fonctionnera sur la page d’accueil par ex.

    2. L’article a été mis à jour. A++

      1. Merci beaucoup pour ces précisions!

  6. Jo

    Ca m’a l’air nickel mais ça ne fonctionne pas sur les pages category.php (bien que ce soit en dehors de la boucle WP). Pourtant l’adresse est bien sauvegardée puisque quand j’ouvre la catégorie dans le backoffice, elle est bien sauvegardée.

    Une idée du problème?

    En tout cas merci pour le code ;)

    PS: si on veut un affichage nickel dans le backoffice, voilà le code, ça peut toujours servir ;)

    Image
    <input name="category_image" id="category_image" type="text" value="" size="40" />
    Ce champ permet d'ajouter une image pour illustrer la catégorie.

    1. Bonjour,

      le code fonctionne uniquement lorsque l’on est sur la page d’un article et que l’on veut afficher l’image de sa première catégorie.(single.php)

      Pour que ce code fonctionne ailleurs il faut remplacer le code ci dessous car la fonction get_the_category fonctionne uniquement pour un article:


      $category = get_the_category();

      Je donnerai les codes en fin de semaine (trop de travail) pour category.php et une fonction pour afficher toutes catégories qui fonctionnera sur la page d’accueil par ex.

    2. L’article a été mis à jour. Voir la fin. A++

  7. Bonjour,

    déjà merci pour ce petit tuto, très efficace.

    J’ai une petite question.
    Mers articles sont toujours liés à deux catégories (parent et enfant), et je souhaiterais afficher uniquement l’image de la catégorie parent…
    ça marche dans certains cas, et pas dans d’autres… (je crois que c’est selon l’ID des catégories, le code va chercher la première)
    Est ce que quelqu’un aurait une idée sur la modif à effectuer pour répondre à mon besoin ?
    Merci d’avance.

    Matt

    1. Problème résolu, par une nouvelle fonction qui récupère la catégorie parent.
      Pour info : il allait récupérer l’image de la première catégorie par ordre alphabétique (et pas par ID)… ce qui posait problème pour un article affecté à une catégorie parent + enfant.
      merci pour le tuto !

  8. Ced

    Je cree actuellement un blog wordpress et utilise votre theme widemag , cette partie m’interesse mais j’ai du mal a comprendre votre tuto , je suis neophyte dans le code
    Quand vous dites functions.php a la premiere etape c’est dans le dossier theme ou wp-includes et je n’ai pas de fichier category.php dans votre theme pour la derniere etape je doit le mettre dans archive.php ???

    j’ai poser ma question sur le forum de wordpress http://www.wordpress-fr.net/support/sujet-58024-plusieurs-problemes-sujet

    j’ai trouver votre tutoriel ensuite :) juste besoin d’eclaircissement Merci .

    1. Bonjour Ced,

      1)oui le fichier functions.php du thème ( il ne faut pas toucher au dossier wp-includes, il s’agit du noyau de wordpress).
      2)Si le thème n’a pas de category.php utilises archive.php à la place.

      Voici une image de l’architecture wp : http://uniapple.net/blog/wp-content/uploads/2011/01/wordpress_structure1.jpg

  9. Ced

    je vous remercie pour votre rapidité à me repondre et pour ‘larchitecture de wordpress ….

    je place les morceaux de code au debut de chaque fichier apres balise <php ??
    la partie mise à jour est a faire apres les autres etapes à la suite dans functions .php ??

    En tout cas merci pour votre travail et vos differents tutos, je decouvre wordpress grace à vous …

    1. Ced

      j’ai reussi desolé pour mes questions

  10. I wish I was able to read French, since this is exactly what I’ve been looking for. Adding new meta fields to the Category edit is my sought after hack. But… alas I don’t [though should] speak the language of romance.

    1. Adding new meta for category isn’t easy (it’s possible and work fine with custom taxonomy) but not for category. I found a solution to save the data in wordpress options with the id of category but if you found a better and proper way i take it !

  11. Bonjour, je un problème, quand j’exécute ce code il m’affiche tout mes catégories même le catégories filles. J’aimerait seulement afficher que les catégories mères. Comment faire je compte sur vous…

  12. Ceci n’est pas un post constructif mais de remerciement ;) !!!

    Bonjour et merci pour votre travail et le partage de vos connaissances !!!
    J’me suis lancé sous wordpress pour remplacer le site actuel des brescoudos club de moto dans le sud ( http://www.brescoudos.com ) de la pub mais rien à vendre lol c’est une association. Le site doit être en ligne à la fin du mois. J’allais presque vous demander de l’aide car je galérais sur un truc mais j’ai réussi a me débrouiller tout seul, bien sur grâce à votre code qui marche nickel que ce soit pour la page d’accueil ou les autres. Du coup j’ai pu associer une image a chaque catégorie ce qui est top pour personnaliser les posts wordpress. Encore merci a vous et longue vie a WP spirit :)

  13. Merci pour ce travail

  14. Bonjour, et MERCI !!!
    Dans le BO, lorsqu’on édite une catégorie, le nouveau champ image apparait tout en haut (avant Name, Slug etc.) Comment faire pour le placer tout en bas ? Est ce possible ?
    Merci beaucoup

    1. Finalement j’ai réussi en le formattant comme ça :

      Image <img src=" » alt= »" />
      <input type="text" size="40" value=" » id= »category_image » name= »category_image »>
      Ce champ permet d’ajouter une image pour illustrer la catégorie. Uploader l’image depuis l’onglet médias WordPress et coller son url ici.

  15. Exactement ce que je cherche mais….

    …y’a pas un plug in pour faire ça????????????

  16. mat

    @cédric et peut-être d’autres que ça intéresserait, un plugin tout simple à installer, si on veut pas (trop) s’embêter c’est « Custom header images » : http://wordpress.org/extend/plugins/custom-header-images
    Il y a aussi « Unique headers » (mais qui ne marchait pas avec mon thème…)

  17. désolé pas très intelligent, je suis perdu avec tout ces codes, pas possible de voir ce qu’on doit mettre dans functions.php ( le code en entier ) ?
    merci

  18. Bonjour,

    Exxelente méthode, je vous remercie du fond du coeur. j’ai juste un petit soucis.

    Je m’en sers pour afficher une liste de catégories, avec leurs images et description.
    Ca marche niquel sauf pour ce qui est de la mise en page:
    Comment redimensionner les images affichées ?

    1. lili

      Bonsoir
      Merci pour le tuto,mais euh…je capte rien,désolé…;
      je souhaite associer des images a mes catégories mais je ne sais pas ou copier le code…
      qui peut m’aider SVP ??
      Merci