Ein Bild sagt vielleicht mehr als 1.000 Worte, aber ein oder zwei Sätze Text als Bildunterschrift reichen oft schon aus, um eine Aussage zu unterstreichen. Eyetracking-Studien haben gezeigt, dass sich Website-Nutzer/innen oft auf ansprechende, relevante Bilder konzentrieren und dann den Text in der Bildunterschrift lesen.
Aber wenn es deine Aufgabe ist, Bilder und Bildunterschriften auf einer Webseite anzuordnen, kann es schwierig sein, diese Elemente einheitlich zu gestalten. Deshalb gehen wir in diesem Leitfaden darauf ein, wie du in WordPress Bildunterschriften einfügst.
Wie man WordPress-Bildunterschriften erstellt
Das Zusammenspiel zwischen einem Bild und seiner Beschriftung beginnt, sobald du es in WordPress hochgeladen hast. Es gibt zwei gängige Methoden, um Bilder und Bildunterschriften zusammenzubringen:
- Erstelle Beschriftungen in der WordPress-Mediathek.
- Erstelle Beschriftungen im WordPress-Editor „on the fly“
Wir werfen einen Blick auf beide.
So erstellst du Bildunterschriften aus der Mediathek
Bilder, die du der Mediathek hinzufügst, landen normalerweise in Ordnern auf deinem Webserver, während die Informationen zu den Bildern — einschließlich der Bildunterschriften — in der WordPress-Datenbank gespeichert werden.
So greifst du auf die Medienbibliothek zu:
- Wähle im WordPress Dashboard Medien > Bibliothek.
- Klicke auf die Schaltfläche Neu hinzufügen, um dein Zielbild hochzuladen.
Wenn du auf die Miniaturansicht des Bildes klickst, öffnet sich das Fenster mit den Anlagedetails, in dem du deine Bildunterschrift hinzufügen kannst.
Füge deinen Wunschtext in das Feld „Bildunterschrift“ ein und voilà, deine Bildunterschrift ist hinzugefügt. Wenn du die Bilddetails hier bearbeitest, speichert WordPress deine Arbeit automatisch, während du sie eingibst.
Du kannst auch direkt zu einem Medien-Upload übergehen, indem du im WordPress-Dashboard Medien > Neu hinzufügen wählst:
- Wähle das hochzuladende Bild aus (oder ziehe es per Drag & Drop).
- Klicke dann auf den Link Bearbeiten neben der Bildminiatur.
Wenn du auf Bearbeiten klickst, öffnet sich das Fenster mit dem Feld für die Bildunterschrift:
Dort kannst du deine gewünschte Beschriftung hinzufügen. Dieses Mal musst du deine Änderungen jedoch speichern, indem du nach unten scrollst, bis du auf die Schaltfläche Aktualisieren klicken kannst:
Jetzt, wo du die Bildunterschriften mit deinen Bildern in der Mediathek gespeichert hast, kannst du sie ganz einfach auf einer Webseite oder in einem Blogbeitrag einfügen.
Wir sehen uns an, wie du das mit dem Block-Editor und dem klassischen Editor machst.
So fügst du ein Bild mit einer Beschriftung im Blockeditor ein
So fügst du ein Bild im Blockeditor ein:
- Klicke auf das [+]-Symbol, um die Blockleiste anzuzeigen.
- Klicke auf das Bild-Symbol.
- Klicke auf die Schaltfläche Mediathek.
- Wähle dann dein gewünschtes Bild aus.
Das Bild und seine Beschriftung werden deinem Layout hinzugefügt.
So fügst du eine Bildunterschrift im klassischen Editor hinzu
Im klassischen Editor kannst du ein Bild und seine Beschriftung hinzufügen, indem du auf die Schaltfläche Medien hinzufügen klickst:
Dort siehst du auf der rechten Seite das Feld für die Bildunterschrift, die du bearbeiten kannst. Wenn du mit dem Text zufrieden bist, klicke auf die Schaltfläche In Beitrag einfügen.
Wenn du eine WordPress-Seite statt eines Blogbeitrags bearbeitest, heißt diese Schaltfläche In Seite einfügen.
Dein Bild und die Beschriftung werden wieder im Editor angezeigt.
Wie du Bildunterschriften direkt im WordPress-Editor erstellst
Das Schöne an Software ist, dass es meist mehrere Wege gibt, um das gleiche Ergebnis zu erzielen. WordPress und Bildunterschriften sind da keine Ausnahme.
So lädst du ein Bild hoch und fügst eine Beschriftung im Blockeditor hinzu
Klicke im Blockeditor auf das [+]-Symbol und wähle die Option Bildblock:
Klicke als nächstes auf die Schaltfläche Hochladen.
Wenn du dein Bild auswählst (oder per Drag & Drop), platziert WordPress es im Editor. Darunter siehst du den Text „Beschriftung hinzufügen“.
Um deine Bildunterschrift hinzuzufügen, ersetze einfach „Bildunterschrift hinzufügen“ durch deine eigenen Worte.
Beachte, dass die von dir erstellte Bildunterschrift nicht in der Mediathek gespeichert wird, wenn du diese Methode im Blockeditor verwendest.
So lädst du ein Bild hoch und fügst eine Beschriftung im klassischen Editor hinzu
Wenn du den klassischen Editor verwendest, lade dein Bild hoch, indem du auf die Schaltfläche Medien hinzufügen klickst:
Klicke dann im Fenster Medien hinzufügen auf Dateien hochladen und wähle dein Bild aus (oder ziehe es per Drag & Drop).
Dein neues Bild wird in die Mediathek hochgeladen und als ausgewählt mit einem Häkchen angezeigt. Füge deine Bildunterschrift in das Feld Bildunterschrift ein, das du im Bereich Anlagendetails findest.
Nachdem du deine Beschriftung geschrieben hast, klicke auf die Schaltfläche In Beitrag einfügen (oder In Seite einfügen).
Deine Beschriftung wird zusammen mit allen anderen Details in der Mediathek gespeichert und erscheint zusammen mit dem Bild wieder im klassischen Editor.
So bearbeitest du eine vorhandene WordPress-Bildunterschrift
Was ist, wenn du Bildunterschriften ändern oder aktualisieren musst, die bereits zu einem Bild hinzugefügt wurden? Das kannst du in nur wenigen Schritten erledigen. So geht’s.
So bearbeitest du eine vorhandene Bildunterschrift im WordPress-Blockeditor
Der Blockeditor behandelt eine Bildunterschrift wie jeden anderen Text. Um eine Bildunterschrift zu bearbeiten, klickst du einfach auf den Text und nimmst deine Änderungen vor.
Beachte, dass Bildunterschriften, die auf diese Weise im Blockeditor bearbeitet werden, nicht zusammen mit den Bilddetails in der Mediathek gespeichert werden.
So bearbeitest du eine bestehende Bildunterschrift im klassischen WordPress-Editor
Wenn du stattdessen den klassischen Editor verwendest, klicke auf das Bild, um die Symbolleiste für die Bildsteuerung anzuzeigen.
Klicke auf das Stiftsymbol, um die Bilddetails zu bearbeiten.
Gib deinen neuen Text in das Feld Beschriftung ein und klicke dann auf die Schaltfläche Aktualisieren. Damit wird deine neue Bildunterschrift in der Medienbibliothek gespeichert und du kehrst zum Editor zurück.
Tipp: Mit dem klassischen Editor kannst du Bildunterschriften auch wie anderen Text auf einer Webseite bearbeiten. Beachte nur, dass die so aktualisierten Bildunterschriften nicht mit den Bilddetails in der Mediathek gespeichert werden.
So fügst du Bildunterschriften in einer WordPress-Bildergalerie hinzu
Du kannst ähnliche Methoden verwenden, um Bildunterschriften in WordPress-Galerien hinzuzufügen.
Hinzufügen von Beschriftungen zu einer WordPress-Galerie mit dem Block-Editor
Der Block-Editor bietet den Galerie-Block als Option an, nachdem du auf das [+]-Symbol geklickt hast:
In diesem Szenario gehen wir davon aus, dass diese WordPress-Website bereits mit Bildern und gespeicherten Bildunterschriften ausgestattet ist, also klickst du auf die Schaltfläche Medienbibliothek.
Klicke in der Mediathek auf die Vorschaubilder der Bilder, die du in der Galerie haben möchtest. Die Häkchen zeigen an, welche Bilder du auswählst.
Klicke auf die Schaltfläche Eine neue Galerie erstellen, um fortzufahren.
Bevor du die Galerie in deinen Blog einfügst, kannst du im Dialog „Galerie bearbeiten“ die Reihenfolge der Bilder durch Ziehen und Ablegen ändern und Bilder hinzufügen oder aus der Auswahl entfernen.
Wenn du mit dem Ergebnis zufrieden bist, klicke auf die Schaltfläche Galerie einfügen.
Das Twenty Twenty WordPress-Theme, das für dieses Beispiel verwendet wurde, blendet den Text der Bildunterschrift über dem zugehörigen Bild ein.
Hinzufügen von Bildunterschriften zu einer WordPress-Galerie mit dem klassischen Editor
Hier erfährst du, wie du mit dem klassischen WordPress-Editor eine Bildergalerie mit Bildunterschriften hinzufügen kannst.
Platziere deinen Cursor an der Stelle, an der du deine Galerie einfügen möchtest:
- Klicke auf Medien hinzufügen.
- Wähle Galerie erstellen in der linken Seitenleiste.
Du kannst die Bilder, die für deine Galerie verfügbar sind, auf der Registerkarte Medienbibliothek durchsuchen.
- Wähle die Bilder aus, die du in deiner Galerie verwenden möchtest (durch Häkchen gekennzeichnet).
- Klicke auf Eine neue Galerie erstellen.
Deine ausgewählten Bilder werden im Fenster Galerie bearbeiten angezeigt. Dort kannst du die Bildunterschriften für jedes Bild bearbeiten und bei Bedarf die Reihenfolge der Bilder ändern.
Wenn du mit dem Inhalt deiner Galerie und deinen Bildunterschriften zufrieden bist, klicke auf Galerie einfügen.
Deine Bilder und Beschriftungen werden im Editor angezeigt.
Beachte, dass die Beschriftungen in dieser Ansicht nicht bearbeitet werden können. Um dies zu tun:
- Klicke auf eine beliebige Stelle in der Galerie, um die Gruppe zu markieren.
- Klicke auf das Bleistiftsymbol.
Du kehrst zum Dialog „Galerie bearbeiten“ zurück, den du im vorherigen Schritt gesehen hast, und kannst dort die Beschriftungen erneut bearbeiten.
Ändern des Aussehens von WordPress-Galeriebeschriftungen mit einem Plugin
Standardmäßig verwendet WordPress nur das Feld Bildunterschrift, das in der Medienbibliothek gespeichert ist, wenn es automatisch Bildunterschriften anbringt. Das Plugin Gallery Image Captions (GIC) bietet jedoch einen Hook für benutzerdefinierten PHP-Code, mit dem Bildunterschriften aus allen Detailfeldern der Bibliothek erstellt werden können, einschließlich benutzerdefinierter Felder.
GIC verlässt sich auf WordPress-Shortcodes — insbesondere auf den [gallery] Shortcode – um die Ausführung des von dir geschriebenen benutzerdefinierten PHP-Codes auszulösen. Dieser Code bestimmt, welche Detailfelder in der Mediathek Teil einer Bildunterschrift sein werden, und kann sogar HTML enthalten, um das Layout der Bildunterschrift zu formatieren.
Wenn du eine Galerie mit dem klassischen Editor erstellst, wird der [gallery] Shortcode hinter den Kulissen eingefügt. Du kannst ihn sehen, wenn du auf die Registerkarte Text klickst, um den Code zu sehen:
Im einfachsten Fall enthält der [gallery] Shortcode die ID-Nummern der Bilder, die für die Anzeige ausgewählt wurden.
Standardmäßig generiert der Block-Editor sofort den HTML-Code für eine Galerie, wenn du eine Gruppe von Bildern auf einer Webseite platzierst, aber du kannst auch den Shortcode-Ansatz wählen:
- Klicke im Editor auf das [+]-Symbol.
Dadurch wird das Panel mit den verfügbaren Blöcken angezeigt.
- Beginne mit der Eingabe von „shortcode“ in das Suchfeld.
- Klicke auf das [/]-Symbol (Shortcode), wenn es erscheint.
Du kannst dann den Shortcode in den neuen Block eingeben.
Du musst den WordPress-Code in deinem Theme bearbeiten, um das GIC-Plugin zu verwenden. Du kannst deinen eigenen PHP-Code für Beschriftungen hinzufügen, indem du die Datei functions.php deines Themes bearbeitest. Da diese Datei bei einer Aktualisierung des Themes ersetzt werden kann, ist es am besten, ein Child-Theme zu erstellen, bevor du Änderungen an wichtigen WordPress-Dateien vornimmst. Und um auf Nummer sicher zu gehen, kann ein schnelles Backup nicht schaden.
Eine Alternative ist die Verwendung eines Plugins wie Code Snippets, mit dem du PHP in den Code deiner Website einfügen kannst, ohne die functions.php zu bearbeiten.
Egal, ob du die Datei functions.php direkt bearbeitest oder ein Plugin wie Code Snippets verwendest, dein Code wird in etwa so aussehen:
Die wichtigsten Anpassungen finden in den Zeilen 17 und 18 statt, wo Titel und Bildunterschriften aus der Medienbibliothek in ein einfaches HTML-Markup eingefügt werden, um das Aussehen der Bildunterschriften zu ändern.
In der Medienbibliothek benötigen potenzielle Galeriebilder Text in diesen Feldern:
Wenn das GIC-Plugin zusammen mit dem benutzerdefinierten PHP-Code installiert ist, sehen die Bildunterschriften in der Galerie jetzt wie folgt aus:
So fügst du Bildunterschriften zu hervorgehobenen Bildern hinzu
In den meisten WordPress-Themes hat ein angezeigtes Bild standardmäßig keine Bildunterschrift.
Das obige Bild wird zum Beispiel in der Mediathek mit einer Beschriftung angezeigt, aber es erscheint ohne Beschriftung, wenn es als Featured Image verwendet wird.
Wenn du dort eine Bildunterschrift haben möchtest, kann dir das FSM Plugin Custom Featured Image Caption helfen.
Nach der Installation des Plugins kannst du in den Einstellungen festlegen, welche Stylesheet-Klasse du deinen Bildunterschriften zuweisen möchtest oder ob du benutzerdefiniertes CSS hinzufügen willst.
Standardmäßig zeigt das Plugin Custom Featured Image Caption die Bildunterschrift an, die mit dem Bild in der Medienbibliothek gespeichert ist, aber nicht im Editor.
Das Plugin „Custom Featured Image Caption“ ändert auch das Fenster „Featured Image“ sowohl im Block-Editor als auch im klassischen Editor so, dass es eine alternative Bildunterschrift akzeptieren kann, die alle in der Medienbibliothek gespeicherten Bildunterschriften überschreibt.
Du kannst die Bildunterschrift und das Bild selbst ausblenden, indem du die Kontrollkästchen am unteren Rand des Fensters aktivierst.
Zusammenfassung
WordPress bietet viel Flexibilität, wenn es um das Hinzufügen und Bearbeiten von Bildunterschriften für einzelne Bilder und Bilder in Galerien geht. Und wenn dir die eingebauten Optionen nicht ausreichen, kannst du die Kernfunktionen mit Plugins von Drittanbietern erweitern.
Und hier noch ein Tipp: Wenn deine Webprojekte sehr bildintensiv sind, solltest du dir unseren Leitfaden zur Optimierung von Bildern für das Web und die Leistung ansehen.
