Ich wollte für meinen Blog ein neues Theme verwenden und bin dabei beim Worpress-Theme „Twenty Fourteen“ hängen geblieben. Allerdings störte es mich, dass der Content nicht zentriert ist, was bei größeren Monitoren/Auflösungen nicht so toll aussieht. Um bei Modifikationen aber nicht das originale Theme zu zerstören, löste ich es über die Verwendung eines Child-Themes.
Diese Vorgehensweise ist auch dirket von WordPress (codex.wordpress.org) so vorgegeben. Hier wird ebenfalls angemerkt, dass man im Child-Theme nicht mehr das @import verwenden soll, da es nicht sehr performant ist.
Aber mal von Anfang an: Warum überhaupt ein Child-Theme verwenden?
Ein Theme besteht aus mehreren Dateien. Darunter sind Grafiken, Bilder und viele Steuerungsdateien mit Endungen wie .css und .php.
Abhängig von den Funktionen einer Theme können hier schon einige Zeilen an Code zusammen kommen, die für einen normalen User nicht gerade leicht zu überblicken sind. Änderungen in den Dateien können da schon mal weitreichende Probeme verursachen und man muss dann erstmal wieder herausfinden, was an einer Fehlfunktion schuld ist, und was der ursprüngliche Inhalt war.
Ein anderes Problem sind Updates der Themes. Ein Update würde u. U. alle mühsam eingepflegten Änderungen überschreiben und man müsste von vorne beginnen.
Ein Child-Theme hingegen „hängt“ an einer, zur „Parent-Theme“ ausgewählten, Standard-Theme und über übernimmt „on the fly“ die Einstellungen der gewählten Parent-Theme.
Ein Beispiel:
Ich wähle die WordPress-Theme „Twenty Fourteen“ und installiere dieses. Ich möchte aber Änderungen daran vornehmen und erzeuge deshalb ein Child-Theme mit dem Namen „Twenty Fourteen Meins“ um nicht den Code der Theme selber überarbeiten zu müssen.
Für mein Child-Theme benötige ich ein Verzeichnis und mindestens 2 Dateien (evtl. + 1 Bild).
Also logge ich mich erstmal via FTP auf meinen Webspace ein und erzeuge unter „./wp-content/themes“ das Verzeichnis „twenty-fourteen-meins“. Solltet Ihr Eure Verzeichnisse modifiziert haben, so müsst Ihr hier den Pfad entsprechend anpassen.
In diesem neuen Pfad erzeuge ich eine Datei „styles.css“ und fülle sie mit folgendem Inhalt.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* Theme Name: Twenty Fourteen Meins Theme URI: http://mein-webspace/twenty-fourteen-meins/ Description: Twenty Fifteen Meins Author: Ich selber Author URI: http://mein-webspace Template: twentyfourteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fourteen-meins */ |
Nach dem speichern steht mir in WordPress, unter dem Menü „Themes“, ein neues Theme mit dem Namen „Twenty Fourteen Meins“ zur Verfügung.
Wenn ich dieses aber jetzt aktiviere, sieht das Ergebnis sehr ernüchternd aus – es ist einfach unstrukturierter Text.
Das liegt daran, dass bis jetzt nur ein Block aus Kommentaren in der „styles.css“ steht und WordPress noch gar nicht weiß, was es jetzt machen soll.
Da wir aber das Theme „Twenty Fourteen“ verwenden wollen, sagen wir jetzt dem WordPress einfach: hole Dir die Informationen von dort.
Dazu nutzt man jetzt nicht mehr den @import Befehl, sondern man nutzt eine Datei – die „functions.php“.
Ich wechsle wieder per FTP in meinen Theme-Ordner „twenty-fourteen-meins“ und erstelle die Datei functions.php mit folgendem Inhalt.
|
1 2 3 4 5 6 7 |
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?> |
Wenn jetzt das neue Theme „twenty-fourteen-meins“ aktiviert wird, wird WordPress mitgeteilt, dass es erstmal das Theme „twenty-fourteen“ laden soll und danach das neue „twenty-fourteen-meins“.
Momentan ist das noch recht witzlos, denn wir haben ja keine weiteren Anweisungen für in unserem Theme hinterlegt und somit sieht alles noch genauso aus, wie wir es von originalem Theme gewohnt sind.
Bevor ich jedoch weiter mache, sorge ich erstmal für etwas Kosmetik.
Die 2 Dateien „styles.css“ und „functions.php“ sind die Minimumangabe, die ich in einem Child-Theme benötige. Eine weitere „Minimum“-Angabe ist auch eine Bilddatei, welche in der Theme-Auswahl von WordPress dann eine Vorschau des Themes anzeigt.
Ich kopiere hier einfach die Datei „screenshot.png“ aus der Theme „twenty-fourteen“ auf meinen Rechner. Ich öffne diese mit Paint und schreibe ganz groß „MEINS“ in roten Buschtaben in das Bild. Danach speichere ich es wieder ab und lade es per FTP in mein Theme-Verzeichnis „twenty-fourteen-meins“.
Abe jetzt habe ich auch ein Vorschaubild in der Theme-Auswahl in WordPress.
Mein Anliegen war ja, dass ich den Inhalt zentriert auf dem Bildschirm ausgeben möchte. Dazu ergänze ich die „styles.css“ um folgende Zeilen
|
1 2 3 4 |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0 auto; } |
Was passiert jetzt?
Wenn WordPress mein Theme „twenty-fourteen-meins“ lädt, wird Ihm gesagt, dass er erstmal das Theme „twenty-fourteen“ laden soll. Damit hat WordPress alle Parameter, die es zur Darstellung benötigt.
Danach werden die Parameter aus meinem Child-Theme geladen und damit die Parameter aus der Parent-Theme überschrieben.
Im obigen Fall ist es die Anweisung, dass der Content zentriert ausgegeben werden soll.
Jetzt kann man im eigenen Child-Theme ruhig mal einiges Ausprobieren – einen irreparablen Schaden am Theme selber kann man jetzt nicht mehr anrichten.
Wer sich das Theme „twenty-fourteen“ anpassen möchte, aber keine Lust hat selber zu modifizieren, dem möchte ich hier noch ein paar Plugins vorschlagen:
Das Plugin „fourteen-colors“ bietet einige wenige Anpassungsmöglichkeiten an, aber es reicht, um seinen eigenen Akzent zu setzen.
Wesentlich mächtiger ist das Plugin „sytles-twentyfourteen“, welches sehr viele Einstellungsmöglichkeiten anbietet. Dieses Plugin ist jedoch kein eigenständiges Plugin, sondern eher ein Zusatz zum „styles“-Plugin, dessen Installation die Voraussetzung für das „styles-twentyfourteen“ ist.