So behalten Sie benutzerdefiniertes CSS bei, wenn Sie ein WordPress-Theme aktualisieren
Veröffentlicht: 2022-05-05Themes bestimmen das Layout und Erscheinungsbild von WordPress-Websites. Unabhängig davon, für welches Thema Sie sich entscheiden, müssen Sie es möglicherweise ein wenig an Ihre spezifischen Bedürfnisse anpassen.
Eine Möglichkeit, Ihr Design anzupassen, ist die Verwendung von Cascading Style Sheets (CSS). Mit dieser beliebten Stylesheet-Sprache können Sie fast jedes Element Ihres Designs ändern. Sie können Ihrem Design benutzerdefiniertes CSS hinzufügen, um Hintergrundfarben festzulegen, Schriftgrößen zu ändern, Abstände zwischen Inhalten zu erstellen, Menüs neu zu positionieren und vieles mehr. Benutzerdefiniertes CSS kann jedoch gelöscht werden, wenn Sie Ihr Design das nächste Mal aktualisieren.
Warum Theme-Updates benutzerdefiniertes CSS beschädigen
Alle Designs haben eine style.css-Datei. Es ist im Themenordner verfügbar und enthält das CSS. Wenn Sie Ihr Design aktualisieren, laden Sie eine neue, andere Version davon herunter, mit der Sie die vorhandene Version ersetzen können.
Beim Aktualisieren Ihres Designs wird die vorhandene style.css-Datei gelöscht und durch eine neue, neue style.css-Datei ersetzt. Die neue style.css-Datei enthält kein benutzerdefiniertes CSS, das Sie möglicherweise zuvor hinzugefügt haben. Sie können das gelöschte benutzerdefinierte CSS jederzeit wieder hinzufügen, aber dies nach jedem Theme-Update kann mühsam sein.
Zum Customizer hinzufügen
Sie können benutzerdefiniertes CSS beibehalten, wenn Sie Ihr Design aktualisieren, indem Sie es dem Customizer hinzufügen. Der Customizer ist ein Theme-Anpassungstool im WordPress-Dashboard. Es verfügt über ein Feld „Zusätzliches CSS“. Anstatt benutzerdefiniertes CSS direkt zur style.css Ihres Designs hinzuzufügen, können Sie es diesem Feld hinzufügen.
Das Feld „Zusätzliches CSS“ wurde in Version 4.7 von WordPress eingeführt, um zu verhindern, dass benutzerdefiniertes CSS während Theme-Updates gelöscht wird. Es wirkt sich weder auf die Datei style.css noch auf andere Dateien im Designordner aus. Wenn Sie dem Customizer über dieses Feld benutzerdefiniertes CSS hinzufügen, wird es in der Datenbank Ihrer Website gespeichert. Sie können dann Ihr Design aktualisieren, während Sie das benutzerdefinierte CSS beibehalten.
Um auf den Customizer zuzugreifen, klicken Sie im WordPress-Dashboard auf „Erscheinungsbild“ und wählen Sie „Anpassen“. Die Registerkarte „Zusätzliches CSS“ befindet sich weiter unten. Wenn Sie auf diese Registerkarte klicken, wird ein Feld angezeigt, in das Sie benutzerdefiniertes CSS eingeben können. Beim Aktualisieren Ihres Designs werden nur die Dateien im Designordner ersetzt. Es wird die Datenbank Ihrer Website nicht ersetzen oder anderweitig beeinflussen, sodass das benutzerdefinierte CSS erhalten bleibt.
Durch das Hinzufügen von benutzerdefiniertem CSS zum Customizer können Sie eine Vorschau anzeigen. Der Customizer hat eine eingebaute Vorschaufunktion für alle Änderungen. Unabhängig davon, ob Sie neue Widgets einrichten oder benutzerdefiniertes CSS hinzufügen, zeigt der Customizer, wie Ihre Website aussehen wird. Sie können dann mit der Anpassung fortfahren, indem Sie auf „Veröffentlichen“ klicken. Wenn Ihre Website nicht richtig aussieht, können Sie die Anpassungsoptionen ändern, bevor Sie sie live schalten. Unabhängig davon zeigt der Customizer eine Vorschau Ihrer Website mit dem benutzerdefinierten CSS an.
Erstellen Sie ein Child-Theme
Eine andere Lösung besteht darin, ein untergeordnetes Thema zu erstellen. Untergeordnete Themen sind im Wesentlichen Kopien anderer Themen, die Sie anpassen können, ohne befürchten zu müssen, dass Ihre Änderungen verloren gehen. Sie sind keine vollständigen Kopien. Vielmehr bestehen die meisten Child-Themes aus nur wenigen grundlegenden Dateien, darunter eine style.css-Datei und eine functions.php-Datei.
Untergeordnete Themen sind so konzipiert, dass sie die Eigenschaften eines übergeordneten Themas erben. Sie können Ihr Design als übergeordnetes Design verwenden. Das Child-Theme hat einen eigenen Ordner, der seine eigene style.css-Datei und eine functions.php-Datei enthält. Das Child-Theme enthält jedoch keine index.php-Datei, page.php-Datei, single.php-Datei oder andere Standard-Theme-Dateien. Es wird das übergeordnete Thema für diese Eigenschaften nutzen.
Da untergeordnete Themen ihre eigene style.css-Datei haben, unterstützen sie benutzerdefiniertes CSS. Noch wichtiger ist, dass untergeordnete Designs ihr gesamtes benutzerdefiniertes CSS behalten, wenn ihre übergeordneten Designs aktualisiert werden. Die Aktualisierung des Parent-Themes wirkt sich nicht auf die style.css-Datei des Child-Themes aus. Anweisungen zum Erstellen eines untergeordneten Designs finden Sie unter developer.wordpress.org/themes/advanced-topics/child-theme. Alternativ verfügen einige Premium-Themes über ein untergeordnetes Thema.
Für nur ein paar Zeilen benutzerdefiniertes CSS möchten Sie es vielleicht zum Customizer hinzufügen. Für größere Mengen an benutzerdefiniertem CSS lohnt es sich wahrscheinlich, ein untergeordnetes Thema zu erstellen. Ein untergeordnetes Design stellt Ihnen eine separate style.css-Datei zur Verfügung, die Sie anpassen können.
Sie können sogar offline an der style.css-Datei des untergeordneten Designs arbeiten, und da es sich um eine separate Datei handelt, haben Sie viel Platz für benutzerdefiniertes CSS. Das Hinzufügen von benutzerdefiniertem CSS zum Customizer beschränkt Sie auf ein kleines Feld, auf das nur online zugegriffen werden kann. Der Customizer bietet den Vorteil eines Vorschaumodus, während ein untergeordnetes Design den Vorteil einer separaten style.css-Datei bietet.
Verwenden Sie ein benutzerdefiniertes CSS-Plugin
Sie können ein benutzerdefiniertes CSS-Plugin verwenden. Das Plug-in „Simple Custom CSS“ zum Beispiel macht genau das, wonach es sich anhört: Es ermöglicht Ihnen, ganz einfach benutzerdefiniertes CSS zu Ihrem Design hinzuzufügen. Benutzerdefiniertes CSS, das dem Plugin hinzugefügt wird, überschreibt das eigene CSS deines Themes.
Sobald Sie das Plug-in „Simple Custom CSS“ aktiviert haben, sollten Sie im WordPress-Dashboard unter „Darstellung“ eine neue Registerkarte „Custom CSS“ sehen. Hier können Sie benutzerdefiniertes CSS hinzufügen. Wenn Sie Ihr Design aktualisieren, bleibt das benutzerdefinierte CSS erhalten. Durch die Aktualisierung Ihres Designs wird die style.css-Datei des Designs ersetzt, aber das Plugin überschreibt die neue style.css-Datei mit Ihrem benutzerdefinierten CSS.
Es gibt auch das Simple Custom CSS- und JS-Plugin, das sowohl benutzerdefiniertes CSS als auch benutzerdefiniertes JavaScript unterstützt. Sie können es verwenden, um benutzerdefiniertes CSS zu erstellen, das das eigene CSS Ihres Designs überschreibt. Wenn Sie sich nicht mit der Erstellung eines untergeordneten Designs herumschlagen möchten, können Sie ein benutzerdefiniertes CSS-Plugin verwenden. Das Herunterladen eines benutzerdefinierten CSS-Plugins ist eine einfache Möglichkeit, benutzerdefiniertes CSS während Theme-Updates beizubehalten.
Fazit
Es ist frustrierend, wenn Sie nach dem Aktualisieren eines Designs benutzerdefiniertes CSS verlieren. Selbst wenn Sie das benutzerdefinierte CSS lokal auf Ihrem Computer gespeichert haben, müssen Sie zurückgehen und es hinzufügen. Sie können das benutzerdefinierte CSS Ihres Designs beibehalten, indem Sie den Customizer im WordPress-Dashboard verwenden, ein untergeordnetes Design erstellen oder ein benutzerdefiniertes CSS-Plugin verwenden.
