web-dev-qa-db-fra.com

Ajouter/supprimer des contrôles de manière dynamique en fonction d'autres paramètres dans le Customizer

J'ai besoin d'ajouter/supprimer des contrôles de manière dynamique dans Customizer. Supposons que j'ai un champ No of pages et que sa valeur est 3. Je souhaite rendre les contrôles de 3 pages déroulantes. Et lorsque sa valeur est modifiée, je souhaite ajouter/supprimer des contrôles en conséquence.

Actuellement, je le pirate via PHP. Comme en boucle les contrôles basés sur les nombres. L’avantage de cette approche est que, lorsque le nombre est modifié, je dois enregistrer la valeur du personnalisateur et actualiser l’ensemble de la page du personnaliseur afin de refléter les nouveaux contrôles.

Je cherche une approche qui éliminerait la sauvegarde et le rafraîchissement de la page. Je pense avoir besoin de plonger dans l’API Customizer JS. J'apprécierais que quelqu'un me montre la bonne direction.

theme-customizer
4
Nilambar

Ok, vous pouvez donc consulter mon dépôt avec certains contrôles personnalisés

https://github.com/dingo-d/wordpress-theme-customizer-extra-custom-controls

J'ai adapté les contrôles contextuels du guide Weston Ruters ici:

https://make.xwp.co/2016/07/24/dependently-contextual-customizer-controls/

Dans mon exemple de repo, j'ai le contrôle de case à cocher de corps en boîte qui bascule le corps en boîte.

Vous aurez besoin de mettre en file d'attente un script pour mettre le code js dans

add_action( 'customize_controls_enqueue_scripts', 'mytheme_customizer_control_toggle' );

/**
 * Custom contextual controls
 *
 * @since 1.0.0
 */
function mytheme_customizer_control_toggle() {
    wp_enqueue_script( 'mytheme-contextualcontrols', get_template_directory_uri() . '/inc/customizer/js/customizer-contextual.js?v=' . Rand(), array( 'customize-controls' ), false );
}

Et dans votre customizer-contextual.js vous aurez quelque chose comme:

( function( api ) {
    'use strict';

    api.bind( 'ready', function() {

        api( 'boxed_body', function(setting) {
            var linkSettingValueToControlActiveState;

            /**
             * Update a control's active state according to the boxed_body setting's value.
             *
             * @param {api.Control} control Boxed body control.
             */
            linkSettingValueToControlActiveState = function( control ) {
                var visibility = function() {
                    if ( true === setting.get() || 1 === setting.get() ) {
                        control.container.slideDown( 180 );
                    } else {
                        control.container.slideUp( 180 );
                    }
                };

                // Set initial active state.
                visibility();
                // Update activate state whenever the setting is changed.
                setting.bind( visibility );
            };

            // Call linkSettingValueToControlActiveState on the border controls when they exist.
            api.control( 'boxed_body_border_width', linkSettingValueToControlActiveState );
            api.control( 'boxed_body_border_color', linkSettingValueToControlActiveState );
            api.control( 'boxed_body_border_style', linkSettingValueToControlActiveState );
        });

    });

}( wp.customize ) );

Vous ciblez le nom du contrôle (dans ce cas, il s'agit de 'boxed body'). À l'intérieur, vous pouvez vérifier si le contrôle a l'état actif ou non et définir en conséquence la "visibilité" des autres contrôles liés.

Vous pouvez également activer cette modification dans l’écran d’aperçu en vous connectant à customize_preview_init hook

add_action( 'customize_preview_init', 'mytheme_customizer_live_preview' );
/**
 * Live preview script enqueue
 *
 * @since 1.0.0
 */
function mytheme_customizer_live_preview() {
    wp_enqueue_script( 'mytheme-themecustomizer', get_template_directory_uri() . '/inc/customizer/js/customizer.js?v=' . Rand(), array( 'jquery', 'customize-preview' ), false );
}

Dans customizer.js vous aurez quelque chose comme:

(function($, api) {
    'use strict';

    // Boxed Body Toggle.
    api( 'boxed_body', function(value) {
        value.bind(function(newval) {
            if (newval) {
                $( 'body' ).wrapInner( '<div class="boxed_body_wrapper" />' );
            } else {
                $( '.boxed_body_wrapper' ).contents().unwrap();
            }
        });
    });

})(jQuery, wp.customize);

J'espère que cela t'aides :)

4
dingo_d