WordPress: Urheber zum Beitragsbild automatisch bei jedem Theme setzen

Urheber zum Beitragsbild per Shortcode oder automatisch auf einer WordPress-Seite einfügen

In das Feld „Beschriftung“ beim Beitragsbild kann man z. B. den Urheber-Vermerk schreiben. Bei manchen Themes wird die Beschriftung nicht unter dem Beitragsbild bei einer WordPress-Seite angezeigt. Mithilfe einer kleinen Funktion kann die Beschriftung aber auf relativ einfache Weise eingefügt werden. Die Funktion bzw. alternativ der Shortcode holt sich die entsprechende Information aus dem Feld „Beschriftung“ (description) zu dem Beitragsbild (featured image). Wie das funktioniert, beschreibe ich in diesem Beitrag.

Grundsätzlich könnte bei einem Theme durch eine Anpassung des jeweiligen Templates im Child-Theme der Urheber-Vermerk automatisch für jedes Foto eingefügt werden. Allerdings versuche ich Änderungen an den Templates in der Regel zu vermeiden. Bei einem Update des Parent Themes kann es zu Problemen führen, wenn genau diese geänderten Templates-Dateien upgedatet wurden. Warum das so ist, hat Torsten Landsiedel bei seinem sehenswerten Vortrag auf WordPress.tv schon 2015 erläutert. Unter anderem hat David Remer im Krautpress-Blog das Problem noch mal 2016 aufgegriffen.

Die Beschriftung kann natürlich alle möglichen Dinge enthalten: Den Autor, evtl. gezeigte Personen, Beschreibung des Bildes, etc.

Ich gehe in den folgenden Beispielen davon aus, dass in dem Feld Beschriftung der Urheber steht und spreche daher der Einfachheit halber von dem Urheber.

Beschriftung (Description) mit dem Urheber immer zeigen: Alternative statt Shortcode

Wenn der Vermerk immer gezeigt werden soll, dann bietet sich statt eines Shortcodes das folgende Snippet an:

add_action( 'post_thumbnail_html', 'custom_description', 10 );
function custom_description( $html ) {
    if ( is_single() ){
	  $beschriftung = get_post(get_post_thumbnail_id())->post_excerpt;
	  if ($beschriftung != '') { 
		$html .= '<p class="em_bild">' . $beschriftung . '</p>';
	  }
    }
    return $html;
}

In dem Fall wird bei jedem Beitragsbild die entsprechende Beschriftung (description) ausgegeben, wenn der Eintrag für die Beschriftung nicht leer ist. Unter Medien wird bei Beschriftung der gewünschte Eintrag z. B. für den Urheber vorgenommen. Die Ausgabe erfolgt allerdings bei Nutzung des genannten Snippets nur bei den Beiträgen und nicht in der Übersicht (Archive).

@pixolin (Bego) brachte mich dann noch auf die Idee, das Datum des Uploads zu integrieren. Das sieht dann wie folgt aus:

add_action( 'post_thumbnail_html', 'custom_description', 10 );
function custom_description( $html ) {
    if ( is_single() ){
	  $beschriftung = get_post(get_post_thumbnail_id())->post_excerpt;
	  $upload_datum = get_the_time('Y');
	  // $upload_datum = get_the_date( '', $attachment_id );
	  if ($beschriftung != '') { 
		$html .= '<p class="em_bild">' . $beschriftung . ' - Foto: ' . $upload_datum . '</p>';
	  }
    }
    return $html;
}

Der Variablen $upload_datum wird in dem Fall in der nicht kommentierten Zeile nur das Jahr und in der kommentierten Zeile das gesamte Datum zugewiesen. Je nach Wunsch kann eine dieser Zeilen genutzt werden.

Das Snippet kann je nach Bedarf noch weiter ausgebaut werden.

Urheber eingetragen bei Beschriftung
Urheber eingetragen bei Beschriftung
Urheber unter dem Beitragsbild (featured image)
Urheber unter dem Beitragsbild (featured image)

Wenn man die If-Klausel
if ( is_single() ){ ... }
nicht berücksichtigt, dann erfolgt die Ausgabe auch in der Übersicht der Beiträge (Archive) unter dem Beitragsbild. Gefällt mir persönlich zwar nicht so gut, aber der Vollständigkeit halber wollte ich diese Option nennen.
Hier der entsprechende Code:

add_action( 'post_thumbnail_html', 'custom_description', 10 );
function custom_description( $html ) {
    $beschriftung = get_post(get_post_thumbnail_id())->post_excerpt;
    if ($beschriftung != '') { 
	$html .= '<p class="em_bild">' . $beschriftung . '</p>';
    }
    return $html;
}


Bei der Gestaltung des Absatzes wird die CSS-Klasse em_bild verwendet, die weiter unten in diesem Beitrag aufgeführt wird.

Der Shortcode für den Urheber-Vermerk

Alternativ besteht die Möglichkeit, nur für bestimmte Beitragsbilder die Beschriftung auszugeben. Das kann dann interessant sein, wenn Sie die Beschriftung nur ausgeben möchten, wenn z. B. Personen auf dem Bild zu sehen sind oder ein Urheber-Vermerk gezeigt werden soll.

Verwendung des Shortcodes beim Beitrag
Verwendung des Shortcodes beim Beitrag
Ausgabe des Urhebers im Frontend
Ausgabe des Urhebers im Frontend

Den Shortcode würden Sie z. B. vermutlich nicht verwenden, wenn Sie beispielsweise ein eigenes Foto als Beitragsbild nutzen möchten, bei dem kein Text in der Beschriftung eingetragen ist.

// Aufruf mit [bild_copyright]
add_shortcode( 'bild_copyright', 'bild_shortcode' );
function bild_shortcode () {
$bild_unterschrift = '<p class="em_bild">' . get_post(get_post_thumbnail_id())->post_excerpt . '</p>';
return $bild_unterschrift;
}

Eine der genannten Funktionen kann entweder über das Plugin Code Snippets oder aber in die functions.php des Child Themes eingebaut werden.

CSS-Regel für den Absatz

Wie man in dem Code sehen kann, wird als CSS-Regel für den Absatz „em_bild“ genutzt. Damit wird u. a. erreicht, dass die Zeile in italic formatiert wird:

/* Absatzstyle für Urheber oben */
p.em_bild {
    font-style: italic;
    margin-bottom: 4rem;
    margin-top: 1rem;
    line-height: 1.3rem;
}

Natürlich kann man die Urheber-Zeile nach Belieben formatieren. Diesen Code kann man unter Design > Customizer > Zusätzliches CSS packen.

Verwendung des Plugins Code Snippets

Das Plugin Code Snippets ist eine hervorragende Lösung, wenn man individuelle Änderungen nutzen möchte, aber kein Child Theme verwendet.

Wenn man das Plugin Code Snippets installiert hat, erscheint links in der Menüleiste ein zusätzlicher Menüpunkt „Snippets“ mit einer Schere als Symbol. Bei dem Untermenüpunkt „Einstellungen“ braucht man im Prinzip keine Änderungen vorzunehmen.

Untermenüpunkte von Code Snippets
Menü von Code Snippets

Um ein neues Snippet anzulegen klickt man auf den Untermenüpunkt „Neu hinzufügen“. Hier trägt man das Snippet wie folgt ein:

  1. Bezeichnung (hier Urheber-Vermerk“).
  2. Bei Code wird das Snippet eingetragen.
  3. Unter „Beschreibung“ kann eine etwas ausführlichere Darstellung des Snippets eingetragen werden.
  4. Wenn man mehrere Snippets verwendet, kann man zusätzlich noch Schlagwörter vermerken

Anschließend klickt man auf den Button „Speichere Änderungen und Aktiviere“. Das war’s.

Weitere Infos und ein ausführlicheres Beispiel für die Erstellung eines Snippets in diesem Plugin finden Sie in dem folgenden Beitrag.

Fazit

Sollte bei einem Theme die Beschriftung nicht unter dem Bild angezeigt werden, kann man über eine entsprechende Funktion grundsätzlich die Beschriftung anzeigen lassen. Wenn man das allerdings individuell machen möchte, gibt es über den Shortcode ebenfalls eine Lösung. Die hier genannten Code-Beispiele können entweder in der functions.php des Child Themes oder über das Plugin Code Snippets verwendet werden.


Mehr erfahren auf dieser Webseite

WordPress: Beschriftung unter Beitragsbild ausgeben per Funktion


Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über Ihre Kontaktaufnahme

Was halten Sie davon?

Wir hoffen, dieser Beitrag hat Ihnen gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Weitere interessante Beiträge rund um WordPress finden Sie hier

Schreibe einen Kommentar