Erste Schritte mit dem WordPress Theme-Customizer

Wie man schnell und einfach eine Theme-Optionen-Seite erstellt, habe ich dir ja bereits erklärt. Eine eigene Seite für Theme-Optionen zu erstellen, ist optimal, wenn du den Usern viele Funktionen bieten möchtest. Doch es gibt auch einen anderen Weg, um eine eigene Seite für Theme-Optionen zu realisieren. WordPress bietet seit einiger Zeit den Theme-Customizer an. Dieser eignet sich hervorragend, wenn dein Theme nicht zu viel Optionen bietet. Der große Vorteil des Customizers ist die Live-Vorschau. Jede Änderung am Theme kann erst einmal betrachtet werden, bevor sie auf der Website übernommen wird. Dieser Beitrag zeigt dir, wie du den Customizer mit deinen Funktionen “fütterst”.

Theme Optionen mit dem Theme-Customizer erstellen, geht recht einfach von der Hand und bietet für die User des Themes den großen Vorteil einer Live-Ansicht aller Änderungen, bevor sie auf Abspeichern klicken. Der Theme Customizer wurde mit der WordPress-Version 3.4 eingeführt.

Wichtig zu wissen: Keine Theme-Options-Seiten mehr für WordPress.org Themes

Wenn du ein Theme für das Theme-Verzeichnis auf WordPress.org erstellen möchtest, musst Du den Theme-Customizer nutzen. Theme-Options-Seiten sind seit dem 21. Oktober nicht mehr erlaubt.

Theme-Optionen erstellen für den Theme-Customizer

Unser Beispiel-Theme ist das Ari Theme von Elmastudio. Es bietet nur die vordefinierten Optionen an und kann daher von uns gut erweitert werden in diesem Tutorial. Wir erstellen also folgend eine komplett neue Theme-Customizer Seite für das Theme.

Wichtig: Alle nachfolgenden Code-Schnipsel können angeklickt werden, der Code ist dann bei GitHub downloadbar.

Die vier Methoden des $wp_customize Objekts

Die vordefinierten Einstellungen

WordPress kommt bereits mit einigen Voreinstellungen, die nicht mehr extra definiert werden müssen.

• title_tagline – Website-Titel und Untertitel
• colors – Farben
• header_image – Header-Bild
• background_image – Hintergrundbild
• nav – Navigation
• static_front_page – Statische Startseite

Die Transport Versionen – refresh vs. postMessage

Wenn du allerdings möchtest, dass einige dieser Einstellungen zu sehen sind, bevor du sie abspeicherst, müssen sie in die Theme-Customizer Funktion mit aufgenommen werden. Du kannst zwei “Transport” Versionen vergeben.

Refresh bedeutet, dass nach der Eingabe deiner Einstellungen innerhalb des Theme-Customizers die Vorschau-Seite direkt neu geladen wird. Erst dann sind die von dir getätigten Einstellungen auch sichtbar.

PostMessage hingegen bedeutet eine Änderung in Echtzeit. Wenn du also im Theme-Customizer zum Beispiel den Blognamen änderst, sind die eingegebenen Buchstaben sofort bei Eingabe sichtbar. Für die Transport-Methode postMessage benötigst Du noch eine kleine jQuery-Datei zusätzlich.

Wichtig zu wissen: Die Standard-Funktionen von WordPress

Der Screenshot zeigt die Standard-Funktionen, welche die Transport-Methode »refresh« aufweisen. Du kannst sie allerdings auch wie abgebildet für eine Echtzeit-Ansicht konfigurieren.

Theme Optionen mit dem Theme-Customizer erstellen

Zuerst lege bitte eine neue Datei namens customizer.php im Hauptverzeichnis deines Themes an. Du erstellst die Datei entweder mit einem reinen Text-Editor, wie Textedit oder einem HTML-Editor.

Den folgenden Code kopierst du in die customizer.php:

Zuerst wird eine eigene Klasse vergeben und danach werden die Funktionen registriert. Jeder Code, den wir nun schreiben, kommt in diese Funktion hinein.

Den User die Farben anpassen lassen

Wir legen eine Sektion für die Farben an, die unser User später anpassen können soll. Es sind die Link- und die Textfarben anpassbar. Der Code muss in die Funktion hinein kopiert werden, die wir eben angelegt haben. In diesem Fall sprechen wir als Beispiel die Transport-Methode »refresh« an, die nicht extra definiert werden muss, weil es der WordPress-Standard ist.

Zunächst definiert der Code die Optionen, die der Benutzer ändern kann, die Link- und Textfarben. Des Weiteren wird für jede der beiden Optionen ein Standard gesetzt, der im CSS-Stylesheet des Themes bereits definiert ist. Auf diese Weise spart man sich die Definition der Einstellungen für die einzelnen Farboptionen. Die Einstellungen, die der Benutzer im Theme-Customizer machen kann, werden hierdurch definiert. Ohne die Einstellungen wird die neue Sektion mit den Einstellungsmöglichkeiten nicht im Customizer erscheinen.

Schließlich definiert der Code ebenso die Kontrollen, die diese Einstellungen ermöglichen.

new WP_Customize_Color_Control aktiviert hier den Color-Picker, mit dem die benutzerdefinierten Farben festgelegt werden können.

Ich habe übrigens keine Sektion “Colors” anlegen müssen, da das automatisch geschieht, wenn Kontrollen definiert werden innerhalb dieser Sektion.

Unser Theme Customizer sieht jetzt so aus:

Du kannst nun mit einem Color-Picker die Farben anpassen, doch im Theme wird es noch keine Änderungen geben. Um die Änderungen auch im Theme möglich zu machen, muss noch die header.php des Themes angepasst werden. Füge daher folgenden Code direkt oberhalb des schließenden </head> Tags in die header.php ein:

Wenn du dies getan hast, sind die Farbanpassungen über den Customizer live sichtbar, noch bevor du auf »Speichern & Publizieren« klickst. Sofort nach der Wahl der neuen Farbe aktualisiert sich die Seite (refresh) und die Änderungen in der Farbwahl werden sichtbar.

Die beiden Variablen holen sich die getätigten Einstellungen aus dem Customizer ab und übergeben die Werte an das kleine Inline-CSS, das für die Anzeige der neuen Farben zuständig ist.

Die Optionen im Theme ausgeben

Hier unterscheiden wir zwischen den von WordPress als Standard bereitgestellten Funktionen und den eigens definierten.

Einen Werbeblock hinzufügen

In diesem Fall haben wir es nicht ganz so leicht wie mit den Farben. Es ist mehr Code erforderlich. Zuerst einmal muss eine neue Sektion erstellt werden, damit der neue Menüpunkt auch angezeigt werden kann. Dazu nutzen wir die $customizer_object->add_section Methode.

Die Priority (Priorität) ist ausschlaggebend dafür, wo der neue Menüpunkt angezeigt wird. Je kleiner die Zahl, desto weiter oben wird der Menüpunkt angezeigt.

Die Einstellungen definieren

Hier kommt die $customizer_object->add_setting Methode zum Zuge.

Die Eingabe für die Einstellungen erstellen

Um die Kontrolle zu erstellen, die für die Anzeige der Einstellungsmöglichkeiten im Customizer zuständig ist, benötigen wir die $customizer_object->add_control($controller_object) Methode.

Es gibt viele verschiedene Controller-Objekte. Je nachdem, was du gerade benötigst. Hier haben wir WP_Customize_Control verwendet, die man für Eingabefelder nutzen kann. Du kannst damit eine Textarea, einen Textbereich, Checkboxen, Radio-Elemente und Farben erstellen. Es existieren auch andere Controller-Objekte wie zum Beispiel WP_Customize_Color_Control, WP_Customize_Upload_Control und WP_Customize_Image_Control zur Farbeingabe, einem Datei- und Bild-Upload.

Das vorläufige Ergebnis im Customizer

Den Werbeblock im Theme anzeigen

Dort, wo der Werbeblock im Anschluss nun erscheinen soll, muss noch ein kleiner Code-Schnipsel platziert werden.

Wenn du nun als Transport-Methode refresh gewählt hast, musst Du nichts weiter tun. Wenn als Transport-Methode postMessage gewählt wurde, damit die Änderungen in Echtzeit zu sehen sind, muss noch ein kleines JavaScript geschrieben werden.

Das JavaScript für die Echtzeit-Anzeige der Änderungen

Erstelle eine JavaScript-Datei innerhalb deines Theme-Verzeichnisses. Nenne sie theme-customizer.js. In diese Datei fügst du folgenden Code ein:

Das Ergebnis im Theme – Werbeblock

Der neu definierte Werbeblock kann nun überall im Theme platziert werden und entweder mit Text-, Banner- oder Adsense-Werbung belegt werden.

Das dunkle Thema des Ari-Themes aktivieren

Ari bietet auch eine dunkle Version, die man über die Theme-Optionen-Seite aktivieren kann. Doch da wir nun etwas über den Customizer lernen möchten, werden wir die Umschalt-Möglichkeit für den WordPress-Customizer realisieren. Die Echtzeit-Ansicht ergibt hier jedoch relativ wenig Sinn, da die Änderungen sofort nach einem kurzem Neuladen der Seite noch vor dem Abspeichern sichtbar sind. Daher nutzen wir für unseren Code die Standard-Methode »refresh«.

Ausgewählt habe ich für die Aktivierung des dunklen Ari-Themes eine Checkbox. Wenn du einen Haken in diese Checkbox setzt, aktivierst du damit das dunkle Theme.

Natürlich sollten hier noch im Anschluss die Farben des Textes und der Links angepasst werden, was wir ja weiter oben bereits realisiert haben.

Die nötige Anpassung im Theme – header.php

Damit das dunkle Theme auch aktiviert werden kann, muss noch eine kleine Änderung in der header.php des Themes geschehen.

Der Code sorgt dafür, dass das Stylesheet für das dunkle Theme nur im <head> Bereich erscheint, wenn es benötigt wird.

Die WordPress-Standard-Einstellungen in Echtzeit

Zwei Standard-Einstellungen von WordPress – den Blognamen und die Beschreibung – werden wir nun mit der Transport-Methode »postMessage« in Echtzeit umsetzen. Daher benötigen wir die folgenden zwei Zeilen Code:

Zusätzlich benötigen wir noch etwas jQuery für die Anzeige in Echtzeit.

Änderungen in der header.php

Auch hier muss wieder etwas geändert werden in der header.php des Themes. Wir müssen dem Website-Titel und der Beschreibung jeweils eine CSS-Klasse hinzufügen, um die Elemente leichter mit jQuery ansprechen zu können.

Das Ergebnis im Customizer

Das komplette JavaScript erstellen und referenzieren

Für die drei Funktionen Werbeblock, Blogname und Blogbeschreibung benötigen wir eine jQuery-Datei, die wir theme-customizer.js nennen. Diese sieht wie folgt aus und gehört in das Hauptverzeichnis des Themes:

Man beachte, dass sich der Code für die Elemente Text und Beschreibung von dem Werbeblock unterscheiden. Der Werbeblock wird an ein HTML-Element gebunden, Text und Beschreibung an ein Text-Element. Bei mir funktionierte die Echtzeitansicht von Blognamen und Beschreibung nur auf diese Weise.

Das JavaScript referenzieren

Damit der Theme-Customizer das jQuery nutzen kann, müssen wir es noch referenzieren. Das macht man in der customizer.php-Datei innerhalb der Klasse Ari_Customizer, aber außerhalb der Funktion function register().

Abschließende Arbeiten

Die Customizer-Funktionen und das JavaScript initiieren.

In die functions.php des Themes folgende Zeile Code hineinkopieren, damit die customizer.php aufgerufen wird.

Bei der Aktivierung des Ari Themes sollte nun unter »Design => Anpassen« folgendes Bild zu sehen sein:

Die kompletten Dateien und das bearbeitete Theme zum Download

Damit du besser verstehst, wie alles zusammenpasst und funktioniert, bekommst Du hier die vollständigen Dateien zum Download.

• Die customizer.php Datei als Download bei GitHub
• Die theme-customizer.js Datei als Download bei GitHub
• Die optimierte header.php Datei des Ari-Themes als Download bei GitHub
• Das komplette, funktionierende und modifizierte Ari-Theme als .zip

Fazit

Der Theme-Customizer ist sicherlich eine sehr interessante Sache, mit der sich jeder Entwickler beschäftigen muss, wenn er Themes über das offizielle Verzeichnis anbieten möchte. Das wird zwangsläufig auch dafür sorgen, dass neue hochqualitative Themes der großen Provider nicht mehr dort gelistet sein werden. Denn die großen Provider wie WooThemes, Krisi und Co. priorisieren immer noch eine eigene Theme-Optionen-Seite, weil sich nur dort die Masse an Einstellungen gut realisieren lassen, die heutige Premium-Themes mit sich bringen.

Selbstverständlich werden die Spezialisten, die Themes bei WordPress anbieten, vieles auch eleganter lösen können, als ich es im Beitrag getan habe. Doch es geht in diesem Artikel in erster Linie um das Grundwissen zum Customizer; um erste, schnelle Erfolge. Und die sind gegeben.

Weiterführende Links zum Thema

• WordPress: Theme Customization API
• WordPress Theme Review Team: Details on the new theme settings (customizer) guideline
• Tuts+: A Guide to the WordPress Theme Customizer – 7 teiliger Artikel
• Smashing Magazine: The WordPress Theme Customizer
• Narga: Comprehensive Guide to make WordPress Theme Options with Customization API
• WordPress Theme Review Team: Customizer tutorials and documentation
• WordPress Theme Handbook: Theme Options – The Customizer API
• Justin Tadlock: Multiple checkbox customizer control

(dpe)