Wordpress Theme anpassen

Du hast WordPress aufgesetzt und möchtest ein bestehendes WordPress Theme anpassen? Wenn es um die Anpassung von WordPress Themes geht, erlebe ich regelmäßig fehlerhafte Umsetzungen, die gerade auch oft von vermeintlichen Fachleuten angerichtet wurden. In diesem Beitrag werde ich Dir ein paar Grundsätze, die in jedem Fall beachtet werden sollten, aufzeigen, wenn Du ein bestehendes WordPress Theme nach Deinen Wünschen anpassen möchtest.

Der wohl wichtigste Grundsatz ist die Erstellung eines so genannten Child-Themes. Leider ist es die absolute Ausnahme, dass bei der Anpassung eines Themes ein Child-Theme erstellt wird. Dabei ist es der wichtigste Schritt überhaupt!

Child Theme in WordPress erstellen

Der erste Schritt bei der Anpassung eines Themes in WordPress sollte immer die Erstellung eines Child Themes sein. So ein Child-Theme ist ein Theme, das alle Eigenschaften des Parent-Themes erbt. Mit anderen Worten, erstellst Du ein Theme, das komplett dem Theme entspricht, welches Du anpassen möchtest. Du magst Dich jetzt fragen, wozu das gut sein soll. Der Vorteil besteht darin, dass alle Änderungen, die Du in dem erstellten Child-Theme vornehmen wirst, das Parent-Theme überschreibt.

Du veränderst das Theme also nicht direkt, sondern passt es in einem eigens angelegten Theme an, dass alle Eigenschaften des anzupassenden Themes erbt.

Die Vorteile liegen auf der Hand. So kannst Du beispielsweise Dein Theme aktualisieren, ohne dass Änderungen verloren gehen. Auch kannst Du jede Änderung leicht rückgängig machen, weil das eigentliche Theme am Ende nur überschrieben wird. Löschst Du die Änderung in Deinem Child-Theme, erhälst Du wieder die Werte des Themes, das Du angepasst hast.

Wege zur Erstellung eines Child Themes

Erstellung eines Child Themes durch Import im Stylesheet

Traditionell war es sehr einfach ein Child-Theme zu erstellen. Man legte auf Dateiebene, im Ordner Themes, einfach ein neues Verzeichnis mit dem gewünschten Namen an. In der Regel eignet sich dafür die Bezeichnung des Themes, das überschrieben werden soll, gefolgt von “child”.

In diesem neu angelegten Verzeichnis erstellte man eine CSS-Datei. Auf einem Linux-basierten System reicht dafür der Aufruf:
touch style.css.
Du kannst auch jeden Editor dafür verwenden. Wenn Du cool sein willst, nutzt Du vim ;-):
vim style.css.

In diese Datei schrieb man dann folgende Zeilen:


/*
Theme Name: Name Ihres Childthemes
Description: Beschreibung für Ihr Childtheme
Author: Ihr Name
Author URI: Ihre Webadresse
Template: Bezeichnung des Parenttheme-Ordners
Version: Versionsnummer, beispielsweise 1.0
Tags:
*/
@import url("../Ordner-Parent-Theme/style.css");

Unter Theme Name trägst Du die Bezeichnung für Dein Childtheme ein. In der Regel ist das die Bezeichnung des Parent gefolgt von child. Die Bezeichnung entspricht dem vergebenen Verzeichnis, das Du für Dein Child-Theme gewählt hast. In WordPress findest Du diese Bezeichnung dann unter Desig als Namen für Dein Theme.

Unter Description kannst Du eine Beschreibung für Dein Theme vergeben.

Autor gibt den Autoren des Themes an. In diesem Falle Dich.

Author URI die Webadresse des Autors.

Unter Template musst Du die genaue Bezeichnung des Themeordners angeben, von dem Du die Werte erben willst.

Die darauf folgende Versionsnummer bezeichnet die Version Deines Themes.

Zuletzt musst Du noch die CSS-Datei des Themes, von dem Du erben willst, also dem Parent-Theme, importieren. Die Anweisung url(“../Ordner-Parent-Theme/style.css”) gibt den relativen Pfad zum style.css des Parent an. .. bezeichnet das darüberliegende Verzeichnis.

Im Prinzip bist Du jetzt schon fertig und kannst das Child-Theme in WordPress aktivieren. Es wäre dann exakt wie das Parent-Theme. Allerdings fehlt noch ein schönes Bild. Es kommt so etwas traurig daher. Möchtest Du das ändern? Dann erstelle für Dein Child-Theme ein Bild, 600 x 450px und speichere es als png im Verzeichnis Deines Child-Themes. Das Bild wird dann unter Designs angezeigt.

Möchtest Du nun das Theme anpassen, kannst Du die Dateien, die Du anpassen willst vom Parent-Theme in den Ordner Deines Child-Themes kopieren und nach Deinen Wünschen anpassen. Änderungen im CSS kannst Du direkt in Deiner bereits angelegten style.css in Deinem Child ändern.

Du solltest darauf achten, dass jetzt 2 Themes in Deinem Design genutzt werden. Das bedeutet, dass Du das Parent-Theme selbstverständlich nicht löschen darfst, auch wenn es in Deinem Design-Verzeichnis unter WordPress nicht auf aktiv steht!

Einbindung der styles des Parents über die functions.php

In den vorherigen Ausführungen ist bereits deutlich geworden, dass die Art der zuvor beschriebenen Einbindung zwar möglich ist, jedoch veraltet ist. Der WordPress codex empfiehlt mittlerweile die Einbindung mittels der functions.php.

Die Erstellung eines Child-Themes, wie es der WordPress Codex aktuell empfiehlt, wird nachfolgend beschrieben. Falls Dir das zu kompliziert erscheint, kannst Du Dich jederzeit an mich wenden. Ich erstelle nicht nur Dein Child-Theme für einen geringen Betrag, sondern passe bestehende WordPress-Themes auch gerne an Deine Bedürfnisse und Wünsche an.

Im ersten Schritt gehst Du wie zuvor beschrieben vor. Allerdings erstellst Du diesmal nicht nur das Verzeichnis für Dein Child-Theme und darin die style.css, sondern erstellst zusätzlich eine Datei namens functions.php im Verzeichnis Deines Child-Themes.

Wir gehen in diesem Beispiel einfach einmal davon aus, dass das WordPress-Theme, das Du anpassen möchtest, catchresponsive heißt. In dem Fall würdest Du folgend Dein Child-Theme auf Dateiebene anlegen. Du wechselst in das Verzeichnis wp-content/themes und gibst folgende Anweisungen ein (Linux):

mkdir catchresponsive-child

touch catchresponsive-child/style.css Catchresponsive-child/functions.php

Anschliessend öffnest Du die neu angelegte Datei style.css

vim catchresponsive-child/style.css

und schreibst folgende Zeilen hinein:


/*
 Theme Name:   catchresponsive-child
 Theme URI:    http://example.com/catchresponsive-child/
 Description:  Catchresponsive Child Theme
 Author:       Max Mustermann
 Author URI:   http://example.com
 Template:     catchresponive
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         responsive-layout, accessibility-ready
 Text Domain:  catchresponsive-child
*/

Bitte beachte insbesondere die Angabe hinter Template. Dort muss in jedem Fall die Bezeichnung des Parent-Themes stehen, das Du anpassen möchtest. Dass Du example anpassen solltest, versteht sich von selbst.

Bis zu diesem Punkt weicht diese Art der Einbindung kaum von der zuvor beschriebenen Art der Einbindung mittels @import-Anweisung ab. Der WordPress-Codex empfiehlt die Einbindung mittels @import-Anweisung nicht mehr, da es das Laden der style.css verzögert. Die korrekte Einbindung der Parent-Stylesheets sollte durch eine Funktion in der functions.php erfolgen.

get(‘Version’)
    );
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
?>

Das Beispiel zeigt die Einbindung des Parent-Stylesheets, wenn sich alle CSS-Anweisungen in einer Datei befinden.