Kleinere Desgin-Anpassungen an WordPress Themes sind schnell und einfach umzusetzen. In der Regel genügt es, die betreffende Stelle im Stylesheet zu ändern und schon ist das Design angepasst. Allerdings werden sämtliche Änderungen beim nächsten Update des Themes  überschrieben. Um dies zu vermeiden, sollte man ein WordPress Child Theme nutzen. Wie man dieses erstellt, erfährst Du im folgenden Tutorial.

Was ist ein Child Theme?

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.
-WordPress Codex

Ein Child Theme erbt alle Style-Eigenschaften und Funktionen des übergeordneten Parent-Themes. Individuelle Anpassungen im Child-Theme überschreiben jedoch die Einstellungen des Original Themes. So kannst Du nicht nur kleine Design-Änderungen vornehmen, sondern auch ganze Templates abändern.

Vorteile:

  • Bei einem Update des Haupt-Themes gehen die individuellen Änderungen nicht verloren, sondern bleiben im Child Theme bestehen.
  • Child-Themes können die Entwicklungszeit der Webseite beschleunigen.
  • Insbesondere Anfänger können sich im Child-Theme austoben; geht mal was schief, kann man auf das Parent-Theme zurückgreifen.

Nachteile:

  • Ein kleiner Nachteil von Child-Themes könnte in der Website-Performance liegen. Da zwei Stylesheets geladen werden müssen, erhöht sich die Anzahl der Requests und natürlich auch die Größe der Webseite. In meinem Test konnte ich jedoch keine wirklichen Performance-Einbußen feststellen:child theme performance

 

WordPress Child Theme anlegen:

In diesem Beispiel erstelle ich ein Child-Theme für das aktuelle WordPress Theme Twenty Fifteen.

1. Ordner für Child-Theme anlegen

Zuerst musst Du Dich per FTP mit Ihrem Server verbinden.
Dazu benötigst Du ein Programm wie beispielsweise FileZilla. Alternativ kannst Du auch das Browser AddOn FireFTP für Firefox nutzen.
Zum Verbinden mit dem Server benötigst Du folgende Informationen von Ihrem Provider:

  • Server-Name
  • FTP-User
  • FTP-Passwort

Sobald Du Dich mit dem Server verbunden hast, suchst Du den Ordner Deiner WordPress-Installation. Dort legst Du einfach im Ordner Themes einen neuen Ordner für das Child-Theme (twentyfifteen-child) an.

child-theme ftp

Screenshot FTP-Server

2. Style Datei anlegen

Zuerst legst Du im Child-Theme Ordner eine Datei style.css an mit folgendem Inhalt:

/*
 Theme Name:   Twenty Fifteen Child
 Description:  Mein Child Theme
 Author:       Webtimiser
 Author URI:   http://www.webtimiser.de
 Template:     twentyfifteen
 Version:      1.0
 Text Domain:  twenty-fifteen-child
*/

Wichtig: Bei Template muss der Name des Parent-Themes eingetragen werden. Sonst wird das zugehörige Theme nicht gefunden.

3. functions.php erstellen

Erstelle anschließend im Child-Theme Ordner die Datei functions.php.
Hier wird nun festgelegt, dass zunächst das Stylesheet des Original-Themes (parent-style) geladen wird. Erst danach wird das Stylesheet des Child-Themes (child-theme-css) geladen.

 

<?php
/**
* Child theme stylesheet einbinden in Abhängigkeit vom Original-Stylesheet
*/

function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style'));

}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );?>

4. Screenshot erstellen (optional)

Wer möchte, kann noch eine Screenshot-Datei (screenshot.png) im Ordner ablegen. Dadurch ist das Child Theme in der Theme-Verwaltung eindeutig zu erkennen.

theme-verwaltung

Theme Preview

5. WordPress Child theme aktivieren

Nachdem der Ordern für das Child Theme angelegt ist und sich alle benötigten Dateien darin befinden, kann das Theme aktiviert werden.
Dies funktioniert wie bei allen anderen WordPress Themes.

Unter Design > Themes kannst Du nun Dein neues Child Theme aktivieren.

Falls es beim Aktivieren zu einer Fehlermeldung kommt, überprüfe am besten die Angaben in der style.css.

6. Anpassungen aus dem Parent Theme übernehmen

Falls Du das Grundtheme schon über den WordPress Customizer eingerichtet hast, gehen beim Wechsel auf das Child Theme leider alle Anpassungen verloren. Wenn Du die Einstellungen nicht manuell übertragen möchtest, empfehle ich hierfür das Plugin Customizer Export/Import.
Sobald Du das Plugin installiert hast, findest Du ganz unten im Customizer einen Button Export/Import. Im ersten Schritt exportierst Du die Einstellungen des Parent Theme. Anschließend wechselst Du wieder in das Child Theme und importierst die Daten.

Customizer Einstellungen exportieren

Export der Customizer Einstellungen im Parent Theme

WordPress Child Theme anpassen

Design-Anpassungen kannst Du nun direkt in die Datei style.css des Child-Themes einfügen. Sobald Du die Seite neu lädst, siehst Du gleich das Ergebnis. In diesem Beispiel habe ich lediglich kleinere Anpassungen an der Optik vorgenommen und eine andere Schriftart gewählt.

Post-Title ändern

h2 {
font-family: 'Roboto Slab', sans-serif;
font-weight:700;
}
h2.entry-title {
text-align:center;
}
h2.entry-title:after {

    background-color: #D24F21;
    width: 100px;
    height: 2px;
    margin: 15px auto 0px;
    content: "";
    display: block;

}

 

Font ersetzen

Die Standardschrift von Twent Fifteen ist Noto. Für die Artikel-Headline des Child-Themes möchte ich aber Roboto Slab einsetzen. Daher binde ich die Schrift einfach über die functions.php ein:

function load_google_fonts() {
wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Roboto+Slab:400,700');
wp_enqueue_style( 'googleFonts');
}
add_action('wp_print_styles', 'load_google_fonts');
angepasstes wordpress child theme

Vorschau der Änderung

Falls Du die Schriften lieber lokal hosten möchtest, findest Du in diesem Artikel eine Anleitung inklusive Beispieldatei.

Artikel-Background einfärben

Die Hintergrund ändere ich über folgende Styles:

.hentry {
background: #e1f5fe;
} 
.entry-footer {
background: #01579b;
color: #fff;
} 
.entry-footer a {
color: #fff;
} 
.entry-footer a:hover {
color: #ff9800;
}

 

Twenty Fifteen Sidebar anpassen

Die linke Sidebar ist sehr breit und kann durch folgende CSS-Anweisungen an die gewünschte Breite angepasst werden.

@media screen and (min-width: 59.6875em) {

body:before {    
max-width: 380px;
}
#sidebar { 
left: 0;
max-width: 380px;
}
#page {
margin-left: 0px;
}
  }

Twenty Fifteen Child Theme

Template Files anpassen

Wenn Du Anpassungen an einzelnen Template-Dateien (Footer.php, Page.php,…) machen möchtest, ist das kein Problem! Kopiere dazu einfach die entsprechende Datei aus dem original Theme. Anschließend kopierst Du sie in den WordPress Child Theme Ordner. Danach kannst Du das Template anpassen.
Sämtliche Änderungen überschreiben dann die Template-Files des Parent-Themes.

Twenty Fifteen Child Theme downloaden

Die Beispiel-Datei zu diesem Tutorial kannst Du hier downloaden:
Download

Tipp:

Wer wirklich nur geringfügige Änderungen am Design machen möchte, muss nicht unbedingt ein WordPress Child Theme erstellen. Man kann auch auf Plugins wie z.B. Simple Custom CSS zurückgreifen. Dieses Plugin ermöglicht das einfache Überschreiben der Theme-Styles.

Noch einfacher kannst Du Anpassungen über den Customizer einfügen. Seit WordPress 4.7 gibt es unter > Design > Customizer einen Eintrag “Zusätzliches CSS”. Hier kann man seine eigenen CSS Anweisungen einfügen und sieht direkt die Änderung.

Und falls du nur ein paar Code-Schnipsel einbauen möchtest, kannst du auch einfach ein Custom Functions Plugin erstellen.

Child Theme mittels Plugin erstellen

Natürlich kann man ein WordPress Child Theme auch mit Hilfe eines Plugins anlegen.

wordpress child theme konfigurator

Kurz getestet habe ich den Child Theme Configurator von Lilaea. Nach der Installation findet man das Plugin unter > Werkzeuge > Kindthemen.
Auch unerfahrene Benutzer können mit dem Konfigurator schnell und einfach ein Child Theme erstellen. Wer sich etwas besser mit WordPress auskennt, wird mit der manuellen Variante vermutlich schneller ans Ziel kommen.

 

Sicherheit von Child Themes

Falls das Eltern-Theme eine Sicherheitslücke beeinhlaten sollte, wird diese (hoffentlich) vom Theme-Entwickler behoben. Doch wie wirkt sich das auf Dein Child-Theme aus?
Nehmen wir an, der Code in der Datei header.php wird aus Sicherheitsgründen angepasst. Wenn Du diese Datei geändert hast und sie in Deinem Child-Theme gespeichert ist, wirst Du nicht vom Sicherheitsupdate profitieren. Denn die Datei des Child Themes überschreibt die Datei des Hauptthemes.
Eine gute Möglichkeit diese Unterschiede aufzuspüren bietet das Plugin Child Theme Check.

Sobald es installiert ist, findest Du im Tab Status eine Auflistung der geänderten Dateien. Finde ich sehr gut, denn so behält man bei umfangreichen Anpassungen den Überblick.

child theme check status

Status: alle geänderten Templates im Child Theme

Im Tab Unterschiede kannst Du dir jede Datei genauer ansehen. D.h. Du kannst direkt den Code der original Datei mit dem der geänderten Datei vergleichen.

Child Theme vergleich

Unterschiede Parent Theme – Child Theme

 

So kannst Du überprüfen, ob wichtige Code-Änderungen vorliegen und ggf. Dein Template anpassen.

 

Fazit:

Die Nutzung eines WordPress Child Theme bietet viele Vorteile. So kann man ungestört am Design und der Funktionalität des Themes basteln, da das ursprüngliche Theme davon unberührt bleibt. Geht mal was schief, kann man jederzeit wieder auf das Parent-Theme zurückgreifen. Und alle Änderungen bleiben bestehen, auch wenn das Haupt-Theme aktualisiert wird. So profitiert man von Theme-Updates und deren Verbesserungen und kann seine individuellen Anpassungen beibehalten.

Weitere Informationen zu WordPress Child Themes:

http://codex.wordpress.org/Child_Themes

Wie hat Dir dieser Beitrag gefallen? 1 Star2 Stars3 Stars4 Stars5 Stars (19 Bewertungen, Ø: 4,89 von 5)
Loading...