A4: Einrichten eines Childtheme

Grundsätzliches zu unserer Childtheme – Einrichtung

In diesem Beitrag werde ich ein sogenanntes Childtheme des Elternthemes ‚Twenty Sixteen‘ einrichten.

Die Einrichtung geschieht über das Anlegen von Ordnern und Dateien. Am Ende kann man das Childtheme im Backend wie bei installierten Themes auswählen und aktivieren. Hierbei werden Änderung zum Elterntheme in der sogenannten style.css – die für das Erscheinungsbild ihrer Seite zuständig ist -überschrieben. Gibt es keine Änderungen, so merkt man gar nicht, dass es sich um ein Childtheme handelt.

Warum ein Childtheme benutzen?

Änderungen kann man  im WordPresseditor vornehmen.  Auch kann man sie „hardcore“ im Elterntheme reinprogrammieren oder gar Text-Plugins—Ins  dafür zweckentfremden.

All diese Vorgehensweisen haben einen entscheidenden Nachteil! Erfährt das Theme ein Update, so sind ihre Änderungen verloren. Sie werden nicht mitgenommen.

Beim Arbeiten mit einem Childtheme ist das anders! Das Elterntheme wird aktualisiert und das Childtheme bleibt unangetastet. Somit bleiben ihre Änderungen erhalten.

Jetzt aber auf zur Praxis!

Childtheme in WordPress: Wertvolle Anlaufstelle

Die erste Adresse, um sich bezüglich Childthemes in WordPress zu informieren ist bei WordPress selbst. Und so möchte ich ihnen für erste Erkundungen die Seite https://codex.wordpress.org/Child_Themes ans Herz legen.

Childtheme Codex von WordPressAbbildung-1: Die Einstiegsseite für Childthemeinformationen

Childtheme erzeugen Schritt 1: Ordner anlegen

In der style.css stehen Grundinformationen, die im Backend für das Handling ausgelesen werden. Außerdem stehen in ihr Anweisungen, die das Erscheinungsbild ihrer Seite bestimmen. In einem ersten Schritt lege ich hier eine leere Datei an.

Dazu öffne ich einen einfachen Texteditor und speichere eine leere Datei mit Namen style.css im Ordner twentysixteen-child ab.

Anlegen der style_cssAbbildung-3: Angelegen einer leeren style.css – Datei

Anlegen einer leeren stlye.css – Datei im Ordner ‚twentysixteen-child‘Abbildung-4: Anlegen einer leeren stlye.css – Datei im Ordner ‚twentysixteen-child‘

style_css im Childtheme - OrdnerAbbildung-5: Angelegte style.css – Datei

Im Folgenden werde ich für Dateiinhaltserweiterungen das kostenlose Programm Brackets benutzen.

Sie können jeden beliebigen Texteditor benutzen. Jedoch auf keinen Fall ein Textverarbeitungsprogramm wie z.B. Word.

Childtheme erzeugen Schritt 3: Datei „style.css“ mit Grundinformationen füllen

Gehen sie im Folgenden wie folgt vor:

  1. Öffnen ihre stylee.css Datei im geeigneten Editor – z.B. Brackets.
  2. Gehen Sie auf die Internetseite https://codex.wordpress.org/Child_Themes von WordPress und kopieren sich folgenden Codeteil in die Zwischablage.Childtheme - Codex von der WordPresseiteAbbildung-6: Childtheme – Code original von der WordPressseite
  3. Fügen sie den Codeteil in ihre style.css. Datei ein.
  4. Löschen sie unnötige Einträge, machen sie textliche Veränderungen  und fügen sie eine import Anweisung an(siehe folgende Abbildung).Optimierter Childtheme - CodeAbbildung-7: Childtheme – Code zugeschnitten auf unsere Bedürfnisse

    Erklärung der Codezeilen:  


    1 + 8 = Öffnen und Schließen eines Kommentartextes, der keine Einfluss auf den Programmiercode hat.


    2 – 6 = Bedeutung wie die Beschreibung sagt. Bei Zeile 5 (Template) ist die Schreibweise 100% einzuhalten! Es wird an dieser Stelle angegeben auf welches Elterntheme sich das Childtheme bezieht.


    10 = Importanweisung, wo die Eltern-style.css Datei zu finden ist.


  5. Speichern sie die Datei.

Childtheme erzeugen Schritt 4: Erscheinungsbild im Backend und seine Aktivierung

Das Childtheme ist nun eingerichtet und kann im Backend wie jedes andere installierte Theme benutzt werden.

Wenn sie mit der Maus über das Childtheme – Symbol gehen, erscheint der Text ‚Theme-Details‘. Durch einen Klick können sie sich diese anzeigen.

Anmerkung: Mein Childtheme liegt bereits auf dem Liveserver.

Erscheinungsbild des childthemes im BackendAbbildung-8: Erscheinungsbild im Backend

Details über das Childtheme, sichtbar im BackendAbbildung-9: Detailinformationen über das Theme mit den Angaben aus der style.css – Datei

Aktivieren sie das Theme über die Schaltfläche ‚Aktivieren‘.

Aktiviertes Childtheme im BackendAbbildung-10: Aktiviertes Theme im Backend

Erscheinungsbild des Childthemes im FrontendAbbildung-11: Erscheinung des Childthemes auf Grundlage des Elternthemes auf der Internetseite

Das Childtheme gleicht dem Elterntheme an dieser Stelle. Eventuell müssen nun das Logobild, Headerbilder und Hintergründe neu angegeben werden, wenn diese vorher auf der Seite sichtbar waren.  Diese befinden sich nach wie vor in der Mediathek. Auch sollten benutze Widgets überprüft werden.

 

Schreibe einen Kommentar

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