Zurück zum Support Designe deine Website Design Ein Child-Theme erstellen

Ein Child-Theme erstellen

Diese Funktion ist auf Websites mit dem WordPress.com-Creator- oder -Entrepreneur-Tarif verfügbar. Wenn deine Website einen unserer älteren Tarife verwendet, ist diese Funktion mit dem Pro-Tarif verfügbar.

Wenn du für deine Website einen Tarif mit aktivierten Plugins und individuellen Themes hast, kannst du das Design deines Themes mithilfe von individuellem CSS verändern und die Standardfunktionalität mithilfe von Plugins von Drittanbietern erweitern. Wenn du darüber hinausgehen und Änderungen am zugrunde liegenden Code deines Themes vornehmen möchtest, kannst du ein Child-Theme erstellen.

Beachte bitte, dass es sich hierbei um eine weiterführende Option handelt, die Kenntnisse in HTML und PHP voraussetzt.

Was ist ein Child-Theme?
Erstellen eines Child-Themes
Manuelles Erstellen eines Child-Themes
Erstellen eines Child-Themes mit dem Child Theme Configurator
Vornehmen von Änderungen an deinem Child-Theme
Support für dein Child-Theme

Was ist ein Child-Theme?

Ein Child-Theme ist ein Theme, das die Funktionalität und den Stil eines Eltern-Themes übernimmt

Um eine Analogie aus Kathryn Presners Vortrag Getting Comfortable with Child Themes zu verwenden: Stell dir ein Eltern-Theme als ein Originalrezept für Brownies vor. Du könntest ein Child-Rezept namens Nuss-Brownies kreieren, das alle Zutaten und Schritte übernimmt, aber zusätzlich Nüsse enthält.

Im Folgenden findest du Screenshots von zwei Themes aus unserem Verzeichnis, Edin und Goran. Goran ist ein Child-Theme von Edin. Du wirst sehen, dass Goran viel vom Design von Edin übernimmt und zusätzlich eigene Anpassungen hat.

Edin ist ein Eltern-Theme von Goran.
Goran ist ein Child-Theme von Edin.

Erstellen eines Child-Themes

Damit du Child-Themes mit einer WordPress.com-Website verwenden kannst, musst du WordPress zunächst lokal auf deinem Computer installieren. Nachdem du dein Child-Theme lokal erstellt hast, kannst du es zippen und auf deine WordPress.com Business-Website hochladen.

Eine Alternative zur manuellen Erstellung deines Child-Themes ist die Verwendung eines Plugins, das dein Child-Theme für dich erstellt (zum Beispiel Child Theme Configurator). Suche im Plugin-Verzeichnis nach „Child Themes“, um die verfügbaren Optionen zu durchsuchen.

Bitte beachte: Du kannst eine Kopie der kostenlosen Themes aus unserer Sammlung am Ende jeder WordPress.com-Übersichtsseite herunterladen. Suche nach dem Download-Link:

Kostenlose Themes herunterladen

Es ist nicht möglich, ein Child-Theme eines Themes zu erstellen, das bereits das Child eines anderen Themes ist.


Manuelles Erstellen eines Child-Themes

Diese Funktion ist auf Websites mit dem WordPress.com-Creator- oder -Entrepreneur-Tarif verfügbar. Wenn deine Website einen unserer älteren Tarife verwendet, ist diese Funktion mit dem Pro-Tarif verfügbar.

Für das folgende Beispiel verwenden wir das Theme Twenty Seventeen.

Schritt 1

Suche deine Theme-Datei hier im WordPress.org-Verzeichnis und lade sie herunter. Nach dem Herunterladen doppelklicke auf einem Mac darauf, um den Ordner zu entpacken. Wenn du mit Windows arbeitest, klicke mit der rechten Maustaste und wähle „Alles extrahieren“.

WordPress-Support – Manuelles Erstellen eines Child-Themes Schritt 1

Schritt 2

Erstelle einen neuen Ordner und gib deinem Child-Theme einen Namen, zum Beispiel „twentyseventeen-child“.

Es wird empfohlen, dem Namen des Verzeichnisses deines Child-Theme den Zusatz „-child“ hinzuzufügen. Achte darauf, dass der Name deines Child-Theme-Verzeichnisses keine Leerzeichen enthält.

WordPress-Support – Manuelles Erstellen eines Child-Themes Schritt 2

Schritt 3

Kopiere die Dateien style.css und functions.php von deinem ursprünglichen Eltern-Theme (twentyseventeen) und füge sie in dein neues Child-Theme (twentyseventeen-child) ein.

WordPress-Support – Manuelles Erstellen eines Child-Themes Schritt 3.1
WordPress-Support – Manuelles Erstellen eines Child-Themes Schritt 3.2

Schritt 4

In deinem neuen Child-Theme öffnest du die Datei style.css mit einem Texteditor, wie z. B. Notepad, Atom, Sublime Text, oder einem anderen Texteditor deiner Wahl. Leere die Datei, indem du auf dem Mac auf Befehl+A > Löschen klickst (unter Windows auf STRG+A > Löschen).

Anschließend kopierst du die folgenden Codezeilen und fügst sie ein:

Beachte bitte, dass der folgende CSS-Code Theme-spezifisch sein kann.

/
*
Theme Name:   Twenty Seventeen Child
Theme URI:        https://example.com/twenty-seventeen-child/
Description:  Twenty Seventeen Theme
Author:           John Doe
Author URI:   https://example.com
Template:         twentyseventeen
Version:          1.0.0
License:          GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twentyseventeen

*/

Du musst die folgenden Zeilen so ändern, dass sie den Namen des übergeordneten Ordners enthalten, um zu zeigen, dass dieses bestimmte Theme sein Child ist.

– Theme name
– Description

Die folgenden Felder solltest du nicht ändern:

– Template 
– Text domain

Die anderen Felder sind optional, aber nicht erforderlich. Hier findest du weitere Informationen über ihren Zweck.

Die Vorlagenzeile sollte den Ordnernamen deines Eltern-Themes enthalten. Stelle sicher, dass du diese Datei speicherst, nachdem du die Änderungen vorgenommen hast.

WordPress-Support – Manuelles Erstellen eines Child-Themes Schritt 4

Schritt 5

Öffne in deinem neuen Child-Theme die Datei functions.php mit demselben Texteditor. Leere die Datei, indem du auf dem Mac auf Befehl+A > Löschen klickst (unter Windows auf STRG+A > Löschen).

Kopiere anschließend den unten stehenden Code und füge ihn ein. Ersetze den Wert ‚$parent-style‘ durch den Namen deines Themes mit einem angehängten -style (in diesem Fall ist es twentyseventeen-style).

Stelle sicher, dass du diese Datei speicherst, nachdem du die Änderungen vorgenommen hast.

get('Version')
 );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
WordPress-Support – Manuelles Erstellen eines Child-Themes Schritt 5

 

Schritt 6

Jetzt müssen wir die Ordner zippen.

Für Windows:

  1. Wähle die Datei oder den Ordner aus, den du zippen möchtest.
  2. Halte die Datei oder den Ordner gedrückt (oder kicke mit der rechten Maustaste), wähle Senden an (oder zeige auf) und wähle dann Komprimierter (gezippter) Ordner.

Ein neuer gezippter Ordner mit demselben Namen wird am selben Speicherort erstellt. Um ihn umzubenennen, halte den Ordner gedrückt (oder klicke mit der rechten Maustaste darauf), wähle Umbenennen und gib dann den neuen Namen ein.

Für Mac:

  1. Wähle die zu zippenden Objekte im Mac Finder (Dateisystem) aus
  2. Klicke mit der rechten Maustaste auf eine Datei, einen Ordner oder Dateien, die du zippen möchtest.
  3. Wähle „Elemente komprimieren“ aus.
  4. Das neu erstellte ZIP-Archiv findest du im selben Verzeichnis.

Schritt 7

Du kannst dein individuelles Theme hochladen, indem du zu Design →Themes navigierst und dann auf den Button Theme hochladen klickst. Lade sowohl dein Eltern-Theme als auch dein Child-Theme hoch und aktiviere dein Child-Theme.

Wie du ein individuelles Theme hochlädst, erfährst du hier.


Erstellen eines Child-Themes mit dem Child Theme Configurator

Diese Funktion ist auf Websites mit dem WordPress.com-Creator- oder -Entrepreneur-Tarif verfügbar. Wenn deine Website einen unserer älteren Tarife verwendet, ist diese Funktion mit dem Pro-Tarif verfügbar.

Lade das Plugin unter folgender Adresse herunter und installiere es: https://wordpress.org/plugins/child-theme-configurator/. Weitere Informationen zur Installation von Plugins findest du hier.

Beachte, dass es sich bei Child Theme Configurator um ein Drittanbieter-Plugin handelt. Hier erhältst du Support und kannst Support-Anfragen stellen: https://wordpress.org/support/plugin/child-theme-configurator/

Sobald die Installation abgeschlossen ist, gehe zu Tools > Child-Themes

Schritt 1 – Wähle ein Eltern-Theme.

Schritt 2 – Klicke auf Analysieren. Dadurch wird sichergestellt, dass die Eltern-Themes die WordPress-Standardpraxis verwenden und dass es keine Überraschungen mit deinem Theme geben wird.

Erstellen eines Child-Themes mit dem Child Theme Configurator

Schritt 3 – Dies ist der Name des Verzeichnisses/Ordners, in dem das Theme auf deiner Website gespeichert ist.

Schritt 4 – Wähle aus, wo du deine Stile speicherst. Es wird empfohlen, die Standardoption für das primäre Stylesheet style.css zu wählen

Erstellen eines Child-Themes mit dem Child Theme Configurator

Schritt 5 – Wähle die Option zur Verwendung des Stylesheets des Eltern-Themes aus, um festzulegen, wie dein Child-Theme die Stile deines Eltern-Themes verwenden soll. Es wird empfohlen, die WordPress-Option für Stilwarteschlangen zu verwenden.

Schritt 6 – Passe den Namen, die Beschreibung, den Autor und die Version des Child-Themes an. Hier gibst du die Anmeldedaten deines Themes ein, die in deinem Style Sheet CSS erscheinen werden.

Erstellen eines Child-Themes mit dem Child Theme Configurator

Schritt 7 – Kopiere Menüs, Widgets und Customizer-Einstellungen des Eltern-Themes. Wenn du dein Eltern-Theme im Customizer eingerichtet hast, kopiert diese Option diese Einstellungen in dein neues Child-Theme.

Erstellen eines Child-Themes mit dem Child Theme Configurator

Änderungen an deinem Child-Theme vornehmen

Wir empfehlen immer, Änderungen an deinem Theme außerhalb deiner Live-Website vorzunehmen – weitere Informationen findest du in diesen Leitfaden zur lokalen Durchführung von Änderungen.


Support für dein Child-Theme

Das WordPress.com-Support-Team hilft dir gerne dabei, die richtige Richtung einzuschlagen oder Alternativen zu einem Child-Theme anzubieten (falls es diese gibt). Weiterführende HTML- und PHP-Funktionen fallen nicht in den Bereich unseres Supports. Wenn du umfangreichere Hilfe benötigst, kannst du einen Webdesigner beauftragen oder dich direkt an den Autor deines Themes wenden.

Als Nächstes: Ein Theme löschen.

Copied to clipboard!