CSS (Cascading Style Sheets) ist eine Sprache mit einer Reihe von Regeln, die festlegen, wie die Elemente auf Ihrer Website aussehen.
Diese Regeln steuern die Designelemente Ihrer Website, z. B. die Schriftgröße und -farbe, die Hintergrundfarbe Ihrer Website und den Abstand zwischen den einzelnen Abschnitten.
Betrachten Sie CSS als die Gestaltungsanweisungen für Ihre Website. Während Ihr WordPress-Theme HTML-Elemente verwendet, um den Inhalt Ihrer Website zu strukturieren (wie Überschriften, Absätze, Bilder und Schaltflächen), teilt CSS dem Browser mit, wie diese Elemente visuell dargestellt werden sollen.
Warum sollten Sie CSS in WordPress bearbeiten müssen?
WordPress-Themes bieten zwar eine Vielzahl von Design-Optionen, aber manchmal möchten Sie vielleicht spezifische Änderungen am Erscheinungsbild Ihrer Website vornehmen, die über die integrierten Einstellungen des Themes hinausgehen. In diesem Fall ist die Bearbeitung von CSS für WordPress-Nutzer sehr nützlich.
So können Sie beispielsweise die Hintergrundfarbe eines bestimmten Abschnitts Ihrer Website ändern oder die Schriftgröße für eine bessere Lesbarkeit leicht anpassen.
Sie können auch das Erscheinungsbild Ihrer Website personalisieren und sie von anderen Websites, die dasselbe Thema verwenden, unterscheiden. Dazu kann es gehören, die Farbe der Textauswahl zu ändern, einen Parallaxen-Effekt hinzuzufügen oder das WordPress-Kommentarformular zu gestalten.
Manchmal kann es vorkommen, dass ein Thema Elemente nicht genau so anzeigt, wie Sie es in Ihrem Webdesign wünschen. Mit ein paar Zeilen CSS können Sie kleinere Probleme beheben, wie z. B. die Zentrierung von Text, der nicht mittig erscheint, oder die Anpassung der Auffüllung oder des Randes um ein Bild.
Brauche ich CSS-Kenntnisse, um WordPress zu verwenden?
Nein, Sie brauchen nicht unbedingt CSS-Kenntnisse, um eine WordPress-Website zu erstellen. Die meisten WordPress-Themes verfügen über eine Vielzahl integrierter Design-Optionen, mit denen Sie das Erscheinungsbild Ihrer Website anpassen können, ohne den Code anfassen zu müssen.
Die CSS-Bearbeitung gilt in der Regel als fortgeschrittene Funktion. Zwar können Anfänger WordPress auch ohne diese Funktion nutzen, doch die Kenntnis von CSS eröffnet mehr Möglichkeiten für die Feinabstimmung des Designs Ihrer Website.
Um die CSS-Bearbeitung zu erleichtern, können Sie ein WordPress-Plugin wie CSS Hero verwenden. Ein CSS-Plugin bietet Ihnen einen visuellen Ansatz für CSS-Änderungen und ist mit vielen gängigen WordPress-Themes kompatibel.
Wenn Sie jedoch verstehen, wie CSS funktioniert, haben Sie mehr Kontrolle und Flexibilität bei der Anpassung Ihrer WordPress-Website.
Grundlagen von CSS in WordPress (mit Beispielen)
CSS verwendet eine spezielle Syntax, um zu definieren, wie Elemente auf Ihrer Website aussehen sollen. Auch wenn es auf den ersten Blick komplex erscheint, ist die Grundstruktur recht einfach.
Das erste, was Sie wissen sollten, sind CSS-Selektoren. Diese teilen CSS mit, welche Elemente auf Ihrer Website gestaltet werden sollen. Sie sind wie Etiketten, die auf bestimmte Teile Ihrer Website verweisen.
Das body-Tag beispielsweise bezieht sich auf den gesamten Inhaltsbereich Ihrer Website. Der Selektor body würde sich also auf die gesamte Seite beziehen.
Der zweite Bereich sind die Eigenschaften. Diese definieren die spezifischen visuellen Aspekte, die Sie ändern möchten. Eigenschaften sind wie Anweisungen, wie das ausgewählte Element aussehen soll. Übliche Beispiele sind Farbe, Schriftgröße, Hintergrundfarbe und Rand.
Als nächstes folgen die Werte. Diese geben an, auf was die Eigenschaft eingestellt werden soll. Der Wert für Farbe könnte zum Beispiel rot, blau oder ein bestimmter Farbcode sein.
Dann gibt es noch die CSS-Klasse, eine Art Attribut, das HTML-Elementen zugewiesen werden kann. Sie können einem Element im HTML-Code eine Klasse zuweisen und diese dann in Ihrem CSS verwenden, um dieselben Stile auf alle Elemente mit dieser Klasse anzuwenden.
Nehmen wir an, Sie möchten die Hintergrundfarbe Ihrer gesamten Website in Schwarz ändern. Hier ist der CSS-Code dafür:
body {
background-color: black;
}
In diesem Beispiel:
bodyist der Selektor, der auf den gesamten Inhaltsbereich der Website abzielt.background-colorist die Eigenschaft, die angibt, welchen Aspekt wir ändern wollen.blackist der Wert, der die neue Hintergrundfarbe angibt.
Nehmen wir nun an, Sie möchten einen bestimmten Text auf Ihrer Website hervorheben. Sie könnten eine CSS-Klasse namens .highlight erstellen, die den Text fett macht und seine Farbe in Gelb ändert. So würden Sie diese Klasse in Ihrem CSS definieren:
.highlight {
font-weight: bold;
color: yellow;
}
Und so würden Sie es auf Elemente in Ihrem HTML anwenden:
<p class="highlight">This text will be highlighted.</p>
<div class="highlight">This div will also be highlighted.</div>
In diesem Beispiel:
.highlightist der Klassenselektor. Er wählt alle Elemente mit der Klasse „highlight“ aus.font-weight: bold;undcolor: yellow;sind Eigenschaften. Sie legen fest, welche Aspekte der ausgewählten Elemente wir ändern wollen.fettundgelbsind Werte. Sie geben die neuen Werte für die Eigenschaften an.
Wie kann ich benutzerdefinierten CSS-Code zu WordPress hinzufügen?
Wie Sie benutzerdefinierte CSS hinzufügen können, hängt davon ab, welche Art von WordPress-Theme Sie verwenden.
Wenn Sie ein klassisches Theme verwenden, können Sie im WordPress-Customizer die Option „Zusätzliches CSS“ auswählen, um Ihren Code dort hinzuzufügen.
Wenn Sie ein Block-WordPress-Theme verwenden, wird der Theme-Customizer in Ihrem WordPress-Dashboard fehlen. Das liegt daran, dass Ihr Standard-Editor jetzt der Full-Site-Editor ist.
Trotzdem können Sie auf den WordPress Customizer zugreifen, indem Sie /wp-admin/customize.php an das Ende Ihres Domainnamens anhängen:
https://example.com/wp-admin/customize.php
Wenn Sie über den WordPress-Customizer benutzerdefinierte CSS hinzufügen, werden die Änderungen in der WordPress-Datenbank gespeichert, nicht in der physischen style.css-Datei (dem Stylesheet Ihres Themes).
Auf diese Weise können Sie Änderungen vornehmen, ohne die Themendateien direkt zu bearbeiten, was eine viel sicherere Methode ist.
Allerdings können Sie auf diese Weise keine komplexen CSS-Änderungen vornehmen. Die Alternative ist die Verwendung eines Code-Snippet-Plugins wie WPCode, mit dem Sie sicher benutzerdefinierte CSS in Ihr WordPress-Theme einfügen können.
Sie können auch ein Child-Theme erstellen und dort Ihren eigenen CSS-Code hinzufügen. Auf diese Weise sind Ihre CSS-Änderungen auch dann noch vorhanden, wenn das übergeordnete Theme aktualisiert wird.
Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website.
Und schließlich können Sie auch ein CSS-Editor-Plugin wie CSS Hero verwenden. Mit diesem Plugin können Sie CSS bearbeiten, ohne über Programmierkenntnisse zu verfügen. Weitere Informationen finden Sie in unserer CSS Hero-Bewertung.
Warum wird mein CSS nicht auf meiner WordPress-Website angezeigt?
Möglicherweise wird Ihr CSS aufgrund von Syntaxfehlern nicht auf Ihrer WordPress-Website angezeigt. Ein kleiner Fehler in Ihrem CSS-Code kann verhindern, dass er angewendet wird. Dies kann eine fehlende Klammer, ein Tippfehler in einem Eigenschaftsnamen oder ein falscher Wert sein.
Wenn Sie außerdem kürzlich CSS hinzugefügt oder geändert haben, müssen Sie möglicherweise Ihren Cache leeren, um die Änderungen zu sehen. Löschen Sie den Cache Ihres Browsers, und wenn Sie ein Caching-Plugin auf Ihrer WordPress-Website verwenden, sollten Sie auch dieses löschen.
Manchmal können andere Themen oder Plugins Ihr CSS beeinträchtigen. Versuchen Sie, andere Plugins nacheinander zu deaktivieren, um zu sehen, ob sich das Problem löst. Wenn dies der Fall ist, ist das zuletzt deaktivierte Plugin wahrscheinlich die Ursache des Konflikts.
Wenn Sie ein Child-Theme verwenden und Ihr CSS nicht angezeigt wird, vergewissern Sie sich, dass das Child-Theme korrekt eingerichtet ist und dass die CSS-Datei in der Datei functions.php des Child-Theme korrekt eingeordnet ist.
Wenn Sie Hilfe benötigen, können Sie unseren Leitfaden für Einsteiger zur Fehlerbehebung bei WordPress-Fehlern lesen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, mehr über CSS in WordPress zu erfahren. Vielleicht möchten Sie auch unsere Liste mit weiterführenden Artikeln über nützliche WordPress-Tipps, -Tricks und -Ideen lesen, die Sie weiter unten finden.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
