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.
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.
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.
Um ein neues Snippet anzulegen klickt man auf den Untermenüpunkt „Neu hinzufügen“. Hier trägt man das Snippet wie folgt ein:
- Bezeichnung (hier Urheber-Vermerk“).
- Bei Code wird das Snippet eingetragen.
- Unter „Beschreibung“ kann eine etwas ausführlichere Darstellung des Snippets eingetragen werden.
- 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.
Das Plugin Image Source Control
Es gibt übrigens auch noch als Alternative ein Plugin, das natürlich noch mehr Features anbietet: Image Source Control. Diese Leistungsmerkmale umfasst das Plugin in der Lite-Version:
- Alle Bildquellen unter dem Inhalt einer bestimmten Seite auflisten oder die Liste manuell platzieren
- Einblenden einer Bildunterschrift über dem Bild
- Einbetten einer vollständigen Bildnachweisliste mit Miniaturansichten auf der Website
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. Alternativ kann auch das Plugin „Image Source Control“ verwendet werden.
Mehr erfahren auf dieser Webseite
Wir freuen uns über eine Kontaktaufnahme
Was hältst du davon?
Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.
- Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
- Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.
Beitrags-Kategorien
Allgemein (104) Anleitung (67) Block-Editor (44) CSS (10) Full Site Editing (32) Keine Anzeige (1) Plugins (28) Short News (1) Theme (21) Tipps (69) Veranstaltungen (3) WordPress (112)