WordPress : Comment modifier les options redux du type de champ sélectionné en fonction d’une autre valeur de champ ?

Publié par Jean-Michel le

Mon code est comme ci-dessous en redux

$fields = array(
    'id'       => 'opt-select',
    'type'     => 'select',
    'title'    => __('Select Option', 'redux-framework-demo'),
    'subtitle' => __('No validation can be done on this field type', 'redux-framework-demo'),
    'desc'     => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
    // Must provide key => value pairs for select options
    'options'  => array(
        '1' => 'Opt 1',
        '2' => 'Opt 2',
        '3' => 'Opt 3'
    ),
    'default'  => '2',
);

Maintenant, je voudrais que la 3ème option soit affichée si la variation d’en-tête 2 est définie. La variation d’en-tête est un autre champ qui a deux options telles que la variation d’en-tête 1 et la variation d’en-tête 2. Comment écrire du code pour réaliser cette fonctionnalité ?

Lire également:  Wordpress : Rendre l'élément de menu des options de thème plus facilement / directement accessible

Solution n°1 trouvée

requiredVous pouvez utiliser l’ argument de Redux Framework pour n’importe quel champ donné.

À partir des documents :

Les champs peuvent être liés/obligatoires/pliés selon une/plusieurs valeurs parentes. Ceci est accompli en ajoutant un argument obligatoire, similaire au suivant, sur n’importe quel champ donné :

'required' => array('opt-header-variations','equals','2')
  • La première valeur du tableau est l’ID de champ auquel lier le champ.
  • La deuxième valeur est l’opération à effectuer.
  • La troisième valeur est la valeur à comparer.

L’ requiredargument prend en charge quelques opérateurs afin que vous puissiez faire un peu de logique.


Un vrai exemple :

Ci-dessous, nous définissons deux champs, les deux sont des types de champs sélectionnés, mais cela fonctionnerait de la même manière pour n’importe quel type de champ. Nous voulons masquer le champ de sélection avec l’ identifiant « opt-select » et ne l’afficher que si la valeur du champ de sélection « opt-header-variations » est égale 2à , dans ce cas la même que l’option « Header variation 2 ».

Lire également:  Wordpress : Supprimer l'animation du thème WP (css)

Pour ce faire, nous devons utiliser l’ requiredargument sur le champ de sélection que nous voulons masquer conditionnellement en tant que tel :

'required' => array('opt-header-variations','equals','2'),

$fields = array(
    array (
        'id' => 'opt-header-variations',
        'type' => 'select',
        'title' => __('Header Styles', 'redux-framework-demo'),
        'subtitle' => __('Header Variations', 'redux-framework-demo'),
        'options'  => array(
            '1' => 'Header variation 1',
            '2' => 'Header variation 2'
            ),
        'default' => 1,
    ),
    array (
        'id'       => 'opt-select',
        'type'     => 'select',
        'title'    => __('Select Option', 'redux-framework-demo'),
        'subtitle' => __('No validation can be done on this field type', 'redux-framework-demo'),
        'desc'     => __('This is the description field, again good for additional info.', 'redux-framework-demo'),
         // Must provide key => value pairs for select options
        'options'  => array(
            '1' => 'Opt 1',
            '2' => 'Opt 2',
            '3' => 'Opt 3'
            ),
        'default'  => '2',
        'required' => array('opt-header-variations','equals','2')
    ),
);

L’ requiredargument peut également être utilisé avec plusieurs valeurs obligatoires « parentes ». Si toutes ces conditions ne sont pas remplies, ce champ ne sera pas visible et le CSS de sortie ne sera pas utilisé. Un exemple est le suivant :

'required' => array(
    array('layout','equals','1'),
    array('parent','!=','Testing')
)
Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *