Was ist CSS-Bearbeitung?<\/h2>\n
CSS steht f\u00fcr Cascading Style Sheets und ist neben HTML<\/a> die beliebteste Websprache. Die beiden gehen Hand in Hand, da CSS zum Stylen von HTML-Elementen verwendet<\/a> wird. HTML legt den Grundstein f\u00fcr das Aussehen einer Webseite und CSS wird verwendet, um sie weiter zu stylen.<\/p>\n CSS gibt dir die M\u00f6glichkeit, eine Webseite responsive zu machen<\/a>, Farben hinzuzuf\u00fcgen, Schriftarten zu \u00e4ndern<\/a>, das Layout zu modifizieren und ganz allgemein die visuelle Pr\u00e4sentation einer Webseite zu verfeinern. Wie HTML und JavaScript ist CSS eine clientseitige Frontend-Sprache, was bedeutet, dass sie auf der Seite des Benutzers ausgef\u00fchrt wird, und nicht auf dem Backend-Server.<\/p>\n Wenn du in die WordPress-Entwicklung eintauchst, sind HTML, CSS, JavaScript und PHP<\/a> die Sprachen, die du kennen musst. Das ist der Kern des CMS<\/a>, sowie die vielen Themes<\/a> und Plugins<\/a>.<\/p>\n Aber auch wenn du kein Webdesigner<\/a> oder -entwickler<\/a> bist, ist es gut, sich ein wenig CSS anzueignen, da du damit Elemente auf deiner Webseite bewegen oder stylen kannst, oder kleine \u00e4sthetische \u00c4nderungen an deinem Theme vornehmen kannst, um es besser an dich anzupassen.<\/p>\n\n Innerhalb von WordPress ist CSS ein bisschen anders. Es wird von Themes gesteuert<\/a>, die sich aus Template-Dateien, Template-Tags und nat\u00fcrlich dem CSS-Stylesheet zusammensetzen. Obwohl sie von deinem Theme generiert werden, sind sie alle von dir editierbar.<\/p>\n Template-Dateien<\/a> unterteilen Teile deiner Webseite in Abschnitte (wie header.php oder archive.php), und Template-Tags<\/a> werden verwendet, um sie und andere Inhalte aus deiner Datenbank aufzurufen. Diese Dateien bestehen eigentlich haupts\u00e4chlich aus PHP und HTML, obwohl du CSS hinzuf\u00fcgen k\u00f6nntest, wenn du es n\u00f6tig h\u00e4ttest.<\/p>\n Was du wirklich suchst, ist das Stylesheet<\/a>, oder style.css. Um das Aussehen deiner Webseite zu ver\u00e4ndern, musst du lernen, wie du in dieser Datei Code hinzuf\u00fcgen und bearbeiten<\/a> kannst.<\/p>\n Wenn du dein Theme anpassen<\/a> und das Aussehen deiner Webseite mit CSS ver\u00e4ndern m\u00f6chtest, musst du entweder deinen eigenen Code hinzuf\u00fcgen oder das, was bereits vorhanden ist, bearbeiten. Es gibt M\u00f6glichkeiten, CSS hinzuzuf\u00fcgen, ohne dass du jemals Theme-Dateien anfassen musst, aber um bestehenden Theme-Code zu \u00e4ndern, musst du auf das Stylesheet deiner Webseite zugreifen.<\/p>\n Wenn ihr diese \u00c4nderungen vornehmt, solltet ihr eines wissen: Wenn euer Theme aktualisiert wird<\/a>, werden alle \u00c4nderungen, die ihr an style.css, functions.php oder anderen Theme-Template-Dateien vorgenommen habt, gel\u00f6scht. Generell solltest du keine direkten \u00c4nderungen an deiner Webseite im Editor vornehmen, ohne ein Child Theme<\/a> zu verwenden.<\/p>\n Das Stylesheet ist wie eine „Anweisungsliste“ f\u00fcr deine Webseite, die genau festlegt, wie sie gestylt wird und wie der CSS-Code programmiert wird. Hier wirst du den Gro\u00dfteil 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<\/a>.<\/p>\n Es gibt zwei M\u00f6glichkeiten, auf das Stylesheet deiner WordPress Webseite zuzugreifen: \u00fcber das WordPress Dashboard<\/a> oder \u00fcber einen FTP-Client<\/a>. Wir werden beide M\u00f6glichkeiten abdecken.<\/p>\n Du f\u00fchlst dich nicht wohl dabei, dies selbst zu tun? Dann solltest du einen WordPress-Entwickler<\/a> beauftragen, diesen Schritt f\u00fcr dich zu erledigen.<\/p>\n Der einfachste und bequemste Weg, auf dein CSS Stylesheet zuzugreifen, ist direkt im WordPress Dashboard. Du brauchst keine FTP-Programme oder Code-Editoren<\/a> zu installieren. Du kannst jede Datei mit eingebauter Syntaxhervorhebung und Funktionsdokumentation direkt bearbeiten.<\/p>\n Bevor du gr\u00f6\u00dfere \u00c4nderungen an den Core-Dateien vornimmst, solltest du immer ein Backup deiner WordPress Webseite<\/a> machen. Es ist sehr leicht, versehentlich einen Fehler zu machen, der das Erscheinungsbild deiner Webseite zerst\u00f6ren k\u00f6nnte, wenn du neu in CSS bist, und es k\u00f6nnte schwierig sein, herauszufinden, wie du deine \u00c4nderungen r\u00fcckg\u00e4ngig machen kannst.<\/p>\n 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\u00fc auf Aussehen > Theme Editor<\/em> klickst.<\/p>\n Du solltest ein Popup sehen, das dich davor warnt, direkte \u00c4nderungen 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\u00f6\u00dfere \u00c4nderungen vornimmst. Befolge diese Schritte, und du kannst sicher editieren.<\/p>\n Und jetzt bist du drin! Du solltest standardm\u00e4\u00dfig auf dem Stylesheet sein, aber wenn nicht, schaue im Men\u00fc auf der rechten Seite nach, um deine Theme-Dateien zu sehen.<\/p>\n 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.<\/p>\n Aber du solltest dich mit PHP vertraut machen<\/a>, bevor du dich in diese speziellen Dateien vertiefst.<\/p>\n Denk einfach daran: die meisten CSS-\u00c4nderungen, die du hier machst, werden global sein. Wenn du zum Beispiel deine H1-Header auf eine bestimmte Schriftart \u00e4nderst, wird dies f\u00fcr jede einzelne Seite deiner Webseite wirksam. Du wirst eine spezielle Syntax ben\u00f6tigen, um das Styling bestimmter Seiten anzupassen.<\/p>\n Was ist, wenn du keinen Zugang zum Theme Editor hast oder deine Arbeit lieber \u00fcber FTP erledigen m\u00f6chtest? Es ist einfacher, den Backend-Editor zu benutzen, aber einige Themes oder Plugins k\u00f6nnen ihn deaktivieren. Wenn das der Fall ist, ben\u00f6tigst du eine Verbindung zu deiner Webseite per FTP<\/a>.<\/p>\n FTP, oder File Transfer Protocol, erm\u00f6glicht es dir, auf die Dateien einer Webseite aus der Ferne zuzugreifen und sie zu \u00e4ndern. Als erstes musst du FileZilla<\/a> oder einen anderen FTP-Client herunterladen.<\/p>\n Als n\u00e4chstes 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.<\/p>\n Die Zugangsdaten der Kinsta-Benutzer befinden sich im MyKinsta-Dashboard<\/a> unter Seiten > SFTP\/SSH.<\/p>\n 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.<\/p>\n Sobald du drin bist, kannst du deine style.css Datei finden, indem du auf den wp-content Ordner klickst, um sie zu \u00f6ffnen, dann den Ordner deines Themes (wie das Twenty Twenty<\/em> Theme<\/a>) und dann scrollst, bis du die style.css siehst.<\/p>\n \u00d6ffne sie mit einem Doppelklick (oder rechtsklicke und w\u00e4hle View\/Edit) und nimm deine \u00c4nderungen vor. Denke daran zu speichern und wieder auf den Server hochzuladen.<\/p>\n Wenn du andere Template-Dateien<\/a> wie home.php, single.php, archive.php bearbeiten musst, findest du sie im selben Ordner wie die style.css.<\/p>\n Es ist nicht immer n\u00f6tig, deine Theme-Dateien zu bearbeiten<\/a>, ob per FTP oder \u00fcber das Dashboard. Tats\u00e4chlich ist es besser, dies zu vermeiden, wenn du nur ein bisschen zus\u00e4tzlichen Code hinzuf\u00fcgst.<\/p>\n F\u00fcr kleine Erg\u00e4nzungen, hier ist der beste Weg, CSS zu deiner WordPress Webseite hinzuzuf\u00fcgen.<\/p>\n Wenn du den bestehenden CSS-Code nicht bearbeiten und stattdessen nur dein eigenes Styling hinzuf\u00fcgen m\u00f6chtest, ist es sehr empfehlenswert, eine der folgenden Methoden zu verwenden: WordPress customizer oder ein spezielles Plugin zu verwenden.<\/p>\n Zum einen ist der durch eine dieser Methoden hinzugef\u00fcgte CSS-Code viel einfacher zug\u00e4nglich und zu benutzen. Du brauchst dir keine Sorgen zu machen, dass du dein neues CSS an der falschen Stelle einf\u00fcgst oder vergessen hast, wo du es hinzugef\u00fcgt hast, wenn du sp\u00e4ter \u00c4nderungen vornehmen willst.<\/p>\n Au\u00dferdem geht das CSS, das mit einer dieser Methoden hinzugef\u00fcgt wurde, nicht verloren, wenn dein Theme aktualisiert wird (obwohl es immer noch verschwinden kann, wenn du das Theme wechselst<\/a>).<\/p>\n Das hei\u00dft, du brauchst kein Child Theme zu benutzen, und wenn etwas kaputt geht, brauchst du nur das CSS, das du gerade hinzugef\u00fcgt hast, zu entfernen.<\/p>\n Beachte, dass du immer noch ein Backup deiner Webseite aufbewahren solltest<\/a>, da einige Leute berichtet haben, dass sie gelegentlich ihr CSS w\u00e4hrend gr\u00f6\u00dferer Updates verlieren. Trotzdem ist diese Methode viel zuverl\u00e4ssiger als das direkte Editieren von Themes.<\/p>\n Du kannst zwar einfach Code zur style.css hinzuf\u00fcgen und das Ganze dann beenden, aber wenn du kein Child-Theme erstellen<\/a> willst, keine gr\u00f6\u00dferen \u00c4nderungen an bestehenden CSS in deinem Theme vornehmen willst und m\u00f6glicherweise am Ende all deine Arbeit gel\u00f6scht wird, ist es am besten, entweder die Option Zus\u00e4tzliche CSS im WordPress-Customizer zu verwenden oder ein Plugin zu installieren.<\/p>\n Anstatt den Theme Editor zu benutzen, probiere das hier. Logge dich in dein WordPress-Backend ein<\/a> und klicke auf Darstellung > Anpassen<\/em>, um den Bildschirm zur Anpassung des Themes zu \u00f6ffnen. Dort siehst du eine Live-Vorschau deiner Webseite mit Optionen auf der linken Seite, mit denen du Elemente wie Farben, Men\u00fcs oder andere Widgets<\/a> anpassen kannst.<\/p>\n Ganz unten in diesem Men\u00fc solltest du die Box zus\u00e4tzliches CSS<\/a> <\/em>finden.<\/p>\n Klicke darauf, um sie zu \u00f6ffnen. Du wirst zu einem neuen Bildschirm mit einem Eingabefeld f\u00fcr den Code und ein paar Anweisungen gef\u00fchrt. Der Bildschirm zus\u00e4tzliches CSS enth\u00e4lt eine Syntaxhervorhebung, genau wie der Theme-Editor, sowie eine Validierung, die dich wissen l\u00e4sst, wenn dein Code falsch ist.<\/p>\n 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\u00f6ffentlichen kannst).<\/p>\n Wenn du mit deiner Arbeit fertig bist, kannst du deinen Code ver\u00f6ffentlichen, planen, wann er in Kraft tritt, oder ihn als Entwurf speichern, um sp\u00e4ter daran zu arbeiten. Du kannst sogar einen Vorschaulink bekommen, um ihn mit anderen zu teilen.<\/p>\n Wie du sehen kannst, ist die Seite Zus\u00e4tzliches CSS in vielerlei Hinsicht m\u00e4chtiger als der Theme-Editor und viel besser geeignet, Code hinzuzuf\u00fcgen, als sich mit den Kerndateien herumzuschlagen.<\/p>\n Der CSS-Code, den du hier schreibst, \u00fcberschreibt das Standard-Styling deines Themes und er verschwindet nicht, wenn dein Theme aktualisiert wird. Wenn du es nicht „live“ in der Vorschau sehen kannst, \u00fcberpr\u00fcfe, ob du die richtigen Selektoren in deinem CSS-Code verwendest.<\/p>\n Genau wie beim Theme Editor ist CSS standardm\u00e4\u00dfig global, aber du kannst Code schreiben, der auf bestimmte Seiten zielt<\/a>.<\/p>\n Der einzige Nachteil ist, dass alles, was du geschrieben hast, gel\u00f6scht wird, wenn du das Theme wechselst<\/a>. Stelle sicher, dass du ein Backup deines CSS machst, bevor du zu einem neuen Theme wechselst, sonst k\u00f6nntest du am Ende eine Menge Arbeit verlieren.<\/p>\n Wenn du Schwierigkeiten hast, diese Option zu nutzen, oder wenn du eine L\u00f6sung suchst, die themen\u00fcbergreifend funktioniert und bestimmte Seiten leichter ansprechen kann, solltest du stattdessen ein Plugin ausprobieren.<\/p>\n Es gibt ein paar Gr\u00fcnde, warum du ein Plugin benutzen solltest, um CSS zu WordPress hinzuzuf\u00fcgen. Die Funktion ist zwar \u00e4hnlich wie das Men\u00fc Zus\u00e4tzliche CSS, aber die Stile bleiben normalerweise erhalten, auch wenn du Themes wechselst\/aktualisierst.<\/p>\n Vielleicht gef\u00e4llt dir ihr UI auch besser, oder du magst die zus\u00e4tzlichen Funktionen wie Autovervollst\u00e4ndigung. Einige Plugins erlauben es dir sogar, CSS \u00fcber Dropdown-Men\u00fcs<\/a> zu erstellen, anstatt es selbst schreiben zu m\u00fcssen.<\/p>\n Simple Custom CSS<\/a> 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\u00dfe Wirkung hat.<\/p>\n Das Einrichten ist ein Kinderspiel und du wirst keine negativen Auswirkungen auf die Leistung<\/a> sehen. Es funktioniert bei jedem Theme und beinhaltet Syntax-Highlighting und Fehlerpr\u00fcfung.<\/p>\n Simple Custom CSS and JS<\/a> ist eine gute Alternative. Du kannst damit auch den Header, die Fu\u00dfzeile, das Frontend oder sogar das Admin-Backend ansprechen.<\/p>\n SiteOrigin CSS<\/a> ist eine weitere Option, die auch einen traditionellen CSS-Editor beinhaltet. Du kannst jederzeit zwischen diesem und dem visuellen Editor<\/a> wechseln.<\/p>\n Wenn du Schwierigkeiten hast, CSS zu bestimmten Seiten hinzuzuf\u00fcgen, f\u00fcgt WP Add Custom CSS<\/a> eine eigene CSS-Box zum Editierbildschirm hinzu und bietet au\u00dferdem ein globales Styling.<\/p>\n Vielleicht m\u00f6chtest 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\u00fcs, die die ganze Programmierung f\u00fcr dich erledigen.<\/p>\n CSS Hero<\/a> ist ein Premium-Plugin f\u00fcr visuelle Bearbeitung mit einigen ernsthaft leistungsstarken Funktionen (Animation, ger\u00e4tespezifische Bearbeitungen und nicht-destruktives Editieren, um nur einige zu nennen).<\/p>\n Bereit, selbst in CSS einzutauchen? Diese Anf\u00e4nger-Tutorials werden dir die Grundlagen vermitteln und dir die Syntax beibringen, die du brauchst, um deinen eigenen funktionalen CSS-Code zu schreiben.<\/p>\n Es kann entmutigend sein, aber solange du nicht versuchst, etwas wirklich Fortgeschrittenes zu machen, ist CSS nicht allzu schwer! Einfache Dinge wie das \u00c4ndern der Hintergrundfarbe oder das Einstellen des Schrift-Stylings<\/a> sind ziemlich einfach, und es gibt viele Beispiele online.<\/p>\n Die meisten Programmier-Tutorials<\/a>, die du im Internet findest, sind auch komplett kostenlos. Es gibt jede Menge Informationen<\/a> ohne\/geringe Kosten.<\/p>\n Hier sind ein paar Beispiele f\u00fcr die besten CSS-Tutorials f\u00fcr Anf\u00e4nger.<\/p>\n Als WordPress-Benutzer k\u00f6nnte der Sprung ins CSS zun\u00e4chst verwirrend sein. Aber sobald du wei\u00dft, wie du deine Themes editieren kannst und wo du Styling hinzuf\u00fcgen kannst, solltest du keine Probleme mehr haben.<\/p>\n Theme-Dateien k\u00f6nnen entweder \u00fcber dein Backend oder per FTP bearbeitet werden, um das Aussehen deiner Webseite zu ver\u00e4ndern, aber das sollte normalerweise vermieden werden, es sei denn, du musst den bestehenden Code bearbeiten.<\/p>\n Wenn du nur dein eigenes CSS hinzuf\u00fcgen m\u00f6chtest, benutze die Seite Zus\u00e4tzliches CSS unter Darstellung > Anpassen, oder probiere ein Plugin aus, wenn du etwas m\u00e4chtigeres brauchst.<\/p>\n Bearbeitungen an deinem Stylesheet<\/a> gehen beim Aktualisieren des Themes verloren, es sei denn, du verwendest ein Child Theme<\/a>. Dasselbe gilt nicht f\u00fcr Zus\u00e4tzliches CSS. Dein Code ist sicher vor Updates, aber vergiss nicht: nur ein Plugin beh\u00e4lt CSS bei, wenn du Themes wechselst.<\/a><\/p>\n![\"Beispiel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/03\/w3school-1.png\")
WordPress und CSS<\/h2>\n
Wie du dein WordPress Theme mit CSS anpasst<\/h2>\n
WordPress CSS im Dashboard bearbeiten<\/h3>\n
![\"Direkte](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/07\/direkte-anderungen-an-wordpress-dateien.png\")
Theme-Dateien direkt bearbeiten<\/h3>\n
![\"FTP](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/07\/mykinsta-sftp-info.png\")
![\"FileZilla](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/07\/filezilla-benutzen.png\")
Wie man Custom CSS in WordPress hinzuf\u00fcgt<\/h2>\n
1. CSS mit dem WordPress Customizer bearbeiten<\/h3>\n
![\"Zus\u00e4tzliches](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/07\/zusatzliches-css.png\")
2. Benutzerdefiniertes CSS mit Plugins zu WordPress hinzuf\u00fcgen<\/h3>\n
Simple Custom CSS<\/h4>\n
![\"Simple](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/07\/simple-custom-css.jpg\")
Simple Custom CSS and JS<\/h4>\n
![\"Simple](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/07\/simple-custom-css-js.jpg\")
SiteOrigin CSS<\/h4>\n
![\"SiteOrigin](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/07\/siteorigin-css.jpg\")
WP Add Custom CSS<\/h4>\n
![\"WP](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/07\/wp-add-custom-css.jpg\")
CSS Hero<\/h4>\n
![\"CSS](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/07\/css-hero.png\")
Wo man CSS lernen kann<\/h2>\n
![\"Learn](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/07\/learn-css.png\")
\n
Zusammenfassung<\/h2>\n