Dieter Petereit 17. August 2018

WordPress und das Beitragsbild: So vermeidest du Probleme

Das Beitragsbild in WordPress kann sich – je nach Theme – massiv auf dein Design auswirken. Vor allem dann, wenn du es vergisst oder andere Probleme auftreten.

Das Beitragsbild an sich

Wenn du den Begriff Beitragsbild nicht kennst, weil du ihn in deinem WordPress-Backend rechts neben dem Texteditor nicht findest, dann unterstützt dein Theme vermutlich das Feature „Beitragsbild“ oder (in englischer Sprache) „Featured Image“ nicht. In dem Fall bekommst du mit Sicherheit irgendwann eines der weiter unten benannten Probleme. Nämlich dann, wenn du auf ein Theme wechselst, das mit Beitragsbildern arbeitet.

Beitragsbilder, neben der Bezeichnung „Featured Image“ auch manchmal als „Post Thumbnail“ bezeichnet, sind Bilder, die den jeweiligen Beitrag oder die jeweilige Seite bildlich repräsentieren sollen. Wo und wie sie angezeigt werden, entscheidet das eingesetzte Theme allein. Genau dieser Umstand ist die Ursache für eines der anderen weiter unten beschriebenen Probleme.

Beitragsbilder setzen sich grundsätzlich nicht von alleine. Selbst wenn du alle Bilder, die du in einem Beitrag verwenden willst, hochgeladen hast, musst du eines davon oder ein zusätzliches explizit zum Beitragsbild erklären. Dieser erforderliche Verfahrensschritt ist für manche Zeitgenossen nicht leicht zu verinnerlichen.

Meine leidigen Erfahrungen mit Beitragsbildern

Kennst du das? Du hast einen Beitrag veröffentlicht und wieder einmal das Beitragsbild vergessen. Auf Social Media hat dein Post nun praktisch keine Chance. Mir passierte das wesentlich öfter als mir lieb sein konnte. Daher machte ich mich auf die Suche nach einer vernünftigen Lösung für dieses Problem.

Kennst du das? Du hast dein Theme gewechselt und das neue Theme arbeitet mit anderen Beitragsbildgrößen. Jetzt sehen deine bisherigen Bilder verzerrt aus. Auch dieses Problem begegnete mir vor nicht allzu langer Zeit. Entsprechend machte ich mich auf die Suche nach einer vernünftigen Lösung.

Kennst du das? Du hast dein Theme gewechselt. Dein neues Theme arbeitet mit Beitragsbildern, du hast aber bislang keine verwendet. So sehen deine bisherigen 500 Posts ziemlich eindruckslos aus. Du kannst es dir schon denken. Auch dieses Problem musste ich vor kurzem einer Lösung zuführen.

Es gibt eine weniger flexible und eine sehr flexible Lösung für die skizzierten Probleme. Nehmen wir zunächst die weniger flexible ins Visier.

Die WordPress-Bordlösung für das Problem

Mit zwei Codeschnipseln können wir dafür sorgen, dass dein WordPress stets das erste im Beitrag verwendete Bild zum Beitragsbild erklärt und entsprechend verwendet. Das ist sicherlich besser als gar nichts, je nach Design jedoch nicht immer die beste Wahl.

Zeigt dein Theme etwa das Beitragsbild auch in der Einzelansicht des Beitrags nochmal in voller Pracht über dem eigentlichen Text an, so ergibt es keinen Sinn, das erste Bild im Beitrag, welches ja dann zusätzlich zum Beitragsbild erkoren wurde, aber natürlich trotzdem weiterhin im Beitrag vorhanden ist, quasi doppelt anzuzeigen.

Nutzt dein Theme indes die Beitragsbilder nur in der Funktion des „Post Thumbnails“, etwa als Preview zum Teaser auf der Startseite, dann ist die Schnipsellösung eine, die für dich sogar die bessere sein kann.

Du schreibst also folgenden Code in deine functions.php:

//macht das erste Inhaltsbild zum Beitragsbild
function main_image() {
$files = get_children('post_parent='.get_the_ID().'&post_type=attachment
&post_mime_type=image&order=desc');
if($files) :
$keys = array_reverse(array_keys($files));
$j=0;
$num = $keys[$j];
$image=wp_get_attachment_image($num, 'large', true);
$imagepieces = explode('"', $image);
$imagepath = $imagepieces[1];
$main=wp_get_attachment_url($num);
$template=get_template_directory();
$the_title=get_the_title();
print "<img class="frame" src="$main" alt="$the_title" />";
endif;
}

In deinem Theme, respektive Child-Theme ergänzt du folgenden Code:

<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
  echo get_the_post_thumbnail($post->ID);
} else {
   echo main_image();
} ?>

Die Änderungen nimmst du natürlich immer lokal mit einem Text-Editor deiner Wahl vor und lädst die Dateien hernach per FTP wieder auf deinen Webspace hoch. Verwende nicht die Online-Codeeditoren im Backend. Nachdem du die zu ändernden Dateien heruntergeladen hast, machst du eine Kopie davon, damit du ein Backup hast, falsch irgendwas schief gehen sollte.

So. Nachdem du die Änderung online hast, wird nun stets das erste Bild im Beitrag auch als Beitragsbild verwendet. Nicht mehr, aber auch nicht weniger.

Flexiblere Lösung per Plugin

Mit der eben vorgestellten Lösung haben wir es geschafft, ohne weiteres Zutun automatisch zu einem Beitragsbild zu kommen. Dafür mussten wir allerdings im Code rumfuhrwerken und wir haben nur eine generalisierte Lösung. Stets wird das erste Bild im Beitrag auch als Beitragsbild verwendet. Was, wenn du das gar nicht willst oder dich davor scheust, im Code zu arbeiten?

Dann nimmst du einfach das Plugin „Quick Featured Images“ von Martin Stehle.

Quick Featured Images
Quick Featured Images
Entwickler: Martin Stehle
Preis: Kostenlos

Martin Stehles Plugin ist so etwas wie das Schweizer Taschenmesser für WordPress Beitragsbilder. Das Plugin ist kostenlos. Eine kostenpflichtige Pro-Version mit noch deutlich mehr Features kannst du für 14,99 (eine Site) oder 79 Euro (unbegrenzte Anzahl an Sites) käuflich erwerben. Für unsere hier beschriebenen Probleme reicht indes die kostenlose Version.

So bedarf etwa des Setzen des ersten Inhaltsbildes als Beitragsbild keiner Code-Frickelei, sondern lediglich des Setzens eines Hakens:

Das allerdings ist nur die leichteste Übung für Stehles Plugin. Für meine Probleme des vergessenen und der nicht vorhandenen Beitragsbilder war das indes vollkommen ausreichend und kostete mich keine fünf Minuten. Die Installation nahm ich – wie gewohnt – über das WordPress-Backend vor. Nach der Installation und Aktivierung findest du in der linksseitigen Navigation den Punkt „Beitragsbilder“, wie du dem obigen Screenshot entnehmen kannst. Das Setzen des ersten Inhaltsbildes als Beitragsbild erledigst du übrigens im Untermenü „Vorgegebene Bilder“.

Informationen zu den kostenpflichtigen Zusatzfeatures des Plugins „Quick Featured Images“ findest du auf dieser Seite. In der Pro-Version kann das Plugin etwa das erste Inhaltsbild nicht nur zum Beitragsbild machen, sondern zusätzlich direkt aus dem Inhalt entfernen, damit es nicht zur weiter oben beschriebenen doppelten Anzeige kommt.

Kommen wir abschließend zum Problem der unproportionalen Bildanzeige beim Themewechsel. Hier müssen schlichtweg die Beitragsbilder neu generiert werden, damit sie zu den Abmessungen passen, die das jeweilige Theme registriert.

Für diesen Zweck eignet sich das Plugin „Regenerate Thumbnails“ von Alex Mills.

Regenerate Thumbnails
Regenerate Thumbnails
Preis: Kostenlos

„Regenerate Thumbnails“ ist ebenfalls ein kostenloses Plugin und kann bequem vie Backend installiert und aktiviert werden. Auf die Funktionalität greifst du auf verschiedene Weise zu.

Unter Werkzeuge > Vorschaubilder regen. findest du einen einzelnen Button mit der Aufschrift Regeneriere alle Vorschaubilder, der genau das tut. Dabei verwendet das Plugin die Werte, die unter Einstellungen > Medien eingetragen sind und die Werte, die das jeweilige Theme festlegt. Wenn du selektiver vorgehen willst, findest du die Möglichkeit, die Vorschaubilder neu zu generieren auch in Medien > Medienübersicht an jedem einzelnen Bild:

Fazit: Nimm die Plugins

Mit zwei kostenlosen Plugins hast du die hier besprochene Thematik der Beitragsbilder gut im Griff und bist auch für zukünftige Themewechsel gerüstet. Die Plugins werden zudem ordentlich gepflegt, so dass ich hier eine volle Empfehlung aussprechen kann.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

2 Kommentare

  1. Ich rege mich gerade darüber auf, dass du Respektive CHILD THEME erwähnst. Als ob jeder hans-und-franz child-theme verwendet. Ich habe normales theme in welchen .php datei kommt denn der 2. CODE REIN?

    Danke

  2. im Code oben werden die beiden Variablen $imagepath und $template gesetzt, aber nicht weiter verwendet. Sollten diese im Code noch verwendet werden oder sind die von einem erweiterten Codeschnipsel übrig geblieben?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück