WordPress: nicht-responsive Bildunterschriften reparieren

Mir ist in den letzten Wochen aufgefallen, dass bei ein paar Themes, die ich getestet habe, die Ausgabe der Bilder mit Bildunterschriften (Captions) nicht responsiv waren, auch wenn das Theme an sich responsiv war. Im einfachen deutsch gesagt: alles hat sich dem Bildschirm des Ausgabegeräts angepasst, nur die Bilder mit den Unterschriften nicht.

Das liegt daran, dass die Bildunterschriften standardmäßig mit einem Inline-Style bezüglich der Breite versehen sind, wie man in der folgenden Abbildung sehen kann:

Das Problem kann man ganz einfach umgehen in dem man den Bildunterschriften eine maximale Breite vergibt. Einfach die CSS-Angaben um folgende Regel bzw. bestehende Regel um eine zusätzliche Deklaration ergänzen:

.wp-caption {
    max-width: 100%;
}

Diese oder ähnliche CSS-Angaben befinden sich bereits in den Standard-Themes und dort muss man nicht tätig werden. Lediglich in den Themes, in denen diese Angabe fehlt muss man nachrüsten. Manchmal sind auch die Angaben zu den Abständen nicht vollständig oder fehlerhaft. So haben auch rechts ausgerichtete Bildunterschriften einen rechten bzw. die links ausgerichteten einen linken Abstand, was in meisten Fällen nicht erwünscht sein sollte.

Mit den folgenden CSS-Anweisungen kann man sowohl des Problem der Breite, wie auch das Problem der äußeren Abstände korrigieren:

.wp-caption             {max-width: 100%; margin: 10px 0;}
.wp-caption.alignleft   {margin: 10px 10px 15px 0;}
.wp-caption.alignright  {margin: 10px 0 10px 15px;}

Wie man im oberen Code-Beispiel sieht kann man mehrere Klassen zu Selektoren verknüpfen. Der Selektor .klasse1 .klasse2 ist ein Nachfahrenselektor und spricht alle Elemente mit class="klasse2" an, die sich innerhalb eines Elements mit class="klasse2" befinden.

Lässt man das Leerzeichen weg und macht stattdessen .klasse1.klasse2 dann wird ein komplett anderer Fall angesprochen und zwar nur die Elemente, wo gleichzeitig die class-Werte klasse1 und klasse2 auftauchen. Kleine Änderung mit einer großen Wirkung.

Damit hat man dann die Möglichkeit gezielt links- bzw. rechts-ausgerichtete Bildunterschriften (Captions) anzusprechen und mit passenden CSS-Anweisungen zu bestücken.

Mit den verknüpften Klassen als Selektor hat man die Möglichkeit auch anderer Szenarien anzusprechen, da WordPress recht freigiebig bei der Vergabe der Klassenwerte ist. Manch einen stört es zum Beispiel, dass im öffnenden body-Tag bis zu neun Klassen-Werte ausgegeben werden, aber so kann man hinterher per CSS komfortabel und zielgerichtet die Unterseiten ansprechen.

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