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
Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.




Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.




Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info


Classic Editor & Advanced Editor Tools
Erleben Sie es.


Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.




Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.





Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

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.

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2023 Juni