Wer ein Theme selbst entwickelt, kommt früher oder später vermutlich an den Punkt, an dem er oder sie Customizer-Optionen hinzufügen möchte. Wie wäre es dann noch mit einer Möglichkeit, eine Customizer-Option abhängig des Wertes einer anderen Customizer-Option ein- oder auszublenden?

Genau darum wird es hier gehen und es ist einfacher, als man vermuten mag.

Disclaimer

Ich setze für diesen Blog-Beitrag bereits Grundkenntnisse in der Funktionalität des Customizers sowie in der Theme-Entwicklung voraus. Man sollte vorher also bereits selbst mal eine Customizer-Option angelegt haben.
Ansonsten ist es sicherlich hilfreich, sich einmal das Hinzufügen von einzelnen Customizer-Optionen (Settings) anzusehen:
WPTRT @GitHub

Customizer-Optionen einbinden

Zuerst müssen natürlich mindestens zwei Customizer-Optionen vorhanden sein, damit eine von einer anderen abhängig sein kann. Dazu verwenden wir folgenden Code:

/**
 * Customizer settings
 *
 * @param WP_Customize_Manager $wp_customize
 */
function prefix_customizer_register( $wp_customize ) {
	$wp_customize->add_setting( 'my_option', [
		'default' => 0,
		'type' => 'theme_mod',
	] );
	$wp_customize->add_control( 'my_option', [
		'label' => __( 'My Option', 'prefix' ),
		'section' => 'my_section',
		'settings' => 'my_option',
		'type' => 'checkbox',
	] );
	$wp_customize->add_setting( 'my_option_dependency', [
		'default' => '',
		'type' => 'theme_mod',
		'sanitize_callback' => 'esc_textarea',
	] );
	$wp_customize->add_control( 'my_option_dependency', [
		'label' => __( 'My Option Dependency', 'prefix' ),
		'section' => 'my_section',
		'settings' => 'my_option_dependency',
		'type' => 'text',
	] );
}

add_action( 'customize_register', 'prefix_customizer_register' );Code-Sprache: PHP (php)

Soweit, so bekannt. Wichtig ist, dass die Option my_option vom Typ theme_mod sein muss. Andernfalls funktioniert die hier gezeigte – einfache – Variante nicht.

Ein- und Ausblenden aktivieren

Nun müssen wir versuchen, die Option my_option_dependency erst dann sichtbar zu bekommen, wenn die Checkbox von my_option ausgewählt wurde.
Dafür gibt es von WordPress selbst den active_callback. Diesen müssen wir bei der Control von my_option_dependency einfach anhängen. Das sieht dann so aus:

 	$wp_customize->add_control( 'my_option_dependency', array(
 		'label' => __( 'My Option Dependency', 'prefix' ),
 		'section' => 'my_section',
 		'settings' => 'my_option_dependency',
 		'type' => 'text',
 		'active_callback' => 'my_option_callback'
 	) );Code-Sprache: PHP (php)

Der active_callback verweist nun auf die Funktion my_option_callback. Diese ist dafür zuständig, den Zustand von my_option zu prüfen und anhand deren Wert true oder code>false auszugeben. Im Falle einer Checkbox eignet sich dazu folgender Callback:

/**
  * Check if my_option is true.
  *
  * @param WP_Customize_Control $control
  * @return bool
  */
 function my_option_callback( $control ) {
 	if ( $control->manager->get_setting( 'my_option' )->value() ) {
 		return true;
 	}
 	return false;
 }Code-Sprache: PHP (php)

Und das war es dann auch schon! Wenn die Checkbox bei my_option nun gesetzt wird, wird die Option my_option_dependency eingeblendet, ansonsten ist und bleibt sie ausgeblendet.

Ein Dank geht an Simon Kraft und Florian Brinkmann, die mir direkt oder indirekt geholfen haben, dass dieser Blog-Beitrag entstanden ist. ❤️

Schreibe einen Kommentar

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

Um auf deiner eigenen Website zu antworten, gib die URL deiner Antwort ein, die einen Link zur Permalink-URL dieses Beitrags enthalten sollte. Deine Antwort wird dann (möglicherweise nach der Moderation) auf dieser Seite erscheinen. Möchtest du deine Antwort aktualisieren oder entfernen? Aktualisiere oder lösche deinen Beitrag und gib die URL deines Beitrags noch einmal ein. (Mehr über die Funktion von Webmentions erfahren)