Bildquelle: Pixabay

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

6 Kommentare

  1. Ich habe das Plug-in : „Featured Image Caption“ auf meiner Web-Site ausprobiert. Theme ist Uku von Elmastudio. Im Prinzip ist es ja nicht schlecht. Es verträgt sich bei mir allerdings nicht mit dem Plugin : „Verwandte Beiträge für WordPress“. Dieses zeigt mir am Ende eines Einzelbeitrages verwandte Beiträge mit Titel, kleinem Beitragsbild und einem kurzen Text an. Unter dem kleinen Beitragsbild steht dann auch hier die Beschriftung. Was gar nicht gut aussieht, da sie viel zu gross ist und über mehrere Zeilen geht.

    Lg

    Helmut

    1. Ja, mit den automatischen Anzeige-Optionen wird das Plugin nicht immer 100% funktionieren. Das liegt daran, dass die Beitragsbilder grundsätzlich vom Theme an verschiedenen Stellen dargestellt werden, und manchmal nicht mit dem Code des Themes harmoniert.

      Hier hilft dann nur die manuelle Ausgabe der Beschriftung mit den Template Tags oder die Anpassung der Anzeige mit CSS Code.

      LG,
      Thomas

  2. Hallo,

    ich benutze das Twenty Fifteen – Theme und moechte die Bildunterschrift auch in kleiner Schrift rechts unter dem Beitragsbild angezeigt haben. Ich weiss aber nicht wo/ in welcher Datei genau dieser hier zuletzt erwähnte css-code eingefügt werden muss.

    viele Grüße
    Daniel

    1. Hallo Daniel,

      Am Einfachsten ist es, den CSS Code mit dem neuen WordPress Core Feature für zusätzliches CSS einzufügen. Das CSS Feld findest du unter Design > Customizer > Zusätzliches CSS.

      LG,
      Thomas

  3. Hallo,
    funktioniert ja bestens mit dem zusätzlichen css.
    Was ist noch zu tun um die beiden Textbestandteile in verschiedenen Farben darzustellen?

    MfG
    Wolfgang

    1. Hallo Wolfgang,

      Siehe den HTML Code oben im Beitrag. Beide Bestandteile haben unterschiedliche Klassen, die zum Styling mit unterschiedlichen Farben genutzt werden können.

      Viele Grüße,
      Thomas

Schreibe einen Kommentar zu Daniel Antworten abbrechen

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