So passt du mit CSS dein WordPress Design an

WordPress ist ein großartiges Tool, um schnell und unkompliziert Webseiten zu erstellen – auch ohne großes Fachwissen. Allerdings stellt sich bei der Verwendung von CSS-Template ein Problem, das für einige Seitenbetreiber so nicht hinnehmbar ist.

Denn wenn bei der Erstellung der Website eines der üblichen Themes verwendet wird, wird es zahlreiche andere Websites geben, die genau dieses oder nur ein minimal modifiziertes Theme verwenden. Diese Ähnlichkeit im Design ist nicht hinnehmbar, wenn es darum geht, ein größeres Projekt zu verwirklichen, mit dem Geld verdient werden soll. Aus diesem Grund ist es wichtig, nach einer Möglichkeit zu suchen, das Design anzupassen. Und zum Glück ist das mit relativ geringem Aufwand möglich – durch die Modifizierung der CSS-Datei, die dem Aussehen der mit WordPress aufgesetzten Seite zugrunde liegt.

Etwas Theorie: Was bedeutet CSS und wofür wird es benötigt?

CSS steht für „Cascading Style Sheets“. Ein Style Sheet ist dabei einfach eine Datei, die Angaben zum gewünschten Aussehen der Seite hat. „Cascading“ bezieht sich auf eine Anordnung, die einem Wasserfall ähnelt. Hierbei geht es darum, dass mehrere dieser Style Sheets möglich sind, die sich gegenseitig überlagern – wie bei einem Wasserfall. Das ist ein besonderer Vorteil, wenn vermieden werden soll, dass bereits vorhandene, wichtige Style Sheets gelöscht werden müssen.

Das spielt auch für die WordPress-Templates eine Rolle. Wenn du dein eigenes Styling anlegst, musst du also keine vorgefertigten Dateien löschen. Es genügt, wen du eine neue, eigene erstellst. Diese wird automatisch für die Veränderung des Templates herangezogen. Die Individualisierung ist auf diese Weise besonders risikoarm und flexibel.

Beispielhafter Aufbau einer CSS-Anweisung:

  Selektor [, Selektor2, …]
      {
         Eigenschaft-1: Wert-1;
         …
         Eigenschaft-n: Wert-n[;]
      }
  /* Kommentar */
  /* In eckigen Klammern stehen optionale Angaben */

Wenn du dich tiefer mit CSS befassen möchtest, ist w3schools.com meine Empfehlung. Einen guten Überblick bekommst du bei der allwissenden Wikipedia.

So kannst du dein WordPress CSS anpassen

Vermeide auf jeden Fall, Dateien zu verändern, die bei deinem Theme mitgeliefert worden sind. Das betrifft in diesem Zusammenhang alle Dateien mit einer .css-Endung – namentlich die Datei style.css. Diese enthält das ursprüngliche Aussehen des Templates. Wenn du den Inhalt dieser Datei veränderst, gehen die Informationen verloren und du wirst das eigentliche Aussehen im schlimmsten Fall nicht wieder herstellen können. Außerdem werden die Änderungen, die du vornimmst, das nächste Update des Designers des Templates nicht überstehen. Sie werden verloren gehen, indem sie überschrieben werden.

Es gibt verschiedene Möglichkeiten, wie du deine Vorstellung umsetzen kannst. Sie bieten alle individuelle Vorteile und Nachteile.

1. Das Child Theme

Dieser Weg der Anpassung ist derjenige, der am ursprünglichsten ist. Hier musst du eine neue Datei erstellen, die deinen persönlichen Quellcode enthält. Dazu legst du in deiner WordPress-Dateistruktur in wp-content/themes einen neuen Ordner an. Dieser Ordner enthält die Datei mit dem WordPress Child Theme, die du style.css nennst. Die originale style.css wird hierdurch nicht überschrieben, da sie sich in einem anderen Ordner befindet. Diese neue Datei kannst du mit neuen CSS-Anweisungen füllen.

Hierzu kannst du entweder den WordPress-Editor oder einen Editor auf deinem Rechner verwenden. Wenn du dich für den WordPress-Editor entscheidest, dann findest du diesen in deinem Dashboard in der Admin-Ansicht deiner WordPress-Installation. Er befindet sich unter Design –> Editor.
Einen Editor auf deinem Rechner kannst du verwenden, indem du über FTP auf die Installation zugreifst.

Beispielinhalt für die style.css:

/*
 Theme Name:   Twenty Fifteen Child
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twenty-fifteen-child
*/

color: {
 #666666;
}

Vorteile
Der Vorteil dieser Vorgehensweise liegt darin, dass du volle Kontrolle darüber hast, was du tust. Du erstellst von Hand eine Datei und kannst ihren Inhalt nach deinen Vorstellungen und Wünschen beeinflussen. Wenn du weißt, wie es funktioniert, kannst du auf diese Weise deinen persönlichen Style sehr schnell umsetzen und unkompliziert anpassen.

Nachteile
Um auf diese Weise vorzugehen, benötigst du Kenntnisse darin, wie du mit Dateien umgehen kannst. Außerdem muss der Quellcode einer Website für dich versteh-bar sein. Du solltest in der Lage sein, Fehler zu erkennen und auszubessern. Dazu gehört auch ein gewisses Maß an Nervenstärke, wenn es längere Zeit dauert, bis ein Fehler gefunden ist. Deshalb ist es empfehlenswert, zunächst die anderen Methoden auszuprobieren und etwas Erfahrung zu sammeln, falls du diese bisher noch nicht hast.

2. Der WordPress-Theme Customizer

Der WordPress Customizer stellt grundlegende Anpassungsmöglichkeiten für alle Themes parat. Viele Theme-Anbieter haben dieses Tool aber mit einer Fülle von Einstellungen aufgebohrt. Hier werden die Einstellungen des Themes geöffnet, die über den Customizer angepasst werden können. Die Änderungen sind vor der Übernahme sichtbar und können auf diese Weise kontrolliert werden, bevor sie öffentlich zugänglich gemacht werden.

Um festzustellen, ob das von dir gewünschte oder ausgewählte Theme diese Möglichkeit ebenfalls eröffnet, kannst du dir die Beschreibung beim Kauf oder die Dokumentation ansehen. Hier findest du meist Angaben dazu, ob die Anpassung über den Costumizer verfügbar ist. Wenn du ein solches Theme hast, hat der Entwickler die Erlaubnis gegeben, dass das CSS über den Customizer angepasst werden darf.

Auf wordpress.com benötigst du einen Premium oder Business Account, um Custom CSS zu nutzen.

Du kannst auch hier über dein Dashboard als Administrator Zugang finden. Du gehst über Design auf Anpassen. Auf der linken Seite findet sich das Menü. Dort kannst du in einem Textfeld deine CSS-Codes eingeben. Die Vorschau der Änderungen findest du auf der rechten Seite. Auf diese Weise kannst du die Auswirkungen deiner Eingaben kontrollieren, bevor du dich zu einer Veröffentlichung entschließt. Nach der Veröffentlichung wird diese auf deiner Seite sofort sichtbar, wenn du einen Reload vorgenommen hast.

Vorteile
Auch hier liegt der Vorteil im einfachen Umgang. Du findest alle deine Handlungsmöglichkeiten in deinem gewohnten Dashboard vor, ohne dass du über einen FTP-Zugang umständlich Dateien erstellen und verändern müsstest. Damit ist diese Methode auch für Anfänger geeignet. Besonders schön ist hier die Vorschau, die es dir erlaubt, Änderungen zu überprüfen, bevor du dich für eine Veröffentlichung entscheidest. Außerdem wird der Customizer zum WordPress-Theme mitgeliefert, wenn du dich für ein Theme entschieden hast, das dir diese Option zur Verfügung stellt. Du musst also keine neuen Programme installieren und befürchten, dass bei einer Installation etwas schiefgehen könnte.

Nachteile
Der Nachteil des Customizer ist, dass er nicht für jedes Theme verfügbar ist. Er nützt dir also nicht viel, wenn du bereits ein Theme besitzt und auf dieses der Customizer nicht anwendbar ist. Außerdem bist du auch hier darauf angewiesen, CSS zu beherrschen. Denn du musst hier deinen Quellcode per Hand eingeben. Du musst wissen, was du tust und damit dich unter Umständen mit einigen Tutorials und Lehrbüchern zum Thema CSS auseinandersetzen.

3. CSS Plugins und ihre Verwendung

Ein weiterer und gern genutzter Weg zu einem individuellen Design sind spezielle CSS Plugins, die dir die Anpassung besonders einfach machen können. Es gibt verschiedene Plugins mit unterschiedlichem Funktionsumfang.

Vorteile
Der besondere Vorteil eines Plugins liegt darin, dass es unabhängig vom Theme funktioniert. Das bedeutet, dass du dein Theme wechseln kannst, ohne deine Anpassungen zu verlieren. Das Plugin speichert deine Änderungen und wendet sie auf das neue Theme an, soweit es möglich ist. Außerdem kannst du auch bei dieser Lösung darauf verzichten, eigene Ordner und Dateien zu erstellen, wobei gerade bei Ungeübten einiges schiefgehen kann. Du kannst ganz entspannt über dein Dashboard auf den Funktionsumfang der Plugins zugreifen.

Nachteile
Es kann sich ergeben, dass die Änderungen hier nicht auf das neue Theme passen. Das kann durchaus ein Nachteil sein, wenn du das Plugin im Vertrauen darauf verwendet hast, deine Änderungen bei jedem Theme behalten zu können. Einige der Plugins sind außerdem mit Kosten verbunden.

3b. Das Simple Custom CSS Plugin

Beim Simple Custom CSS Plugin handelt es sich um ein kostenloses Plugin zum Erstellen eigener Designs über CSS.

Es ist besonders leicht zu installieren und handhaben, das es lediglich aktiviert werden muss. Es ist keine Konfiguration erforderlich. Das macht seinen Einsatz besonders angenehm und es eignet sich deshalb auch dann, wenn du deine Möglichkeiten zur CSS-Anpassung einfach nur einmal ausprobieren möchtest.

Wenn du über Design auf „Custom CSS“ gehst, findest du in deinem Dashboard das Eingabefeld, in das du deinen CSS-Code eingibst. Nachdem du diesen gespeichert hast, wird er auf deiner Website aktiv. Allerdings hat das Plugin den Nachteil, dass es keine Vorschau anbietet. Du musst deine Änderungen also tatsächlich speichern, bevor du ihre Auswirkungen sehen kannst. Dennoch kannst du sie natürlich unkompliziert durch Löschen rückgängig machen, falls sie dir nicht gefallen. Außerdem gibt es hier – im Gegensatz zum Jetpack Plugin – keine Möglichkeit, auf Vorversionen zurückzugehen.

3a. Das Jetpack Plugin

Auch hier handelt es sich um ein kostenloses Plugin, das sich ebenfalls großer Beliebtheit erfreut.

Jetpack gehört zu den CSS-Plugins, die besonders häufig verwendet werden. Es wird geschätzt, dass es auf mehr als einer Million WordPress-Installationen genutzt wird.

Wenn du das Plugin aktiviert hast, wird ein CSS-Editor verfügbar. Über diesen kannst du dein Theme nach deinen Wünschen anpassen. Diesen findest du unter Design -> Edit CSS. Außerdem bietet dir das Plugin noch weitere Möglichkeiten. Zum Beispiel kannst du SASS oder LESS verwenden und du kannst bestimmen, ob dein CSS-Code den vorhandenen nicht ergänzen, sondern ersetzen soll.

Wenn das Theme eine mobile Version zur Verfügung stellt, kannst du auch darauf zugreifen und deinen Quellcode bei diesem anwenden lassen. Und auch hier bietet sich dir die Möglichkeit, in einem Vorschau-Fenster deine Änderungen zu überprüfen, bevor du sie abschickst. Wenn dir Änderungen nicht gefallen haben, kannst du zu einer früheren CSS-Version zurückgehen.

3c. Das CSS Hero Plugin (kostenpflichtig)

Beim CSS Hero Plugin handelt es sich um ein kostenpflichtiges CSS-Plugin. Momentan kostet die günstigste Variante 14 USD.

Allerdings kann es sein, dass sich die Investition für dich lohnt. Denn CSS Hero bietet dir einen interessanten Funktionsumfang, der ein einfach zu bedienendes Interface enthält. Hier hast du die Möglichkeit, die Elemente der Themes anzuwählen und sie zu verändern.

Allerdings ist das Plugin nicht direkt für jedes Theme verwendbar. Es bezieht sich auf ausgewählte Themes. Bei anderen Themes gibt es dennoch den „Rocket Mode“, der diese für das Plugin verfügbar macht.

Der besondere Vorteil des CSS Hero liegt darin, dass es mit ihm nicht erforderlich ist, CSS-Code zu verstehen. Der Umgang mit dem Quellcode wird ersetzt durch das Interface, das mit der Maus bedient werden kann. Auch hier gibt es eine Vorschau der Änderungen und die Möglichkeit, zu Vorgänger-Versionen des Designs zu wechseln. Das Plugin ist also vor allem dann empfehlenswert, wenn deine CSS-Kenntnisse nicht ausreichend sind und du nicht die Zeit und/oder Lust aufbringen kannst, dich näher mit CSS auseinanderzusetzen.

4. Premium Themes wie Enfold und Divi

Viele WordPress-Themes bieten einen eigenen Bereich für benutzerdefiniertes CSS an. Dazu gehören auch das Divi Theme und Enfold Theme. Wenn du dich auf die Suche begibst, wirst du vielleicht noch weitere dieser Themes finden.

Beim Divi gibt es einen eigenen Bereich im Dashboard, welcher nach dem Theme selbst benannt ist. Du findest es, wenn du zu den „Theme Optionen“ navigierst. Hier hältst du im Allgemein-Tab ausschau nach dem „Benutzerdefinierte CSS“ Feld. Dazu einfach ganz nach unten scrollen. Hier kannst du den Code zu deinem gewünschten CSS eingeben und auf diese Weise das Aussehen deines Theme anpassen. Die Änderungen, die du eingegeben hast, werden nach einem Reload auf der Seite sichtbar. Außerdem findet sich in jedem der Module von Divi ein ähnliches Feld – ein Custom CSS Tab – der es dir auch hier erlaubt, deinen eigenen Quellcode einzugeben.

Bei Enfold findest du im Bereich „Allgemeines Styling“ den Abschnitt „Quick CSS“. Auch hier ganz nach unten scrollen.

Leider kann der Quick-CSS Textbereich momentan nicht in der Breite vergrößert werden. Das macht die Arbeit damit etwas unübersichtlich. Mit etwas Glück wird das aber mit dem nächsten Update wieder möglich.

Vorteile
Dieses Vorgehen ist besonders einfach und mühelos. CSS-Änderungen werden sofort sichtbar und du weißt, dass sie richtig geladen werden. Du nimmst die Änderungen über dein Dashboard vor und musst nicht umständlich mit Dateien arbeiten.

Nachteile
Du kannst nicht bei jedem Theme auf diese Art und Weise vorgehen. Du benötigst ein Theme, das dir diese Möglichkeiten bietet.

Fazit

Wenn du einen professionellen Web-Auftritt erschaffen möchtest – insbesondere dann, wenn du dabei auch Kunden bedienen willst – solltest du dein Design anpassen können. Nur so kannst du dich von deiner Konkurrenz abheben und nur so wird deine Seite individuell und unverwechselbar. WordPress macht es dir leicht. Im Vergleich zur eigenhändigen Erstellung von Webseiten hast du hier die Möglichkeit, auf viele Hilfestellungen zuzugreifen.

Welche davon du in Anspruch nimmst, bleibt deinem ganz persönlichen Geschmack überlassen. Wenn du besonders begabt bist, kannst du selbst eine neue CSS-Datei erstellen und einbinden. Leichter machen es dir der Customizer, eines der Plugins oder die Wahl eines Themes, das es dir erlaubt, sein CSS über dein Dashboard zu manipulieren.