• Language: German (Deutsch) ↓↓
• Title: [de] Galerien und Bildanhang-Seite in WordPress anpassen
• Title: [en] Customize galleries and image attachment page in WordPress
• Summary: In this tutorial I will explain how to customize the look of the image galleries and the image attachment page in WordPress.

---

Worum geht es?

In diesem Tutorial werde ich dir erklären wie man das Aussehen der Bildergalerien und der Bildanhang-Seite in WordPress individuell anpasst.

---

Galerien und Bildanhang-Seite in WordPress anpassen

Ich habe im heutigen Artikel beschrieben wie leistungsfähig die Bildergalerie-Funktion von WordPress ist und etwas ausführlicher und auch Einsteiger-gerecht, diese Funktionalität vorgestellt.

Je nach dem welches Theme man für WordPress wählt, umso unterschiedlicher ist die Unterstützung und die Design-Anpassung der Galerien und der Anhang-Seite für die Grafiken und Fotos. Im folgenden werde ich ein paar Möglichkeiten vorstellen, wie man sowohl die Galerien als auch die Bild-Anhangseite anpassen kann um das Themenkomplex abzurunden.

Fangen wir zuerst mit den Galerien an. In der folgenden Abbildung sieht man Beispiel einer Bilder-Galerie:

[Eine Beispielgalerie: die Fotos haben eine Beschriftung (Bild-Unterschrift) und verweisen auf die Anhang-Seite]

Die Fotos verfügen über eine Beschriftung und verweisen anstatt auf die großes Foto auf die Anhang-Seite. Das Beispiel wurde im ehemaligen Standard-Theme Twenty Fifteen umgesetzt. Wenn man sich den Quelltext der Galerie anschaut, dann sieht man folgendes:

<div id="gallery-1" class="gallery galleryid-13 gallery-columns-3 gallery-size-medium">
    <figure class="gallery-item">
            <div class="gallery-icon landscape">
                <a href="[url-anhangseite]"><img src="[pfad-vorschaubild]" class="attachment-medium size-medium" [...]></a>
            </div>
            <figcaption class="wp-caption-text gallery-caption" id="gallery-1-18">
                Bücher und Werke von und über Tolkien
            </figcaption>
    </figure>
    <figure class="gallery-item">
            <div class="gallery-icon landscape">
                <a href="[url-anhangseite]"><img src="[pfad-vorschaubild]" class="attachment-medium size-medium" [...]></a>
            </div>
            <figcaption class="wp-caption-text gallery-caption" id="gallery-1-14">
                Die Beschriftung (Bild-Unterschrift)
            </figcaption>
    </figure>
</div>

Die wichtigen Punkte, bei denen du mittels CSS ansetzen kannst habe ich für dich hervorgehoben. Du hast also mindestens vier Punkte bzw. vier CSS-Klassenwerte mit deren Hilfe du die Bilder-Galerie anpassen kannst: .gallery, .gallery-item, .gallery-icon und .gallery-caption.

Du kannst also das Aussehen des ganzen Galerie-Blocks, des einzelnen Galerie-Elements, des Vorschaubildes und sogar der Beschriftung anpassen.

Die Bildanhang-Seite gestalten

Wenn man auf eines der Bilder aus der oberen Beispiel-Galerie anklickt, dann gelangt man zu der Anhangseite:

[Anhang-Seite mit dem einzelnen Bild. Darüber befindet sich der Link zu dem anderen Bild aus dem jeweiligen Blogbeitrag. Darunter folgen die Beschriftung und die Beschreibung.]

Je nach dem welches WordPress-Theme zum Einsatz kommt, werden hier unterschiedliche CSS-Klassen zum Einsatz kommen. Bei Twenty Fifteen wären dies .nav-links und .nav-next bzw. .nav-previous für die Weiterblättern-Verweise zwischen den Bildern. Das .entry-title kümmert sich um die Überschrift, das .entry-attachment um das Bild und das .entry-caption um die Beschriftung.

Der Beschreibungstext liegt als Absatz innerhalb von p-Tags und ist, wie das Bild und die Beschriftung von .entry-content umschlossen.

Und welche Theme-Datei steuert die Ausgabe des Bildanhangs? In WP wäre dies die image.php. Wenn diese nicht vorhanden ist, dann schaut WP in folgender Reihenfolge, bis es die passende Datei gefunden hat: attachment.php → single.php → index.php.

Sollte dein Theme nicht über eine image.php verfügen, dann kannst du sie einfach erstellen, in dem du die single.php – welche für die Einzelansicht zuständig ist – als Grundlage nimmst und die Sachen entfernst bzw. hinzufügst, die du benötigst. Die image.php von Twenty Fifteen ist ein gutes Studienobjekt, wobei es einiges zu beachten gibt. So fungiert die Funktion the_excerpt() als die Bildbeschriftung und der the_content() gibt die Bild-Beschreibung aus.

Und warum nicht das Twenty Seventeen, also das aktuelle Standard-Theme, als Objekt zum studieren? Zum einen geht man bei dem neuesten Standard-Theme etwas anderes an die Sache heran: es gibt keine image.php. Zum anderen fehlen einige Elemente auf der Anhang-Seite: du kannst nicht zu den anderen Bildern springen und es wird nicht die Beschriftung bzw. Bild-Unterschrift angezeigt.

Viel Spaß beim ausprobieren.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---