Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
smilies.4-user.de

Quellenangabe für Titelbild
Plug-in Featured Image Caption

… Fotografie braucht Ambition! – und Kraft. Bild von MichaelGaida
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Die Möglichkeit zur Hinzufügung einer Bildbeschriftung (bspw. zur Quellenangabe) für das Titelbild (Beitragsbild) kann von Theme zu Theme unterschiedlich sein. Nicht jedes Theme bietet diese Funktion nativ an. In solchen Fällen kann die Verwendung eines Plug-ins wie 'Featured Image Caption' eine Lösung sein. Dabei möchten wir gerne den Hinweis auf die Website 'Theme Coder' empfehlen.

Zur Quellenangabe des Titelbildes

… einige Bemerkungen.

  • Wenn die Beschriftung des Titelbildes direkt unter dem Titelbild im Content des Beitrags eingegeben ist, wird dies in die Meta-Beschreibung der Suchergebnisse einfließen. Dies ist normalerweise unerwünscht. Das Plug-in Featured Image Caption ermöglicht es, diese Beschriftung separat zu verwalten und sicherzustellen, dass nur das Exzerpt für die Meta-Beschreibung verwendet wird. Dadurch wird eine klare Trennung zwischen der Beschriftung des Titelbildes und dem Inhalt, der in den Suchergebnissen angezeigt wird, erreicht.
  • Zunächst scheint das Plug-in für bestimmte Themes wie 'Twenty Fourteen' ungeeignet zu sein, da der Bildausschnitt des Titelbildes dies bedingt (für die Mobilansicht ist aber der Bildausschnitt nicht sichtbar).
    titelbild quellenangabe
  • Eine alternative Möglichkeit zur Bildbeschriftung besteht jedoch darin, Shortcodes zu verwenden. Dies ermöglicht es, neben der Beschriftung auch erweiterte Beschreibungen oder andere Designelemente einzufügen, je nach den Anforderungen und dem Design der Website.

Der Shortcode

Das Plug-in stellt den Shortcode [ccfic] zur Verfügung, der im Editor verwendet werden kann, um die Bildunterschrift einzufügen. Die Bildunterschrift wird somit nicht direkt am Bild des Beitrags angezeigt, sondern im Inhalt des Beitrags über den Shortcode.

Beispiel Shortcode:

[ccfic caption-text source-link]

  • Der Auszeichnung wie dieses Beitrags unter dem Titelbild ist allein der Shortcode  [ccfic] okay.
  • Es ist wichtig, in den Plug-in-Einstellungen die Option Automatically add the caption to the featured image zu deaktivieren. Andernfalls würde die Bildunterschrift automatisch am Bild angezeigt werden, was in diesem Fall nicht gewünscht ist. Denn wie schon oben gezeigt, sonst ist derlei visuell:
    Caption-AutomaticallyWenn das Häkchen entfernt wurde, muss also der Shortcode manuell eingefügt werden. Dies kann direkt im Editor erfolgen. Weitere Informationen ist in der nächsten Überschrift. Dort wird erklärt, wie der Shortcode automatisch über die functions.php hinzugefügt werden kann.
  • Das dritte Häkchen für 'Add a container <div> to the caption HTML' ist aktiviert zu lassen. Dies stellt sicher, dass der Shortcode ordnungsgemäß in ein Container-Div eingebettet wird.

Statt dem Häkchen bei Automatically add the caption to the featured image

Anstelle des Häkchens bei 'Automatically add the caption to the featured image' wird nun der Shortcode … automatisch im Content des Beitrags verwendet.

Durch den Code in der functions.php wird die Bildbeschriftung automatisch im Content angezeigt, wenn sie definiert ist. Der Shortcode muss nicht manuell eingegeben werden. Hier ist der entsprechende Code für die functions.php:

/* Titelbild Beschriftung per Shortcode autom. */
$reihenfolge = 1;

add_filter('the_content', 'ccfic_before_content', $reihenfolge, 1);
function ccfic_before_content($content)
{
if (is_singular('post')) {
$content = do_shortcode('[ccfic]') . $content;
}

    return $content;
}

Pr. WP-Freund

Durch Hinzufügen dieses Codes zur functions.php wird die Bildbeschriftung automatisch im Content des Beitrags angezeigt, wenn eine Beschriftung für das Titelbild vorhanden ist.

Beispiel von CSS und das mit dem Selektor .ccfic:empty

Das Beispiel von CSS ist hier dem Beitrag unter dem Titelbild zu sehen ist "… Denn Fotografie braucht Ambition! – und Kraft. MichaelGaida".

/* Design Quellenangabe für Titelbild */
.ccfic {
    margin-bottom: 23px;
    padding-bottom: 13px;
    font-size: 14px;
    color: #777;
    border-bottom: 1px solid #e6e6e6;
}
.ccfic:empty {
    display: none;
}

Wichtig ist der Selektor .ccfic:empty im Zusammenhang des automatischen Shortcodes, wenn das Element ccfic keinen Inhalt enthält, also im Editor-Widget 'Featured Image Caption' kein Eintrag vorhanden ist.


Aktualisiert im Jahr 2023-Juni