Bildunterschriften per CSS gestalten

Der WordPress-Version 3.4 wurden einige Funktionen hinzugefügt, die ich wahrscheinlich zum größten Teil überhaupt nicht nutzen werde. Eine schöne zusammenfassende Erklärung , um welche es sich dabei handelt und wie diese umgesetzt werden, hat Elmastudio veröffentlicht.

Genau wie Ellen finde ich das Einfügen von Bildunterschriften mit Html-Attributen am interessantesten.

Nun nutze ich diese zwar nicht sehr häufig, aber letztens habe ich in einem meiner Beiträge tatsächlich einmal die Caption-Funktion bemühen müssen. Mir gefiel die Darstellung aber überhaupt nicht. In meinem nicht mehr so taufrischen und zudem kostenlosen Theme war das Schriftbild unter den Bildern identisch mit dem Rest des Beitragstextes und hob sich somit nicht klar von ihm ab.

Nachrüsten bei meinem alten Theme

Mag sein, dass die Designer neuerer Themes eine grundlegende Gestaltung per Caption berücksichtigt haben, aber ich musste diese nun nachholen. Jede Bildunterschrift umfangreich per Hmtl zu generieren, war mir dann doch erst einmal zu umständlich.

Daher begab ich mich auf die Suche nach einer grundlegenden Lösung und wurde auf einen Codex bei WordPress.org aufmerksam. Dort habe ich den folgenden CSS-Code herausgepickt und in die Datei style.css im Verzeichnis meines Templates kopiert:

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin:0;
    max-width: 98.5%;
    padding:0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
}

Sind das nicht wunderschöne Schafe? Weitere Tierbilder seht ihr in dem Album “Allerlei Getier” bei Flickr.

Durch das Ändern des Rahmens, der Schriftgröße, Hintergrundfarbe bzw. der padding– und margin-Werte erziele ich schon einmal eine einheitliche Darstellung für Grafiken mit Bildunterschriften.

Einzelne Attribute für Fettschrift oder Links sind dann schnell hinzugefügt.