WordPress-Themes mit Bootstrap

Stylesheet-Klassen für Bilder

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der WordPress-Editor verwendet bestimmte Klassennamen für die Ausrichtung und Größe von Bildern. Auf diese kann in der Stylesheet-Datei zugegriffen werden.
03:36

Transkript

Schauen wir uns mal ein bisschen im Blog um. Ich hab' hier die Kategorie Klettertouren, Mitterkaiser, da klicke ich mal auf weiterlesen. Habe die Überschrift, ich hab' ein Bild, ich hab' einen Text, aber ich kann mich dunkel dran erinnern, dass ich eigentlich mal gesagt habe, dieses Bild soll rechtsbündig ausgerichtet werden und hier der Mitterkaiser von Süden aus gesehen mit der Fritz-Pflaum-Hütte. Das ist ein Bild-Beschreibungs-Text und der sieht hier aber momentan genauso aus wie der normale Fließtext und das möchte ich jetzt ändern. Schauen wir uns das ganze mal im Quelltext an. Ich gehe in mein DOM-Inspector hinein. Und Sie sehen ich habe nicht gelogen, hier steht ein align right und hier ein wp-caption-text. Das sind Inhalte, die direkt aus dem WYSIWYG-Editor von WordPress stammen. Das heißt, dieses align right, dieses wp-caption und wp-caption-text, das kann ich jetzt enfach verwenden und das hier auch dann entsprechend formatieren. Zunächst einmal möchte ich das ganze etwas übersichtlicher gestalten. Ich habe ja in meinem Theme bisher schon eine carousel.css und eine style.css. Diese style.css, die wird mir ja vorgeschrieben von WordPress. Da habe ich hier oben einen Kommentarblog und hier möchte ich jetzt einfach neuen Inhalt einfügen, align left, dann soll das ganze float left sein, float right für align right und der wp-caption-text, der soll etwas kleiner sein und kursiv gesetzt werden. Ich könnte natürlich das ganze auch in meiner carousel.css einfügen, aber in meinen Projekten mache ich es meistens so, dass ich eine css-Datei habe, die stand noch aus der muster.html Zeit, und innerhalb von dieser style.css, da schreibe ich alles was neu ist, was WordPress-spezifisch ist. Jetzt muss ich nur noch dafür sorgen, dass diese style-sheet-Datei auch tatsächlich geladen wird. Dazu gehe ich nach header.php und, wenn ich jetzt einfach diese Zeile hier nehme und sie kopiere, dann kann ich einfach dieses carousel ersetzen durch ein style.css. Ich speichere alle Dateien ab und jetzt schauen wir mal was passiert, wenn ich diese Seite neu lade. Dann sehen Sie, ist dieses Bild hier jetzt nach rechts ausgerückt und ich habe hier auch eine etwas schöner formatierte Bildunterschrift. Werfen wir nochmal einen Blick auf alle Wanderungen. Wilder Kaiser - hier habe ich ein sehr, sehr großes Bild, warum? Weil ich mir mal einen möglichst, na ja, sagen wir mal, einfältigen Redakteur vorgestellt habe, jemand der die Originalbilder von der eigenen Digitalkamera nimmt. Die sind also sehr, sehr groß, das heißt, ich möchte jetzt per css diese Bilder, die besonders groß sind, auch etwas kleiner machen. Ich gehe hier einfach nach style.css und sage, dass alle Bilder eine maximale Breite von 100% haben sollen, und dann kann es auch nicht passieren, dass hier ein übergroßes Bild angezeigt wird und wenn ich das ganze neu lade, dann sehen Sie, ist das Bild jetzt zwar schon von der Breite her maximal 100%. Jetzt schaut's schon ziemlich krass und ziemlich schroff aus. So schroff ist der Wilde Kaiser dann in Wahrheit auch nicht. Ich muss die Höhe noch anpassen, nähmlich automatisch, das heißt in dem Fall wird die Höhe auch etwas weniger groß gestaucht. Und ich habe jetzt ein Bild, das in einer beliebigen Größe von einem Redakteur, ob willentlich oder unwillentlich hochgeladen worden ist und dieses große Bild wird automatisch maximal 100% breit dargestellt.

WordPress-Themes mit Bootstrap

Verwirklichen Sie Ihre eigenen Designvorstellungen bei Ihrem Webauftritt und sehen Sie, wie Sie WordPress-Seiten über Plug-ins und Themes wie z.B. Bootstrap erweitern können.

2 Std. 33 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!