Tutoriale WordPress de încredere, atunci când aveți cea mai mare nevoie.
Ghidul începătorului pentru WordPress
Cupa WPB
25 de milioane+
Site-uri web care folosesc plugin-urile noastre
16+
Ani de experiență WordPress
3000+
Tutoriale WordPress de la experți

Cum să setați o imagine de prezentare implicită bazată pe categoria postării în WordPress

Am constatat că setarea imaginilor de prezentare de rezervă pentru categoriile WordPress economisește mult timp, în special pentru blogurile cu un volum mare de conținut.

Dacă aveți articole care nu au o imagine de prezentare sau dacă doriți ca toate postările dintr-o categorie să aibă miniaturi similare, atunci puteți seta o imagine implicită pentru fiecare categorie.

În acest fel, vă puteți asigura că niciun articol de blog nu va rămâne fără o imagine reprezentativă și nu va trebui să le atribuiți manual fiecărui articol în parte.

În acest articol, vă vom arăta cum să setați imaginile de prezentare implicite pentru categorii specifice în WordPress.

Cum să setezi o imagine de prezentare implicită bazată pe categoria postării în WordPress

De ce să adăugați o imagine de rezervă pentru categoria postării?

Să spunem că aveți un blog WordPress unde atribuiți o singură categorie fiecărei postări. Puteți atribui tuturor postărilor din acea categorie să afișeze aceeași imagine de rezervă dacă, din anum هات, nu au o imagine de prezentare.

Un alt beneficiu al adăugării unei imagini de rezervă pentru o categorie de postări este că, dacă paginile arhivei categoriilor dvs. primesc mult trafic de căutare, atunci acestea devin mai captivante și mai atractive.

Acestea fiind spuse, să vedem cum puteți adăuga o imagine de rezervă bazată pe categoria postării folosind un plugin WordPress și cod personalizat.

În mod implicit, WordPress nu oferă o opțiune pentru a adăuga imagini la paginile categoriilor postărilor dvs. Cu toate acestea, puteți seta cu ușurință o imagine de rezervă pentru categoriile postărilor folosind un plugin WordPress.

Mai întâi, va trebui să instalați și să activați pluginul Category and Taxonomy Image. Pentru mai multe detalii, vă rugăm să consultați ghidul nostru despre cum să instalați un plugin WordPress.

La activare, puteți accesa Setări » Imagini Taxonomie din panoul de administrare WordPress. Apoi, puteți bifa căsuța „categorie” pentru a include imagini de taxonomie în categoriile postărilor dvs. ca o soluție de rezervă.

Activați imaginile de taxonomie pentru categorie

Nu uitați să faceți clic pe butonul „Salvați modificările” când ați terminat.

După aceea, puteți accesa Postări » Categorii din tabloul de bord WordPress. Veți vedea un câmp „Imagine” care apare atunci când adăugați o nouă categorie sau editați una existentă.

Câmp nou pentru imagini pentru categorii

Pur și simplu introduceți un URL de imagine pe care doriți să îl adăugați la categoria dvs. WordPress. Pentru mai multe detalii despre acest subiect, vă rugăm să consultați ghidul nostru despre cum să obțineți URL-ul imaginilor pe care le încărcați în WordPress.

Acum, când publicați o postare pe blog fără o imagine de prezentare atribuită, WordPress va folosi imaginea pe care tocmai ați setat-o pentru categoria dvs.

Iată o previzualizare a imaginii pe care am folosit-o pe site-ul nostru demo.

Previzualizare imagine de rezervă cu plugin

Asta e tot! Acum ați adăugat cu succes o imagine de rezervă bazată pe categoria postării.

Puteți configura, de asemenea, o imagine de rezervă pentru categoriile de postări fără a utiliza un plugin WordPress. Cu toate acestea, această metodă nu este recomandată începătorilor, deoarece implică fragmente de cod.

Primul lucru pe care trebuie să-l faceți este să creați imagini pentru categoriile WordPress. Folosiți slug-ul categoriei ca nume al fișierului imaginii și salvați-le pe toate în același format, cum ar fi JPG sau PNG.

Apoi, puteți încărca imaginile categoriilor pe site-ul dvs. WordPress din Media » Adăugare Nou.

Încărcați imagini în biblioteca media

WordPress va stoca imaginile categoriilor dvs. în timpul încărcării și va crea dimensiuni ale imaginilor definite de tema dvs.

După încărcarea imaginilor de categorie, trebuie să le mutați într-un alt director. Pur și simplu conectați-vă la site-ul dvs. web folosind un client FTP și accesați folderul /wp-content/uploads/.

Folderul de încărcări în WordPress

Imaginile categoriilor pe care le-ați încărcat vor fi stocate în folderul lunii, de exemplu /uploads/2022/08/.

Continuați și deschideți folderul lunii curente.

Încărcări media organizate în foldere anuale și lunare

Puteți consulta ghidul nostru despre unde stochează WordPress imaginile pe site-ul dvs. pentru mai multe informații.

În continuare, creați un folder pe desktopul computerului dvs. și numiți-l category-images. Acum, descărcați toate imaginile categoriilor dvs. și toate dimensiunile pe care WordPress le-a creat pentru ele în acest nou folder de pe desktop.

Odată ce descărcarea este finalizată, trebuie să încărcați folderul category-images în directorul dvs. /wp-content/uploads. Acest lucru vă va permite să aveți toate dimensiunile imaginilor categoriilor într-un folder separat, ușor de apelat în tema dvs.

Pentru mai multe detalii, consultați ghidul nostru despre cum să folosiți FTP pentru a încărca fișiere pe WordPress.

Afișarea imaginii categoriei ca imagine de rezervă implicită

În continuare, vă vom arăta cum să afișați una dintre aceste imagini ca imagine de prezentare de rezervă atunci când o postare dintr-o categorie nu are una setată.

Această metodă implică copierea și lipirea codului, iar noi, în mod normal, nu recomandăm utilizatorilor să editeze fișierele temei lor. Greșelile mici pot provoca erori mari pe site-ul dvs.

O modalitate mai ușoară de a adăuga cod pe site-ul dvs. este prin utilizarea WPCode. Este cel mai bun plugin pentru fragmente de cod WordPress, permițându-vă să gestionați în siguranță și ușor codul personalizat pe site-ul dvs.

Mai întâi, va trebui să instalați și să activați pluginul gratuit WPCode. Pentru mai multe detalii, vă rugăm să consultați ghidul nostru despre cum să instalați un plugin WordPress.

În continuare, puteți accesa Snippets de cod » + Adăugare Snippet în panoul de administrare WordPress pentru a adăuga un nou snippet. Apoi, pur și simplu faceți clic pe butonul „Adăugare Nou”.

Apăsați pe „Adăugați un nou fragment” în WPCode

După aceea, puteți adăuga cod personalizat sau puteți utiliza o fragment din biblioteca WPCode.

Pentru aceasta, veți folosi propriul cod personalizat, așa că treceți cu mouse-ul peste opțiunea „Adăugați codul dvs. personalizat (Snippet nou)” și faceți clic pe butonul „+ Adăugați un snippet personalizat”.

Adăugarea unui fragment personalizat în WordPress

Apoi, trebuie să selectați „Fragment PHP” ca tip de cod din lista de opțiuni care apar pe ecran.

Selectați opțiunea de fragment PHP

Acum adăugați un nume pentru fragmentul dvs., care poate fi orice pentru a vă ajuta să vă amintiți la ce servește codul.

Adăugați o imagine de rezervă

După aceea, pur și simplu copiați următorul fragment de cod și lipiți-l în câmpul „Previzualizare cod”.

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

Apoi, puteți derula în jos la secțiunea „Inserare” și puteți alege „Inserare automată” pentru a lăsa pluginul să gestioneze plasarea pentru dvs.

Apoi, alegeți opțiunea „Inserare înainte de conținut” din secțiunea „Pagină, Postare, Tip de postare personalizat” din meniul derulant „Locație”.

Selectați opțiunea de inserare a imaginii de rezervă

Puteți apoi reveni în partea de sus a paginii și schimba comutatorul din „Inactiv” în „Activ”.

Odată ce faceți clic pe butonul „Salvează fragmentul” din partea de sus, imaginea de rezervă va fi înlocuită.

Salvați și activați fragmentul de cod WPCode

De asemenea, ați putea dori să consultați ghidul nostru despre cum să adăugați fragmente de cod personalizate în WordPress.

Notă: Acest fragment de cod va funcționa doar cu taxonomia „category”. Cu toate acestea, puteți adăuga mai multe taxonomii adăugând numele acestora la lista din clasa următoare din cod și schimbând termenul dintre paranteze cu „tag” sau „post”, de exemplu.

protected static $taxonomies = ['category'];

Când ați terminat, vizitați pur și simplu site-ul dvs. pentru a vedea imaginea de rezervă.

Prevualizare imagine de rezervă

Sperăm că acest articol v-a ajutat să adăugați o imagine de prezentare implicită bazată pe categoria postării. Puteți consulta, de asemenea, ghidul nostru despre cum să adăugați o bară de progres în postările WordPress și selecțiile noastre experte de cele mai bune alternative la Canva pentru grafică web.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.

Dezvăluire: Conținutul nostru este susținut de cititori. Acest lucru înseamnă că dacă faceți clic pe unele dintre linkurile noastre, este posibil să câștigăm un comision. Vedeți cum este finanțat WPBeginner, de ce contează și cum ne puteți susține. Iată procesul nostru editorial.

Cel mai bun instrumentar WordPress

Obține acces GRATUIT la instrumentarul nostru - o colecție de produse și resurse legate de WordPress pe care fiecare profesionist ar trebui să le aibă!

Interacțiuni cu cititorii

12 CommentsLeave a Reply

  1. Cred că este ceva în neregulă cu fragmentul WPCode din articol, afișează niște numere de linie suprapuse, pe coloana din stânga.

    • Acest lucru se datorează faptului că CSS-ul nostru limitează în prezent numerele la o coloană cu un singur caracter.

      Admin

  2. Cel mai interesant ar fi să aveți un hook pentru a înlocui miniatura care să fie utilizată în funcții, pentru a nu fi nevoit să înlocuiți oriunde este utilizată miniatura.

  3. Thank you. This works like a charm :-)

    În timp ce imaginea de prezentare implicită este afișată în postare; aveți idei despre cum aș putea să le afișez pe paginile de categorii/arhivă sau unde sunt afișate postările pe pagina de pornire?

  4. avem acum un plugin pentru aceeași cerință? sau trebuie să folosim în continuare metoda manuală?

  5. Salut!
    Vă rugăm să arătați cum sunt articolele afișate în secțiunea „MAI MULTE DESPRE ACUM WPBEGINNER” de mai sus?? un șablon Wordpress
    Mulțumesc

  6. 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 :)

  7. salut,,, vreau să adaug o imagine dinamică pe pagina mea de pornire WordPress. unde deja sunt setate 5 imagini în locații diferite..
    vreau doar să le înlocuiesc și să adaug o fotografie nouă prin postări și categorii…
    Vă rog să mă ajutați
    am încercat, dar fără succes
    am folosit funcția post by thumbian

  8. Acest lucru este grozav, dar am eșuat lamentabil încercând să implementez afișarea imaginii categoriei ca imagine de prezentare de rezervă implicită în tema mea de anunțuri. Folosește categorii diferite de categoriile de postări „standard” și autorul refuză să ajute.

    Oferiți servicii tehnice, plătite sau de altă natură, prin care mă puteți ajuta să implementez afișarea imaginii categoriei ca imagine de rezervă implicită în tema mea?

  9. Acest lucru este cu adevărat grozav, un sfat foarte util în cazul meu. Singura problemă este că primul cod de mai sus este incomplet. Din fericire, nu am avut nevoie de partea „if”, așa că am eliminat-o și totul a fost în regulă.

    Mulțumesc pentru niște sfaturi destul de avansate pe site-ul dvs. „pentru începători”. Continuați așa!

  10. O altă idee ar putea fi setarea imaginii de postare la salvarea postării. Avantajul soluției de mai sus este că imaginea categoriei poate fi schimbată cu ușurință.

Lasă un răspuns

Vă mulțumim că ați ales să lăsați un comentariu. Vă rugăm să rețineți că toate comentariile sunt moderate conform politicii noastre de comentarii, iar adresa dvs. de e-mail NU va fi publicată. Vă rugăm să NU folosiți cuvinte cheie în câmpul nume. Să avem o conversație personală și semnificativă.