Sidebar Layout Theme Option im WordPress Customizer implementieren
Eine beliebte Einstellung für ein zweispaltiges WordPress Theme ist eine Sidebar Layout Option im WordPress Customizer. Damit kann der Nutzer die Position der Sidebar Widgets von Rechts nach Links ändern.
In diesem Tutorial möchte ich zeigen, wie du ganz einfach eine Theme Option zum Wechsel der Sidebar Position im WordPress Customizer implementieren kannst. Als Beispiel soll das Standard Theme TwentySixteen dienen. Das Theme hat praktischerweise ein 2-Spalten Layout mit Sidebar.
Zum Ausprobieren der Code Beispiele empfehle ich die Erstellung eines Child Themes, anstatt direkt dass TwentySixteen Theme zu ändern. Alle PHP Funktionen dieser Anleitung können in die functions.php kopiert werden; der CSS Code in die style.css.
1) Implementierung der Theme Option im WordPress Customizer
Wir wollen eine neue Option namens Sidebar Position erstellen. Die Option soll ein Select Feld mit zwei Auswahlmöglichkeiten bieten: Left Sidebar und Right Sidebar. Die Option selbst soll sich in einer neuen Sektion Layout Options im Customizer befinden.
Für die Umsetzung von Theme Optionen im Customizer verwenden wir die Theme Customization API. Das Hinzufügen von neuen Sektionen und Optionen erfolgt dabei immer mit dem customize_register Action Hook.
Innerhalb unserer Funktion haben wir Zugriff auf das $wp_customize Objekt, welches eine Instanz der WP_Customize_Manager Klasse ist. Dadurch haben wir Zugriff auf die Objektmethoden add_section(), add_setting() und add_control().
Das klingt zunächst komplizierter als es ist. Für das Erstellen von Optionen brauchen wir nämlich nur mehrere einfache PHP Arrays zu definieren. Folgender Code Schnipsel reicht aus, um unsere neue Option zu erstellen:
Als Erstes fügen wir eine neue Sektion hinzu. Mit priority können wir auf die genaue Platzierung der Sektion Einfluss nehmen, 120 ist eine Position weit unten im Customizer.
Anschließend brauchen wir eine Setting und eine Control für unsere neue Theme Option.
Unterschied zwischen Setting und Control
Durch Anlegen einer Setting mit add_setting() lassen wir WordPress von der neuen Option wissen. Üblicherweise definieren wir für die Einstellung einen Standard-Wert (Default) und einen Sanitization Callback zur Validierung der Option (Stichwort Security). Mehr dazu gleich.
Die Control ist für die Anzeige der Einstellung zuständig und erlaubt dem Nutzer damit die Manipulation der Option. Statt eines Select Felds könnten wir für unser Beispiel auch einfach eine Radio Checkbox Control verwenden. Durch die Control wird mit dem Parameter section ebenfalls festgelegt, in welcher Sektion die Option angezeigt wird.
2) Validierung der Theme Option und User Inputs
Für unsere Setting haben wir als sanitize_callback die Funktion theme_slug_sanitize_select übergeben. WordPress verwendet den Sanitization Callback zur Validierung des User Inputs. Damit soll sichergestellt werden, dass keine unerwünschten Werte wie beispielsweise Schadcode in der Option gespeichert werden kann.
Die Funktion müssen wir noch erstellen, da diese leider nicht standardmäßig im Core enthalten ist. Wir greifen hier auf ein Code Beispiel des WordPress Theme Review Teams zurück:
Die Funktion liest dabei die Auswahlmöglichkeiten der Control selbst aus und überprüft damit den User Input. Somit wird sichergestellt, dass unsere Option nur die Werte left oder right annehmen kann. Die Option ist damit übrigens auch für alle anderen Select und Radio Button Controls geeignet.
3) Umsetzung der Theme Option im Frontend
Unsere neue Theme Option im WordPress Customizer ist damit fertig. Die Sidebar Position kann nun geändert werden, im Theme selbst passiert logischerweise aber noch nichts.
Für die Umsetzung der Theme Option im Frontend wollen wir eine neue CSS Klasse .left-sidebar im body tag hinzufügen, wenn der Nutzer eine linke Sidebar Position wünscht. Mithilfe der Klasse können wir dann mit etwas CSS Code das Sidebar Layout ändern.
Zur Implementierung verwenden wir den body_class Filter Hook:
Die Funktion get_theme_mod liefert uns dazu die gespeicherte Sidebar Position. Der zweite Parameter bestimmt den Default-Wert, falls der Nutzer die Option noch nicht verwendet hat (z.B. nach Erstinstallation des Themes).
Alles was wir nun noch brauchen ist etwas CSS Code in der style.css unseres TwentySixteen Child Themes, um die Sidebar Position nach Links zu wechseln:
4) Fazit
Mit drei Funktionen und etwas CSS haben wir somit eine Möglichkeit geschaffen, die Sidebar Position im TwentySixteen Theme zu ändern. Fragen zum WordPress Customizer oder den Code Beispielen beantworte ich gerne in den Kommentaren.
