Benutzerdefiniertes CSS: Solltest du ein WordPress Child Theme oder den Customizer verwenden?

WordPress ist ein dynamisch flexibles Tool, das sowohl von erfahrenen Webentwicklern als auch von unerfahrenen Websitebesitzern verwendet werden kann. Wenn Sie keine Möglichkeit finden, etwas nach Ihren Wünschen zu gestalten, können Sie benutzerdefinierte Stile, auch CSS (Cascading Stylesheets) genannt, hinzufügen, um das Erscheinungsbild Ihrer Website zu ändern, von Layouts und Positionierung bis hin zu Farben, Schriftarten und mehr.

In der Vergangenheit haben WordPress-Benutzer untergeordnete Themen verwendet, um das Erscheinungsbild einer WordPress-Website anzupassen. Ein Child-Theme erbt alle Qualitäten eines Parent-Themes, tut jedoch etwas mehr. Als der WordPress Customizer hinzugefügt wurde, wurde es einfacher, ein bisschen CSS hinzuzufügen, um einige der gleichen Dinge zu bewirken, die wir traditionell mit untergeordneten Themen gemacht haben.

Wann verwendest du ein untergeordnetes Design und wann fügst du nur CSS zum Customizer hinzu? Gibt es Fälle, in denen ein Code-Snippet-Plugin sinnvoller ist?

In diesem Blogbeitrag betrachten wir die Anpassung Ihrer Designs mit Ihrem eigenen CSS auf verschiedene Weise und erörtern, wann es sinnvoll ist, eine Methode einer anderen vorzuziehen. Lassen Sie uns jedoch zunächst einige Begriffe klarstellen. Was ist der Customizer, was ist ein Child-Theme und welche Plugins erledigen diese Aufgaben ebenfalls?

Was ist ein Child-Theme?

Ein Child-Theme ist ein WordPress-Theme, das alle Eigenschaften eines anderen WordPress-Themes erbt. Das primäre Theme, das Parent-Theme, kann ein kommerzielles Theme sein, eines, das du selbst entwickelt hast, oder eines der kostenlosen Themes im Theme-Verzeichnis von WordPress.org. Und ja, Sie können ein untergeordnetes Thema von Kadence erstellen. Wir werden später in diesem Beitrag darüber sprechen, ob Sie dies möglicherweise nicht benötigen oder nicht, oder in Fällen, in denen Sie dies möglicherweise möchten.

Um ein untergeordnetes Design zu erstellen, erstellen Sie ein separates Verzeichnis unter wp-content/themes/ auf derselben Ebene wie das übergeordnete Design. Normalerweise beginnt es mit zwei Dateien, style.css und functions.php, aber Sie können einem untergeordneten Thema auch viele andere Anpassungen hinzufügen, die Sie möchten. Wir haben einen Leitfaden, der über das Erstellen von untergeordneten Themen spricht, falls Sie eines benötigen. Es gibt eine Reihe von Plugins, die ein untergeordnetes Design für Sie erstellen, und Sie können diese Konfigurations-Plugins für untergeordnete Designs entfernen, sobald das untergeordnete Design erstellt wurde.

Warum verwenden Menschen Child-Themes?

WordPress-Benutzer erstellen untergeordnete Themen, wenn sie eine Änderung am übergeordneten Thema vornehmen müssen, aber einen einfachen Upgrade-Prozess für das übergeordnete Thema wünschen.

Sie möchten beispielsweise Ihre Google Analytics-Tags zu Ihrem Website-Header hinzufügen oder sicherstellen, dass alle Formulare, Bilder oder Schaltflächen auf eine bestimmte Weise gestaltet sind, oder Sie nehmen möglicherweise Anpassungen an WooCommerce-E-Mails vor, die erforderlich sind in Ihrem Themenbereich gespeichert.

Wenn Sie ein untergeordnetes Design erstellen, werden alle Ihre Anpassungen gespeichert und vor Überschreiben geschützt, wenn Ihr übergeordnetes Design aktualisiert werden muss. Aus Sicherheits- und Funktionsgründen ist es wichtig, Themes und Plugins immer auf dem neuesten Stand zu halten. Sie möchten Ihr Design jedoch nicht jedes Mal neu anpassen müssen, wenn Ihr Design aktualisiert werden muss. Daher ist das Hinzufügen von Stilen zu einem untergeordneten Design sinnvoll. Auf diese Weise wird das Parent-Theme aktualisiert, während Ihr Child-Theme gleich bleibt.

Benötigen Sie ein Child-Theme?

In der Geschichte von WordPress war das Hinzufügen eines untergeordneten Themas eine der wichtigsten Anpassungen einer neuen WordPress-Site. Egal, was Sie mit WordPress machen, ein Thema war noch nie das A und O. In der Vergangenheit gab es zwei Gründe, ein untergeordnetes Thema zu erstellen.

1. So fügen Sie zusätzliches CSS hinzu.
2. Um zusätzliche Funktionen hinzuzufügen.

In der Vergangenheit war ein untergeordnetes Thema für die größtmögliche Anpassbarkeit der einfachste Weg, dies zu tun und gleichzeitig die Integrität des übergeordneten Themas zu bewahren. Aber vieles davon hat sich mit dem Hinzufügen des WordPress Customizer geändert.

Was ist der Customizer?

Wenn Sie eine WordPress-Seite oder einen Beitrag als angemeldeter Benutzer mit Bearbeitungs- oder Administratorrechten anzeigen, gibt es in der Admin-Leiste eine Option zum Anpassen von WordPress. Wenn Sie darauf klicken, wird ein Rahmen mit zwei Fenstern geöffnet, in dem sich links ein Customizer und rechts die Site selbst befindet.

Im Customizer haben Sie Zugriff auf alles, was für eine bestimmte Site angepasst werden kann. Es gibt einige allgemeine Steuerelemente, die der WordPress-Kern hinzufügt, aber viele Themen, einschließlich Kadence, fügen hier auch einige Einstellungsoptionen hinzu.

Das Hinzufügen des Customizers bietet Websitebesitzern neue Möglichkeiten, alles einzustellen, einschließlich einer Option zum Hinzufügen von zusätzlichem CSS. In der Vergangenheit war die einzige Möglichkeit, zusätzliches CSS auf eine WordPress-Seite anzuwenden, dies über ein untergeordnetes Thema zu tun.

Einstellungen von Farben, Schriftarten und sogar Kopf-/Fußzeilenlayouts können alle mit dem Customizer vorgenommen werden.

Kadence nimmt Child-Themes, Customizer und Plugins auf

Kadence vertritt den Standpunkt, dass Sie Ihre WordPress-Site über den Customizer so weit wie möglich anpassen können sollten. In den Kadence-Anpassungsoptionen stehen Ihnen eine Vielzahl von Einstellungen zur Verfügung, und Sie können sogar Ihren Google Analytics-Code über den Customizer zu Ihrer Website mit Kadence-Thema hinzufügen, indem Sie die Kadence Pro-Version verwenden.

Und wenn Sie Ihrer WordPress-Site zusätzliche Funktionen hinzufügen, war dies mit dem Code-Snippets-Plugin für die meisten Benutzer der einfachste Weg.

Auf diese Weise hat Kadence für die meisten WordPress-Benutzer die Art und Weise vereinfacht, wie zusätzliche Stile und Funktionen zu WordPress hinzugefügt werden, wodurch die Verwaltung einer WordPress-Site in Zukunft viel einfacher wird.

Allerdings sind nicht alle WordPress-Sites gleich, nicht alle WordPress-Benutzer sind gleich, und die Anforderungen einer Site und Implementierung können sich von denen einer anderen unterscheiden. Außerdem gibt es unzählige Methoden, um mit WordPress etwas zu erledigen.

Hier sind einige Dinge, die Sie beim Hinzufügen von benutzerdefiniertem Code zu Ihrer WordPress-Site beachten sollten.

Wann sollten Sie den Customizer verwenden

Wenn Sie nur ein paar Zeilen CSS-Code hinzufügen, ist der Customizer die beste Wahl. Sie können ganz einfach ein paar Zeilen hinzufügen, veröffentlichen und sehen, wie sich das CSS auf Ihrer WordPress-Site direkt in der Customizer-Ansicht auswirkt.

Für die meisten Websitebesitzer ist der Customizer alles, was sie brauchen.

Für Benutzer von Kadence Pro gibt es im Customizer Ereignisbereiche, um Header-, Footer- und Body-Tag-Skripte hinzuzufügen, also selbst wenn Sie Google Tag Manager, Google Analytics oder einen anderen Dienst verwenden, der das Hinzufügen von benutzerdefinierten Skripten erfordert, der Customizer kann Ihre Kundenbezogenheiten leicht unterbringen.

Wann sollten Sie das Code Snippets Plugin verwenden

Wenn Sie nur ein paar Zeilen PHP-Code hinzufügen, ist das Code-Snippets-Plugin eine großartige Möglichkeit, Code hinzuzufügen. Sie können Code mit dem Plugin einfach aktivieren und deaktivieren, um zu testen und sicherzustellen, dass der Code ordnungsgemäß funktioniert.

Im obigen Beispiel wurde einer Website mithilfe von Code-Snippets Code hinzugefügt, der nur im Admin-Bereich ausgeführt wird, damit LearnDash und Elementor für die Kursbearbeitung besser zusammenarbeiten. Dies hätte auch mit einem untergeordneten Thema erfolgen können, aber für diesen Websitebesitzer waren Code-Snippets eine einfachere Alternative.

Für Plugin-Minimalisten, die ihre Seiten mit so wenig Plugins wie möglich betreiben möchten, könnte das Code-Snippets-Plugin natürlich ein großer Sprung sein. Weniger Plugins mit der notwendigen Funktionalität auszubalancieren, muss von Fall zu Fall erfolgen.

Wann sollten Sie ein Child-Theme verwenden?

Wenn Sie mehr als ein paar Zeilen CSS-Code hinzufügen oder die Website-Funktionalität mit zusätzlichem PHP-Code erweitern, ist ein untergeordnetes Design möglicherweise der beste Weg. Der Customizer-CSS-Bereich ist ziemlich klein, daher könnte das Hinzufügen von viel CSS überwältigend oder verwirrend zu verwalten sein. In einem solchen Fall ist ein untergeordnetes Thema einfacher. Wenn Sie benutzerdefinierte Funktionen hinzufügen, die mehr sind als das, was das Code Snippets-Plugin einfach verwalten kann, kann ein untergeordnetes Thema dies problemlos tun.

Ein untergeordnetes Thema ermöglicht es Ihnen, mehrere CSS-Zeilen hinzuzufügen und mit dem Dateisystem zu verwalten, anstatt CSS in der Datenbank speichern und jeder einzelnen Seite hinzufügen zu müssen. Über ein untergeordnetes Thema wird CSS über eine style.css-Datei geladen, die von Browsern zwischengespeichert werden kann, was einen kleinen Leistungsvorteil bietet. Wenn Sie ziemlich viel benutzerdefinierten Code oder benutzerdefinierte Funktionen hinzufügen, ist ein untergeordnetes Thema der beste Weg.

Performance-Probleme

Wenn Sie die zusätzliche CSS-Funktion des Customizers verwenden, fügen die hinzugefügten Stile Ihren Code inline in einem <style>-Tag am Kopf jeder Seite hinzu. Das heißt, wenn Sie viel CSS haben, erhöhen Sie die Größe aller Ihrer Seiten einzeln. Der Browser Ihres Website-Besuchers lädt Ihre benutzerdefinierten Stile mehrmals herunter.

Andererseits bedeutet das Hinzufügen von CSS zu einer Stylesheet-Datei zwar, dass der Browser ein zusätzliches Stylesheet herunterladen muss, aber es bedeutet auch, dass der Browser die Datei zwischenspeichern kann, sodass die zusätzlichen Stile nicht für jede einzelne Seite erneut heruntergeladen werden müssen.

Wartungsprobleme

Das Hinzufügen von CSS zu Additional CSS bedeutet, dass Sie den Editor im Customizer verwenden müssen, der ziemlich eng ist und sich nicht gut für große CSS-Mengen eignet. Wenn Sie sie jedoch in einem Stylesheet hinzufügen, können Sie einen beliebigen Texteditor in einer bequemeren Größe verwenden. Sie können sogar den Design-Editor in wp-admin verwenden, um die CSS-Datei direkt im Browser zu bearbeiten. Sie finden den Designeditor unter Darstellung > Designdatei-Editor . Stellen Sie sicher, dass Sie beim Bearbeiten zum richtigen Design wechseln, und wir empfehlen Ihnen dringend, eine Sicherungskopie Ihrer Website zu erstellen, bevor Sie Änderungen an Ihren untergeordneten Designdateien vornehmen.

Bearbeiten Ihrer Themendateien

Wir empfehlen dringend, dass Sie eine dieser aufgeführten Methoden verwenden, anstatt Ihre übergeordneten Hauptthemendateien zu bearbeiten, unabhängig davon, ob Sie Kadence oder ein anderes Thema verwenden. Das Bearbeiten Ihrer Designdateien kann nicht nur Ihre Website beschädigen, sondern Sie verlieren auch diese Anpassungen, wenn Ihr Design das nächste Mal aktualisiert wird.

Oder schlimmer noch, wenn Sie Code hinzufügen oder Code in Ihren Designdateien ändern, werden Sie in die Lage versetzt, herauszufinden, wie Sie Ihre Anpassungen beibehalten und gleichzeitig Ihr Design für neue Funktionen aktualisieren oder ein Sicherheitsproblem beheben können.

Fazit

Wir hoffen, dass dieser Blick auf untergeordnete Themen hilfreich war, um zu verstehen, wann ein untergeordnetes Thema verwendet werden sollte und wann nicht, und neue Möglichkeiten zum Anpassen Ihrer Website für eine optimale Leistung beim Hinzufügen von Anpassungen. Wenn all diese Dinge zu viel zu sein scheinen, um darüber nachzudenken, sind Sie wahrscheinlich im Moment mit den Tools im Customizer zufrieden.