Suche Menü

Die Standard-Bildergalerie von WordPress anpassen.

Individuelle Anpassungen der WordPress-Bildergalerie mit CSS3 (border-radius,opacity, transition, box-shadow)

In diesem Artikel möchte ich nicht darauf eingehen, wie man Bilder in die Standard-Bildergalerie lädt oder wie man eine neue Bilder-Galerie erstellt und in Artikel oder Seiten einfügt. Vielmehr geht es darum die WordPress Bilder-Galerie anzupassen und individuell mit CSS3 zu stylen.

Demo WordPress-Bildergalerie

Damit man die WordPress-Galerie anpassen kann, muss das standardmäßig integrierte CSS-Styles der Gallery entfernt werden und im Haupt-Stylesheet (style.css) des Themes integriert werden.
Hierzu muss folgender Filter in die „functions.php“ des Themes eingetragen werden.

add_filter('gallery_style', create_function('$a', 'return "
<div class=\'gallery\'>";'));

Im nächsten Schritt kann man dann die CSS-Styles der Galerie in das Haupt-Stylesheet (style.css) des Themes einfügen und nach Belieben anpassen.

Die Beispiel Anpassungen: die Thumbnails erhielten einen dezenten Schlagschatten „box shadow“, beim Überfahren mit der Maus „hover“ werden sie leicht transparent, welches mit der CSS3 Eigenschaft „opacitiy“ realisiert wurde, der hover Effekt geschieht leicht verzögert wofür ich die CSS3 Eigenschaft „transition“ benutzte.
Sehr hilfreich beim stylen mit CSS ist der CSS3 Generator von Randy Jensen

Hier das CSS-Style für die Beispiel Galerie

.gallery {
    margin: auto;
 }
.gallery-item {
    float: left;	
	text-align: left;
	width: 30%;
}
.gallery img { -webkit-box-shadow: 5px 5px 10px 0px #999999;
box-shadow: 5px 5px 10px 0px #999999; 
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease; 
-webkit-border-radius: 240px;
border-radius: 240px;
 }
.gallery img:hover {
   opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */
 }
.gallery-caption { color: #666; font-size: 12px; width: 100%; margin-left: 0; display: inline;
 }

Eine praktisches WordPress-Plugin ist das Plugin jQuery Lightbox for Native Galleries, welche die Bilder der Standard-Galerie in einer Lightbox darstellt, das Plugin hat ein paar Einstellungen womit man das Erscheinungsbild der Lightbox ändern kann.

Der Gallery-Shortcode
Für diejenigen die bei den Galerie Einstellungen gerne selbst Hand anlegen, gibt es noch einige Shortcodes um das Erscheinungsbild der Galerie zu beeinflussen.

Die Anzahl der Spalten der Bilder-Galerie werden bestimmt, indem man die Option columns angibst.

[gallery columns="3"]

Die Größe der Vorschaubilder  kann man wählen, indem man “thumbnail”, “medium”, “large” und “full” bei size einträgt.

[gallery columns="3" id="60" size="medium"]

Um einzelne Bilder aus der Galerie auszuschließen, gibt es die Option exclude zusammen mit den entsprechenden Bild-IDs.

[gallery columns="3" id="60" size="medium" exclude="65"]

Die ID eines Bildes findet man heraus, indem man das Bild in der Mediathek / Medienübersicht anklickt. Die ID ist dann über die URL in der Addressleiste des Browsers sichtbar.
Weitere Optionen für den Gallery Shortcode gibt es im WordPress-Codex

Die WordPress Bildergalerie in der Sidebar nutzen
Neben der Integration der Bildergalerie in einen Artikel oder eine Seite, besteht auch die Möglichkeit die Bildergalerie in die Sidebar des Templates zu integrieren. Hierzu einfach den unten stehenden Code in die „sidebar.php“ einfügen und anpassen.

<?php echo do_shortcode('
[gallery columns="4" id="105" size="medium" include="64, 65, 66"]
'); ?>

Wer auf die WordPress eigene Bilder-Galerie verzichten möchte und stattdessen lieber eine Plugin-Lösung bevorzugt, hier noch einige tolle WordPress-Bildergalerie Plugins.

Wie z.B. das beliebte NextGen Gallery-Plugin oder
Grand FIAGallery im WordPress-Plugin-Verzeichnis oder
Polaroid im WordPress-Plugin-Verzeichnis um nur einige wenige zu nennen.