CSS und WordPress: der ultimative Guide zum Anpassen deines Bloglayouts

Hast du dich schon mal gefragt, wie du das Layout von deinem WordPress-Blog aufpeppen kannst?

Na, dann mal los, denn in diesem Artikel lernst du CSS kennen: die Superkraft, mit der du deinen Blog in ein wahres Meisterwerk verwandeln kannst. 🤩

Was in aller Welt ist CSS?!

Die Abkürzung CSS steht für Cascading Style Sheets: CSS ist eine Coding-Sprache, mit der du das Aussehen deiner Webseite definieren kannst. Du legst damit fest, welche Farben der Hintergrund und die Elemente haben sollen, wie groß die Schrift ist, wie breit deine Sidebar sein soll und so weiter.

Ohne CSS würde jede Webseite einfach nur langweilig aus schwarzer Schrift auf weißem Grund bestehen. Gäääähn!

Du kannst dir CSS also als Make-Up für Webseiten vorstellen – es verleiht deinem Blog den Glanz, den er verdient. 😉

Wie sieht CSS aus?

Die CSS-Anweisungen werden in einer Datei gespeichert, die mit dem Kürzel .css endet. Traditionell wird dieses sogenannte Stylesheet oft als style.css abgespeichert.

Du kannst dir die CSS-Gestaltung jeder Webseite anschauen, indem du auf ein Element rechtsklickst und „Untersuchen“ wählst: das zeigt dir den verwendeten CSS-Code. Cool, oder?

CSS schreibst du so, dass du das gewünschte HTML-Element ansprichst – mit seinem Elementnamen, als Klasse oder ID – und dann die Formatierungsanweisungen in geschweifte Klammern { } packst.

Hier sagen wir, dass alle Absätze (p ist das HTML-Element, das einen Absatz generiert) eine Schriftgröße von 16px haben sollen und der Text als Blocksatz gesetzt sein soll:

p {
   font-size: 16px;
   text-align: justify;
}

Klassen sprichst du über einen vorangestellten Punkt an. Die folgende Anweisung verleiht allen Bildern, die im HTML die Klasse avatar bekommen haben, einen grauen Rahmen.

HTML:

<img class="avatar">

CSS:

img.avatar {
   border: 2px solid #ccc;
}

HTMl-Elemente mit einer ID sprichst du im CSS über eine Raute an – in diesem Falle gibst du dem Bereich, in dem die Kommentare angezeigt werden, nach oben hin einen Abstand von 20px.

HTML:

<div id="kommentare">

CSS:

#kommentare {
   margin-top: 20px;
}

Das Who’s who der CSS-Anweisungen

Es gibt eine riesige Menge von CSS-Definitionen.

Dir hier jetzt alle verfügbaren CSS-Anweisungen vorzustellen, würde den Rahmen dieses Beitrags ganz dezent sprengen. 😉
Ganz genauso wie Deutsch oder Französisch entwickeln sich nämlich auch Coding-Sprachen weiter und werden im Laufe der Jahre immer umfangreicher. Um die Jahrtausendwende herum lag der Fokus bei CSS auf Farben, Größen und grundlegenden Positionsangaben (und nicht zu vergessen: Rahmen! 😀 ). Mittlerweile kannst du mit CSS auch Animationen erstellen und dein Layout sehr flexibel an unterschiedliche Ausgabegeräte anpassen, damit es auf Smartphones genauso schick aussieht wie auf großen Bildschirmen.

Die folgende Liste soll dir nur mal schon einen ganz groben Überblick verschaffen, was was ist:

• background & color: Farbe
• alles, was mit text- oder font- beginnt – Schriftgestaltung
• border: Linien
• margin & padding: Abstände
• width, height: Dimensionen
• position, display, float & clear: Anzeige und Ausrichtung von Elementen

Du siehst schon: CSS ist wirklich mächtig.

Der Charme von WordPress und CSS

WordPress ist bereits ein verdammt großartiges Content-Management-System (CMS) für Blogger. Damit hast du definitiv die richtige Entscheidung getroffen!

Und natürlich bringt WordPress auch von Anfang an einige Layouts mit – du startest also nicht mit der besagten schwarzen Schrift auf weißem Hintergrund. 😉
Du kannst dir auch ganz einfach andere Layouts bzw. Themes aussuchen, es gibt Tausende kostenloser Themes und ebenso viele Premium-Themes – das ist schon wirklich cool!

Aber seien wir ehrlich: manchmal braucht es ein wenig mehr Pep, um aus der Masse herauszustechen. Denn egal wie schick das von dir ausgesuchte Theme ist – sofern du es nicht individuell in Auftrag gegeben hast, wird es so oder so ähnlich auch schon auf vielen anderen Blogs verwendet.

Hier kommt CSS ins Spiel! Damit kannst du dein Theme nämlich haargenau an deine Wünsche anpassen.

So, dann wollen wir mal! Bist du bereit? 🙂

Safety first…

Die obligatorischen Sicherheitshinweise:

1. Leg dir ein Backup an von allem, was du veränderst! Du kannst die CSS-Anweisungen über copy & paste einfach in eine leere Textdatei sichern und im Zweifelsfall einfach wieder zurückkopieren.
2. Wurschtle nicht live auf deinem Blog herum, wenn du nicht genau weißt, was du tust. Erstell dir einen Testblog und probiere dort in Ruhe alles aus. Du willst ja schließlich nicht, dass deine Leser plötzlich in einem bunten Scherbenhaufen landen.

Wo kannst du in WordPress CSS eingeben?

Bei WordPress hast du drei verschiedene Möglichkeiten, um dein Layout mit deinem eigenen CSS anzupassen:

Option 1: über den Customizer

WordPress ermöglicht es dir sehr komfortabel, das CSS direkt im Adminbereich zu bearbeiten.

Du brauchst dafür also kein anderes Programm.

Klick links in der Sidebar einfach auf den Menüpunkt „Design“ und geh dann auf „Customizer“. Je nachdem, wie umfangreich dein Theme programmiert ist, kannst du hier superviele Einstellungen über Formulare vornehmen.
Ganz unten findest du schließlich den Punkt „Zusätzliches CSS“ – das ist das, wo wir hinwollen!

Hier kannst du nämlich direkt deinen CSS-Code eintippen: frei und wild und unabhängig von irgendwelchen vorgegebenen Einstellungsmöglichkeiten! 🥳

Wie der Name schon sagt, gibst du hier zusätzliches CSS ein. Das wird also am Ende an die Anweisungen drangehängt, die dein Layout ohnehin schon verwendet. Damit überschreibt es die Angaben, die weiter oben im Stylesheet standen.

Option 2: in der style.css via WordPress

Alternativ zum Customizer kannst du das Stylesheet deines Themes auch direkt im Theme-Datei-Editor anpassen. Der Theme-Datei-Editor listet dir sämtliche Dateien auf, aus denen dein Theme besteht. Du kannst sie direkt von WordPress aus bearbeiten.

Dadurch musst du also nicht bereits bestehende Gestaltungsanweisungen überschreiben (wie es das zusätzliche CSS im Customier tut), sondern kannst sie von vornherein nach deinen Wünschen definieren.

Das macht die ganze Sache natürlich deutlich schlanker! Teilweise ist das mit dem nachträglichen Überschreiben auch nicht ganz so trivial, gerade bei sehr verschachtelten Anweisungen.

Allerdings veränderst du hiermit auch bestehende Angaben. Du solltest also mehr oder weniger wissen, was du tust. 🤓

Den Theme-Datei-Editor findest du, indem du links im Menü auf „Design“ gehst und dann den letzten Eintrag wählst.

Option 3: in der style.css auf deinem Webspace

Der Theme-Datei-Editor ist schon ganz nett. Wenn du aber bereits etwas Erfahrung im Coden hast, wirst du so wie ich vermutlich lieber mit eigens dafür entwickelten Programmen arbeiten wollen. Hier hast du andere Auto-Vervollständigungen, farbliche Hervorhebungen der Anweisungen und so weiter.

Um dein Stylesheet in einem Texteditor wie Brackets oder Sublime zu öffnen, greifst du mit einer FTP-Verbindung direkt auf die Dateien auf deinem Webspace zu. Du findest dein Theme im Verzeichnis deines Blogs unter wp-content/themes/deintheme, dort liegt die style.css.

Option 4: nutz ein Child-Theme

Du hast jetzt drei Wege kennengelernt, um das CSS deines Layout zu verändern. Für kleinere Anpassungen ist das meist auch völlig ausreichend.

Der Vollständigkeit halber sei hier jetzt auch noch die sauberste und sicherste Option genannt, um dein Layout in WordPress zu verändern: über ein sogenanntes Child-Theme.
Damit kannst du nicht nur das CSS anpassen, sondern auch das PHP und HTML deines Layouts.

Da das an dieser Stelle aber zu weit führen würde, verweise ich dich mal auf meinen Artikel über Child-Themes:

Einige CSS-Tipps, um dein Bloglayout zu rocken

Jetzt ist es an der Zeit, deinen CSS-Zauberstab zu schwingen!

Du kannst beispielsweise deine Blogüberschrift mit font-family stylen, die Farben deiner Links mit color ändern oder deine Sidebar mit margin und padding neu anordnen.

Die Möglichkeiten sind endlos! Aber hey, übertreib es nicht – du willst bei deinen Bloglesern schließlich keine Augenblutungen verursachen. 😅

Verzweifle nicht, wenn etwas schiefgeht

CSS kann manchmal frustrierend sein, besonders wenn dein Blog plötzlich wie ein Gemälde von Picasso aussieht. 🤪 Aber keine Sorge, das ist normal!

Experimentiere, probiere herum und sei nicht entmutigt. In der CSS-Welt ist das Scheitern der Weg zum Erfolg.

Es kann nichts explodieren und im Zweifelsfall kannst du dir immer wieder dein Backup wiederherstellen.

Google ist dein Freund

Irgendetwas funktioniert nicht und du kommst partout nicht dahinter, wieso? Google es! Das Schöne am Coden ist, dass du mit allergrößter Wahrscheinlichkeit nie der erste bist, der genau vor diesem Problem steht. Und meistens hat auch schon irgendjemand auf Stack Overflow oder ähnlichen Seiten nach Hilfe gefragt und Antworten erhalten, die auch dir weiterhelfen.

Kommentier deinen Code

Es ist leicht, im CSS-Chaos verloren zu gehen. Bleib daher organisiert und kommentier deinen Code. Du wirst deinem Vergangenheits-Ich verdammt dankbar sein, wenn du Wochen später versuchst herauszufinden, was in aller Welt du da versucht hast zu coden.

Kommentare in CSS schreibst du so:

/* ich bin ein Kommentar */

Copy & Paste ist super, aber mach es mit Stil

Wie gesagt, du kannst den CSS-Code jeder beliebigen fremden Webseite einsehen. Das ist megacool, weil du dadurch immer schauen kannst, wie dieses oder jenes funktioniert. So lernst du CSS!

Natürlich kannst du dir die Anweisungen dann auch rüberkopieren auf deinen eigenen Blog.

Aber hey: nimm dir Zeit, um den kopierten Code zu verstehen und anzupassen. Kopier nicht einfach irgendwas, von dem du nicht weißt, was genau es eigentlich tut.

Und selbstverständlich solltest du die Farben & Co. an dein eigenes Layout anpassen und nicht einfach etwas klauen. Schließlich geht es ja gerade darum, deinen Blog individuell zu gestalten und nach Herzenslust anzupassen.

Der Schlüssel zum Erfolg liegt darin, Spaß mit den unendlichen Möglichkeiten von CSS zu haben und deine kreative Seite zum Vorschein zu bringen. 🙂

Also leg los und rock dein WordPress-Layout! 🤩