In einem bereits geschrieben Artikel, bin ich auf das Thema WordPress Child-Themes eingegangen und wie man diese selber erstellen kann. In dem Beitrag gehe ich am Ende noch kurz auf den Fall ein, was zutun ist, wenn das Child-Theme nicht korrekt angezeigt wird. Darauf hin wurde ich über ein Kommentar von Reinhard Rieder darum gebeten, den Part noch etwas ausführlicher zu erklären. Das möchte ich in diesem Beitrag aufgreifen und in einem ausführlichen Tutorial erklären.

 

Woran kann es liegen, das ein WordPress Child-Theme nicht korrekt dargestellt wird?

Es kann viele Gründe geben, woran die korrekte Darstellung des Child-Themes scheitern kann. Der häufigste Grund aber ist der, das einfach die benötigten CSS-Angaben des übergeordneten Themes (oder Parent-Themes) einfach nicht mitgeladen werden. Das hat den Effekt zu folge, das der HTML-Code wie gewollt generiert und ausgegeben wird aber die kompletten Formatierungen fehlen.

 

Wie prüfe ich, ob der CSS-Code des übergeordneten Themes fehlt?

Es ist nicht schwer nachzuprüfen, ob der CSS-Code des übergeordneten Themes mitgeladen wird. Benutzt man Google Chrome, kann man ganz einfach mit dem integrierten Entwicklertool nachschauen, was ihm Hintergrund geladen wird und woher die Dateien kommen. Mit Firefox und Firebug lässt es sich auch einfach überprüfen, was an Code da ist und was noch fehlt. Sollte man keine der Möglichkeiten zur Verfügung haben, kann man sich auch den Quellcode der WordPress Seite anzeigen lassen und darüber prüfen, welche Stylesheets geladen werden.

 

Mit dem Entwicklertool von Google Chrome überprüfen

wordpress-child-theme-anpassenArbeitet man mit Google Chrome, muss man als erstes die Entwicklertools öffnen. Das Tool lässt sich über die Taste F12 oder unter Optionen ­» Tools » Entwicklertools öffnen. Als nächstes geht man im Tool auf den Punkt Resources und öffnen in der linken Spalte das Verzeichnis für die Stylesheets. Dort kann man überprüfen, welche CSS-Dateien mit geladen werden und welcher Code in den Dateien steht.

Steht nur eine style.css Datei in der Liste, sollte man prüfen welchen Code sie enthält. Steht bis auf die Theme-Definition nicht mehr in der Datei drin, fehlen die Formatierungen des übergeordneten Themes und müssen zusätzlich eingebunden werden.

 

Mit Firebug und Firefox prüfen

wordpress-child-theme-firefoxWie bei Google Chrome, geht man genauso im Firefox vor. Dazu benötigt man aber das Add-on Firebug. Firebug lässt sich auch durch die Taste F12 öffnen. Die Vorgehensweise bleibt gleich, man muss auf den CSS-Reiter klicken und in der Auflistung der Dateien prüfen, welche Stylesheets geladen werden.

 

Über den Quellcode prüfen

child-theme-quellcodeMan kann auch über den Quellcode seiner Seite prüfen, welche Stylesheets geladen werden. Dazu lässt man sich den Quellcode anzeigen und prüft im <head> Bereich, welche Stylesheets geladen werden. Taucht im Code nur eine style.css Datei auf, fehlt anscheinend noch die style.css vom übergeordneten Theme.

 

 

Stylesheet (style.css) des übergeordneten Themes laden

wordpress-child-theme-style-ladenEntsteht die falsche Theme Darstellung, dadurch das die Formatierungen des übergeordneten Themes (Parent-Themes) fehlen, lässt sich das ganz einfach korrigieren. Es muss lediglich der CSS-Code des Parent-Themes mitgeladen werden. Dazu gibt es mehrere Ansätze, man könnte einfach den Stylesheet-Code per Copy and Paste aus der style.css des Parent-Themes, in die style.css Datei des Child-Themes kopieren. Davon ist aber abzuraten, da bei jedem Theme Update dieser Schritt wiederholt werden müsste. Man könnte auch über den @import Befehl über die style.css des Child-Themes, den Stylesheet Code aus dem Parent-Theme inkludieren. Die Variante wird aber im Bezug auf Suchmaschinen und Performance Optimierung nicht gerne gesehen. Der beste Weg ist es, über die funktions.php des Child-Themes über eine PHP-Funktion die style.css des Parent-Themes mitzuladen.

Dazu muss man als erstes die functions.php des Child-Themes öffnen. Sollte das Child-Theme keine functions.php haben, erstellt man diese einfach neu und packt sie in den Child-Theme Ordner. Als nächstes muss man einfach den folgenden Code in die functions.php kopieren und abspeichern.

Dieser Code-Schnipsel muss in die functions.php kopiert werden:

<?php
 add_action('wp_head','load_parent_style',0);
 function load_parent_style() {
 wp_register_style('parent-theme',get_bloginfo('template_directory').'/style.css');
 wp_enqueue_style('parent-theme');
 }
?>

Mit diesem Schritt sollten nun die Stylesheet-Formatierungen vom Parent-Theme korrekt mitgeladen und das Child-Theme fehlerfrei angezeigt werden.

 

Weitere Artikel zu WordPress Child-Themes:

Kategorien: Wordpress | Schlagwörter: Anpassen, Child-Theme, functions.php, Hook, Theme
Der Autor:
Ich bin ein junger Webentwickler aus Fulda. In meinen Blog schreibe ich über Themen wie Wordpress, Zend Framework und Tipps für einen leichteren Arbeitsablauf. Ich möchte meine Erfahrungen teilen und dem einem oder anderen Webentwickler damit das Leben erleichtern. Finde mich auf Google+, auf Xing oder folge mir auf Twitter. Ich freue mich über jeden neuen Kontakt.

Tragen Sie sich für meinen Newsletter ein