Galerien und Bildanhang-Seite in WordPress anpassen

2 Kommentare
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.

Ich habe vor knapp zwei Wochen den Artikel Galerie-Funktion: leistungsfähig und unterschätzt geschrieben und dort noch einmal etwas ausführlicher und auch Einsteiger-gerecht, die Bildergalerie-Funktion von WordPress vorgestellt.

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

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

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

Die Bilder verfügen über eine Beschriftung und verweisen anstatt auf das große Bild 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 hervorgehoben. Du hast also mindestens vier Punkte bzw. CSS-Klassenwerte mit deren Hilfe du die 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 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 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 Template-Datei steuert die Ausgabe des Bildanhangs? In WordPress 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 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 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: man kann nicht zu den anderen Bildern springen und es wird nicht die Beschriftung bzw. Bild-Unterschrift angezeigt.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schlagwörter: , ,

2 Kommentare

  2. Hallo Vladimir,

    Ich würde gerne im twentyfifteen Theme das auf der Anhang-Seite angezeigt Bild mit der hochauflösenden Version des Bildes verlinken, so dass diese in der aktivierten (und auch funktionierenden) Lightbox angezeigt werden kann. Ich verlinke bisher von der Standard-Galerie auf die Anhang-Seite um die Kommentar- und Like-Funktion je Bild zu nutzen. Ich scheitere bisher immer wieder… Hast du da als Fachmann einen Tipp?

    Ich danke dir auf jeden Fall schon mal im Voraus für eine Antwort 🙂

Kommentare sind geschlossen.