WordPress: HTML-Bildunterschrift zum Beitragsbild hinzufügen

WordPress Bildunterschrift / Caption am Beitragsbild

Bildunterschrift am Artikelbild - Foto: T.Bortels/cpu20.de (Screenshot)

Die meisten WordPress Themes machen es einem ja sehr einfach, einem Artikel bzw. einer Seite ein Beitragsbild („Featured Image“) hinzuzufügen – will man dem aber eine Bildunterschrift zum Beitragsbild hinzufügen kann das ein bisschen schwierig werden. Die Bildunterschrift bzw. „Caption“ wird oft nur bei Bildern angezeigt, die inline – also im Artikeltext platziert werden. Beim Hauptbild bzw. Beitragsbild fehlt die Bildunterschrift häufig, obwohl sie in der Mediathek korrekt in das Feld Beschriftung eingegeben wurde.

Warum braucht man eine Bildunterschrift / Caption?

In vielen Themes ist erstmal keine Caption vorgesehen. Und das muss in den meisten Fällen auch gar kein Problem darstellen. Aber gerade wenn man WordPress als CMS nutzen möchte – zum Beispiel um eine Art Magazin zu betreiben, kann es sein, dass man eine die Bildunterschrift anzeigen möchte – oder anzeigen muss – zum Beispiel um Zusatzinformationen zum Bild bereitzustellen, oder um das SEO-Ranking ein bisschen zu verbessen.

Ausserdem kann es aus rechtlichen Gründen erforderlich sein, dass man eine Caption anzeigt – egal, ob man nun eine Bildbeschreibung oder Bildunterschrift aus SEO-Gründen anzeigen oder aus Design-Gründen verstecken möchte. In vielen Bildlizenzen ist mehr oder weniger klar festgelegt, dass der Name des Fotografen und/oder der Bildagentur und/oder der Lizenz angezeigt werden muss. Wer es versäumt, einen solchen Copyright-Vermerk am Bild anzubringen, riskiert unter Umständen eine teure Abmahnung.

Wie gesagt – bei den meisten WordPress-Themes ist es ohne Probleme möglich, an Inline-Bildern die Caption anzeigen zu lassen. Man gibt am Bild einfach den gewünschten Text in das Feld Beschriftung ein und der Text wird direkt unterhalb des Bildes angezeigt. Nur beim Beitragsbild (Featured Image) funktioniert das häufig nicht. Und gerade das Beitragsbild ist häufig das wichtigste Bild des Artikels. Aber zum Glück kann man mit ein paar Zeilen Code quasi jedes WordPress Theme so nachrüsten, dass die Bildunterschrift (Caption) am Bild angezeigt wird.

Theme-Snippet: Bildunterschrift am Beitragsbild anzeigen

Zunächst muss dem Bild also eine Bildunterschrift hinzugefügt werden. Dies geht am besten direkt beim Bild-Upload – lässt sich in der Mediathek aber auch jederzeit nachträglich ergänzen. Ich trage seit einiger Zeit bei allen Bildern grundsätzlich schon beim Upload einen Titel, einen Alternativtext und auch eine Bildunterschrift ein – meiner Meinung nach eine gute Angewohnheit.

Grundsätzlich sollten Änderungen an Template-Datein immer in einem Child Theme vorgenommen werden. Falls Sie noch kein Child Theme eingerichtet haben, wäre jetzt der richtige Zeitpunkt dafür. Wenn Sie wissen möchten, wie sich mit wenigen handgriffen ein Child Theme installieren lässt, können Sie gerne zunächst diesen früheren Artikel lesen: WordPress Child Theme erstellen – ganz einfach.

In der Template-Datei (z.B. content.php oder single.php oder content-single.php oder page.php etc) müssen Sie dann den Bereich finden, in dem das Beitragsbild („featured image“) geladen wird.  Der entsprechende Code sollte ungefähr so aussehen:

<div class="entry-thumbnail">
    <?php the_post_thumbnail(''); ?> <!-- das Beitragsbild -->
</div>

Je nach Theme und/oder Template kann der entsprechnde Code auch anders aussehen, zum Beispiel wie folgt:

<?php if ( ! post_password_required() && ! is_attachment() ) :
     the_post_thumbnail('large');
endif; ?>

Unterhalb dieses Bereichs müsste dann der folgende Code-Schnippsel eingefügt werden:

<?php if ( $caption = get_post( get_post_thumbnail_id() )->post_excerpt ) : ?>
  <p class="caption"><?php echo $caption; ?></p>
<?php endif; ?>

Dieser Code-Schnippsel testet zuerst, ob überhaupt ein Beitragsbild festgelegt wurde. Anschliessend wird getestet, ob eine Bildunterschrift („post_excerpt“) zum Beitragsbild vorliegt. Wenn beide Voraussetzungen zutreffen wird die Bildunterschrift in einem eigenen Absatz mit der Klasse „caption“ ausgegeben.

HTML 5 Bildunterschrift anzeigen

Ein Detail könnte man dann noch anpassen – wenn das zur Art und Weise passt, wie die Seite Artikelbilder verwendet. Es gibt ja seit HTML 5 passende Tags, mit denen sich Bilder und Bildunterschriften semantisch korrekt markieren lassen: figure kann für Bilder verwendet werden, figcaption für den dazugehörigen Bild-Text. Allerdings ist die Spezifikation der beiden Tags ein bisschen kompliziert. Es wird vorgeschlagen, figure nur für solche Elemente zu verwenden, die theoretisch frei platziert werden könnten, ohne die Bedeutung des Dokuments zu beeinträchtigen. Für die meisten Artikelbilder trifft das meiner Meinung nach zu – aber darüber lässt sich sicherlich vortrefflich streiten.

Wie auch immer – hier der entsprechende Code-Schnippsel:

<figure class="header-image">
    <?php the_post_thumbnail(''); ?> <!-- das Beitragsbild -->
    <?php if ( $caption = get_post( get_post_thumbnail_id() )->post_excerpt ) : ?>
        <figcaption class="caption"><?php echo $caption; ?></figcaption>
    <?php endif; ?>
</div>

Anschliessend kann die Bildunterschrift per CSS so gestaltet werden, dass sie zum Design der Seite passt.

Links / HTML in Bildunterschrift einbinden

Meistens reicht eine einfache „Plain-Text-Bildunterschrift“ aus – also ohne Links, ohne Formatierung – reiner Text. Manchmal kann es aber sinnvoll sein, eine HTML-Bildunterschrift zu verwenden um z.B. den einen oder anderen Link (zum Fotografen, zur Agentur oder zur verwendeten Lizen) einzubinden. Wie oben bereits erwähnt ist dies bei manchen Bilder-Lizenzen (auch bei Creative Commons) sogar Pflicht! Oder anders ausgedrückt: wer keine HTML-Bildunterschrift einsetzt, riskiert eine Abmahnung. Zum Glück ist es bei WordPress aber relativ problemlos möglich, HTML in Bildunterschriften einzubauen. So kann man beispielsweise wie folgt direkt einen Link direkt in das Feld Bildbeschreibung einbauen:

Frische Kirschen - Foto: <a href="https://creativecommons.org/licenses/by/2.0/" target="_blank">CC BY 2.0</a> lorem ipsum…

Mit diesem HTML wird ein Link zur Seite mit der Creative Commons Lizenz CC BY 2.0 in die Bildunterschrift eingebunden – einfach direkt in das Feld „Beschreibung“ eingeben und schon ist man zu mindest bei diesem Detail auf der (rechtlich) sicheren Seite.

5 Gedanken zu „WordPress: HTML-Bildunterschrift zum Beitragsbild hinzufügen

  1. Lutz Kasper

    Vielen Dank für die anschaulichen Erklärungen. Soweit ich das verstanden habe, muss die neue PHP-Datei (in meinem Fall: content-page.php) am Ende in den Child-Template Ordner kopiert werden. Wie alle Dateien, die verändert werden?
    Und dann habe ich ein Child-Template mit einer content-page.php und das Original „Twenty Fifteen Theme“ ebenfalls mit einer content-page.php? Beisst sich das nicht?
    Deine Lösung mit der style.css sieht da eleganter aus.
    Aus „WordPress Child Theme erstellen – ganz einfach.“ erschließt sich mir das nicht restlos.

  2. cpu20 Artikelautor

    Hallo Lutz,
    das Child-Theme überschreibt sozusagen das Parent-Theme – bzw. sieht WordPress zunächst im Child-Theme nach und lädt dann die fehlenden Templates aus dem Parent Theme. Daher beisst sich da nichts.
    Die „Lösung mit der style.css“ ist quasi nur der erste Schritt, um überhaupt ein Child-Theme zu erstellen. Ich hoffe, das ist so halbwegs verständlich?

  3. panga

    Danke! Genau danach habe ich gesucht. Seltsam, dass so etwas noch nicht zum WordPress-Standard gehört.

Schreibe einen Kommentar

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


Time limit is exhausted. Please reload CAPTCHA.