Bildunterschrift und Bildquelle für WordPress Beitragsbilder hinzufügen

In diesem Beitrag stelle ich das Plugin Featured Image Caption vor, mit dem du Bildunterschriften für WordPress Beitragsbilder hinzufügen kannst. Die Untertitel von Beitragsbildern eignen sich hervorragend, um die Quelle bzw. Urheber des Bilds anzuzeigen.

Beim Hochladen von Bildern kann in der WordPress Mediathek eine Beschriftung des Bilds eingegeben werden. Für eingefügte Bilder im WordPress Editor wird die Beschriftung auch als Bildunterschrift (engl. Image Caption) angezeigt.

Beitragsbilder zeigen von Haus aus jedoch keine Beschriftung, weil diese vom Theme dargestellt werden. Mit dem Featured Image Caption Plugin lässt sich die Bildunterschrift aber auch für Beitragsbilder hinzufügen.

Featured Image Caption

Das Plugin kann kostenlos im WordPress Plugin Verzeichnis heruntergeladen werden und ist mit der aktuellen WordPress Version 4.7.4 kompatibel.

Bildunterschrift und Bildquelle eingeben

Das Plugin fügt eine neue Metabox mit dem Namen Featured Image Caption zur Eingabe von Untertitel und Bildquelle im Adminbereich hinzu.

Für die Bildunterschrift wird ein eigenes Feld Caption Text vom Plugin angeboten. Hier hätte ich mir gewünscht, dass auch das vorhandene Feld für Image Captions der WordPress Mediathek verwendet werden kann.

Zur Angabe der Bildquelle kann Linktext sowie URL eingegeben werden und der Link wahlweise im gleichen oder neuen Fenster geöffnet werden.

Automatische Anzeige der Bildunterschrift

Unter Einstellungen → Featured Image Caption findest du die Optionen des Plugins.

Mit der ersten Option wird die automatische Anzeige der Bildunterschrift für Beitragsbilder aktiviert, d.h. das Plugin fügt die Bildunterschriften automatisch nach jedem Beitragsbild ein.

Die Anzeige der Image Captions kann mit der zweiten Option auf einzelne Beiträge eingeschränkt werden.

Funktionsweise und Anforderungen des Plugins

Das Plugin verwendet den Filter post_thumbnail_html, um die Bildunterschrift an die Template Funktionen zur Anzeige der Beitragsbilder anzuhängen.

Damit das Plugin funktioniert, muss deshalb das aktivierte Theme die Funktionen the_post_thumbnail() bzw. get_the_post_thumbnail() verwenden. In der Regel ist das bei den meisten Themes der Fall.

Außerdem wird die Bildunterschrift nur automatisch für Beitragsbilder angezeigt, welche innerhalb des WordPress Loops angezeigt werden. TwentySeventeen verwendet beispielsweise die Beitragsbild-Funktion für einzelne Beiträge in der header.php und damit außerhalb des Loops. Deshalb funktioniert hier die automatische Anzeige nicht.

Manuelle Ausgabe der Bild-Untertitel

Falls dein Theme aus den gerade genannten Gründen die Bildunterschriften nicht automatisch unter Beitragsbildern anzeigt, können diese auch manuell im Theme ausgegeben werden.

Das Plugin stellt dazu die Template Funktion cc_featured_image_caption() bereit. Diese kann an beliebiger Stelle in den Theme Dateien eingebaut werden, am Besten natürlich direkt unter dem Funktionen zur Anzeige der Beitragsbilder.

Eine if-Abfrage mit function_exists() stellt sicher, dass das Theme weiterhin funktioniert, wenn das Plugin deaktiviert wurde:

<?php
// Display Featured Image Caption.
if ( function_exists( 'cc_featured_image_caption' ) ) :
	cc_featured_image_caption();
endif;
?>

Zur Anpassung der Theme Dateien empfiehlt sich wie immer die Verwendung eines Child Themes.

Alternativ stellt das Plugin auch den Shortcode [ccfic] zum Einfügen im WordPress Editor bereit, mit dem die Bildunterschrift auch direkt im Beitrag hinzugefügt werden kann.

Verschachtelte Links vermeiden

Die meisten Themes verlinken das Beitragsbild auf Archiv-Seiten und im Blog-Index direkt zur Einzelansicht des Beitrags. So oder so ähnlich sieht der Code dafür aus:

<a href="<?php the_permalink(); ?>" rel="bookmark">
	<?php the_post_thumbnail(); ?>
</a>

Falls die Bildunterschrift im Blog und in Archiven angezeigt werden soll, sollten die Felder für die Bildquelle nicht ausgefüllt werden.

Dann fügt das Plugin nämlich den Link zur Bildquelle hinzu, wodurch mit dem bereits vorhandenen Link im Theme eine doppelte Verlinkung entsteht. Ineinander verschachtelte Links sind in der HTML Spezifikation aber nicht erlaubt und führen oftmals zu Layout-Problemen.

Wenn die Angabe der Bildquelle mit Link erfolgen soll, kann die Anzeige der Bildunterschrift in den Plugin Optionen auch auf einzelne Beiträge eingeschränkt werden, welche die Beitragsbilder üblicherweise ohne Verlinkung anzeigen.

Styling der Bildunterschrift anpassen

Standardmäßig befindet sich die Bildunterschrift und Bildquelle in einem Wrapper Div mit der Klasse .ccfic, welcher in den Plugin Optionen auch deaktiviert werden kann.

<div class="ccfic">
    <span class="ccfic-text">Bildunterschrift</span>
    <span class="ccfic-source">
        <a href="URL" target="_blank">Linktext</a>
    </span>
</div>

Mit den span Tags und individuellen Klassen kann das Styling sehr leicht mit etwas CSS Code angepasst werden.

Diesen CSS Code setze ich hier im Blog ein. Die Bildunterschrift wird dadurch in kleinerer Schrift und rechts unter dem Bild dargestellt.

.ccfic {
    float: right;
    margin: 0;
    padding: 0.2em 0.6em;
    font-size: 11px;
    font-size: 0.6875rem;
    color: #777;
}

Das Ergebnis kannst du direkt in diesem Beitrag im Beitragsbild ganz oben sehen.

Überblick über alle Beiträge dieser Serie