WordPress Child-Theme erstellen

Ein WordPress Child-Theme kann ein echtes Wundermittel für Webentwickler und -bastler sein. klar, WordPress lässt sich auch ohne Childtheme sehr leicht grafisch und inhaltlich anpassen. Die meisten Anpassungen finden im Stylesheet (in der Datei style.css) oder der functions.php statt. Das ist schon einmal übersichtlich. Das Dumme ist nur, dass alle Anpassungen verloren gehen, wenn man das Theme updated.

Um dies zu verhindern, baut man ein kleines Untertheme, das sogeannte Child-Theme, in dem man alle Änderungen vornimmt. Vereinfacht gesagt lädt WordPress das große Elterntheme und schaut dann nach, ob es noch Sonderwünsche (im Childtheme) gibt.

Das Gute ist, dass nun bei einem Update des Hauptthemes, alle Änderungen im Childtheme liegen und damit von dem Update nicht betroffen sind. Okay, also lasst uns ein Child-Theme anlegen …

WordPress Child-Theme erstellen

Wie legt man nun ein Child-Theme korrekt an? Als Designers Inn-Kunde hast du hier nix zutun, da alle Themes bereits als Child-Theme erstellt sind. Du kannst also an dieser Stelle aufhören zu lesen :-)

Für alle anderen kommt hier eine Anleitung, wie man fix ein Child-Theme erstellt.

Schritt 1: Child-Theme-Ordner anlegen

Logge dich per FTP in/auf deinem Server ein und erstelle im Verzeichnis wp-content/themes einen neuen Ordner. Den neuen Ordner kannst du beliebig benennen, z.B. CHILDTHEME. Wichtig ist nur, dass dieser Ordner auf derselben Ebene liegt, wie der Ordner deines Hauptthemes.

Schritt 2: Childtheme-CSS

Erstelle nun eine Datei style.css. Dies kannst du mit jedem Texteditor erledigen. Achte beim Speichern nur darauf, dass die Endung wirklich „css“ lautet. Füge folgenden Text (mit deinen Daten) in die Datei ein. Wichtig ist vor allem, dass unter „Template:“ der exakte Name des Ordners von deinem Haupttheme steht!

/*
Theme Name: Childtheme
Description: Mein neues Childtheme
Author: Dein Name
Author URI: http://www.deine-website.de
Template: Name_des_Haupttheme-Ordners
Version: 1.0
Tags:
*/
/*Füge deinen Code unter dieser Zeile ein. Nutze ggf. !important, um Styles aus dem Haupttheme zu überschreiben.*/

Lade nun die style.css in den Ordner deines Childthemes.

Schritt 3: Chldtheme functions.php erstellen

Okay, nun müssen wir noch eine Datei namens functions.php erstellen. Mit dieser verknüpfen wir unsere Datei CSS mit unserem Haupttheme. Auch dies kannst du mit jedem Texteditor erledigen.

In die Datei kommt folgender Text:

<!--?php /* Functions für mein Child-Theme */ //add child theme add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?-->

Schritt 4: Childtheme nutzen

Sobald du dich neu in dein Backend einloggst, ist dein neues Childtheme auch schon verfügbar. Klasse. Dein neues Theme hat jetzt noch keine Vorschaugrafik und sieht entsprechend etwas nach einer Baustelle aus. Wenn du dich daran störst, kannst du eine Grafik in der Größe 600 x 450 Pixel erstellen, diese unter den Namen screenshot.png bzw. screenshot.jpg abspeichern und in den Ordner deines Childthemes kopieren. Nun sieht auch dein Childtheme im Backend hübsch aus.

Jetzt musst du dieses nur noch aktiveren. Fertig!

Alle Anpassungen, die du in der style.css oder functioins.php in deinem Childtheme vornimmst, werden für das Haupttheme geladen. Das Schöne ist: Alles Änderungen bleiben bei dem nächsten Update deines Hauptthemes erhalten.

Na denn, frohes Anpassen!

Marco

Marco

Designer

[et_social_follow icon_style="slide" icon_shape="rounded" icons_location="top" col_number="3" spacing="true" custom_colors="true" bg_color="#e75151" bg_color_hover="#a5d4aa" icon_color="" icon_color_hover="" outer_color="dark"]

Hey, schreib mir deine Meinung!

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

eins × 5 =