Wir haben festgestellt, dass das Einstellen von Fallback-Bildern für WordPress-Kategorien eine enorme Zeitersparnis darstellt, insbesondere für Blogs mit einem hohen Volumen an Inhalten.
Wenn Sie Artikel haben, die kein Vorschaubild haben, oder wenn Sie möchten, dass alle Beiträge in einer Kategorie ähnliche Vorschaubilder haben, dann können Sie ein Ersatzbild für jede Kategorie festlegen.
Auf diese Weise können Sie sicherstellen, dass kein Blogbeitrag ohne ein Featured Image bleibt und Sie müssen es nicht jedem einzelnen Beitrag manuell zuweisen.
In diesem Artikel zeigen wir Ihnen, wie Sie die standardmäßigen Hervorgehobenen Beitragsbilder für bestimmte Kategorien in WordPress festlegen.
Warum ein Fallback-Featured Image für die Beitragskategorie hinzufügen?
Nehmen wir an, Sie haben einen WordPress-Blog, in dem Sie jedem Beitrag eine einzelne Kategorie zuweisen. Sie können allen Beiträgen in dieser Kategorie dasselbe Ersatzbild zuweisen, wenn sie aus irgendeinem Grund kein hervorgehobenes Bild haben.
Ein weiterer Vorteil des Hinzufügens eines Fallback-Bildes für eine Beitragskategorie besteht darin, dass die Archivseiten Ihrer Kategorien, die viel Suchverkehr erhalten, dadurch ansprechender und attraktiver werden.
Sehen wir uns also an, wie Sie mit einem WordPress-Plugin und benutzerdefiniertem Code ein Fallback-Bild auf Basis der Beitragskategorie hinzufügen können.
Fallback Featured Image in WordPress mit einem Plugin einstellen
Standardmäßig bietet WordPress keine Option zum Hinzufügen von Bildern zu Ihren Beitragskategorieseiten. Sie können jedoch mit einem WordPress-Plugin ganz einfach ein Ersatzbild für Beitragskategorien festlegen.
Zunächst müssen Sie das Plugin für Kategorie- und Taxonomiebilder installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung können Sie im WordPress-Administrationsbereich zu Einstellungen “ Taxonomiebilder gehen. Als nächstes können Sie auf das Kontrollkästchen „Kategorie“ klicken, um Taxonomie-Bilder in Ihre Beitragskategorien als Fallback einzubinden.
Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, wenn Sie fertig sind.
Danach können Sie in Ihrem WordPress-Dashboard zu Beiträge “ Kategorien gehen. Wenn Sie eine neue Kategorie hinzufügen oder eine bestehende bearbeiten, wird ein Feld „Bild“ angezeigt.
Geben Sie einfach die URL eines Bildes ein, das Sie zu Ihrer WordPress-Kategorie hinzufügen möchten. Weitere Details dazu finden Sie in unserer Anleitung, wie Sie die URL von Bildern, die Sie in WordPress hochladen, erhalten.
Wenn Sie nun einen Blogbeitrag veröffentlichen, dem kein Bild zugeordnet ist, verwendet WordPress das Bild, das Sie gerade für Ihre Kategorie festgelegt haben.
Hier sehen Sie eine Vorschau auf das Bild, das wir auf unserer Website verwendet haben.
Das war’s schon! Sie haben nun erfolgreich ein Ersatzbild auf der Grundlage der Beitragskategorie hinzugefügt.
Fallback Featured Image in WordPress ohne Plugin einstellen
Sie können auch ein Fallback-Bild für Beitragskategorien konfigurieren, ohne ein WordPress-Plugin zu verwenden. Diese Methode ist jedoch für Anfänger nicht zu empfehlen, da sie Code-Snippets beinhaltet.
Als Erstes müssen Sie Bilder für Ihre WordPress-Kategorien erstellen. Verwenden Sie den Kategorie-Slug als Dateinamen und speichern Sie sie alle im gleichen Format, z. B. JPG oder PNG.
Als Nächstes können Sie Ihre Kategoriebilder über Media “ Add New auf Ihre WordPress-Website hochladen.
WordPress speichert Ihre Kategoriebilder während des Uploads und erstellt die von Ihrem Theme definierten Bildgrößen.
Nach dem Hochladen der Kategoriebilder müssen Sie diese in ein anderes Verzeichnis verschieben. Verbinden Sie sich einfach mit einem FTP-Client mit Ihrer Website und gehen Sie zum Ordner /wp-content/uploads/
.
Die Kategoriebilder, die Sie hochgeladen haben, werden im Monatsordner gespeichert, z. B. /uploads/2022/08/
.
Öffnen Sie den Ordner für diesen Monat.
Weitere Informationen finden Sie in unserem Leitfaden, wo WordPress Bilder auf Ihrer Website speichert.
Als Nächstes erstellen Sie einen Ordner auf dem Desktop Ihres Computers und nennen ihn Kategorie-Bilder. Laden Sie nun alle Kategorie-Bilder und alle Größen, die WordPress für sie erstellt hat, in diesen neuen Ordner auf Ihrem Desktop herunter.
Sobald der Download abgeschlossen ist, müssen Sie den Ordner „category-images“ in Ihr Verzeichnis /wp-content/uploads hochladen. Auf diese Weise können Sie alle Bildgrößen Ihrer Kategorien in einem separaten Ordner ablegen, der sich leicht in Ihrem Thema aufrufen lässt.
Weitere Einzelheiten finden Sie in unserer Anleitung zum Hochladen von Dateien in WordPress per FTP.
Anzeige des Kategoriebildes als Standard-Fallback-Featured Image
Als Nächstes zeigen wir Ihnen, wie Sie eines dieser Bilder als Ersatzbild anzeigen können, wenn für einen Beitrag in einer Kategorie kein Bild eingestellt ist.
Bei dieser Methode muss Code kopiert und eingefügt werden, und wir empfehlen normalerweise nicht, dass Benutzer ihre Themadateien bearbeiten. Kleine Fehler können zu großen Fehlern auf Ihrer Website führen.
Eine einfachere Möglichkeit, Code zu Ihrer Website hinzuzufügen, ist die Verwendung von WPCode. Es ist das beste WordPress-Code-Snippet-Plugin, mit dem Sie benutzerdefinierten Code auf Ihrer Website sicher und einfach verwalten können.
Zunächst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.
Als Nächstes können Sie in Ihrem WordPress-Administrationsbereich auf Code Snippets “ + Snippet hinzufügen gehen, um ein neues Snippet hinzuzufügen. Klicken Sie dann einfach auf die Schaltfläche „Add New“.
Danach können Sie entweder eigenen Code hinzufügen oder ein Snippet aus der WPCode-Bibliothek verwenden.
Hierfür verwenden Sie Ihren eigenen benutzerdefinierten Code. Bewegen Sie also den Mauszeiger über die Option „Benutzerdefinierten Code hinzufügen (neues Snippet)“ und klicken Sie auf die Option „Snippet verwenden“.
Als Nächstes müssen Sie aus der Liste der Optionen, die auf dem Bildschirm erscheinen, „PHP Snippet“ als Codetyp auswählen.
Fügen Sie nun einen Namen für Ihr Snippet hinzu, der so gewählt werden kann, dass Sie sich daran erinnern können, wofür der Code gedacht ist.
Kopieren Sie dann einfach den folgenden Codeschnipsel und fügen Sie ihn in das Feld „Codevorschau“ ein.
/**
* 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();
});
});";
}
}
Als Nächstes können Sie zum Abschnitt „Einfügen“ blättern und „Automatisch einfügen“ wählen, damit das Plugin die Platzierung für Sie übernimmt.
Wählen Sie dann die Option „Vor dem Inhalt einfügen“ unter dem Abschnitt „Seite, Beitrag, benutzerdefinierter Beitragstyp“ im Dropdown-Menü „Ort“.
Sie können dann zum Anfang der Seite zurückkehren und den Schalter von „Inaktiv“ auf „Aktiv“ umstellen.
Wenn Sie oben auf die Schaltfläche „Snippet speichern“ klicken, ist Ihr Ersatzbild bereits vorhanden.
Vielleicht interessiert Sie auch unsere Anleitung zum Hinzufügen von benutzerdefinierten Code-Snippets in WordPress.
Hinweis: Dieses Codeschnipsel funktioniert nur mit der Taxonomie „Kategorie“. Sie können jedoch weitere Taxonomien hinzufügen, indem Sie deren Namen zur Liste in der folgenden Klasse im Code hinzufügen und den in Klammern gesetzten Begriff z. B. in „Tag“ oder „Post“ ändern.
protected static $taxonomies = ['category'];
Wenn Sie fertig sind, besuchen Sie einfach Ihre Website, um das Fallback-Bild zu sehen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, ein Ersatzbild für die Beitragskategorie hinzuzufügen. Sehen Sie sich auch unsere Anleitung zum Hinzufügen eines Fortschrittsbalkens in WordPress-Beiträgen und unsere Expertenauswahl der besten Canva-Alternativen für Website-Grafiken an.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
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.
Admin
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.