Bedingtes Anzeigen und Verstecken von Customizer-Controls via JavaScript

Bei Nutzung des Partial Refresh im Customizer, wodurch nach einer Änderung nur ein Teil der Vorschau nachgeladen wird, funktioniert für diese Einstellungen die Angabe von active_callback nicht mehr – darüber kann per PHP zum Beispiel angegeben werden, dass eine Customizer-Control nur angezeigt wird, wenn eine andere einen bestimmten Wert hat. In diesem Fall muss die bedingte Anzeige über JavaScript gesteuert werden.

Der Customizer stellt eine API bereit, über die die Aktivierung und Deaktivierung (Anzeigen und Verstecken) einer Einstellug relativ leicht möglich ist. Wir werden in diesem kleinen Tutorial eine Einstellung anzeigen oder verstecken, je nachdem, wie der Wert einer Auswahlliste ist. Zunächst einmal der komplette Code (auch als Gist verfügbar. Einbinden könnt ihr das Skript über die customize_controls_enqueue_scripts-Action):

;(function () { /** * Run function when customizer is ready. */ wp.customize.bind('ready', function () { wp.customize.control('slug_select_control', function (control) { /** * Run function on setting change of control. */ control.setting.bind(function (value) { switch (value) { /** * The select was switched to the hide option. */ case 'hide': /** * Deactivate the conditional control. */ wp.customize.control('slug_conditional_control').deactivate(); break; /** * The select was switched to »show«. */ case 'show': /** * Activate the conditional control. */ wp.customize.control('slug_conditional_control').activate(); break; } }); }); }); })();
Code-Sprache: JavaScript (javascript)

Wir horchen zunächst auf das ready-Event des Customizers und hängen dann eine Funktion an die Einstellung mit der ID slug_select_control, die über $wp_customize->add_control() mit den Auswahlmöglichkeiten hide und show registriert wurde. Über control.setting.bind können wir nun eine Funktion aufrufen, sobald sich der Wert der Einstellung verändert.

Wir führen dann eine switch-Anweisung aus und zeigen oder verstecken die Control slug_conditional_control mit der activate()- beziehungsweise deactivate()-Methode.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert