Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment définir une image mise en avant de secours basée sur la catégorie de l’article dans WordPress

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Réglages : Vous cherchez un moyen de définir une miniature de publication par défaut pour des catégories WordPress spécifiques ?

Aucun article n’a d’image vedette, ou si vous souhaitez que toutes les publications d’une catégorie aient des miniatures similaires, vous pouvez définir une image de repli pour chaque catégorie afin qu’aucun article de blog ne soit laissé de côté.

Dans cet article, nous allons vous afficher comment définir les images mises en avant de repli par défaut pour des catégories spécifiques dans WordPress.

How to set fallback featured image based on post category in WordPress

Pourquoi ajouter une image mise en avant de secours pour la catégorie de la publication ?

Imaginons que vous ayez un blog WordPress dans lequel vous assignez une catégorie unique à chaque publication. Vous pouvez assigner à toutes les publications dans cette catégorie d’afficher la même image de remplacement si elles n’ont pas de mise en avant pour une raison quelconque.

Un autre avantage de l’ajout d’une image de repli pour une catégorie de publication est que si vos pages d’archives de catégories reçoivent beaucoup de trafic de recherche, alors cela les rend plus attrayantes et attrayantes.

Cela dit, voyons comment ajouter une image de repli en fonction de la catégorie de la publication à l’aide d’une extension WordPress et d’un code personnalisé.

Par défaut, WordPress n’offre pas d’option pour ajouter des images à vos pages de catégories d’articles. Cependant, vous pouvez facilement définir une image de repli pour les catégories d’articles à l’aide d’une extension WordPress.

Tout d’abord, vous devrez installer et activer l’extension Category and Taxonomy Image. Pour plus de détails, veuillez consulter notre guide sur l ‘installation d’une extension WordPress.

Une fois activé, vous pouvez vous rendre dans Réglages  » Taxonomie Image depuis le panneau d’administration de WordPress. Ensuite, vous pouvez cliquer sur la case à cocher  » catégorie  » pour inclure les images de taxonomie dans vos catégories de publications en tant que solution de repli.

Enable taxonomy images for category

N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » lorsque vous avez terminé.

Après cela, vous pouvez vous rendre dans la rubrique Publications  » Catégories de votre tableau de bord WordPress. Vous verrez apparaître un champ  » Image  » lors de l’ajout d’une nouvelle catégorie ou de la modification d’une catégorie existante.

New image field for categories

Saisissez simplement l’URL d’une image que vous souhaitez ajouter à votre catégorie WordPress. Pour plus de détails à ce sujet, veuillez consulter notre guide sur la façon d’obtenir l’URL des images que vous téléversez dans WordPress.

Aucun texte n’étant assigné à une image avant, WordPress utilisera l’image que vous venez de définir pour votre catégorie avant de publier un article de blog.

Voici une prévisualisation de l’image que nous avons utilisée sur notre site de démonstration.

Preview of fallback image with plugin

C’est tout ! Vous avez bien ajouté une image de remplacement basée sur la catégorie de la publication.

Vous pouvez également configurer une image de repli pour les catégories de publication sans utiliser d’extension WordPress. Cependant, cette méthode n’est pas recommandée aux débutants car elle implique des extraits de code.

La première chose à faire est de créer des images pour vos catégories WordPress. Utilisez le slug de la catégorie comme nom de fichier image et enregistrez-les tous dans le même format, comme JPG ou PNG.

Ensuite, vous pouvez téléverser les images de vos catégories sur votre site WordPress à partir de Media  » Add New.

Upload images to media library

WordPress stockera les images de vos catégories lors du téléversement et créera les tailles d’image définies par votre thème.

Après avoir téléversé les images des catégories, vous devez les déplacer dans un autre répertoire. Il vous suffit de vous connecter à votre site à l’aide d’un client FTP et de vous rendre dans le dossier /wp-content/uploads/.

Uploads folder in WordPress

Les images de la catégorie que vous avez téléversées seront stockées dans le dossier du mois, comme /uploads/2022/08/.

Ouvrez le dossier de ce mois.

Media uploads organized in year and monthly folders

Vous pouvez consulter notre guide sur l’endroit où WordPress stocke les images sur votre site pour en savoir plus.

Ensuite, créez un dossier sur le bureau de votre ordinateur et nommez-le category-images. Maintenant, téléchargez toutes vos images de catégories et toutes les tailles que WordPress a créées pour elles dans ce nouveau dossier sur votre ordinateur.

Une fois le téléchargement terminé, vous devez téléverser le dossier category-images dans votre répertoire /wp-content/uploads. Cela vous permettra d’avoir toutes les tailles d’images de vos catégories dans un dossier séparé qui est facile à appeler dans votre thème.

Pour plus de détails, veuillez consulter notre guide sur l’utilisation du FTP pour téléverser des fichiers sur WordPress.

Affichage de l’image de la catégorie en tant qu’image avant de secours par défaut

Nous verrons ensuite comment afficher l’une de ces images en tant qu’image mise en avant de secours lorsqu’une publication en avant d’une catégorie n’en définit pas.

Cette méthode implique de copier et de coller du code, et nous ne recommandons normalement pas aux utilisateurs/utilisatrices de modifier les fichiers de leur thème. De petites erreurs peuvent entraîner de grosses erreurs sur votre site.

Un moyen plus facile d’ajouter du code à votre site est d’utiliser WPCode. C’est la meilleure extension d’extrait de code WordPress, vous permettant de gérer facilement et en toute sécurité du code personnalisé sur votre site.

Tout d’abord, vous devrez installer et activer l’extension gratuite WPCode. Pour plus de détails, veuillez consulter notre guide sur l ‘installation d’une extension WordPress.

Ensuite, vous pouvez aller à Code Snippets  » + Add Snippet dans votre panneau d’administration WordPress pour ajouter un nouvel extrait. Il vous suffit ensuite de cliquer sur le bouton  » Ajouter une nouvelle « .

Click 'Add New Snippet' in WPCode

Ensuite, vous pouvez soit ajouter un code personnalisé, soit utiliser un extrait de la bibliothèque WPCode.

Pour cela, vous allez utiliser votre propre code personnalisé, survolez donc l’option « Ajouter votre code personnalisé (nouvel extrait) » et cliquez sur l’option « Utiliser l’extrait ».

Add custom code in WPCode

Ajoutez maintenant un nom à votre extrait, qui peut être n’importe quoi pour vous aider à vous rappeler à quoi sert le code.

Comme le code contient du PHP, assurez-vous de choisir l’extrait de code PHP comme « Type de code » dans le menu déroulant.

Add a fallback image

Ensuite, il suffit de copier l’extrait de code suivant et de le coller dans le champ « Prévisualisation du code ».

/**
 * Plugin Name: Category Thumbnail Fallback
 * Description: Use the category image as fallback when the post does not have a featured image
 */

class WPBCategoryThumbnailFallback
{
    protected static $taxonomies = ['category'];

    protected $nonceId = 'wpb_category_thumb_fallback_none';
    protected $fieldId = 'wpb_category_fallback_post_image';

    public $taxonomy;

    protected function __construct($taxonomy)
    {
        $this->taxonomy = $taxonomy;
    }

    public static function init()
    {
        foreach (static::$taxonomies as $taxonomy) {
            $_self = new self($taxonomy);

            add_action('admin_enqueue_scripts', [$_self, 'scripts']);

            add_action("{$taxonomy}_add_form_fields", [$_self, 'add']);
            add_action("{$taxonomy}_edit_form_fields", [$_self, 'edit'], 99, 2);

            add_action("created_{$taxonomy}", [$_self, 'saveTerm'], 10, 2);
            add_action("edited_{$taxonomy}", [$_self, 'editTerm'], 10, 2);

            add_filter("get_post_metadata", [$_self, 'fallback'], 99, 5);
        }
    }

    public function scripts($hook_suffix)
    {
        if (in_array($hook_suffix, ['term.php', 'edit-tags.php'])) {
            $screen = get_current_screen();

            if (is_object($screen) && "edit-{$this->taxonomy}" == $screen->id) {
                wp_enqueue_media();

                wp_add_inline_script('media-editor', $this->inlineScript());
            }
        }
    }

    public function add()
    {
        ?>
        <div class="form-field upload_image-wrap">
            <label for="upload_image">Image</label>
            <input id="upload_image" type="hidden" size="36" name="<?php
            echo esc_attr($this->fieldId)
            ?>" value=""/>
            <div id="wpb-category-image-preview" style="max-width: 150px; max-height: 150px;"></div>
            <input id="upload_image_button" class="button" type="button" value="Upload Image"/>
            <p>Enter a URL or upload an image</p>
        </div>
        <?php
        wp_nonce_field($this->nonceId, $this->nonceId);
    }

    public function edit($term, $taxonomy)
    {
        $value = get_term_meta($term->term_id, $this->fieldId, true);
        $image = wp_get_attachment_image((int)$value);
        ?>
        <tr class="form-field upload_image-wrap">
            <th scope="row"><label for="name">Image</label></th>
            <td>
                <label for="upload_image">
                    <input id="upload_image" type="hidden" size="36" name="<?php
                    echo esc_attr($this->fieldId)
                    ?>" value="<?php
                    echo esc_attr($value)
                    ?>"/>
                    <div id="wpb-category-image-preview" style="max-width: 150px; max-height: 150px;"><?php
                        echo $image;
                        ?></div>
                    <input id="upload_image_button" class="button" type="button" value="Upload Image"/>
                </label>
                <p class="description">Enter a URL or upload an image</p>
            </td>
        </tr>
        <?php
        wp_nonce_field($this->nonceId, $this->nonceId);
    }

    public function saveTerm($term_id, $tt_id)
    {
        $data = array_filter(wp_unslash($_POST), function ($value, $key) {
            return in_array($key, [$this->nonceId, $this->fieldId]);
        }, ARRAY_FILTER_USE_BOTH);

        if (
            empty($data) ||
            empty($data[$this->nonceId]) ||
            ! wp_verify_nonce($data[$this->nonceId], $this->nonceId) ||
            ! current_user_can('manage_categories')
        ) {
            return null;
        }

        if (empty($data[$this->fieldId]) || empty(absint($data[$this->fieldId]))) {
            return delete_term_meta($term_id, $this->fieldId);
        }

        $value = absint($data[$this->fieldId]);

        return update_term_meta($term_id, $this->fieldId, $value);
    }

    public function editTerm($term_id, $tt_id)
    {
        $this->saveTerm($term_id, $tt_id);
    }

    public function fallback($null, $object_id, $meta_key, $single, $meta_type)
    {
        if (
            $null === null &&
            $meta_key === '_thumbnail_id'
        ) {
            $meta_cache = wp_cache_get($object_id, $meta_type . '_meta');

            if ( ! $meta_cache) {
                $meta_cache = update_meta_cache($meta_type, [$object_id]);
                $meta_cache = $meta_cache[$object_id] ?? null;
            }

            $val = null;

            if (isset($meta_cache[$meta_key])) {
                if ($single) {
                    $val = maybe_unserialize($meta_cache[$meta_key][0]);
                } else {
                    $val = array_map('maybe_unserialize', $meta_cache[$meta_key]);
                }
            }

            if (empty($val)) {
                $fallbackImageId = $this->getPostFallbackImageId($object_id, $single);

                if ( ! empty($fallbackImageId)) {
                    return $fallbackImageId;
                }
            }

            return $val;
        }

        return $null;
    }

    public function getPostFallbackImageId($postId, $single)
    {
        $terms = get_the_terms($postId, $this->taxonomy);

        if (empty($terms) || is_wp_error($terms)) {
            return null;
        }

        foreach ($terms as $term) {
            $fallbackIdFromCategoryId = get_term_meta($term->term_id, $this->fieldId, $single);

            if ( ! empty($fallbackIdFromCategoryId)) {
                return $fallbackIdFromCategoryId;
            }
        }

        return null;
    }

    public function inlineScript()
    {
        return "jQuery(document).ready(function ($) {
            var custom_uploader;
            $('#upload_image_button').click(function (e) {
                e.preventDefault();
                //If the uploader object has already been created, reopen the dialog
                if (custom_uploader) {
                    custom_uploader.open();
                    return;
                }
                //Extend the wp.media object
                custom_uploader = wp.media.frames.file_frame = wp.media({
                    title: 'Choose Image',
                    button: {
                        text: 'Choose Image'
                    },
                    multiple: true
                });
                //When a file is selected, grab the URL and set it as the text field's value
                custom_uploader.on('select', function () {
                    console.log(custom_uploader.state().get('selection').toJSON());
                    attachment = custom_uploader.state().get('selection').first().toJSON();
                    
                    var thumbUrl = attachment && attachment.sizes && attachment.sizes.thumbnail && attachment.sizes.thumbnail.url
                    ? attachment.sizes.thumbnail.url
                    : attachment.url;
                    $('#wpb-category-image-preview').html('<img src=\"'+ thumbUrl +'\">');
                    $('#upload_image').val(attachment.id);
                });
                //Open the uploader dialog
                custom_uploader.open();
            });
        });";
    }
}

Ensuite, vous pouvez défiler jusqu’à la section  » Insertion  » et choisir  » Insertion automatique  » pour laisser l’extension gérer le placement pour vous.

Choisissez ensuite l’option « Insérer avant le contenu » dans la section « Page, publication, type de publication personnalisé » du menu déroulant « Emplacement ».

Select fallback image insertion option

Vous pouvez ensuite revenir en haut de la page et faire passer le permutateur de « Inactif » à « Actif ».

Une fois que vous aurez cliqué sur le bouton « Enregistrer l’extrait » en haut de la page, votre image de remplacement sera en place.

Save and activate code snippet WPCode

Vous pouvez également consulter notre guide sur la façon d’ajouter des extraits de code personnalisés dans WordPress.

Note : Cet extrait de code fonctionnera uniquement avec la taxonomie « catégorie ». Cependant, vous pouvez ajouter d’autres taxonomies en ajoutant leur nom à la liste de la classe suivante dans le code et en modifiant le terme entre crochets en « identifiant » ou « publication », par exemple.

protected static $taxonomies = ['category'];

Lorsque vous avez terminé, il vous suffit de visiter votre site pour voir l’image de repli.

Fallback image preview

Nous espérons que cet article vous a aidé à ajouter une image mise en avant de repli en fonction de la catégorie de la publication. Vous pouvez également consulter notre guide sur le coût de construction d’un site Web et les meilleurs services de marketing e-mail pour les petites entreprises.

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.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

11 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Nicola says

    Most interesting would to have a hook to replace thumbnail to be used in functions so not to bother replacing wherever the thumbnail is used

  3. Sohail says

    Thank you. This works like a charm :-)

    While the fallback featured image gets displayed in the post; any ideas on how could I display them in category/archive pages, or where the posts get displayed on the homepage?

  4. tina says

    Hello!
    Please show how the articles of the way they are displayed in the « MORE ON RIGHT NOW WPBEGINNER » above ?? a WordPress template
    Thank you

  5. David says

    I turned off the organize posts by date month in settings/media, and changed url to reflect uploads directory specifically – that way I can avoid the extra step. I’m hoping this won’t cause issues with my host but it certainly makes life a little easier for me. Thank you so much for sharing this info, I have been searching for a looooong time and it’s finally how I want it :)

  6. Rashid khan says

    hello,,, i want to add dynamic image on my wordpress home page. where al ready 5 images are set on differnet location..
    i just want to replace them and add new photo by post and catorrries…
    please help me
    i tried but no success
    i used post by thumbian function

  7. Richard Stewart says

    This is great, but I failed miserably trying to implement Displaying Category Image as Default Fallback Featured Image in my classifieds theme. It uses different categories from the ‘stock’ posts categories and the author refuses to help.

    Do you offer any technical services, paid or otherwise, where you can help me implement Displaying Category Image as Default Fallback Featured Image into my theme?

  8. Matt Cromwell says

    This is really awesome, a really useful tip in my case. Only issue is the first code above is incomplete. Luckily I didn’t need the « if » part, so I just pulled that out and all was well.

    Thanks for some pretty advanced tips on your « begginer’s » site. Keep it up!

  9. Damien Carbery says

    Another idea could to set the post thumbnail when the post is saved. The advantage of the solution above is that the category thumbnail is easily changed.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.