Wegen dieser Battlefield-Geschichte wollte ich kürzlich mal die Untertitel-Funktion für Bilder verwenden, die in einer dieser WordPress-eigenen Galerien angelegt sind. Dabei fiel mir auf, da ich das vorher noch nie gemacht hatte, da ich Bilder mit Untertiteln immer nur einzeln einfügte. Ferner waren in meinem Theme noch gar keine CSS-Regeln für die Galerie angelegt, da dieses schon etwas älter ist und ich die Pflege irgendwann selbst übernommen habe.
Also legte ich – und ich plante für die Sache keine 5 Minuten ein – einfache CSS-Regeln an bei denen ich dachte, dass sie definieren was genau passiert. Aber genau so war es eben doch nicht. Denn WordPress generiert, die nach Anzahl der Spalten für die Galerie eigene Regeln, die also Rahmen, Breite usw. definieren. Das ist natürlich ziemlich krebsig, wenn man eigene Design-Einstellungen tätigen will.
Deshalb habe ich mich umgeschaut, wie ich mittels Theme-Funktion (ohne Plugin) die automatisch generierten CSS-Regeln aushebeln und eigene setzen kann. Dies funktioniert wie folgt:
In der functions.php des jeweiligen Themes hinterlegen wir folgenden Einzeiler (sofern nicht schon vorhanden, danach nicht vergessen!):
add_filter(‘use_default_gallery_style’, ‘__return_false’);
Dieser ermoeglicht uns, dass WordPress keine generierten CSS-Regeln mehr anwendet, sondern wir unsere eigenen schreiben und verwenden koennen. Diese CSS-Regeln muessen wir natuerlich jetzt in der style.css, oder in einer anderen inkludierten CSS-Datei festlegen. Meine Regeln sehen, um huebsche blaue Rahmen mit weisser Schrift zu generieren, so aus:
.wp-caption,.wp-caption-text {
color: #fff;
font-size: 11px;
font-style: italic;
font-weight: 200;
background-color: rgb(53, 106, 160);
text-align: center;
padding: 7px 2px 2px 2px;
margin: 10px 10px 10px 10px;
}
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 20%;
background-color: rgb(53, 106, 160);
padding: 7px 7px 5px 7px;
margin: 10px 10px 10px 10px;
}
.gallery img {
border: 0px;
}
.gallery-caption {
margin-left: 0;
}
Bei aelteren WordPress-Versionen (3.0 und zuvor glaube ich) kann man wohl mit der Funktion oben nicht arbeiten, da diese da noch nicht implementiert war. Obwohl ich nicht hoffe, dass jemand noch eine so veraltete Version verwendet, hier noch der alternative Code fuer die functions.php bei den älteren Versionen:
add_filter(‘gallery_style’, create_function(‘$a’, ‘return preg_replace(“%%s”, “”, $a);’));
Einen kleinen Haken hat diese Lösung allerdings noch: Man ist abhängig von der verwendeten Breite (die man in der Klasse “gallery-item” mit “width” festgelegt hat) gezwungen immer die gleiche Anzahl an Bildern nebeneinander zu platzieren. Wenn ich jetzt also bei der Erstellung der Gallerie statt vier Bildern nur drei in einer Reihe auswähle, würden ungleiche Rahmen und Verschiebungen entstehen. Auch das kann man mit ein bisschen Bastelei sicher beheben – man könnte zum Beispiel bestimmte Fälle einrichten, in denen unterschiedliche CSS-Regeln verwendet werden. Aber das werde ich später eventuell nochmal anreißen.