Zum Kundenbereich

Wie erstellt man ein WordPress Child-Theme?

Eine der großen Vorteile von WordPress ist die hohe Anpassungsfähigkeit und Verfügbarkeit von Themes (Designs). Wenn man sich etwas mehr mit WordPress beschäftigt hat, kommt man ohne Frage irgendwann an den Punkt, wo man Anpassungen an einem Theme vornehmen möchte, die über die Standardeinstellungen des Themes hinausgehen. An diesem Punkt ist es dringendst empfohlen, ein Child-Theme anzulegen.

Was ist ein Child-Theme?

Ein Child-Theme ist eine Kopie des Parent-Themes. Egal welches Theme du verwendest, ein Child-Theme kann man immer anlegen. Das Parent-Theme vererbt dem Child-Theme seine Funktionen, Eigenschaften und CSS Styles. Ein Child-Theme lässt sich anpassen, ohne dass man Veränderungen am Parent-Theme vornimmt und sollte es ein Update für das Parent-Theme geben, sind nicht alle Änderungen verloren.

Was sind die Vorteile von einem Child-Theme?

  • Man eliminiert das Risiko, Anpassungen zu verlieren, wenn man ein Theme-Update durchgeführt wird. Bei einem Theme-Update werden die Parent-Theme-Dateien überschrieben. In diesem Moment gehen eigene Anpassungen verloren. Nutzt man ein Child-Theme, nimmt man Anpassungen direkt im Child-Theme, welche nicht von einem Update überschrieben werden.
  • Man eine bessere Übersicht über seine eigenen Anpassungen, weil man diese in den Dateien des Child-Themes macht.
  • Gerade Anfänger können ein Child-Theme verwenden, um zu experimentieren. Wenn etwas schiefläuft, können sie jederzeit noch auf das Parent-Theme zurückgreifen.
  • Ein Child-Theme erlaubt es, Übersetzungen des Parent-Themes zu verändern.
  • Mit Hilfe eines Child-Themes kann die Entwicklungszeit einer Webseite verkürzt werden.

WordPress Child-Theme erstellen

Schritt 1 – Theme-Ordner erstellen

Öffne über die Dateiverwaltung  in deinem cPanel oder FTP den Pfad „public_html/wp-content/themes“. Der Pfad kann bei dir etwas anders aussehen, beispielsweise „public_html/DEINE-DOMAIN/wp-content/themes“.

Lege hier einen neuen Ordner für das Child-Theme an. Der Name ist beliebig. Damit man das Child-Theme aber später besser zuordnen kann, nennt man es am besten so wie das Parent-Theme mit einer Child-Endung. In unserem Beispiel nennen wir es „hello-elementor-child“.

Child-Theme-Ordner erstellen

Schritt 2 - Style.css erstellen

Gehe in den Child-Theme Ordner und erstelle eine neue Datei mit dem Namen style.css und füge den folgenden Code hinzu:

				
					/* 
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/products/hello-theme/
Description: Hello Elementor Child
Theme Author: HostingMed
Author URI: https://hostingmed.de
Template: hello-elementor 
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

				
			

Dieser Code enthält die Informationen über das Child-Theme und gibt WordPress die Information, zu welchem Parent-Theme es gehört. Diese Informationen sind erforderlich und du kannst sie entsprechend deines Themes anpassen. Unten findest du eine Erklärung für die einzelnen Werte.

Diese CSS-Datei kannst du später ganz einfach über dein WordPress-Dashboard unter Design > Theme-Datei-Editor anpassen und CSS-Styles hinzufügen.

Schritt 3 – functions.php erstellen

Als nächstes erstellen wir die functions.php im Theme-Ordner und füge den folgenden Code hinzu.

Hier ist wichtig zu beachten, dass der Dateiname functions.php sein muss und nicht abweichen darf und füge den folgenden Code hinzu:

				
					<?php
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ), wp_get_theme()->get('Version') );
    }
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
?>

				
			

Schritt 4 – Child-Theme Aktivieren

Nun bist du bereit, dein Child-Theme über das WordPress-Dashboard unter Design > Themes zu aktivieren.

Wenn du auch ein Vorschaubild von deinem neuen Child-Theme anzeigen möchtest wie im Screenshot oben, dann folge auch noch den nächsten Schritt.

Schritt 5: Wie fügt man ein Vorschaubild des Themes hinzu?

Ein Vorschaubild für ein Child-Theme unter Design > Themes ist nicht erforderlich, aber wenn man für einen Kunden eine Webseite erstellt, macht es einen professionelleren Eindruck.

 

  1. Nenne das gewünschte Vorschaubild screenshot.png
  2. Öffne über die cPanel Dateiverwaltung oder FTP den Theme-Ordner. In unserem Beispiel ist es wp-content/themes/hello-elementor-child
  3. Lade screenshot.png hoch
  4. Fertig!

Stylesheet (Style.css) Erklärung

Theme Name: Hello Elementor Child

Erforderlich. Der Name ist frei wählbar, aber zur besseren Zuordnung sollte es den Namen vom Parent-Theme enthalten mit der Child-Endung.

Theme URI: https://elementor.com/products/hello-theme/

Optional. URL zu einer öffentlich zugänglichen Webeite, wo man Informationen zu dem Theme finden kann.

Description: Child-Theme vom Hello Elementor Theme

Erforderlich. Eine kurze Beschreibung des Child-Themes.

Theme Author: HostingMed

Erforderlich. Der Name der Person oder Firma, die das Theme erstellt hat. WordPress empfiehlt, den Benutzernamen des Autors auf wordpress.org zu verwenden.

Author URI: https://hostingmed.de

Optional. Die URL des Autors.

Template: hello-elementor

Erforderlich. Der Name des Parent-Themes, genauso wie der Ordner des Parent-Themes heißt. Über diesen Wert stellt WordPress die Verbindung zwischen Child und Parent her.

Version: 1.0.0

Erforderlich. Die Version deines Child-Themes im X.X oder X.X.X Format. Üblich ist bei Neuerstellung des Child-Themes der Wert 1.0.0.

Text Domain: helloelementor-child

Erforderlich. Der String wird verwendet von WordPress für Übersetzungen des Themes. Geschrieben in Kleinbuchstaben und optional mit Bindestrichen. Unterstriche sind hier nicht gültig.

License: GNU General Public License v2 or later

Erforderlich. Die Lizenz des Themes. Diese Information findest du in der Style.css vom Parent-Theme.

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Erforderlich. Die URL der angegebenen Lizenz. Diese Information findest du ebenfalls in der Style.css vom Parent-Theme.

Kontakt

Füllen Sie das unten stehende Kontaktformular aus, und wir melden uns in kürze bei Ihnen.

1
2
3