WordPress: Bildunterschrift zum Beitragsbild hinzufügen

WordPress Bildunterschrift am Artikelbild IMG_1929

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. Die Bildunterschrift („Caption“) wird jedoch oft nur bei Bildern hinzugefügt, die inline – also im Artikeltext angezeigt 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?

Das muss in den meisten Fällen kein Problem darstellen – viele Blogs nutzen die Bildunterschrift einfach nicht. 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 – zum Beispiel um Zusatzinformationen zum Bild bereitzustellen, oder um das SEO-Ranking ein bisschen zu verbessen. Aus rechtlichen Gründen kann es auch sein, dass man eine Bildbeschreibung / Bildunterschrift anzeigen muss um zum Beispiel einen Copright-Vermerk am Bild anzubringen, die Agentur und/oder den Fotografen zu nennen.

Wie gesagt – bei Inline-Bildern ist das ja auch bereits Standard. Man gibt einfach den gewünschten Text in das Feld Beschriftung ein und der Text wird direkt unterhalb des Bildes angezeigt. Nur beim Beitragsbild funktioniert das häufig nicht. Aber zum Glück kann man mit ein paar Zeilen Code quasi jedes WordPress Theme so nachrüsten, dass die Bildunterschrift (Caption) angezeigt wird.

Theme-Snippet: Bildunterschrift zum Beitragsbild hinzufügen

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 im 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

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 sematisch korrekt markieren lassen: figure und figcaption. 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.

4 Gedanken zu „WordPress: 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.