t3n News Entwicklung

Klein, aber oho! Was sind eigentlich Child-Themes in WordPress?

Klein, aber oho! Was sind eigentlich Child-Themes in WordPress?

für zu gestalten oder anzupassen ist einfach und gängige Praxis, aber zahlen sich auch Wordpress-Child-Themes in der aus? Wir sagen ja – und verraten euch, warum.

Klein, aber oho! Was sind eigentlich Child-Themes in WordPress?

Holt alles aus WordPress raus, mit Child-Themes. (Bild: inbj – iStockphoto.com)

WordPress-Themes sind bei Webdesignern, Frontend-Entwicklern und auch bei Laien sehr beliebt. Häufig nutzen sie freie oder kommerzielle Themes für ihre Projekte und modifizieren sie dann nach eigenen oder den Vorlieben des Kunden. Zwar werden immer mehr Themes mit unterschiedlichen Optionen ausgestattet – etwa Responsive Design –, selten genügen diese jedoch für eigene Anforderungen.

Seitdem mit der Version 3.0 auch die Wordpress-Child-Themes eingeführt wurden, können Website-Betreiber ihrer Individualität nun individuellen Ausdruck verleihen, ohne zu befürchten, dass ihre Anpassungen am Theme durch Updates verloren gehen.

Wordpress: Was sind Child-Themes?

Das WordPress-Child-Theme ist ein Theme, das die Funktionen eines anderen übergeordneten Themes erbt, des sogenannten Parent-Themes (Eltern- oder auch Mutter-Theme). Ein Child-Theme ist der sicherste und bisher eleganteste Weg, individuelle Änderungen am Parent-Theme vorzunehmen. Denn anstelle von direkten Änderung der Theme-Dateien am eigentlichen Theme kannst du ein Child-Theme erstellen und darin die gewünschten Änderungen vornehmen. Daraus ergeben sich folgende Vorteile:

  • Wenn du ein bestehendes Theme modifizierst und dieses aktualisiert wird, werden deine Änderungen verloren gehen. Mit einem Child-Theme kannst du das übergeordnete Theme aktualisieren, wobei deine Änderungen erhalten bleiben.
  • Child-Themes können die Entwicklungsphase beschleunigen.
  • Child-Themes können das Parent-Theme als Framework nutzen.
  • Anfänger können sich an Theme-Entwicklung ausprobieren, ohne Gefahr zu laufen, Schäden am eigentlichen Theme zu verursachen.

So erstellst du Wordpress-Child-Themes

In nur zwei sehr einfachen Schritten kannst du dein eigenes Child-Theme erstellen:

  1. Erstell einen Ordner im Themes-Verzeichnis deiner WordPress-Installation. Der Pfad des Themes-Verzeichnisses lautet dein-wordpress/wp-content/themes. Vergib eine sinnvolle Ordnerbezeichnung ohne Leerzeichen. Üblicherweise solltest du die Bezeichnung des Ordners vom Parent-Theme verwenden und mit „-child“ ergänzen, wie zum Beispiel „twentyfourteen-child“.
  2. Erstell jetzt eine CSS-Datei namens style.css und leg sie in das Verzeichnis des Child-Themes unter wp-content/themes/twentyfourteen-child ab. Diese CSS-Datei – mit einigen Strings in einem Kommentar – ist die einzige Datei, die für die Erstellung eines Child-Themes erforderlich ist. Innerhalb der CSS-Datei sieht der benötigte Code wie folgt aus:
/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://t3n.de/news/wordpress-child-theme-erstellen
 Description:  Twenty Fourteen Child-Theme
 Author:       Jonathan Torke
 Author URI:   http://pixeltuner.de
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, right-sidebar, responsive-layout
 Text Domain:  twenty-fourteen-child
*/

@import url("../twentyfourteen/style.css");

/* Theme Anpassungen beginnen hier */
.site-title
{
    font-size: 26px;
}
/* Theme Anpassung enden hier */

Die einzigen erforderlichen Zeilen sind „Theme Name“ und „Template“. Jede weitere Zeile kannst du nach Belieben anpassen oder auch entfernen.

  • Vergib für „Theme Name“ (Zeile 2) eine sinnvolle Bezeichnung wie zum Beispiel Twenty Fourteen Child.
  • Die Template-Bezeichnung (Zeile 7) benötigt als Zuweisung die Ordnerbezeichnung des Parent-Themes. In diesem Beispiel liegt das Parent-Theme im Ordner „twentyfourteen“. Also würdest du Template: twentyfourteen verwenden.
  • Jetzt können Änderungswünsche am Design durch CSS vorgenommen werden. In diesem Beispiel habe ich die Schriftgröße des Blogtitels auf 26 Pixel geändert (Zeile 16-19).
  • Außerdem kann der Aufruf @import url('../twentyfourteen/style.css'); (Zeile 13) entfallen, vorausgesetzt, du willst dir eine komplett eigene CSS-Struktur aufbauen.

Bevor du das Child-Theme aktivierst, erstell noch schnell eine Screenshot-Grafik (880 x 660 Pixel) für das Child-Theme, die als Vorschaubild der verfügbaren Themes im Adminbereich dient. Speicher diese Grafik als screenshot.png unter wp-content/themes/twentyfourteen-child ab.

Wordpress: Child-Themes aktivieren

Jetzt kannst du das Child-Theme aktivieren.

  • Logg Dich dazu in den Admin-Bereich deiner WordPress-Instanz ein und navigier dich über die linke Admin-Navigation zu Design > Themes. Hier siehst du jetzt dein Child-Theme mit den anderen verfügbaren Themes aufgelistet.
  • Klick auf „Aktivieren“.
wordpress-child-theme-aktivieren
Hier könnt ihr Wordpress-Child-Themes aktivieren. (Screenshot: Wordpress)

Das war’s schon. Jetzt ist dein Child-Theme aktiv und alle Stylesheet-Änderungen in twentyfourteen-child/style.css überschreiben die betroffenen Stylesheets des Parent-Themes.

Anpassungen weiterer Theme-Dateien

Neben der CSS-Datei kannst du zusätzlich weitere Parent-Theme-Dateien wie Code der index.php-, header.php- oder footer.php-Datei durch das Child-Theme überschreiben. Falls du also mehr als nur die style.css-Datei anpassen willst, kann dein Child-Theme jede Datei des Parent-Themes überschreiben, sogar Dateien, die nicht im Parent-Theme vorhanden sind.

Ein Beispiel: Sollte das Parent-Theme keine home.php-Datei beinhalten, kannst du sie trotzdem in dein Child-Theme hinzufügen. WordPress wird sie erkennen und laden, da es immer zuerst nach einem Child-Theme und einer darin angeforderten Datei sucht. Erst im weiteren Schritt bedient sich WordPress des Parent-Themes und sucht da nach der benötigten Theme-Datei. Um zu verstehen, welches Template WordPress entscheidet zu laden, empfehle ich, einen Blick auf die Template-Hierarchie zu werfen.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Keine Antwort
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema WordPress
13 schicke HTML- und WordPress-Templates für deine Webvisitenkarte
13 schicke HTML- und WordPress-Templates für deine Webvisitenkarte

Nicht jeder braucht gleich eine eigene umfangreiche Homepage. Den meisten fehlen dafür auch schlicht die Inhalte. Aber für viele Webworker empfiehlt es sich, zumindest eine Webvisitenkarte … » weiterlesen

WordPress-Entwicklung in der Cloud: WPide.net erscheint in Version 2.0 [Update]
WordPress-Entwicklung in der Cloud: WPide.net erscheint in Version 2.0 [Update]

WPide.net ist in Version 2.0 erschienen. Damit soll die Cloud-basierte Entwicklungsumgebung für WordPress-Entwickler vor allem schneller sein und sich besser bedienen lassen. » weiterlesen

E-Mail-Template entwickeln: So öffnest du das Buch mit den sieben Siegeln
E-Mail-Template entwickeln: So öffnest du das Buch mit den sieben Siegeln

Was gibt es Schlimmeres, als für ältere Browser eine moderne Webseite umzusetzen? Richtig, die Programmierung von einem modernen E-Mail-Template. Jeder Programmierer, der diese Aufgabe bereits … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?