web-dev-qa-db-fra.com

Thème Personnalisateur - Contrôles Conditionnels

Je souhaite ajouter/supprimer dynamiquement des contrôles au personnalisateur de thème sans recharger complètement la page du personnalisateur. Par exemple, lorsque je choisis l'option 1 dans une liste déroulante, je veux que le contrôle A affiche et que B contrôle se cache et vice versa.

Je peux penser à trois façons de le faire:

1. Trouvez un moyen de recharger complètement le personnaliseur (via le bouton d'envoi ou via javascript), puis je peux le faire:

$option1 = get_theme_mod('option1');
if( $option1 === '1' ){
    $wp_customize->add_setting('controlA', array());
    $wp_customize->add_control( 'controlA', array(
    'section' => 'layout_section',
    'type'    => 'text', // text (default), checkbox, radio, select, dropdown-pages ) );
}

2.Utilisez Ajax pour charger les valeurs mises à jour et remplir les contrôles du personnalisateur avec javascript.

Je voudrais donc mettre en file d'attente mon propre script comme ceci:

function custom_customize_enqueue() {
    wp_enqueue_script( 'custom-customize', get_template_directory_uri() . '/custom.customize.js', array( 'jquery', 'customize-controls' ), false, true );
}
add_action( 'customize_controls_enqueue_scripts', 'custom_customize_enqueue'        );

Et dans custom.customize.js, j'appellerais une fonction pour obtenir mes valeurs de contrôle:

$.ajax({
    url: ajaxurl,
    type: 'POST',
    data: {
        'action':'get_control_values'
    },
    success:function(data) {

        //populate customize controls with the updated values

    }
});

Dans functions.php:

function get_control_values(){

    $option1 = get_theme_mod('option1');
    if( $option1 === '1' ){      
        // echo json_encoded data to populate my conditional customize controls
    }
}

add_action( 'wp_ajax_get_control_values', 'get_control_values' );
add_action( 'wp_ajax_nopriv_get_control_values', 'get_control_values' );

3.Créez un contrôle personnalisé contenant toutes les entrées qui dépendent conditionnellement les unes des autres en tant qu'entrées "factices" et stockant leurs valeurs dans une autre entrée - masquée - en tant que JSON. Ainsi, lorsque je choisis l'option 1 dans le menu déroulant, le contrôle B sera masqué par javascript et la chaîne JSON sera mise à jour, etc.

EDIT: 4.Option: Peut-être que cela est également possible à travers l'interface Javascript de WordPress Theme Customizer, comme décrit ici: http://shibashake.com/wordpress-theme/wordpress-theme-customizer-javascript -interface

Quelqu'un peut me diriger dans la bonne direction? Merci.

ajaxtheme-customizer
1
gang

Je peux vous suggérer une autre direction: pourquoi créer un nouveau contrôle en javascript lorsque vous pouvez créer les contrôles A et B lors du chargement de la première page et les afficher/masquer de manière dynamique à l'aide de javascript?

Si je comprends bien, c’est ce que vous avez décrit dans l’option 3.

Voici un exemple de code pour vous aider à démarrer:

class MyCustom_Customize_Control extends WP_Customize_Control {    
    public function render_content() {
        ?>
        <span><?php echo esc_html( $this->label ); ?></span>
        <div>The Custom Control content</div>
        <script>
        jQuery(function($){
            // hide control at first load
            $('#customize-control-mycontrol').hide();

            // bind to the event that will show the Control
            $(document).on('customEvent', function(){
                $('#customize-control-mycontrol').show();
            });
        });
        </script>
        <?php
    }
}

// instantiate the Control
$wp_customize->add_control( new MyCustom_Customize_Control( $wp_customize, 'mycontrol', array(
    'label'      => 'Custom Control Label',
) ) );

Voici une petite projection d'écran qui montre un résultat possible: Interactive Control screencast

1
Fabien Quatravaux