WordPress CSS: Das Design der Website schnell anpassen
- Ideal für kleinere Anpassungen
- Optimieren Sie das Design Ihrer Website
- Lediglich einfache CSS-Kenntnisse notwendig
Bei den Bildern fehlt der Schlagschatten
Früher oder später kommt es zwangsläufig zu der folgenden Situation: Sie haben für Ihr neues Projekt WordPress installiert, es an Ihre Bedürfnisse angepasst und empfinden das komplette Design als stimmig. Das komplette Design? Nein. An einer bestimmten Stelle wehrt sich das Theme und möchte nicht, wie Sie es gerne hätten.
Sie hätten gerne die Überschriften etwas mehr eingerückt, vielleicht sind Ihnen die abgerundeten Buttons nicht rund genug oder es fehlt Ihnen ein dezenter Schlagschatten bei den Bildern? Kein Problem. In den meisten WordPress Themes haben Sie die Möglichkeit, kleinere Anpassungen am Design vorzunehmen, ohne dafür ein Plugin bemühen oder ein Child-Theme erstellen zu müssen.
Eigenes WordPress CSS im Customizer einfügen
Für solche kleineren Anpassungen haben Sie in WordPress die Möglichkeit, das Design der Website direkt im "Customizer" anzupassen, ohne dass Sie dafür neue Dateien erstellen oder auf dem FTP-Server hantieren müssen.
Den Customizer erreichen Sie folgendermaßen:
- Loggen Sie sich in den Admin-Bereich ein.
- Steuern Sie in der linken Seite im Admin-Menü den Hauptpunkt "Design" an.
- Rufen Sie dort den Unterpunkt "Customizer" auf.
Den Menüpunkt "Customizer" werden Sie im aktuellen Standard-Theme Twenty Twenty-Three nicht mehr sehen, da es sich um ein sog. Block-Theme handelt. Diese Themes sind etwas anders aufgebaut als die herkömmlichen WordPress Themes. Die Situation ist allerdings momentan so, dass von den mehr als 11.200 verfügbaren Themes im offiziellen Verzeichnis nur etwa 400 als Block-Themes ausgewiesen sind. Das heißt: bei mehr als 96 Prozent der Themes, werden Sie den Menüpunkt "Customizer" sehen können.
WordPress CSS: So fügen Sie Ihren Code ein
Nachdem Sie "Customizer" aufgerufen haben, werden Sie dort links unten einen zusätzlichen Unterpunkt im Menü, mit dem Namen "Zusätzliches CSS" finden. Wenn Sie diesen Unterpunkt aufgerufen haben, dann können Sie dort Ihren individuellen CSS-Code eingeben.
Im Customizer selbst können Sie den CSS-Code ausprobieren und in verschiedenen Auflösungen für Desktop-Rechner, Tablets und Smartphone testen. Solange Sie nichts abspeichern, erscheint es auch nicht im Frontend. Erst wenn Sie auf den Button "Veröffentlichen" klicken, wird es vom System übernommen und auf der Website angezeigt.
Die Textbox, in der Sie die CSS-Regeln eingeben können, verfügt über Syntax-Hervorhebung und über einen rudimentären Support für den CSS-Code. Nicht zu vergleichen mit ausgewachsenen Code-Editoren, aber dennoch hilfreich bei der Eingabe und eventueller Fehlersuche.
Vor- und Nachteile von CSS in WordPress
Diese einfache Methode, um das WordPress Design der Website anzupassen, hat ihre Vor-, aber auch ihre Nachteile. Die CSS-Anpassungen, die Sie so eintragen, beziehen sich nur auf das aktuell aktive Theme. Andererseits ist es in der Regel so, dass es nur selten Design-Anpassungen gibt, die Theme-übergreifend sind. Andersherum könnte das sogar ein weiterer Vorteil dieser Methode sein. Bei einem Theme-Wechsel haben Sie auch keine Altlasten bzw. keinen unnötigen Code, der mitgeschleppt wird.
Um Design-Anpassungen im Feld "Zusätzliches CSS" durchführen zu können, müssen Sie zwar kein CSS-Profi sein, aber grundlegende Kenntnisse in WordPress und CSS sind notwendig. Sie müssen wissen, welchen Selektor Sie ansprechen müssen und welche Eigenschaft Sie anpassen möchten.
Fazit
Mit der Funktion "Zusätzliches CSS" im "Customizer" steht Ihnen ein schnelles und komfortables Tool zur Seite, wenn es darum geht, dem WordPress Design den letzten Schliff zu verpassen. Damit können Sie mithilfe von CSS zusätzliche visuelle Akzente setzen.
Häufige Fragen
Gibt es Alternativen zum Customizer für CSS-Anpassungen in WordPress?
Ja, es gibt Alternativen. Eine Möglichkeit ist die Verwendung eines Child-Themes, in dem Sie die CSS-Anpassungen vornehmen können. Eine weitere Option ist die Verwendung eines Plugins wie "Simple Custom CSS", das Ihnen erlaubt, benutzerdefinierte CSS-Regeln hinzuzufügen, ohne das Theme zu ändern.
Warum ist der Customizer in Themes wie "Twenty Twenty-Two" nicht da?
Der Customizer ist in Block-Themes wie "Twenty Twenty-Two" oder "Twenty Twenty-Three" nicht mehr verfügbar, weil diese Themes eine andere Architektur verwenden. Allerdings sind Block-Themes momentan noch in der Minderheit; bei etwa 96 % der verfügbaren Themes ist der Customizer weiterhin vorhanden.
Was passiert mit meinen CSS-Anpassungen, wenn ich das Theme wechsle?
Die im Customizer vorgenommenen CSS-Anpassungen sind theme-spezifisch. Das bedeutet, wenn Sie das Theme wechseln, werden diese Anpassungen nicht übernommen. Das hat den Vorteil, dass Sie keine "Altlasten" mitnehmen, wenn Sie das Theme wechseln. Wenn Sie jedoch Anpassungen haben, die Sie in mehreren Themes verwenden möchten, wäre ein Plugin wie "Simple Custom CSS" die bessere Wahl.
Kann ich in "Zusätzliches CSS" auch PHP-Code eingeben?
Nein. Dieses Feld ist nur für die Eingabe des CSS-Codes vorgesehen.
Wie und wo kann ich CSS lernen?
Es gibt viele Wege und Möglichkeiten, CSS zu lernen. Wenn Sie vorzugsweise an einem konkreten praxistauglichen Beispiel lernen möchten, dann können wir Ihnen unser kostenloses CSS-Handbuch empfehlen: Websites erstellen mit HTML und CSS.
Noch kein WordPress Paket? Bei STRATO finden Sie ein Passendes
Der Autor: Vladimir Simović
Vladimir Simović setzt seit 2000 mit HTML & CSS und seit 2004 mit WordPress Website-Projekte um. Seit Januar 2004 hat er als einer der ersten Blogger im deutschsprachigen Raum zu den WordPress Anfängen Tipps und Tricks veröffentlicht. Seit 2022 ist er als Redakteur für den Blog-Bereich von STRATO verantwortlich und verfasst Informationsartikel insbesondere zu WordPress Themen. Im Laufe der Jahre hat er Fachbücher sowie über 60 Fachartikel publiziert und weit über hundert WordPress Projekte betreut. Aktuell beschäftigt er sich mit dem Einsatz von KI im Content-Marketing.