So fügen Sie benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzu 1

So fügen Sie benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzu

Es gibt sicherlich viele interessante Möglichkeiten, ein bestimmtes Erscheinungsbild für Ihre Website zu erstellen – wenn Sie das möchten. Manchmal ist es viel einfacher und wahrscheinlich produktiver, eine begrenzte Auswahl an Auswahlmöglichkeiten zu haben. Wenn Sie WordPress verwenden, das Content-Management-System, das kontrolliert zwei Drittel des CMS-Marktes, können Sie entscheiden, wie stark Sie in das Erscheinungsbild Ihrer Website eingebunden werden möchten.

Die erste Anpassungsebene ist normalerweise das Thema. Für manche könnte es auch die letzte Stufe sein, denn ein gutes Theme kann leicht ein Erscheinungsbild erzeugen, das der Rolle der Website entspricht. Wenn Sie beispielsweise in der Gastronomie tätig sind, können Sie ein Essens- und Restaurantthema für Ihre Website auswählen und fertig. Oder, wenn Sie ein IT-Startup haben, können Sie sich mit einem großartigen technischen WordPress-Theme zufrieden geben.

Jedes Thema bietet einige Anpassungsoptionen. Sie können beispielsweise die Seitenlayouts oder das Aussehen bestimmter Elemente auf der Seite auswählen. Wenn Sie jedoch einige Änderungen vornehmen möchten, die über die mit dem Thema verbundenen Änderungen hinausgehen, ist die Verwendung von benutzerdefiniertem CSS ein guter Weg. Hier sind die drei Möglichkeiten, wie Sie dies tun können.

So fügen Sie benutzerdefiniertes CSS mit dem Customizer hinzu

Der bequemste Weg, benutzerdefiniertes CSS zu Ihrer Website hinzuzufügen, ist die Verwendung des Customizers. Suchen Sie die Option „Erscheinungsbild“ im Dashboard-Menü. Bewegen Sie den Mauszeiger darüber und Sie sehen die Schaltfläche „Anpassen“. Klicken Sie darauf, um in den Customizer zu gelangen.

Aussehen anpassen

Sobald Sie drinnen sind, haben Sie Zugriff auf verschiedene Anpassungsoptionen, je nach Thema und Plugins, die Sie installiert haben. Ganz unten befindet sich die Option „Zusätzliches CSS“.

Zusätzliche CSS

Klicken Sie darauf und Sie gelangen in den Bereich, in dem Sie alle gewünschten benutzerdefinierten CSS hinzufügen können. Sie können die Auswirkungen jeder Änderung, die Sie vornehmen, in Echtzeit sehen, aber sie werden erst live geschaltet, wenn Sie auf die Schaltfläche „Veröffentlichen“ klicken.

Zusätzliche CSS-Einstellungen

Die WYSIWYG-Natur des Customizers ist vielleicht der größte Vorteil, aber nicht der einzige. Es kommt mit WordPress als Kernfunktion, sodass Sie es sofort verwenden können, ohne zusätzliche Plugins zu basteln. Sie erhalten auch eine ziemlich grundlegende Überprüfung, um sicherzustellen, dass Ihre Syntax in Ordnung ist.

Das Problem beim Hinzufügen von benutzerdefiniertem CSS auf diese Weise ist, dass alles an Ihr Thema gebunden ist. Wenn Sie zu einem anderen wechseln möchten, folgt das benutzerdefinierte CSS nicht. Zumindest nicht allein, das heißt, Sie können es jederzeit in Ihr neues Thema kopieren.

Fügen Sie benutzerdefiniertes CSS hinzu, indem Sie das Stylesheet des (untergeordneten) Themes bearbeiten

Das Feld Zusätzliches CSS im Customizer ist nicht der einzige Ort, an dem Sie Ihrer WordPress-Website benutzerdefiniertes CSS hinzufügen können. Wenn Sie viele Änderungen mit Hunderten von Codezeilen vornehmen möchten, ist das Stylesheet Ihres Themes möglicherweise ein guter Ort, um dies zu tun.

Thema zum Bearbeiten auswählen

Das Bearbeiten des Stylesheets ist ein fortgeschrittener Vorgang, und das nicht nur, weil Sie CSS gut genug verstehen, um Hunderte von Codezeilen beim Anpassen der Website hinzufügen zu können. Das Hauptproblem beim Bearbeiten des Stylesheets besteht darin, dass jedes Mal, wenn Sie Ihr Design aktualisieren, die von Ihnen vorgenommenen Änderungen gelöscht werden.

Sie können dieses Problem umgehen, indem Sie ein untergeordnetes Thema erstellen. Der beste Weg, um zu verstehen, was ein WordPress-Child-Theme ist, besteht darin, es als eine Ebene zu betrachten, die Sie über dem regulären – übergeordneten – Thema erstellen. Die Änderungen, die Sie an dieser Ebene vornehmen, bleiben gleich, auch wenn Sie das übergeordnete Thema aktualisieren.

Wenn Sie also Ihrer Website benutzerdefiniertes CSS hinzufügen möchten, müssen Sie ein Child-Theme erstellen Erste. Navigieren Sie dann zum Theme-Editor, suchen Sie die Datei stylesheet.css und entfesseln Sie Ihren benutzerdefinierten CSS-Code.

So fügen Sie benutzerdefiniertes CSS mit einem benutzerdefinierten CSS-Plugin hinzu

Wenn Sie beispielsweise benutzerdefiniertes CSS hinzufügen möchten, das eine vollständige Änderung des Themas übersteht, wird es weder vom Customizer noch von der Stylesheet-Bearbeitung geschnitten. Sie können jedoch immer noch Änderungen vornehmen, die Sie mit einem benutzerdefinierten CSS-Plugin wie dem . auf ein anderes Thema übertragen können Einfaches benutzerdefiniertes CSS-Plugin.

Einfaches benutzerdefiniertes CSS

Nachdem Sie das Simple Custom CSS-Plugin heruntergeladen und installiert haben, haben Sie zwei Möglichkeiten, darauf zuzugreifen. Um zum Verwaltungsbildschirm des Plugins zu gelangen, navigieren Sie zur Erscheinungsbildoption des Hauptmenüs und wählen Sie dann Benutzerdefiniertes CSS aus dem Untermenü. Sie können das benutzerdefinierte CSS im Fenster hinzufügen und auf die Schaltfläche „Benutzerdefiniertes CSS aktualisieren“ klicken, um die Änderungen zu speichern.

Benutzerdefinierte CSS-Aktualisierungsschaltfläche

Es ist auch möglich, Simple Custom CSS aus dem Customizer zu verwenden. Nachdem Sie zum Customizer – Erscheinungsbild > Anpassen – navigiert sind, klicken Sie auf die Registerkarte „Simple Custom CSS“ und Sie gelangen zum Customizer-Bereich des Plugins. Dort sehen Sie eine Vorschau aller vorgenommenen Änderungen, bevor Sie sie speichern.

Lass es uns einwickeln!

Eines der besten Dinge an WordPress ist, wie viel Freiheit es Ihnen bei der Anpassung Ihrer Website gibt. Aber wenn Sie unter den vielen Themes, die Sie herunterladen und installieren können, nicht jede einzelne Anpassungsoption finden, die Sie benötigen, müssen Sie sich keine Sorgen machen. Sie können die erforderlichen Änderungen vornehmen, indem Sie benutzerdefiniertes CSS hinzufügen. Mit drei verschiedenen Methoden, die Sie dafür verwenden können, finden Sie bestimmt eine, die so bequem ist, wie Sie es brauchen.

Unterstützen Sie unsere Arbeit ❤️

Wenn Ihnen dieser Artikel gefallen hat, können Sie uns mit einem Trinkgeld unterstützen, damit wir weiterhin großartige Inhalte veröffentlichen können.

Sichere Zahlung mit PayPal