Ihr Browser ist veraltet
Um sicher im Internet zu surfen und moderne Websites richtig darzustellen, empfehlen wir Ihnen ein Update.
Hier auf Updates prüfen
schließen

27.03.2023

Child Theme

Child Theme

Bevor ins Detail gegangen wird, klären wir zunächst einmal, was ein Theme überhaupt ist. Ein Theme bestimmt das Design einer Website und den Aufbau der Benutzeroberfläche. Es enthält alle Stylingelemente, legt Farben, Schriftarten und Abstände fest. Sysnonym wird auch oft der Begriff "Template" verwedet. Besonders im CMS-Kontext sind Themes so konzipiert, dass sie einfach ausgetauscht werden können.

Wer Anpassungen am Erscheinungsbild seiner Website vornehmen oder das Theme um Funktionalitäten erweitern möchte, tut dies bestenfalls nicht im sogenannten Eltern- oder Haupt Theme, da die Änderungen mit dem nächsten Update überschrieben werden. Hierfür wird ein Child Theme erstellt, in welchem die Anpassungen updatesicher gespeichert werden. Es ist als Erweiterung des eigentlichen Themes zu betrachten.

Der Vorteil: Es kann experimentiert und ausprobiert werden, ohne die Funktionalität der Website zu gefährden, da im Falle eines Bugs auf das Haupt Theme zurückgegriffen werden kann.

Ein Child-Theme in WordPress erstellen

  1. Einen Ordner erstellen

Im ersten Schritt wird lokal ein Ordner erstellt, in dem zunächst alle benötigten Dateien gesammelt werden. Standardmäßig trägt dieser Ordner den gleichen Namen wie das Haupt Theme mit dem -child Zusatz.

Bsp.: Heißt das Eltern Theme twentytwentytwo sollte der Ordner des Child Themes twentytwentytwo-child heißen.

  1. Stylesheet Datei anlegen

Nun wird eine style.css Datei mit folgendem Inhalt erstellt:

Benötigt werden allem voran der Theme Name, welcher einzigartig sein sollte, sowie die Nennung des Template - der Name des Eltern Theme. Ohne diesen auskommentierten Header wird das Child Theme nicht funktionieren, da WordPress die Informationen braucht, um zu erkennen, dass es sich um ein Child Theme handelt.

Weitere Informationen, die oft im Header definiert sind, sind die Folgenden:

  • Theme URI: Ein Link, der auf den Code oder die Dokumentation verweist
  • Author URI: Link, der auf die Website des Autors verweist
  • License: Bezeichnung der GNU Lizenz
  • License URI: Link der GNU Lizenz
  1. functions.php Datei anlegen

Um vor der gerade angelegten style.css die Stylesheets des Haupt Themes zu laden, muss dies in der functions.php definiert werden. Dies wird als „enqueue“ bezeichnet, was so viel wie „in die Warteschlange einreihen“ heißt.

Die erste Zeile der functions-Datei enthält den PHP opening-Tag <?php. Was danach kommt ist abhängig davon, wie das Eltern Theme seine Stylesheets lädt. Wird beispielsweise die Funktion get_template_directory() oder get_template_directory_uri() verwendet, muss über die functions.php des Child Theme nur die zuvor erstellte CSS Datei geladen werden, da sich die Funktionen immer auf den Eltern Themeordner beziehen und die CSS Dateien so gefunden werden.

Wird es jedoch über eine Funktion mit dem Anfang get_stylesheet geladen, muss auch das Stylesheet des Haupt Themes über die neu erstellte functions.php geladen werden.

So werden auch im Child Theme alle Funktionalitäten und Gestaltungsangaben vom Eltern Theme geladen.

  1. Ordner in den FTP laden

Nun, da der Grundstein mit der CSS Datei und der functions.php liegt, kann der Child Themeordner auf den FTP geschoben werden. In wp-content/themes wird der Ordner abgelegt.

  1. Child Theme aktivieren

Im Wordpress Backend kann das Child Theme nun unter Design → Themes aktiviert werden. Ist alles Richtig eingebunden, sollte die Seite zunächst genauso aussehen, wie mit dem Eltern Theme und es kann mit den Anpassungen begonnen werden.

Quellen

https://developer.wordpress.org/themes/advanced-topics/child-themes/

https://kinsta.com/blog/wordpress-child-theme/

https://kinsta.com/blog/wp-enqueue-scripts/

Kontakt

Für Ihre Fragen, Anregungen und Anmerkungen haben wir immer ein offenes Ohr.

Sie können uns natürlich auch telefonisch erreichen:
034298 / 208 478

Erfahrungen & Bewertungen zu norules-webdesign