Leitfaden zum WordPress Theme Customizer

Was ist der WordPress Theme Customizer

Das WordPress-Anpassungssystem Theme Customizer ist ein eingebautes Tool, das die visuelle Anpassung des Website-Erscheinungsbildes mit Echtzeit-Vorschau der Änderungen ermöglicht. Anstatt den Theme-Code zu ändern oder separate Einstellungsseiten zu verwenden, bietet der Customizer eine einheitliche Schnittstelle, in der Sie die Auswirkungen jeder Änderung sehen, bevor Sie diese speichern. Der Zugriff erfolgt über Design, Anpassen im Admin-Panel. Wenn Sie gerade erst anfangen, sehen Sie sich unsere Anleitung zur Einrichtung von WordPress an. Wenn Sie WordPress noch nicht installiert haben, sehen Sie sich unseren Schritt-für-Schritt-Leitfaden für WordPress an oder rufen Sie /wp-admin/customize.php über die URL Ihrer Website auf.

Der Customizer wurde in WordPress 3.4 eingeführt und seitdem mit jeder neuen Version kontinuierlich verbessert. Er verwendet AJAX für die Kommunikation mit dem Server und JavaScript für die Echtzeit-Vorschau, was eine reibungslose Benutzererfahrung ohne Seitenaktualisierung bietet. Alle WordPress-Standardthemen und die meisten qualitativ hochwertigen Themes verwenden den Customizer für ihre Einstellungen.

Anatomie des Customizers

Panels, Sections und Controls

Der Customizer ist in einer hierarchischen Struktur mit drei Ebenen organisiert. Panels sind die breiteste Kategorie und dienen zur Gruppierung verwandter Sections, zum Beispiel ein Panel Header, das Sections für Logo, Navigation und Top Bar enthält. Sections sind Gruppen verwandter Controls, zum Beispiel die Section Farben, die Controls für Hintergrund-, Text- und Linkfarben enthält. Controls sind einzelne Elemente zur Einstellungseingabe wie Farbwähler, Dropdown-Menüs, Textfelder und Upload-Controls für Bilder.

Settings und Transport

Jedes Control ist mit einem Setting verbunden, das definiert, wo der Wert gespeichert wird und wie er angewendet wird. Ein Setting kann den Wert in der Datenbank als theme_mod oder option speichern. Der Transport-Parameter bestimmt die Art der Anwendung der Änderung, wobei refresh das Vorschaufenster bei jeder Änderung aktualisiert und postMessage JavaScript für die sofortige Anwendung ohne Aktualisierung verwendet. PostMessage ist deutlich schneller und bietet eine bessere Benutzererfahrung, erfordert jedoch zusätzlichen JavaScript-Code für jedes Control.

Registrieren von Sections und Controls

Hinzufügen einer Section

Sections werden in functions.php mit dem customize_register Hook registriert. Sie rufen die $wp_customize add_section Methode mit einer eindeutigen ID und einem Array von Parametern auf, das title für den Namen der Section, description für die oben in der Section angezeigte Beschreibung, priority für die Anzeigereihenfolge enthält, wobei eine niedrigere Zahl eine höhere Position bedeutet, und panel, wenn Sie die Section in einem Panel platzieren möchten. Ein Beispiel ist das Erstellen einer Section für Header-Einstellungen mit dem Titel Header-Einstellungen, einer Funktionsbeschreibung und Priorität 30.

Hinzufügen von Settings und Controls

Für jedes Setting registrieren Sie zuerst das Setting mit der add_setting Methode, in der Sie den Standardwert, den Transport-Typ und die sanitize_callback Funktion zur Validierung der Eingabe angeben. Dann fügen Sie das Control mit der add_control Methode hinzu, die den Typ des Controls, das Label, die zugehörige Section und die Priorität definiert. WordPress bietet eingebaute Control-Typen wie text für ein Textfeld, textarea für mehrzeiligen Text, checkbox für ein Bestätigungsfeld, radio für Radiobuttons, select für ein Dropdown-Menü, dropdown-pages für die Seitenauswahl und number für ein numerisches Feld.

Erweiterte Controls

WordPress hat eingebaute erweiterte Controls für spezifische Datentypen. WP_Customize_Color_Control zeigt einen Farbwähler mit Hex-Wert an, WP_Customize_Image_Control ermöglicht das Hochladen oder Auswählen eines Bildes aus der Medienbibliothek, WP_Customize_Cropped_Image_Control fügt die Möglichkeit hinzu, Bilder auf gewünschte Abmessungen zuzuschneiden, und WP_Customize_Media_Control ist ein universelles Control für jeden Medientyp. Um diese Controls zu verwenden, instanziieren Sie sie direkt, anstatt add_control mit einem Typ aufzurufen, da es sich um PHP-Klassen mit spezifischen Parametern handelt.

Live Preview mit postMessage

PHP-Seite

Um die Live-Vorschau ohne Aktualisierung zu aktivieren, setzen Sie den Transport-Parameter auf postMessage im add_setting Aufruf. Dies weist den Customizer an, JavaScript zur Anwendung der Änderungen zu verwenden, anstatt die gesamte Seite zu aktualisieren. Im Theme-Ausgabecode verwenden Sie die get_theme_mod Funktion, um den gespeicherten Wert zu lesen und ihn über Inline-CSS oder eine Klasse auf das entsprechende Element anzuwenden.

JavaScript-Seite

Erstellen Sie eine JavaScript-Datei, die nur in der Customizer-Vorschau geladen wird, indem Sie den customize_preview_init Hook zum Enqueue des Skripts verwenden. Im Skript verwenden Sie die wp.customize API, um auf Einstellungsänderungen zu hören und sie auf Elemente in der Vorschau anzuwenden. Zum Beispiel hören Sie für eine Farbänderung auf die Änderung der header_bg_color Einstellung und aktualisieren die CSS-Eigenschaft des entsprechenden Elements. Für eine Textänderung ändern Sie das innerHTML des Elements. PostMessage bietet sofortiges visuelles Feedback ohne Verzögerung, was die Benutzererfahrung erheblich verbessert.

Selective Refresh

Selective Refresh ist ein hybrider Ansatz, der in WordPress 4.5 eingeführt wurde und nur einen Teil der Seite anstelle der gesamten Seite aktualisiert. Sie registrieren ein Partial mit der add_partial Methode, in der Sie selector als CSS-Selektor des zu aktualisierenden Elements und render_callback als PHP-Funktion angeben, die neues HTML für dieses Element generiert. Dies ist ideal für komplexe Elemente, deren Aussehen von mehreren Einstellungen abhängt, da es einfacher ist als das Schreiben von JavaScript für jede mögliche Änderungskombination und schneller als eine vollständige Seitenaktualisierung.

Validierung und Sanitisierung

Sanitize Callback

Jedes Setting muss eine sanitize_callback Funktion haben, die Benutzereingaben vor dem Speichern in der Datenbank bereinigt und validiert. WordPress bietet eingebaute Funktionen für häufige Fälle, darunter sanitize_text_field für Textfelder, sanitize_email für E-Mail-Adressen, sanitize_hex_color für hexadezimale Farben, absint für positive ganze Zahlen, esc_url_raw für URLs und wp_kses_post für HTML-Inhalt mit erlaubten Tags. Speichern Sie niemals Benutzereingaben ohne Sanitisierung, da dies die Website für XSS und andere Angriffe öffnet.

Validation Callback

Seit WordPress 4.6 gibt es validate_callback, das ein WP_Error Objekt mit einer Fehlermeldung zurückgeben kann, die dem Benutzer in der Customizer-Schnittstelle angezeigt wird. Im Gegensatz zu sanitize_callback, das stillschweigend ungültige Werte korrigiert, informiert validate_callback den Benutzer explizit darüber, dass die Eingabe ungültig ist. Beispielsweise können Sie validieren, ob eine URL gültig ist, ob eine Zahl im zulässigen Bereich liegt oder ob ein Text die maximale Länge nicht überschreitet, und eine entsprechende Fehlermeldung anzeigen.

Benutzerdefinierte Panels und Controls

Erstellen eines benutzerdefinierten Controls

Für Anforderungen, die eingebaute Controls nicht abdecken, können Sie ein benutzerdefiniertes Control durch Vererben der WP_Customize_Control Klasse erstellen. Sie überschreiben die render_content Methode, um das HTML des Controls zu definieren, und die enqueue Methode, um Control-spezifisches CSS und JavaScript einzubinden. Beispiele für benutzerdefinierte Controls sind ein Range-Slider mit Anzeige des aktuellen Werts, ein Toggle-Switch anstelle einer Checkbox, ein Google Fonts-Auswahltool mit Schriftartenvorschau, ein Control zum Sortieren von Elementen per Drag-and-Drop und ein Control zur Layout-Konfiguration mit visueller Darstellung der Optionen.

Erstellen eines Panels

Panels werden mit der add_panel Methode registriert und sind nützlich, um eine große Anzahl von Sections in logische Gruppen zu organisieren. Ein Theme mit vielen Einstellungen kann Panels für Header, Footer, Blog, Farben, Typografie und Layout haben. Jedes Panel enthält mehrere Sections und jede Section enthält mehrere Controls. Übertreiben Sie es nicht mit der Hierarchietiefe, da Benutzer nicht gerne durch viele Ebenen klicken, um die gewünschte Einstellung zu erreichen.

Bedingte Einstellungen

Der active_callback Parameter in Sections und Controls ermöglicht die Anzeige von Controls nur, wenn bestimmte Bedingungen erfüllt sind. Zum Beispiel wird das Control für die Header-Farbe nur angezeigt, wenn die Option Header anzeigen aktiviert ist, Blog-Einstellungen werden nur auf der Blog-Seite in der Vorschau angezeigt und Slider-Optionen werden nur auf der Startseite angezeigt. Dies macht die Schnittstelle übersichtlicher und weniger verwirrend, da Benutzer nur relevante Einstellungen für den aktuellen Kontext sehen.

Integration mit Block-Themes

Mit der Einführung von Full Site Editing in WordPress 5.9 hat der Customizer eine Alternative in Form des Site Editors erhalten. Block-Themes verwenden die theme.json Datei zur Definition von Einstellungen anstelle der Customizer API. Klassische Themes und Hybrid-Themes verwenden den Customizer jedoch weiterhin aktiv und er bleibt ein wichtiger Teil des WordPress-Ökosystems. Wenn Sie ein klassisches Theme entwickeln, ist der Customizer weiterhin die empfohlene Methode zur Implementierung von Theme-Einstellungen mit Live-Vorschau.

Best Practices

• Verwenden Sie postMessage Transport wann immer möglich für sofortige Vorschau der Änderungen
• Implementieren Sie immer sanitize_callback für jedes Setting ohne Ausnahme
• Organisieren Sie Einstellungen logisch in Sections und Panels für eine einfachere Navigation
• Verwenden Sie sinnvolle Standardwerte, damit die Website ohne Einstellungen gut aussieht
• Fügen Sie Beschreibungen zu Sections und Controls hinzu, damit Benutzer verstehen, was jede Einstellung bewirkt
• Testen Sie die Live-Vorschau auf verschiedenen Seiten der Website, da sich das Verhalten unterscheiden kann
• Verwenden Sie active_callback zur Anzeige von Controls nur, wenn diese relevant sind
• Fügen Sie nicht zu viele Einstellungen hinzu, da dies Benutzer verwirrt und die Wartung erschwert

Fazit

Der WordPress Theme Customizer ist ein mächtiges Tool zum Erstellen einer intuitiven Schnittstelle zur Anpassung des Theme-Erscheinungsbildes mit Live-Vorschau. Die Hierarchie von Panels, Sections und Controls ermöglicht eine organisierte Anzeige der Einstellungen, postMessage Transport bietet sofortiges visuelles Feedback und Sanitisierung und Validierung gewährleisten die Datensicherheit. In einer optimierten WordPress-Hosting-Umgebung werden alle Customizer-Funktionalitäten mit optimiertem Server für schnelle Anwendung von Änderungen und zuverlässigen Betrieb Ihrer Website unterstützt.