Anpassen von WordPress-Themes mit CSS

Themes sind eines der größten Verkaufsargumente von WordPress. Das richtige Thema kann Ihre Website wirklich hervorheben. Normalerweise möchten Sie jedoch mindestens ein paar benutzerdefinierte Änderungen an dem von Ihnen verwendeten Thema vornehmen, um alles genau richtig zu machen.

In den meisten Fällen müssen Sie Cascading Style Sheets (CSS) verwenden, um den Stil Ihres Designs anzupassen. Mit WordPress gibt es mehrere Möglichkeiten, dies zu tun. Auch wenn Sie keine Erfahrung im Umgang mit Code haben, können Sie ganz einfach Ihre eigenen CSS-Anpassungen zum WordPress-Theme hinzufügen.

In diesem Leitfaden werfen wir einen Blick auf drei Methoden, mit denen Sie benutzerdefiniertes CSS in WordPress hinzufügen und bearbeiten können. Wir führen Sie durch den gesamten Prozess und sprechen darüber, wann es sinnvoll ist, die einzelnen Techniken anzuwenden. Lass uns anfangen!

Fügen Sie benutzerdefiniertes CSS mit dem Theme Customizer hinzu

Erfahrungslevel: Anfänger

Mit dem WordPress Customizer können Sie Änderungen am Design Ihrer Website vornehmen und diese in Echtzeit in der Vorschau anzeigen. Um darauf zuzugreifen, melden Sie sich bei Ihrem WordPress-Dashboard an und navigieren Sie zur Registerkarte Aussehen > Anpassen :

Es gibt viele Einstellungen, mit denen Sie hier herumspielen können. Suchen Sie jedoch jetzt nach der Registerkarte Zusätzliches CSS . Sobald Sie darauf klicken, öffnet sich ein neuer Abschnitt mit einem Feld, in dem Sie benutzerdefiniertes CSS hinzufügen können:

Wenn CSS neu für dich ist, kannst du im offiziellen Codex mehr darüber lesen, wie du es mit WordPress verwenden kannst. Es gibt auch viele andere hervorragende Ressourcen zu den Grundlagen von CSS, und wir empfehlen, sich einige davon anzusehen.

CSS kann ein wenig komplex werden, aber Sie können viel erreichen, wenn Sie nur die Grundlagen kennen. Das Tolle an der Verwendung des WordPress Customizer ist, dass Sie alle Änderungen, die Sie mit CSS vornehmen, sofort in der Vorschau anzeigen können. Das bedeutet, dass dieser Ansatz perfekt ist, um zu lernen, wie CSS funktioniert.

Hinweis : Die Änderungen, die Sie mit dem Customizer vornehmen, werden nicht beibehalten, wenn Sie das Design ändern. Außerdem kann das Aktualisieren Ihres aktuellen Designs Ihr benutzerdefiniertes CSS löschen. Wir empfehlen diesen Ansatz daher nicht, wenn Sie beabsichtigen, viele Änderungen vorzunehmen oder Themenoptionen zwischendurch zu ändern.

Fügen Sie benutzerdefiniertes CSS mit einem Plugin hinzu

Erfahrungslevel: Anfänger bis Fortgeschrittene

Die obige Methode funktioniert gut, aber Sie können Ihre Optionen durch die Verwendung von Plugins erweitern. In den folgenden Abschnitten werden wir drei Plugins untersuchen, mit denen Sie Ihr WordPress-Theme anpassen können.

Hinweis : Das Erfahrungsniveau für die Bearbeitung von WordPress CSS mit Plugins hängt davon ab, welches Tool Sie verwenden. Wir empfehlen, sie alle auszuprobieren und zu sehen, welche sich am wohlsten fühlt.

Erweiterter CSS-Editor

Wenn Sie den WordPress Customizer gerne verwenden, aber mehr Optionen wünschen, ist dieses Plugin einen Blick wert. Mit dem erweiterten CSS-Editor können Sie benutzerdefiniertes CSS für Desktops, Telefone und Tablets hinzufügen. Auf diese Weise können Sie das Erscheinungsbild Ihrer Website auf jedem Gerätetyp optimieren.

Navigieren Sie nach der Installation des WordPress-Plug-ins in Ihrem Dashboard zur Registerkarte Aussehen > Customizer . Sie sollten eine neue Option „Erweiterter CSS-Editor“ sehen, die Ihnen Zugriff auf mehrere Editoren für jeden Gerätetyp bietet:

Sie müssen lediglich das gewünschte benutzerdefinierte CSS hinzufügen, testen, ob es ordnungsgemäß funktioniert, und die Änderungen an Ihrem Design speichern.

Vorteile:

• Sie haben die volle Kontrolle darüber, wie Ihre Website auf allen Geräten aussieht.
• Sie können Ihr Design weiterhin über den Customizer bearbeiten.

Nachteile:

• Das Hinzufügen von benutzerdefiniertem CSS für mehrere Gerätetypen kann eine Menge Arbeit sein.

Durchschnittliche Bewertung: 4,5/5

Hinweis: Dieses Plugin enthält auch eine Option zum Minimieren Ihres CSS, was dazu beitragen kann, die Ladezeiten Ihrer Website zu verkürzen.

Modulares benutzerdefiniertes CSS

Modular Custom CSS ermöglicht es Ihnen, CSS zu Ihrem Design über den WordPress Customizer hinzuzufügen. Es fügt dem Standard-CSS-Editor jedoch auch einige sehr willkommene Funktionen hinzu. Genauer gesagt, mit diesem Plug-in können Sie benutzerdefiniertes CSS für einzelne Themen erstellen und globale Änderungen vornehmen, die über alle von Ihnen eingerichteten Themen hinweg bestehen bleiben:

Um auf diese Felder zuzugreifen, müssen Sie zum Abschnitt „Darstellung“ > „Anpasser“ > „Zusätzliches CSS“ zurückkehren. Sobald Sie dort sind, können Sie mit den Änderungen beginnen.

Vorteile:

• Sie können benutzerdefiniertes CSS nur für bestimmte Themen hinzufügen und Änderungen vornehmen, die auch dann bestehen bleiben, wenn Sie die Themen wechseln.

Nachteile:

• „Globales“ CSS passt möglicherweise nicht zu jedem Thema, daher müssen Sie vorsichtig sein, wenn Sie zu einem neuen wechseln.

Durchschnittliche Bewertung: 5/5

SiteOrigin-CSS

SiteOrigin CSS ist eine Abkehr von den Plugins, über die wir bisher gesprochen haben. Anstatt dem Customizer neue Funktionen hinzuzufügen, bietet er einen eigenständigen WordPress-CSS-Editor. Sie können auf diesen neuen Editor zugreifen, indem Sie nach der Installation des Plugins zur Registerkarte Darstellung > Benutzerdefiniertes CSS navigieren:

Auf den ersten Blick sieht dieser CSS-Editor nicht nach viel aus. Wenn Sie jedoch auf das Augensymbol klicken, starten Sie einen visuellen Editor. Hier können Sie auf ein beliebiges Element Ihres Designs klicken und es einfach mit CSS bearbeiten:

Das SiteOrigin CSS-Plugin kann anfangs etwas überwältigend sein. Es kann Ihnen jedoch auch viel Zeit sparen, da Sie nicht nach den richtigen Selektoren suchen müssen. Sie müssen lediglich auf das Element klicken, das Sie ändern möchten, und dann den gewünschten CSS-Code hinzufügen.

Vorteile:

• Sie können jedes gewünschte Element auf Ihrer Website bearbeiten, indem Sie darauf klicken.
• Mit diesem Plugin können Sie einige einfache Aspekte Ihres Designs ändern, ohne CSS verwenden zu müssen, z. B. die Schriftarten.

Nachteile:

• Es kann schwierig sein, den Überblick über alle benutzerdefinierten CSS zu behalten, die Sie Ihrem Design hinzufügen, wenn Sie mehrere Elemente optimieren.

Durchschnittliche Bewertung: 4,9/5

CSS mit Child-Theme-Stylesheet bearbeiten

Erfahrungsstufe: Fortgeschritten

Ein Child-Theme ist eine Kopie eines bestehenden Themes (bekannt als „Eltern“). Untergeordnete Themen ermöglichen es Ihnen, sicher Änderungen an Ihrer WordPress-Website vorzunehmen. Das liegt daran, dass Sie das übergeordnete Design immer noch aktualisieren können, ohne dass Ihre benutzerdefinierten CSS-Anpassungen verloren gehen. Wenn Sie außerdem CSS hinzufügen, das sich negativ auf Ihre Website auswirkt, können Sie das untergeordnete Thema einfach deaktivieren.

Jedes benutzerdefinierte CSS, das Sie einem untergeordneten Design hinzufügen, überschreibt die Stile des übergeordneten Designs. Damit dies funktioniert, müssen Sie jedoch zunächst wissen, wie Sie ein untergeordnetes Thema erstellen. Sobald Ihr „Kind“ bereit ist, können Sie mit einem FTP-Client wie FileZilla auf seine Dateien zugreifen.

Nachdem Sie sich über FTP mit Ihrer Website verbunden haben, sollten Sie Ihren Stammordner suchen, der häufig public_html oder www heißt oder nach Ihrer Website benannt ist:

Navigieren Sie als Nächstes zum Verzeichnis wp-content/themes . Dort finden Sie einzelne Ordner für alle Ihre Themen, einschließlich des von Ihnen eingerichteten untergeordneten Themas. Öffnen Sie den Ordner des untergeordneten Designs und suchen Sie darin nach der style.css- Datei:

Klicken Sie mit der rechten Maustaste auf die Designdatei und wählen Sie die Option Anzeigen/Bearbeiten . Dadurch wird die Datei mit Ihrem Standard-Texteditor geöffnet, sodass Sie Änderungen daran vornehmen können. Das bedeutet, dass Sie Ihrem Design benutzerdefiniertes CSS hinzufügen können, nur dass Sie jetzt einen Volltext-Editor anstelle des WordPress-Customizers verwenden.

Wenn Sie fertig sind, speichern Sie die Änderungen an der Datei und schließen Sie den Editor. Dann können Sie Ihre Website besuchen, um zu sehen, ob die von Ihnen vorgenommenen Änderungen wie beabsichtigt funktioniert haben. Wenn dies nicht der Fall ist, können Sie zu Ihrer style.css- Datei zurückkehren und ihr CSS weiter optimieren.

Hinweis: Dies ist eine Übersicht auf hoher Ebene, und es gibt noch viel mehr zum Einrichten und Verwenden eines untergeordneten Designs. Wir empfehlen Ihnen, vorsichtig vorzugehen, wenn Sie neu in diesem Prozess sind.

Benutzerdefiniertes CSS mit Theme Customizer vs. CSS-Plugins vs. Child-Theme-Stylesheet

Wie Sie sehen können, haben Sie viele Optionen, wenn es darum geht, benutzerdefiniertes CSS zu WordPress hinzuzufügen. Die Wahl des richtigen Ansatzes kann jedoch eine Herausforderung sein. Lassen Sie uns die Auswahlmöglichkeiten entsprechend Ihrer Erfahrung mit der Plattform und mit CSS im Allgemeinen aufschlüsseln:

• Sie sind neu bei WordPress und nicht daran gewöhnt, CSS zu verwenden. In diesem Szenario ist es am besten, beim WordPress Customizer zu bleiben. Damit können Sie Änderungen sofort in der Vorschau anzeigen und sich an die Verwendung von CSS gewöhnen.
• Du hast Erfahrung mit WordPress und CSS. In diesem Stadium werden Sie mehr Optionen wünschen, als der Standard-Customizer bietet. Daher empfehlen wir die Verwendung von Plugins, die die Funktionalität verbessern, um benutzerdefiniertes CSS in WordPress zu bearbeiten.
• Du bist ein WordPress-Veteran, der mit CSS vertraut ist. Wenn Sie sich nicht von CSS und Code-Snippets einschüchtern lassen, möchten Sie wahrscheinlich ein untergeordnetes Design einrichten und sein Stylesheet manuell bearbeiten.

Denken Sie daran, dass dies nur Richtlinien sind, und Sie sollten sich frei fühlen, den Ansatz zu verwenden, der sich für Sie am angenehmsten anfühlt.

Verbessern Sie das digitale Erlebnis mit einem großartigen Design und erstklassigem Hosting

Das Design Ihrer Website spielt eine wichtige Rolle dafür, was Besucher darüber denken. Mit WordPress erhalten Sie Zugriff auf Tausende von Themen, und Sie können jedes davon mit benutzerdefiniertem CSS bearbeiten.

Beim Betrieb einer erfolgreichen Website geht es jedoch nicht nur um das Aussehen. Sie benötigen außerdem ein WordPress-Webhosting, das hervorragende Leistung, Sicherheit und Support bietet. Mit WP Engine erhalten Sie mit jedem unserer Pläne Zugriff auf all diese Funktionen!