CSS und WordPress - Bloglayout anpassen

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. ­čÖé

Fazit

In der Blogosph├Ąre geht es darum, deine Stimme zu erheben und deine Individualit├Ąt zum Ausdruck zu bringen. Mit CSS kannst du deinem Bloglayout eine pers├Ânliche Note verleihen und sicherstellen, dass er genauso einzigartig ist wie du selbst.

Also leg los und rock dein WordPress-Layout! ­čĄę