Individuelles CSS hinzufügen

Auch wenn die meisten Änderungen mit Einstellungen im WordPress-Editor vorgenommen werden können, verwendest du zum Anpassen deiner Website möglicherweise lieber CSS, wenn du Erfahrung mit dem Schreiben von CSS-Code hast. In diesem Ratgeber erfährst du, wie du deine Website mit CSS bearbeiten kannst.

Diese Funktion ist auf Websites mit den WordPress.com-Tarifen Premium, Business und Commerce verfügbar sowie auf Websites mit dem alten Pro-Tarif. Führe für Websites mit Kostenlos- und Persönlich-Tarif ein Tarif-Upgrade durch, um auf diese Funktion zuzugreifen.

CSS steht für Cascading Style Sheets. Es ist eine Auszeichnungssprache, die das Design von HTML-Elementen auf einer Webseite steuert. WordPress umfasst einen CSS-Editor, damit du deine eigenen CSS-Stile hinzufügen und so die Standardstile deines Themes überschreiben kannst.

Die Möglichkeiten, das Design einer Website mit CSS zu verändern, sind nahezu unbegrenzt. Allerdings benötigst du ein gewisses Verständnis der Funktionsweise von CSS und HTML (oder zumindest die Bereitschaft, dich einzuarbeiten). Der CSS-Ratgeber von MDN Web Docs bietet einen hervorragenden Einstieg in CSS.

Wenn du dich nicht in CSS einarbeiten möchtest, wähle ein Block-Theme für deine Website aus. Diese Themes bieten die flexibelsten Optionen, um jeden Aspekt deines Website-Designs anzupassen, ohne dich mit Computercode auszukennen.

Je nach Theme gibt es zwei Möglichkeiten, auf den CSS-Editor deiner Website zuzugreifen. Im Folgenden erklären wir beide Methoden.

Wenn deine Website ein Theme verwendet, das den Website-Editor unterstützt, kannst du die Website mit dieser Methode mithilfe von CSS anpassen. Um schnell festzustellen, ob deine Website den Website-Editor verwendet, sieh unter Design in deinem Dashboard nach. Wenn dir hier der Editor angezeigt wird, kannst du mit den folgenden Schritten auf den CSS-Editor zugreifen:

1. Rufe das Dashboard deiner Website auf.
2. Navigiere zu Design → Editor.
3. Klicke im Menü „Design“ auf der linken Seite auf Stile.
   • Wenn dein Theme Stilvarianten enthält, musst du dann auf das Stift-Icon klicken, um die Stiloptionen zu öffnen:

4. Klicke auf die drei Punkte rechts neben der Überschrift Stile und wähle Zusätzliches CSS aus:

5. Gib deinen CSS-Code in das dafür vorgesehene Feld ein oder füge diesen ein.
6. Klicke auf den Button Speichern oben rechts im Bildschirm, um das CSS auf deiner Website zu speichern.

Du kannst die Auswirkungen deiner CSS-Änderungen auf jeden Blocktyp in der Vorschau anzeigen, indem du das Stilbuch lädst. Klicke auf das Augen-Icon, um das Stilbuch zu öffnen.

In Website-Editor-Themes kannst du CSS-Code mithilfe der folgenden Schritte auf bestimmte Blöcke auf der ganzen Website anwenden.

1. Rufe das Dashboard deiner Website auf.
2. Navigiere zu Design → Editor.
3. Klicke im Menü „Design“ auf der linken Seite auf Stile.
   • Wenn dein Theme Stilvarianten enthält, musst du dann auf das Stift-Icon klicken, um die Stiloptionen zu öffnen.
4. Wähle dieses Mal den Abschnitt Blöcke aus, um auf Einstellungen zuzugreifen und das Design bestimmter Blöcke für die gesamte Website anzupassen.
5. Klicke auf den Namen des Blocks, dem du CSS hinzufügen möchtest. Du kannst den gewünschten Blocktyp auch über das Suchfeld finden.
6. Scrolle nach unten und klicke auf Erweitert.
7. Gib im Feld Zusätzliches CSS CSS ein, das auf alle Instanzen dieses Blocktyps angewendet wird. Wenn du CSS blockweise hinzufügst, musst du keinen CSS-Selektor hinzufügen – füge einfach die Eigenschaft und den Wert hinzu. Ein Beispiel ist im obigen Video enthalten.
8. Klicke auf den Button Speichern oben rechts im Bildschirm, um das CSS auf deiner Website zu speichern.

Bei Themes, die den Website-Editor nicht verwenden, einschließlich klassischer Themes und vieler Drittanbieter-Themes, kannst du CSS folgendermaßen hinzufügen:

1. Rufe das Dashboard deiner Website auf.
2. Navigiere zu Design → Anpassen → Zusätzliches CSS.
3. Gib deinen CSS-Code in das dafür vorgesehene Feld ein oder füge diesen ein. Das Vorschaufenster auf der rechten Seite zeigt deine Änderungen an.
4. Klicke auf den Button Änderungen speichern, um das CSS auf deiner Website zu speichern.

Die letzten 25 Versionen deiner CSS-Bearbeitungen werden gespeichert und können durch Klicken auf Gesamten Verlauf anzeigen am Ende des CSS-Editors aufgerufen werden. Du kannst frühere Versionen deines CSS hier wiederherstellen.

Wenn die Option nicht angezeigt wird, ist kein CSS-Verlauf vorhanden, der wiederhergestellt werden kann.

Die Option Medienbreite sollte verwendet werden, wenn du die Breite des primären Inhaltsbereichs mit individuellem CSS geändert hast. Die Einstellung „Medienbreite“ ist die Standardbreite für Vollbilder, wenn sie in deine Website eingefügt werden.

Beachte, dass sich diese Einstellung nicht auf die Größe der Bilder auswirkt, die du vor der Einstellungsänderung hinzugefügt hast. Je nachdem, wie sie eingefügt wurden, musst du einige von ihnen nach dem Ändern der Einstellung möglicherweise erneut einfügen.

Das individuelle CSS, das du zum CSS-Editor hinzufügst, wird standardmäßig nach dem ursprünglichen CSS des Themes geladen. Das bedeutet, dass deine Regeln die Stile des Themes außer Kraft setzen können.

Du kannst das Original-CSS des Themes vollständig deaktivieren, indem du das Auswahlkästchen Nicht das Original-CSS des Themes verwenden aktivierst. So kannst du jedes WordPress.com-Theme als leere Vorlage für den Entwurf mit CSS verwenden. Dabei handelt es sich um eine erweiterte Option, die nur verwendet werden sollte, wenn du das CSS für dein Theme von Grund auf neu gestalten willst.

Wenn du die gängigste und empfohlene Methode verwenden und auf den vorhandenen CSS-Regeln aufbauen möchtest, kannst du diese Option deaktiviert lassen.

WordPress.com unterstützt die CSS-Präprozessoren LESS und Sass (SCSS-Syntax). Dabei handelt es sich um eine erweiterte Option für Benutzer, die CSS-Erweiterungen wie Variablen und Mixins verwenden möchten. Weitere Informationen findest du auf den Websites LESS und Sass.

Die Footer-Nennung sollte nicht mit CSS geändert werden. Du kannst die Footer-Nennung mit Einstellungen entfernen oder ändern, je nachdem, welche Art von Theme die Website verwendet:

• Wenn deine Website ein Block-Theme verwendet, kannst du die Footer-Nennung mit dem Website-Editor bearbeiten oder entfernen – ganz ohne CSS.
• Wenn deine Website ein klassisches Theme verwendet, kannst du die Footer-Nennung in ein minimalistisches WordPress-Logo ändern. Du kannst die Nennung ausblenden, wenn die Website über einen Business- oder Commerce-Abonnementtarif verfügt.

Ja, nur auf Plugin-fähigen Websites.

Du kannst die Schriftarten deiner Website mithilfe der Optionen in deinem Theme auswählen. Wenn du mit CSS arbeitest, kannst du im Front-End nur diese zwei Webschriften verwenden. Mithilfe von Drittanbieter-Plugins kannst du aber weitere Schriftarten hinzufügen.

Ja. Du kannst ein Bild in deine Mediathek hochladen und über die direkte URL aus deinem CSS-Stylesheet darauf verweisen. Hier ein Beispiel dafür, wie du ein Hintergrundbild in deinem Stylesheet verwenden kannst:

div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

Wir empfehlen, CSS-Bearbeitungen mit dem CSS-Editor vorzunehmen, wie in diesem Ratgeber oben erläutert. Wenn du CSS mit dieser Methode hinzufügst, werden CSS-Regeln aus dem Stylesheet deines Themes überschrieben. Dies ist eine sichere Methode, die das Debuggen von CSS-Konflikten und die Wiederherstellung früherer CSS-Versionen, die du hinzugefügt hast, erleichtert.

Wenn du Theme-Dateien direkt bearbeiten kannst, kannst du dazu SFTP verwenden oder ein untergeordnetes Theme erstellen. Wir empfehlen, Änderungen auf einer Staging-Website zu testen, bevor du sie auf deine aktive Website anwendest.

Alle Upgrades auf WordPress.com werden jährlich verlängert. Solltest du dein Abonnement kündigen, wird dein individuelles CSS dennoch gespeichert. Es wird aber nicht mehr auf deine Website angewendet, wo es andere sehen können. Wenn du möchtest, dass das CSS wieder auf deine Website angewendet wird, kannst du wieder einen Tarif erwerben. Die Stile werden dann automatisch wieder angewendet, sofern du das Theme nicht gewechselt hast. Wenn du das Theme gewechselt hast, findest du das frühere CSS in den CSS-Revisionen.