Willst du versuchen, WordPress CSS zu editieren, aber hast keine Ahnung, wo du anfangen sollst? Mit CSS-Styling kannst du das Aussehen deiner Webseite global oder auf bestimmten Seiten bearbeiten. Füge Farben hinzu, lasse bestimmte Elemente weg, entwerfe ein Layout und ändere im Grunde genommen genau, wie alles in deinem WordPress Theme aussieht.
Wenn du dich mit der Entwicklungsumgebung von WordPress besser vertraut machen willst, oder einfach nur das Aussehen deiner Webseite besser kontrollieren willst, brauchst du Kenntnisse darüber, wie man CSS in WordPress hinzufügt (und wie man das, was bereits vorhanden ist, ändert).
Indem du dein Theme bearbeitest und zusätzliche eigene CSS einbaust, kannst du jedes einzelne visuelle Element auf deiner Webseite optimieren. Heute werden wir es uns genauer ansehen.
Bereit anzufangen? Dann los geht’s!
Was ist CSS-Bearbeitung?
CSS steht für Cascading Style Sheets und ist neben HTML die beliebteste Websprache. Die beiden gehen Hand in Hand, da CSS zum Stylen von HTML-Elementen verwendet wird. HTML legt den Grundstein für das Aussehen einer Webseite und CSS wird verwendet, um sie weiter zu stylen.
CSS gibt dir die Möglichkeit, eine Webseite responsive zu machen, Farben hinzuzufügen, Schriftarten zu ändern, das Layout zu modifizieren und ganz allgemein die visuelle Präsentation einer Webseite zu verfeinern. Wie HTML und JavaScript ist CSS eine clientseitige Frontend-Sprache, was bedeutet, dass sie auf der Seite des Benutzers ausgeführt wird, und nicht auf dem Backend-Server.
Wenn du in die WordPress-Entwicklung eintauchst, sind HTML, CSS, JavaScript und PHP die Sprachen, die du kennen musst. Das ist der Kern des CMS, sowie die vielen Themes und Plugins.
Aber auch wenn du kein Webdesigner oder -entwickler bist, ist es gut, sich ein wenig CSS anzueignen, da du damit Elemente auf deiner Webseite bewegen oder stylen kannst, oder kleine ästhetische Änderungen an deinem Theme vornehmen kannst, um es besser an dich anzupassen.
WordPress und CSS
Innerhalb von WordPress ist CSS ein bisschen anders. Es wird von Themes gesteuert, die sich aus Template-Dateien, Template-Tags und natürlich dem CSS-Stylesheet zusammensetzen. Obwohl sie von deinem Theme generiert werden, sind sie alle von dir editierbar.
Template-Dateien unterteilen Teile deiner Webseite in Abschnitte (wie header.php oder archive.php), und Template-Tags werden verwendet, um sie und andere Inhalte aus deiner Datenbank aufzurufen. Diese Dateien bestehen eigentlich hauptsächlich aus PHP und HTML, obwohl du CSS hinzufügen könntest, wenn du es nötig hättest.
Was du wirklich suchst, ist das Stylesheet, oder style.css. Um das Aussehen deiner Webseite zu verändern, musst du lernen, wie du in dieser Datei Code hinzufügen und bearbeiten kannst.
Wie du dein WordPress Theme mit CSS anpasst
Wenn du dein Theme anpassen und das Aussehen deiner Webseite mit CSS verändern möchtest, musst du entweder deinen eigenen Code hinzufügen oder das, was bereits vorhanden ist, bearbeiten. Es gibt Möglichkeiten, CSS hinzuzufügen, ohne dass du jemals Theme-Dateien anfassen musst, aber um bestehenden Theme-Code zu ändern, musst du auf das Stylesheet deiner Webseite zugreifen.
Wenn ihr diese Änderungen vornehmt, solltet ihr eines wissen: Wenn euer Theme aktualisiert wird, werden alle Änderungen, die ihr an style.css, functions.php oder anderen Theme-Template-Dateien vorgenommen habt, gelöscht. Generell solltest du keine direkten Änderungen an deiner Webseite im Editor vornehmen, ohne ein Child Theme zu verwenden.
Das Stylesheet ist wie eine „Anweisungsliste“ für deine Webseite, die genau festlegt, wie sie gestylt wird und wie der CSS-Code programmiert wird. Hier wirst du den Großteil deines Editierens erledigen, aber wir zeigen dir auch, wie du auf andere Theme-Template-Dateien zugreifen kannst, wie zum Beispiel header.php und footer.php.
Es gibt zwei Möglichkeiten, auf das Stylesheet deiner WordPress Webseite zuzugreifen: über das WordPress Dashboard oder über einen FTP-Client. Wir werden beide Möglichkeiten abdecken.
Du fühlst dich nicht wohl dabei, dies selbst zu tun? Dann solltest du einen WordPress-Entwickler beauftragen, diesen Schritt für dich zu erledigen.
WordPress CSS im Dashboard bearbeiten
Der einfachste und bequemste Weg, auf dein CSS Stylesheet zuzugreifen, ist direkt im WordPress Dashboard. Du brauchst keine FTP-Programme oder Code-Editoren zu installieren. Du kannst jede Datei mit eingebauter Syntaxhervorhebung und Funktionsdokumentation direkt bearbeiten.
Bevor du größere Änderungen an den Core-Dateien vornimmst, solltest du immer ein Backup deiner WordPress Webseite machen. Es ist sehr leicht, versehentlich einen Fehler zu machen, der das Erscheinungsbild deiner Webseite zerstören könnte, wenn du neu in CSS bist, und es könnte schwierig sein, herauszufinden, wie du deine Änderungen rückgängig machen kannst.
Sobald du ein Backup und ein Child Theme erstellt hast, logge dich in dein Backend ein. Du kannst den Editor finden, indem du im Menü auf Aussehen > Theme Editor klickst.
Du solltest ein Popup sehen, das dich davor warnt, direkte Änderungen an diesen Dateien vorzunehmen. Keine Sorge, klicke einfach auf „Ich verstehe“. Es ist nur eine Warnung, ein Child Theme zu verwenden und eine Sicherungskopie deiner Webseite zu erstellen, bevor du größere Änderungen vornimmst. Befolge diese Schritte, und du kannst sicher editieren.
Und jetzt bist du drin! Du solltest standardmäßig auf dem Stylesheet sein, aber wenn nicht, schaue im Menü auf der rechten Seite nach, um deine Theme-Dateien zu sehen.
Neben der style.css werdet ihr auch Zugriff auf die Template-Dateien wie functions.php, header.php und single.php haben. All diese haben Einfluss darauf, wie sich bestimmte Seiten auf deiner Webseite verhalten.
Aber du solltest dich mit PHP vertraut machen, bevor du dich in diese speziellen Dateien vertiefst.
Denk einfach daran: die meisten CSS-Änderungen, die du hier machst, werden global sein. Wenn du zum Beispiel deine H1-Header auf eine bestimmte Schriftart änderst, wird dies für jede einzelne Seite deiner Webseite wirksam. Du wirst eine spezielle Syntax benötigen, um das Styling bestimmter Seiten anzupassen.
Theme-Dateien direkt bearbeiten
Was ist, wenn du keinen Zugang zum Theme Editor hast oder deine Arbeit lieber über FTP erledigen möchtest? Es ist einfacher, den Backend-Editor zu benutzen, aber einige Themes oder Plugins können ihn deaktivieren. Wenn das der Fall ist, benötigst du eine Verbindung zu deiner Webseite per FTP.
FTP, oder File Transfer Protocol, ermöglicht es dir, auf die Dateien einer Webseite aus der Ferne zuzugreifen und sie zu ändern. Als erstes musst du FileZilla oder einen anderen FTP-Client herunterladen.
Als nächstes solltest du deinen Host kontaktieren und nach deinen FTP-Zugangsdaten fragen (Host, Port und Benutzername/Passwort, falls zutreffend). Wenn dein Host ein Dashboard hat, kannst du sie vielleicht finden, indem du dich einloggst.
Die Zugangsdaten der Kinsta-Benutzer befinden sich im MyKinsta-Dashboard unter Seiten > SFTP/SSH.
Sobald du sie hast, starte deinen FTP-Client und gib diese Informationen ein. Wenn es nicht funktioniert, versuche „sftp://“ vor die URL in der Sektion Host zu setzen.
Sobald du drin bist, kannst du deine style.css Datei finden, indem du auf den wp-content Ordner klickst, um sie zu öffnen, dann den Ordner deines Themes (wie das Twenty Twenty Theme) und dann scrollst, bis du die style.css siehst.
Öffne sie mit einem Doppelklick (oder rechtsklicke und wähle View/Edit) und nimm deine Änderungen vor. Denke daran zu speichern und wieder auf den Server hochzuladen.
Wenn du andere Template-Dateien wie home.php, single.php, archive.php bearbeiten musst, findest du sie im selben Ordner wie die style.css.
Es ist nicht immer nötig, deine Theme-Dateien zu bearbeiten, ob per FTP oder über das Dashboard. Tatsächlich ist es besser, dies zu vermeiden, wenn du nur ein bisschen zusätzlichen Code hinzufügst.
Für kleine Ergänzungen, hier ist der beste Weg, CSS zu deiner WordPress Webseite hinzuzufügen.
Wie man Custom CSS in WordPress hinzufügt
Wenn du den bestehenden CSS-Code nicht bearbeiten und stattdessen nur dein eigenes Styling hinzufügen möchtest, ist es sehr empfehlenswert, eine der folgenden Methoden zu verwenden: WordPress customizer oder ein spezielles Plugin zu verwenden.
Zum einen ist der durch eine dieser Methoden hinzugefügte CSS-Code viel einfacher zugänglich und zu benutzen. Du brauchst dir keine Sorgen zu machen, dass du dein neues CSS an der falschen Stelle einfügst oder vergessen hast, wo du es hinzugefügt hast, wenn du später Änderungen vornehmen willst.
Außerdem geht das CSS, das mit einer dieser Methoden hinzugefügt wurde, nicht verloren, wenn dein Theme aktualisiert wird (obwohl es immer noch verschwinden kann, wenn du das Theme wechselst).
Das heißt, du brauchst kein Child Theme zu benutzen, und wenn etwas kaputt geht, brauchst du nur das CSS, das du gerade hinzugefügt hast, zu entfernen.
Beachte, dass du immer noch ein Backup deiner Webseite aufbewahren solltest, da einige Leute berichtet haben, dass sie gelegentlich ihr CSS während größerer Updates verlieren. Trotzdem ist diese Methode viel zuverlässiger als das direkte Editieren von Themes.
Du kannst zwar einfach Code zur style.css hinzufügen und das Ganze dann beenden, aber wenn du kein Child-Theme erstellen willst, keine größeren Änderungen an bestehenden CSS in deinem Theme vornehmen willst und möglicherweise am Ende all deine Arbeit gelöscht wird, ist es am besten, entweder die Option Zusätzliche CSS im WordPress-Customizer zu verwenden oder ein Plugin zu installieren.
1. CSS mit dem WordPress Customizer bearbeiten
Anstatt den Theme Editor zu benutzen, probiere das hier. Logge dich in dein WordPress-Backend ein und klicke auf Darstellung > Anpassen, um den Bildschirm zur Anpassung des Themes zu öffnen. Dort siehst du eine Live-Vorschau deiner Webseite mit Optionen auf der linken Seite, mit denen du Elemente wie Farben, Menüs oder andere Widgets anpassen kannst.
Ganz unten in diesem Menü solltest du die Box zusätzliches CSS finden.
Klicke darauf, um sie zu öffnen. Du wirst zu einem neuen Bildschirm mit einem Eingabefeld für den Code und ein paar Anweisungen geführt. Der Bildschirm zusätzliches CSS enthält eine Syntaxhervorhebung, genau wie der Theme-Editor, sowie eine Validierung, die dich wissen lässt, wenn dein Code falsch ist.
Jeder Code, den du schreibst, erscheint automatisch im Vorschaubereich auf der rechten Seite, es sei denn, er hat einen Fehler (obwohl du ihn trotzdem veröffentlichen kannst).
Wenn du mit deiner Arbeit fertig bist, kannst du deinen Code veröffentlichen, planen, wann er in Kraft tritt, oder ihn als Entwurf speichern, um später daran zu arbeiten. Du kannst sogar einen Vorschaulink bekommen, um ihn mit anderen zu teilen.
Wie du sehen kannst, ist die Seite Zusätzliches CSS in vielerlei Hinsicht mächtiger als der Theme-Editor und viel besser geeignet, Code hinzuzufügen, als sich mit den Kerndateien herumzuschlagen.
Der CSS-Code, den du hier schreibst, überschreibt das Standard-Styling deines Themes und er verschwindet nicht, wenn dein Theme aktualisiert wird. Wenn du es nicht „live“ in der Vorschau sehen kannst, überprüfe, ob du die richtigen Selektoren in deinem CSS-Code verwendest.
Genau wie beim Theme Editor ist CSS standardmäßig global, aber du kannst Code schreiben, der auf bestimmte Seiten zielt.
Der einzige Nachteil ist, dass alles, was du geschrieben hast, gelöscht wird, wenn du das Theme wechselst. Stelle sicher, dass du ein Backup deines CSS machst, bevor du zu einem neuen Theme wechselst, sonst könntest du am Ende eine Menge Arbeit verlieren.
Wenn du Schwierigkeiten hast, diese Option zu nutzen, oder wenn du eine Lösung suchst, die themenübergreifend funktioniert und bestimmte Seiten leichter ansprechen kann, solltest du stattdessen ein Plugin ausprobieren.
2. Benutzerdefiniertes CSS mit Plugins zu WordPress hinzufügen
Es gibt ein paar Gründe, warum du ein Plugin benutzen solltest, um CSS zu WordPress hinzuzufügen. Die Funktion ist zwar ähnlich wie das Menü Zusätzliche CSS, aber die Stile bleiben normalerweise erhalten, auch wenn du Themes wechselst/aktualisierst.
Vielleicht gefällt dir ihr UI auch besser, oder du magst die zusätzlichen Funktionen wie Autovervollständigung. Einige Plugins erlauben es dir sogar, CSS über Dropdown-Menüs zu erstellen, anstatt es selbst schreiben zu müssen.
Simple Custom CSS
Simple Custom CSS ist das beliebteste CSS-Editor-Plugin, wegen seiner Benutzerfreundlichkeit, dem einfachen Interface und dem leichten Backend. Kurz gesagt, es ist ein sehr kleines WordPress-Plugin, das eine große Wirkung hat.
Das Einrichten ist ein Kinderspiel und du wirst keine negativen Auswirkungen auf die Leistung sehen. Es funktioniert bei jedem Theme und beinhaltet Syntax-Highlighting und Fehlerprüfung.
Simple Custom CSS and JS
Simple Custom CSS and JS ist eine gute Alternative. Du kannst damit auch den Header, die Fußzeile, das Frontend oder sogar das Admin-Backend ansprechen.
SiteOrigin CSS
SiteOrigin CSS ist eine weitere Option, die auch einen traditionellen CSS-Editor beinhaltet. Du kannst jederzeit zwischen diesem und dem visuellen Editor wechseln.
WP Add Custom CSS
Wenn du Schwierigkeiten hast, CSS zu bestimmten Seiten hinzuzufügen, fügt WP Add Custom CSS eine eigene CSS-Box zum Editierbildschirm hinzu und bietet außerdem ein globales Styling.
CSS Hero
Vielleicht möchtest du auch einen visuellen CSS-Editor ausprobieren. Dieser nimmt all das komplizierte Programmieren und verwandelt es in eine Reihe von einfach zu benutzenden Eingabefeldern und Dropdown-Menüs, die die ganze Programmierung für dich erledigen.
CSS Hero ist ein Premium-Plugin für visuelle Bearbeitung mit einigen ernsthaft leistungsstarken Funktionen (Animation, gerätespezifische Bearbeitungen und nicht-destruktives Editieren, um nur einige zu nennen).
Wo man CSS lernen kann
Bereit, selbst in CSS einzutauchen? Diese Anfänger-Tutorials werden dir die Grundlagen vermitteln und dir die Syntax beibringen, die du brauchst, um deinen eigenen funktionalen CSS-Code zu schreiben.
Es kann entmutigend sein, aber solange du nicht versuchst, etwas wirklich Fortgeschrittenes zu machen, ist CSS nicht allzu schwer! Einfache Dinge wie das Ändern der Hintergrundfarbe oder das Einstellen des Schrift-Stylings sind ziemlich einfach, und es gibt viele Beispiele online.
Die meisten Programmier-Tutorials, die du im Internet findest, sind auch komplett kostenlos. Es gibt jede Menge Informationen ohne/geringe Kosten.
Hier sind ein paar Beispiele für die besten CSS-Tutorials für Anfänger.
- W3Schools CSS Tutorial: Hier gibt es jede Menge Informationen zu finden: ausführliche Tutorials, Beispiele und Referenzen, mit denen du arbeiten kannst. Die Tutorials von W3Schools sind so einfach und leicht verständlich wie möglich, also selbst wenn du ein totaler Anfänger bist, ist dies ein großartiger Ort, um anzufangen.
- Codeacademy Learn CSS: In sechs kostenlosen praktischen Lektionen lernst du die Grundlagen von CSS. Dies ist kein einfaches Video-Tutorial, sondern eine interaktive Lektion, die dich mit tatsächlichem Code arbeiten lässt. Mit der Pro-Version bekommst du auch Quizzes und Freeform-Projekte, an denen du arbeiten kannst.
- Learn CSS in One Hour: Viele Leute wollen eine neue Programmiersprache lernen, aber sie haben einfach nicht die Zeit, sich ihr zu widmen. Aber wenn du dir nur eine Stunde Zeit nehmen kannst, kannst du mit diesem kostenlosen 20-teiligen Kurs CSS lernen. Auch wenn du am Ende kein Meister bist, solltest du die Grundlagen gut beherrschen.
- Introduction to Basic HTML & CSS for WordPress Users: Suchst du nach etwas Speziellem für WordPress? Wenn du schon immer mit dem Schreiben von HTML und CSS Probleme hattest, ist dieser Kurs perfekt für dich. Er ist bezahlt, beinhaltet aber 52 Vorlesungen und fünf Stunden Video zum Lernen..
Zusammenfassung
Als WordPress-Benutzer könnte der Sprung ins CSS zunächst verwirrend sein. Aber sobald du weißt, wie du deine Themes editieren kannst und wo du Styling hinzufügen kannst, solltest du keine Probleme mehr haben.
Theme-Dateien können entweder über dein Backend oder per FTP bearbeitet werden, um das Aussehen deiner Webseite zu verändern, aber das sollte normalerweise vermieden werden, es sei denn, du musst den bestehenden Code bearbeiten.
Wenn du nur dein eigenes CSS hinzufügen möchtest, benutze die Seite Zusätzliches CSS unter Darstellung > Anpassen, oder probiere ein Plugin aus, wenn du etwas mächtigeres brauchst.
Bearbeitungen an deinem Stylesheet gehen beim Aktualisieren des Themes verloren, es sei denn, du verwendest ein Child Theme. Dasselbe gilt nicht für Zusätzliches CSS. Dein Code ist sicher vor Updates, aber vergiss nicht: nur ein Plugin behält CSS bei, wenn du Themes wechselst.
Für welche Methode du dich auch entscheidest, du solltest immer regelmäßige Backups deiner Webseite aufbewahren, einschließlich des Stylesheets und des programmierten Codes, den du hinzugefügt hast. Jetzt ist es an der Zeit, deine CSS-Grundlagen mit den von uns angebotenen Ressourcen aufzufrischen.
Gutes Styling!
Chefredakteur bei Kinsta und Content Marketing Berater für WordPress Plugin-Entwickler. Verbinde dich mit Matteo auf Twitter.
Schreibe einen Kommentar