Wie erstellt man ein Child Theme in WordPress

von | Dez 13, 2015 | Konzept | 0 Kommentare

Schlagwörter: Design - WordPress

Nicht alle von uns können ein WordPress Theme von 0 aufbauen oder sie möchten ein bestehendes Design verbessern oder erweitern. Natürlich kann man dann im original Design die Erweiterungen einbauen. Leider hat man dann ein Problem wenn es ein Designupdate gibt, denn dann gehen die Änderungen alle verloren. Aus diesem Grund gibts das Child Theme.

Mit dem Child Theme – simuliert man ein eigenes Design basierend auf einem anderen Design und kann so die Änderungen einfügen. Wenn nun das Original Design verändert/ aktualisiert wird, dann passiert “meinem” Design nichts und die Änderungen sind noch vorhanden. Das ist ziemlich praktisch.

  1. Original Design:
    Als Erstes muss man einfach das Original Desin, welches man anpassen möchte, via FTP in den Theme Ordner hochladen. Am Besten geht das mit Filezilla
  2. Neuen Design Ordner erstellen:
    Als nächstes muss man einen neuen Child Ordner erstellen. Welchen Namen ihr dem Ordner gibt, ist egal.
  3. style.css:
    Nun öffnet man mit dem Texteditor oder einem HTML Editor ein CSS File. Man speichert es im Child Ordner ab. Dann müsst ihr im CSS File ein paar Zeilen eingeben, die WordPress sagen, dass hier ein neues CSS File liegt und wohin es gehört.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    /*
    Theme Name: Child Chefblogger
    Description: Update Chefblogger 2016
    Author: Eric-Oliver Mächler
    Author URI: http://www.chefblogger
    Template: chefblogger
    Version: 1.0
    Tags:
    */

    Der 1. Teil könnt ihr selbst ausfüllen, aber aufgepasst bei der Template Zeile. Da müsst ihr den Ordner Namen eures Original Designs eintragen (Wenn ihr das falsch macht, dann klappt das mit dem Child Theme nicht).

    Danach speichert ihr das CSS File ab.

  4. functions.php:
    Als nächstes öffnet ihr ein weiteres Files mit eurem Editor und speichert es ebenfalls im Child Ordner ab mit dem Name functions.php.

    In diesem File müssen wir nun den Befehl eintragen, der WordPress sagt, wo man das CSS genau finden kann.

    Ihr tragt also in dieses leere File folgendes ein:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    <?php
     
    /**
    * child theme stylesheet, loading first the parent theme stylesheet.
    */
     
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
     
    }

    Und dann speichert ihr das ab.

  5. screenshot.png:
    Wenn man nun das Child Theme hochlädt in den Themes Ordner, und es im Design Bereich von WordPress anschaut, sieht man das neue Child Design zwar, aber dort wo ein Bild steht, sieht man ein hässliches Loch. Darum erstellt nun ein png mit dem Name screenshot.png – das Bild sollte eine Grösse von 600 x 450 px haben
  6. Child Ordner hochladen:
    Nun kann man den Child Ordner, inkls style.css & functions.php & screenshot.png hochladen und abspeichern. Danach kann man unter Dashboard – Design – Themes das neue Child Theme aktivieren.
  7. Anpassen:
    Nun läuft euer Child Theme und ihr könnt es nach euren Wünschen anpassen und erweitern.

Zusätzliche Info

Ihr könnt übrigens nicht nur das style.css oder functions.php neu Aufbauen mit einem Child Theme, nein ihr könnt auch die eigentlichen Design Seiten wie page.php, single.php, header.php oder footer.php so anpassen. Kopiert einfach diese Files aus dem Originalordner und legt sie in den Child Ordner hinein. WordPress schaut immer zuerst im Child Theme Ordner nach, ist da kein entsprechendes File zu finden, holt sie sich die Info aus dem Original Design Ordner.

So einfach ist es also ein Child Theme zu erstellen. Viel Spass mit eurem Child Theme und euren Erweiterungen.

Video Anleitung

0 Kommentare

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

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