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

Come impostare un’immagine in evidenza di riserva in base alla categoria dell’articolo in WordPress

Abbiamo scoperto che l’impostazione di immagini in primo piano di fallback per le categorie di WordPress è un enorme risparmio di tempo, soprattutto per i blog con un elevato volume di contenuti.

Se avete articoli che non hanno un’immagine in primo piano o se volete che tutti i post di una categoria abbiano miniature simili, potete impostare un’immagine di riserva per ogni categoria.

In questo modo, potrete assicurarvi che nessun post del blog rimanga senza un’immagine in evidenza e non dovrete assegnarla manualmente a ogni singolo post.

In questo articolo vi mostreremo come impostare le immagini in evidenza predefinite di riserva per categorie specifiche in WordPress.

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

Perché aggiungere un’immagine in evidenza di riserva per la categoria di articoli?

Supponiamo di avere un blog WordPress in cui si assegna una singola categoria a ogni pubblica. Potete assegnare a tutti i post di quella categoria di mostrare la stessa immagine di riserva se per qualche motivo non hanno un’immagine in evidenza.

Un altro vantaggio dell’aggiunta di un’immagine di riserva per una categoria di articoli è che, se le pagine di archivio delle categorie ricevono molto traffico di ricerca, le rende più accattivanti e attraenti.

Detto questo, vediamo come aggiungere un’immagine di riserva in base alla categoria dell’articolo utilizzando un plugin per WordPress e un codice personalizzato.

Di default, WordPress non offre un’opzione per aggiungere immagini alle pagine delle categorie dei post. Tuttavia, è possibile impostare facilmente un’immagine di riserva per le categorie di articoli utilizzando un plugin di WordPress.

Per prima cosa, è necessario installare e attivare il plugin Category and Taxonomy Image. Per maggiori dettagli, consultare la nostra guida su come installare un plugin di WordPress.

Dopo l’attivazione, dal pannello di amministrazione di WordPress si può andare su Impostazioni ” Immagine tassonomia. Quindi, facendo clic sul checkbox “categoria”, si possono includere le immagini della tassonomia nelle categorie degli articoli come riserva.

Enable taxonomy images for category

Non dimenticate di fare clic sul pulsante “Salva modifiche” quando avete finito.

Dopodiché, potete andare su Articoli ” Categorie dalla vostra Bacheca di WordPress. Quando si aggiunge una nuova categoria o si modifica una esistente, viene visualizzato il campo “Immagine”.

New image field for categories

È sufficiente inserire l’URL dell’immagine che si desidera aggiungere alla categoria di WordPress. Per maggiori dettagli, consultate la nostra guida su come ottenere l’URL delle immagini caricate in WordPress.

Ora, quando si pubblica un articolo del blog senza che sia stata assegnata un’immagine in evidenza, WordPress utilizzerà l’immagine appena impostata per la categoria.

Ecco un’anteprima dell’immagine che abbiamo utilizzato sul nostro sito demo.

Preview of fallback image with plugin

Tutto-in-uno! Ora avete aggiunto con successo un’immagine di riserva in base alla categoria dell’articolo.

È anche possibile configurare un’immagine di riserva per le categorie di articoli senza utilizzare un plugin di WordPress. Tuttavia, questo metodo non è raccomandato per i principianti, in quanto prevede l’uso di snippet di codice.

La prima cosa da fare è creare immagini per le categorie di WordPress. Utilizzate lo slug della categoria come nome del file immagine e salvatele tutte nello stesso formato, come JPG o PNG.

Successivamente, è possibile effettuare l’upload delle immagini delle categorie sul sito WordPress da Media ” Aggiungi nuovo.

Upload images to media library

WordPress memorizzerà le immagini della categoria durante l’uploader e creerà le dimensioni delle immagini definite dal tema.

Dopo aver caricato le immagini delle categorie, è necessario spostarle in un’altra directory. Basta collegarsi al sito web con un client FTP e accedere alla cartella /wp-content/uploads/.

Uploads folder in WordPress

Le immagini di categoria caricate saranno memorizzate nella cartella del mese, come /uploads/2022/08/.

Aprite la cartella di questo mese.

Media uploads organized in year and monthly folders

Per maggiori informazioni, potete consultare la nostra guida su dove WordPress memorizza le immagini sul vostro sito.

Quindi, creare una cartella sul desktop del computer e chiamarla category-images. A questo punto, scaricate tutte le immagini delle categorie e tutte le dimensioni create da WordPress per esse in questa nuova cartella sul desktop.

Una volta terminato il download, è necessario caricare la cartella category-images nella directory /wp-content/uploads. In questo modo sarà possibile avere tutte le immagini delle categorie in una cartella separata, facile da richiamare nel tema.

Per maggiori dettagli, consultate la nostra guida su come utilizzare l’FTP per l’uploader dei file su WordPress.

Visualizzazione dell’immagine della categoria come immagine in evidenza predefinita di riserva

In seguito, vi mostreremo come visualizzare una di queste immagini come immagine in evidenza di riserva quando un articolo di una categoria non ne ha una impostata.

Questo metodo comporta il copia e incolla del codice e di norma non consigliamo agli utenti di modificare i file del tema. Piccoli errori possono causare grandi errori sul sito.

Un modo più semplice per aggiungere codice al vostro sito è utilizzare WPCode. È il miglior plugin per gli snippet di codice di WordPress, che consente di gestire in modo sicuro e semplice il codice personalizzato sul sito.

Per prima cosa, è necessario installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consultate la nostra guida su come installare un plugin di WordPress.

Successivamente, si può andare su Code Snippets ” + Add Snippet nel pannello di amministrazione di WordPress per aggiungere un nuovo snippet. Quindi fate clic sul pulsante “Add New”.

Click 'Add New Snippet' in WPCode

Successivamente, è possibile aggiungere codice personalizzato o utilizzare uno snippet della libreria WPCode.

A tale scopo, si utilizzerà il proprio codice personalizzato, quindi passare al passaggio del mouse sull’opzione “Aggiungi il tuo codice personalizzato (nuovo snippet)” e fare clic sull’opzione “Usa snippet”.

Add custom code in WPCode

Successivamente, è necessario selezionare “PHP Snippet” come tipo di codice dall’elenco di opzioni che appare sullo schermo.

Select the PHP snippet option

Aggiungete ora un nome per il vostro snippet, che può essere qualsiasi cosa per aiutarvi a ricordare a cosa serve il codice.

Add a fallback image

A questo punto, è sufficiente copiare il seguente frammento di codice e incollarlo nel campo “Anteprima codice”.

/**
 * 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();
            });
        });";
    }
}

Quindi, si può scendere alla sezione “Inserimento” e scegliere “Inserimento automatico” per lasciare che il plugin gestisca il posizionamento per voi.

Quindi, scegliere l’opzione “Inserisci prima del contenuto” nella sezione “Pagina, Post, Tipo di contenuto personalizzato” nel menu a discesa “Posizione”.

Select fallback image insertion option

È quindi possibile ritornare in alto nella pagina e cambiare la levetta da “Inattivo” ad “Attivo”.

Facendo clic sul pulsante “Salva snippet” in alto, l’immagine di riserva sarà pronta.

Save and activate code snippet WPCode

Si consiglia di consultare anche la nostra guida su come add-on di snippet di codice personalizzati in WordPress.

Nota: questo frammento di codice funziona solo con la tassonomia “categoria”. Tuttavia, è possibile aggiungere altre tassonomie aggiungendo il loro nome all’elenco nella classe follower del codice e cambiando il termine tra parentesi in “tagga” o “articolo”, per esempio.

protected static $taxonomies = ['category'];

Al termine, basta visitare il sito web per vedere l’immagine di riserva.

Fallback image preview

Speriamo che questo articolo vi abbia aiutato ad aggiungere un’immagine di riserva in base alla categoria del post. Potete anche consultare la nostra guida su come aggiungere una barra di avanzamento nei post di WordPress e la nostra scelta delle migliori alternative a Canva per la grafica dei siti web.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

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.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

10 commentiLascia una risposta

  1. Nicola

    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

  2. Sohail

    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?

  3. Deepak

    do we now have a plugin for this same requirement? or we need to still use manual method?

  4. tina

    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

    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

    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

    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

    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

    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.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.