WordPress Theme anpassen

Sie haben WordPress aufgesetzt und möchten ein bestehendes WordPress Theme anpassen? Wenn es um die Anpassung von WordPress Themes geht, erleben wir regelmäßig fehlerhafte Umsetzungen, die gerade auch oft von vermeintlichen Fachleuten angerichtet wurden. In diesem Beitrag möchten wir Ihnen ein paar Grundsätze, die in jedem Fall beachtet werden sollten, aufzeigen, wenn Sie ein bestehendes WordPress Theme nach Ihren Wünschen anpassen möchten.

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, erstellen Sie ein Theme, dass komplett dem Theme entspricht, dass Sie anpassen möchten. Sie mögen sich jetzt fragen, wozu das gut sein soll. Der Vorteil besteht darin, dass alle Änderungen, die Sie in dem erstellten Child-Theme vornehmen, das Parent-Theme, also das Theme, das Sie anpassen möchten, überschreibt.

Sie verändern das Theme also nicht direkt, sondern passen es in einem eigens angelegten Theme an, dass alle Eigenschaften des anzupassenden Themes erbt.

Die Vorteile liegen auf der Hand. So können Sie beispielsweise Ihr Theme aktualisieren, ohne dass Ihre Änderungen verloren gehen. Auch können Sie jede Änderung leicht rückgängig machen, weil Sie das eigentliche Theme am Ende nur überschreiben. Löschen Sie die Änderung in Ihrem Child-Theme, erhalten Sie wieder die Werte des Themes, das Sie angepasst haben.

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.
Sie können auch jeden Editor dafür verwenden. Beispielsweise 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 tragen Sie die Bezeichnung für Ihr Childtheme ein. In der Regel ist das die Bezeichnung des Parent gefolgt von child. Die Bezeichnung entspricht dem vergebenen Verzeichnis, das Sie für Ihr Child-Theme gewählt haben. In WordPress finden Sie diese Bezeichnung dann unter Desig als Namen für Ihr Theme.

Unter Description können Sie eine Beschreibung für Ihr Theme vergeben.

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

Author URI die Webadresse des Autoren.

Unter Template müssen Sie die genaue Bezeichnung des Themeordners angeben, von dem Sie die Werte erben wollen.

Die darauf folgende Versionsnummer bezeichnet die Version Ihres Themes.

Zuletzt müssen Sie noch die CSS-Datei des Themes, von dem Sie erben wollen, 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 sind Sie jetzt schon fertig und können 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öchten Sie das ändern, können Sie für Ihr Child-Theme ein Bild, 600 x 450px erstellen und es als png im Verzeichnis Ihres Child-Themes speichern. Das Bild wird dann unter Designs angezeigt.

Möchten Sie nun das Theme anpassen, können Sie die Dateien, die Sie anpassen wollen vom Parent-Theme in den Ordner Ihres Child-Themes kopieren und nach Ihren Wünschen anpassen. Änderungen im CSS können Sie direkt in Ihrer bereits angelegten style.css in Ihrem Child ändern.

Sie sollten darauf achten, dass jetzt 2 Themes in Ihrem Design genutzt werden. Das bedeutet, dass Sie das Parent-Theme selbstverständlich nicht löschen dürfen, auch wenn es in Ihrem 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 Ihnen das zu kompliziert erscheint, können Sie sich jederzeit an uns wenden. Wir erstellen nicht nur Ihr Child-Theme für einen geringen Betrag, sondern passen bestehende WordPress-Themes auch gerne an Ihre Bedürfnisse und Wünsche an.

Im ersten Schritt gehen Sie wie zuvor beschrieben vor. Allerdings erstellen Sie diesmal nicht nur das Verzeichnis für Ihr Child-Theme und darin die style.css, sondern erstellen zusätzlich eine Datei namens functions.php im Verzeichnis Ihres Child-Themes.

Wir gehen in diesem Beispiel einfach einmal davon aus, dass das WordPress-Theme, das Sie anpassen möchten, catchresponsive heißt. In dem Fall würden Sie folgend Ihr Child-Theme auf Dateiebene anlegen. Sie wechseln in das Verzeichnis wp-content/themes und geben folgende Anweisungen an (Linux):

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

Anschliessend öffnen Sie die neu angelegte Datei style.css
vim catchresponsive-child/style.css
und schreiben 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 beachten Sie insbesondere die Angabe hinter Template. Dort muss in jedem Fall die Bezeichnung des Parent-Themes stehen, das Sie anpassen möchten. Dass Sie example anpassen sollten, 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.

WordPress Theme anpassen lassen

Sie möchten die Arbeit gerne abgeben und Ihr WordPress Theme durch uns anpassen lassen? Wir übernehmen diese Arbeit gerne für Sie. Kontaktieren Sie uns und wir übernehmen die Arbeiten für Sie.

Schreibe einen Kommentar

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