Zurück zur Übersicht

Der WordPress Theme Customizer, 1. Teil: eine einfache Umsetzung

Als der Theme Customizer mit WordPress 3.4 eingeführt wurde, war ich skeptisch: er wirkte wie aufgesetzt auf die ansonsten durchgehende UI des Backends, schien eine Spielerei im Vergleich zu den aus meiner Sicht wirklich nötigen Änderungen, die damals anstanden. Mittlerweile hat sich meine Meinung etwas relativiert; der Theme Customizer ermöglicht es einem unerfahrenen Benutzer, leicht Änderungen an diversen Eigenschaften des Themes vorzunehmen. Ist sich ein Kunde nicht sicher, welche Schrift- oder Hintergrundfarbe er denn nun will, kann ich ihn einfach an den Customizer verweisen, anstatt selber ständig Änderungen in den CSS-Dateien vornehmen zu müssen.

Mit WordPress 3.9 wurde der Theme Customizer zudem um die Möglichkeit erweitert, Widgets bzw. deren Einstellungen zunächst auszuprobieren, bevor sie auf die Live-Umgebung losgelassen werden.

Aus Entwicklersicht ergibt sich bei der Umsetzung für ein eigenes Theme jedoch ein kleines Hindernis: die offizielle Dokumentation ist auch nach zweimaligem Durchlesen an manchen Stellen noch recht schwer verständlich, und das abschließende Beispiel widerspricht den im Text gemachten Aussagen („you need to define your settings, then your sections, then your controls“).

In dieser Einführung geht es daher im ersten Schritt lediglich darum, eine Klasse zu erstellen, mit der wir Farbwerte des Themes ändern können, und die später problemlos um eigene Controller erweiterbar ist. Leicht verdaulich und direkt ans Eingemachte.

 

Die Theme Customizer-Klasse für unser Theme

Die Klasse, die wir verwenden, um in unserem Theme auf die Grundfunktionalitäten des Customizers zurückgreifen zu können, sieht wie folgt aus:

Diese Klasse genügt, um dem Customizer eine neue Einstellung (Setting) hinzuzufügen, mit der wir die Schriftfarbe des Themes global verändern können.

  1. Wir fügen unsere Methode, mit der wir die neue Einstellung registrieren, dem Hook customize_register hinzu. Unsere Methode erhält dabei das $wp_customize – Objekt, welches sämtliche Methoden enthält, die wir benötigen.
  2. In unserer Methode registrieren wir per add_setting() eine neue Einstellung, der wir die ID font-color geben. Mit dieser ID können wir via theme_mod – Funktionen auf die Werte zurückgreifen, welche wir speichern werden.
  3. Wir registrieren einen Controller mit add_control() und fügen diesen der Standard-Sektion colors hinzu. Man kann selbstverständlich eigene Sektionen erstellen, was hier zunächst nicht erklärt werden soll.
  4. Wir haben im Klassen-Konstruktor ebenfalls die Methode customized_css() registriert. Diese wird mit dem wp_head – Hook aufgerufen und ermöglicht uns, die im Customizer eingestellten Farbwerte auch darzustellen. Per Funktion get_theme_mod() und der Settings-ID holen wir die Werte und schreiben sie in den <style>-Tag.

Die Klasse muss nun noch zum entsprechenden Zeitpunkt eingebunden werden. Da ich für meine Themes eine Autoloader-Funktion verwende, sieht das in meiner functions.php in etwa folgendermaßen aus:

Wichtig ist es dabei, die Klasse zu einem Zeitpunkt einzubinden, wo der customize_register – Hook noch nicht aufgerufen wurde. Ich verwende hierzu den wp_loaded – Hook.

Dies ist eine sehr rudimentäre Einführung in die Möglichkeiten des Theme Customizers. Doch mir geht es wie gesagt um einen übersichtlichen, in kurzer Zeit umsetzbaren Einstieg mit hoffentlich niedrigem Frustfaktor. Ich habe vor, in zukünftigen Teilen dieses Artikels weitere Möglichkeiten zu beschreiben, so zum Beispiel das Erstellen von eigenen Controllern oder das asynchrone Übernehmen der gemachten Einstellungen.

Schreibe einen Kommentar