Javi González

Hier erkläre ich kurz wie man ein WordPress Theme anpassen kann.

Was beachtet werden muss, ist das man die Anpassungen/Änderungen nicht direkt an den Dateien des benutzten Wordpress Theme vornehmen sollte. Der Grund ist einfach, bei einen Update können diese Anpassungen/Änderungen verloren gehen. Deshalb erstellt man hierzu ein sogenanntes Child Theme (Kind) vom gewünschten Parent Theme (Eltern). Wie immer unbedingt auf die Lizenz achten, ob es erlaubt ist oder nicht.

Als Beispiel zur Erklärung erstelle ich vom Theme Twenty Thirteen ein Child Theme namens Twenty Thirteen Child.

Als erstes geht’s ins Wordpress Verzeichnis zum Ordner: wp-content/themes

In diesen Ordner befinden sich alle in Wordpress installierten Themes. Jetzt erstellt man einfach einen neuen Ordner mit den gewünschten Namen für den Child Theme. Wichtig ist hier noch zu erwähnen, das Parent Theme muss in Wordpress installiert sein und bleiben, sonst geht das Child Theme natürlich nicht. Das Child Theme basiert eben auf diesen Parent Theme.

Also erstelle ich gemäss meinen Beispiel einen neuen Ordner namens twentythirteen-child.

Meine Ordnerstruktur im Ordner wp-content/themes sieht danach also so aus:

twentyfourteen
twentythirteen
twentythirteen-child
twentytwelve

Der Ordner twentythirteen-child  ist noch leer, daher erstelle ich die Datei style.css  in diesen Ordner. Diese Datei brauchts, damit das Child Theme funktioniert.

Für meinen Beispiel, sieht die Datei so aus:

Ganz wichtig sind hier folgende zwei Punkte:

Template (Ordnername vom Parent Theme, Ordnername muss korrekt geschrieben sein)

@import url (style.css vom Parent Theme wird eingefügt, Pfad muss korrekt)

Diese zwei Punkte sind wichtig, sonst funktioniert das Theme nicht. Die restlichen Punkte sind meiner Meinung selbsterklärend. Auf der offiziellen Anleitung von Wordpress befindet sich ein Beispiel zur style.css: http://codex.wordpress.org/Child_Themes

Gute Anleitung zu Child Themes auf Deutsch: http://www.elmastudio.de/wordpress/wordpress-theme-anpassungen-mit-hilfe-von-child-themes/

Die Datei style.css in den Child Theme Ordner speichern und in die Administration der Wordpress-Webseite wechseln. Unter Design/Themes findet man jetzt, das eben erstellte Child Theme. Jetzt noch das eben erstellte Theme aktivieren und die Webseite sollte genau so aussehen wie mit den Parent Theme.

Will man noch ein Bild des Themes in der Administration sehen, muss man noch ein Bild ins Child Theme Ordner speichern. Name screenshot.png (Format und Name dürfen nicht geändert werden) und Bildgrösse 880px*660px.

Ofizielle Erklärungen von Wordpress dazu: http://codex.wordpress.org/Theme_Development#Screenshot

Folgende zwei Dateien befinden sich bis jetzt gemäss meinen Beispiel im Ordner twentythirteen-child:

style.css
screenshot.png

Anpassungen/Änderungen im Child Theme

CSS-Code

Den CSS Code kann man direkt in die Datei style.css reinschreiben, einfach unterhalb von:

alles was geändert oder ergänzt werden soll reinschreiben und nicht den ganzen CSS-Code nochmals kopieren.

Templates (Webvorlagen)

In Wordpress kann man für praktisch alle Webseiten ein unterschiedliches Template definieren. Erklärungen hierzu findet man in der Dokumentation von Wordpress: http://codex.wordpress.org/Theme_Development

Das Prinzip ist einfach, will man in einen Template des Parent Themes etwas ändern. So kopiert man diese Datei im Ordner des Child Themes, wichtig im Parent Theme sollte das Template unverändert bleiben.

Ein kleines Beispiel um zu erklären wie es funktioniert:

Ich will auf allen Seiten vom Theme den Titel nicht mehr angezeigt bekommen. Das Template page.php ist für alle Seiten zuständig, nicht zu verwechseln mit Beiträgen, das wäre die Datei single.php. Ich kopiere also die Datei page.php vom Parent Theme Ordner in mein Child Theme Ordner.

Somit befinden sich danach 3 Dateien im Ordner twentythirteen-child:

page.php
style.css
screenshot.png

Ich öffne danach die Datei page.php und entferne folgende Codezeile:

Speichere die Datei und sehe auf der Webseite, dass auf allen Seiten der entsprechende Titel nicht angezeigt wird. Das ganze funktioniert natürlich nur, wenn kein anderes Template für die entsprechende Seite zugewiesen wurde.

Selbstverständlich kann man im Child Theme ein Template hinzufügen, dass im Parent Theme nicht vorhanden ist. Das Prinzip ist immer das gleiche, die Dateien im Parent Theme sollten nicht verändert werden. Dadurch erlebt bei Updates keine böse Überraschung.