Vi har upptäckt att inställningen av fallback-bilder för WordPress-kategorier är en enorm tidsbesparing, särskilt för bloggar med en hög volym innehåll.
Om du har artiklar som inte har en utvald bild, eller om du vill att alla inlägg i en kategori ska ha liknande miniatyrer, kan du ställa in en reservbild för varje kategori.
På så sätt kan du se till att inga blogginlägg lämnas utan en featured image och du behöver inte manuellt tilldela dem till varje enskilt inlägg.
I den här artikeln visar vi dig hur du ställer in standard fallback featured images för specifika kategorier i WordPress.
Varför lägga till en fallback featured image för inläggskategori?
Låt oss säga att du har en WordPress-blogg där du tilldelar ett enskilt inlägg en kategori. You can assign all posts in that category to show the same fallback image if they don’t have a featured image for some reason.
En annan fördel med att lägga till en fallback image för en post kategori är om din kategori archive pages får en hel del search trafik, då det gör dem mer engagerande och attraktiva.
Med detta sagt, låt oss se hur du kan lägga till en fallback image baserat på postens kategori med hjälp av ett WordPress plugin och custom code.
Setting Fallback Featured Image i WordPress med hjälp av ett plugin
Som standard erbjuder WordPress inte ett alternativ för att add images till dina post category pages. Du kan dock enkelt ställa in en fallback image för post kategorier med hjälp av ett WordPress tillägg.
Först måste du installera och aktivera pluginet Category and Taxonomy Image. För mer detaljer, vänligen se vår guide om hur du installerar ett plugin för WordPress.
När du har aktiverat den kan du heada till Settings ” Taxonomi Image från WordPress adminpanel. Därefter kan du klicka på ”category” checkboxen för att inkludera taxonomi images i dina post kategorier som en reserv.
Glöm inte att clicka på knappen ”Save Changes” när du är klar.
Efter det kan du gå till Posts ” Categories från din WordPress dashboard. Du kommer att se ett ”Image”-fält visas när du lägger till en new kategori eller redigerar en befintlig.
Enter helt enkelt en URL till en image som du vill add till din WordPress Category. För mer detaljer om detta, vänligen se vår guide om hur du får URL:en till bilder som du uploadar i WordPress.
Nu, när du publicerar ett blogginlägg utan att någon featured image har tilldelats, kommer WordPress att använda den bild som du just har ställt in för din kategori.
Här är en preview av den image som vi använde på vår demo site.
Det var allt! Du har nu utan problem lagt till en fallback image baserat på postens kategori.
Setting Fallback Featured Image i WordPress utan ett plugin
Du kan också konfigurera en fallback image för kategorier av post utan att använda en WordPress plugin. Denna metod rekommenderas dock ej för Beginnare eftersom den involverar code snippets.
Det första du behöver göra är att skapa images för dina WordPress kategorier. Använd kategorins slug som filnamn för dina images och save dem all i samma format, gillar JPG eller PNG.
Därefter kan du ladda upp dina kategori images till din WordPress site från Media ” Add New.
WordPress kommer att lagra dina kategoribilder under uploaden och skapa image-storlekar som definieras av ditt theme.
När du har uppladdat kategori images måste du flytta dem till en annan directory. Anslut till din website med en FTP-klient och gå till mappen /wp-content/upladdare/
.
De Category images som du har laddat upp kommer att lagras i månadens folder, gillar /uploads/2022/08/
.
Gå vidare och öppna den här månadens folder.
Du kan se vår guide om var WordPress lagrar image på din site för mer information.
Skapa sedan en folder på datorns skrivbord och döp den till category-images. Nu downloadar du alla dina category images och alla storlekar som WordPress har gjort för dem till denna new folder på skrivbordet.
När download är slutförd måste du uploada mappen category-images till din /wp-content/uploads directory. Genom att göra detta allow you att ha alla dina kategoriers image-storlekar i en separat folder som är lätt att anropa till ditt theme.
För mer detaljer, vänligen se vår guide om hur du använder FTP för att uploada filer till WordPress.
Displaying Category Image as Standard Fallback Featured Image
Nästa inlägg visar dig hur du visar en av dessa bilder som en fallback featured image när ett inlägg i en kategori ej har en sådan inställd.
Den här metoden innebär att kopiera och paste kod, och vi rekommenderar normalt inte att användare editerar sina theme-filer. Små misstag kan leda till stora error på din site.
Ett enklare sätt att add to kod till din site är genom att använda WPCode. Det är det bästa WordPress code snippet plugin, allow you att säkert och enkelt hantera custom code på din site.
Först måste du installera och aktivera det gratis pluginet WPCode. För mer detaljer, vänligen se vår guide om hur du installerar ett plugin för WordPress.
Därefter kan du gå till Code Snippets ” + Add Sn ippet i din WordPress adminpanel för att lägga till ett nytt snippet. Sedan klickar du bara på knappen ”Add New”.
Efter det kan du antingen add to custom code eller använda ett snippet från WPCode-biblioteket.
För detta kommer du att använda din egen anpassade kod, så hovera över alternativet ”Add Your Custom Code (New Snippet)” och klicka på alternativet ”Use Snippet”.
Därefter måste du välja ”PHP Fragment Kodu” som kodtyp från listan med alternativ som visas på skärmen.
Nu add to ett namn för your snippet, vilket kan vara vad som helst som hjälper you att komma ihåg vad koden är till för.
Följ detta genom att kopiera följande code snippet och paste in det i fältet ”Code Preview”.
/**
* 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();
});
});";
}
}
Därefter kan du rulla ner till ”Insertion” section och välja ”Auto Insert” för att låta pluginet hantera placeringen åt dig.
Välj sedan alternativet ”Insert Before Content” under avsnittet ”Page, Post, Custom Post Type” i dropdown-menyn ”Location”.
Du kan sedan gå tillbaka högst upp på page och toggla från ”Inaktiverad” till ”Aktiv”.
När you click the ”Save Snippet” button at the högst upp, your fallback image will be in place.
Du kanske också vill läsa vår guide om hur du lägger till custom code snippets i WordPress.
Note: Detta code snippet fungerar endast med taxonomin ”category”. Du kan dock lägga till fler taxonomier genom att lägga till deras namn i listan i följande klass i koden och ändra den parentesförsedda termen till ”tag” eller ”post”, till exempel.
protected static $taxonomies = ['category'];
När du är klar är det bara att besöka your website för att se fallback-imagen.
Vi hoppas att den här artikeln hjälpte dig att lägga till en reservbild baserad på inläggskategorin. Du kan också se vår przewodnik om hur du lägger till en förloppsindikator i WordPress-inlägg och våra expertval av de bästa Canva-alternativen för webbplatsgrafik.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dennis Muthomi
I think there is someting wrong with the WPCode snippet in the article, it is showing some overlapping line numbers, on the left column.
WPBeginner Support
That is due to our CSS currently limiting the numbers to a one character column.
Administratör
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
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?
Deepak
do we now have a plugin for this same requirement? or we need to still use manual method?
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
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
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
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?
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!
WPBeginner Support
@Matt thanks for notifying us, we have fixed it.
Administratör
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.