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

Nous avons constaté que la mise en place d’images en vedette de repli pour les catégories WordPress est un énorme gain de temps, en particulier pour les blogs avec un volume de contenu élevé.

Si vous avez des articles qui n’ont pas d’image vedette, ou si vous voulez que toutes les publications d’une catégorie aient des miniatures similaires, alors vous pouvez définir une image de repli pour chaque catégorie.

De cette façon, vous pouvez vous assurer qu’aucun article de blog ne sera laissé sans image vedette et vous n’avez pas à les attribuer manuellement à chaque publication.

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.

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é.

Réglages de l’image mise en avant dans WordPress à l’aide d’une extension

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.

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.

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.

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

Réglages de l’image mise en avant de secours dans WordPress sans extension

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.

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/.

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.

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 « .

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 ».

Ensuite, vous devez sélectionner « Extrait de code PHP » comme type de code dans la liste d’options qui s’affiche à l’écran.

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

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 ».

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.

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.

Nous espérons que cet article vous a aidé à ajouter une image vedette de repli basée sur la catégorie de la publication. Vous pouvez également consulter notre guide sur la façon d’ajouter une barre de progression dans les publications WordPress et nos choix d’experts des meilleures alternatives Canva pour les graphiques de site.

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.