CSS (Cascading Style Sheets) ist eine Sprache mit einem Satz von Regeln, die definieren, wie die Elemente auf Ihrer Website aussehen.
Diese Regeln steuern die Designelemente Ihrer Website, wie z. B. die Schriftgröße und -farbe, die Hintergrundfarbe Ihrer Website und den Abstand zwischen verschiedenen Abschnitten.
Betrachten Sie CSS als die Styling-Anweisungen 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), gibt CSS dem Browser vor, wie diese Elemente visuell dargestellt werden sollen.
Warum sollten Sie CSS in WordPress bearbeiten müssen?
Während WordPress-Themes eine Vielzahl von Designoptionen bieten, möchten Sie möglicherweise manchmal spezifische Änderungen am Erscheinungsbild Ihrer Website vornehmen, die über die integrierten Einstellungen des Themes hinausgehen. Hier ist die Bearbeitung von CSS für WordPress-Benutzer nützlich.
Zum Beispiel möchten Sie vielleicht die Hintergrundfarbe eines bestimmten Bereichs Ihrer Website ändern oder die Schriftgröße für bessere Lesbarkeit leicht anpassen.
Sie können auch das Erscheinungsbild Ihrer Website personalisieren und sie von anderen Websites, die dasselbe Theme verwenden, unterscheiden. Dies kann das Ändern der Textauswahlfarbe, das Hinzufügen eines Parallax-Effekts oder das Gestalten des WordPress-Kommentarformulars umfassen.
Manchmal zeigt ein Theme Elemente in Ihrem Webdesign nicht genau so an, wie Sie es möchten. Mit ein paar Zeilen CSS können Sie kleinere Probleme beheben, wie z. B. das Zentrieren von Text, der nicht zentriert erscheint, oder das Anpassen des Abstands oder Rands um ein Bild.
Muss ich CSS kennen, um WordPress zu verwenden?
Nein, Sie müssen nicht unbedingt CSS kennen, um eine WordPress-Website zu erstellen. Die meisten WordPress-Themes verfügen über eine Vielzahl von integrierten Designoptionen, mit denen Sie das Aussehen Ihrer Website anpassen können, ohne Code anfassen zu müssen.
Die CSS-Bearbeitung wird typischerweise als fortgeschrittene Funktion betrachtet. Während Anfänger WordPress sicherlich ohne sie nutzen können, eröffnet das Wissen über CSS mehr Möglichkeiten zur 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 zur Durchführung von CSS-Änderungen und ist mit vielen beliebten WordPress-Themes kompatibel.
Dennoch gibt Ihnen das Verständnis, wie CSS funktioniert, mehr Kontrolle und Flexibilität bei der Anpassung Ihrer WordPress-Website.
Grundlagen von CSS in WordPress (Mit Beispielen)
CSS verwendet eine bestimmte Syntax, um zu definieren, wie Elemente auf Ihrer Website aussehen sollen. Auch wenn es anfangs komplex erscheinen mag, ist die Grundstruktur recht einfach.
Das Erste, was Sie wissen sollten, sind CSS-Selektoren. Diese sagen CSS, welche Elemente auf Ihrer Website gestylt werden sollen. Sie sind wie Etiketten, die auf bestimmte Teile Ihrer Website zeigen.
Zum Beispiel bezieht sich der body-Tag auf den gesamten Inhaltsbereich Ihrer Website. Der Selektor body würde also die gesamte Seite ansprechen.
Die zweite sind Eigenschaften. Diese definieren die spezifischen visuellen Aspekte, die Sie ändern möchten. Eigenschaften sind wie Anweisungen, wie das ausgewählte Element aussehen soll. Gängige Beispiele sind color, font-size, background-color und margin.
Als Nächstes kommen die Werte. Diese geben an, worauf die Eigenschaft gesetzt werden soll. Zum Beispiel könnte der Wert für color red, blue oder ein bestimmter Farbcode sein.
Dann gibt es 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 allen Elementen mit dieser Klasse die gleichen Stile zuzuweisen.
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 den gesamten Inhaltsbereich der Website anspricht.background-colorist die Eigenschaft, die definiert, welchen Aspekt wir ändern möchten.blackist der Wert, der die neue Hintergrundfarbe angibt.
Angenommen, Sie möchten nun bestimmten Text auf Ihrer Website hervorheben. Sie könnten eine CSS-Klasse namens .highlight erstellen, die den Text fett macht und seine Farbe auf 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 definieren, welche Aspekte der ausgewählten Elemente wir ändern möchten.boldundyellowsind Werte. Sie geben die neuen Werte für die Eigenschaften an.
Wie füge ich benutzerdefinierten CSS-Code zu WordPress hinzu?
Wie Sie benutzerdefiniertes 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 zum WordPress Customizer gehen und 'Zusätzliches CSS' auswählen, um Ihren Code dort hinzuzufügen.
Wenn Sie ein Block-WordPress-Theme verwenden, fehlt der Theme Customizer in Ihrem WordPress-Dashboard. Das liegt daran, dass Ihr Standardeditor jetzt der Full-Site-Editor ist.
Nichtsdestotrotz können Sie den WordPress Customizer immer noch aufrufen, indem Sie /wp-admin/customize.php am Ende Ihres Domainnamens hinzufügen, wie hier:
https://example.com/wp-admin/customize.php
Wenn Sie benutzerdefiniertes CSS über den WordPress Customizer hinzufügen, werden die Änderungen in der WordPress-Datenbank gespeichert und nicht in der physischen style.css-Datei (dem Stylesheet Ihres Themes).
Dieser Ansatz ermöglicht es Ihnen, Änderungen vorzunehmen, ohne die Theme-Dateien direkt zu bearbeiten, was eine wesentlich sicherere Methode ist.
Dennoch können Sie auf diese Weise keine komplexen CSS-Änderungen vornehmen. Die Alternative ist daher die Verwendung eines Code-Snippet-Plugins wie WPCode, da es benutzerdefiniertes CSS sicher in Ihr WordPress-Theme einfügen kann.
Sie können auch ein Child Theme erstellen und Ihren benutzerdefinierten CSS-Code dort hinzufügen. Auf diese Weise bleiben Ihre CSS-Anpassungen auch dann erhalten, wenn das übergeordnete Theme aktualisiert wird.
Für weitere Informationen können Sie unsere Schritt-für-Schritt-Anleitung lesen, wie Sie benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzufügen: how to add custom CSS to your WordPress site.
Schließlich können Sie auch ein CSS-Editor-Plugin wie CSS Hero verwenden. Dieses Plugin ermöglicht es Ihnen, CSS zu bearbeiten, ohne programmieren zu können. Lesen Sie unsere CSS Hero-Bewertung für weitere Informationen.
Warum wird mein CSS auf meiner WordPress-Seite nicht angezeigt?
Ihr CSS wird möglicherweise nicht auf Ihrer WordPress-Website angezeigt, da Syntaxfehler vorliegen. Ein kleiner Fehler in Ihrem CSS-Code kann verhindern, dass er angewendet wird. Dies könnte eine fehlende Klammer, ein Tippfehler in einem Eigenschaftsnamen oder ein falscher Wert sein.
Wenn Sie außerdem kürzlich Ihr CSS hinzugefügt oder geändert haben, müssen Sie möglicherweise Ihren Cache leeren, um die Änderungen zu sehen. Leeren Sie den Cache Ihres Browsers und, wenn Sie ein Caching-Plugin auf Ihrer WordPress-Seite verwenden, sollten Sie auch dieses leeren.
Manchmal können andere Themes oder Plugins mit Ihrem CSS in Konflikt geraten. Versuchen Sie, andere Plugins nacheinander zu deaktivieren, um zu sehen, ob das Problem behoben wird. Wenn ja, ist das zuletzt deaktivierte Plugin wahrscheinlich die Ursache für den Konflikt.
Wenn Sie ein Child-Theme verwenden und Ihr CSS nicht angezeigt wird, stellen Sie sicher, dass das Child-Theme korrekt eingerichtet ist und die CSS-Datei korrekt in der functions.php-Datei des Child-Themes eingebunden ist.
Wenn Sie Hilfe benötigen, können Sie sich unseren Anfängerleitfaden zur Fehlerbehebung bei WordPress-Fehlern ansehen.
Wir hoffen, dieser Artikel hat Ihnen geholfen, mehr über CSS in WordPress zu erfahren. Vielleicht möchten Sie auch unsere Liste mit zusätzlichen Lektüren unten für verwandte Artikel über nützliche WordPress-Tipps, -Tricks und -Ideen einsehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
