WordPress : Comment ajouter une classe à l’aperçu de Customizer en fonction de la classe du contrôle Customizer ? (API Javascript de personnalisation)

Je suis assez faible pour comprendre l’API javascript de Customizer mais j’essaie. J’ai fait quelques choses, mais je dois maintenant envoyer des données à l’aperçu du Customizer en fonction du clic d’un contrôle dans le Customizer.

Lorsqu’un contrôle est cliqué dans le Customizer, la classe « .invisible » est appliquée au contrôle. Sur cette base, je veux me cacher <section class="about_me"></section>sur le site Web. La valeur du contrôle est cette classe. Comment puis-je faire cela? Voici ce que j’ai essayé :

api('gm_sortable_sections', function(setting) {
    var section = setting.get(); // aka section.about_me
    setting.bind(function onChange(){
api.control('gm_sortable_sections', function(control) {
    control.sectionToHide = api.previewer.preview.container.find('.' + section);

    control.sortableContainer = $(control.container).find('ul.sortable' ).first();
    control.sortableContainer.find( 'li' ).each( function() {
                if ( $( this ).is( '.invisible' ) ) {
                    console.log(control.sectionToHide);
                    control.sectionToHide.addClass('.invisible');
                  //  api.previewer.send( 'sortable-visible');
                     //   $('section.'+ section).addClass('.invisible');

                }


    });
    });
});
});

J’ai réussi à comprendre comment obtenir la valeur « .invisible » du contrôle, mais comment puis-je l’envoyer et mettre à jour le CSS ou ajouter la classe à la section dans l’aperçu (puis mettre à jour le site Web pour enregistrer ceci theme_mod_).

Solution n°1 trouvée

Considérez à nouveau comment vous voulez que le contrôle fonctionne. Si vous masquez le contrôle, comment l’afficherez-vous ?

Il semble que vous souhaitiez une case à cocher pour indiquer si la section est affichée ou masquée. Dans votre PHP sur l’action ‘customize_register’, vous définissez le détenteur de l’indicateur. Ils l’ont nommé a setting, la valeur par défaut étant le type ‘theme_mod’. Et vous définissez le controlavec lequel l’utilisateur peut interagir. Pour les options booléennes, il est préférable de les nommer pour l’état « on », afin que la logique ait un sens et qu’elles correspondent aux options de base.

$wp_customize->add_setting( 'show_about_section', array(
        'default'   => true,
        'transport' => 'postMessage',
        'sanitize_callback' => 'wp_validate_boolean',
) );

$wp_customize->add_control( 'show_about_section', array(
        'label'    => __( 'Display the About section', 'myprefix' ),
        'section'  => 'myprefix_theme_section',
        'type'     => 'checkbox',
) );

En supposant que la section est toujours sortie, nous pouvons simplement mettre une classe dessus pour la masquer. Votre PHP utilisera ce theme_mod où la section À propos est sortie :

$class = 'about_me';
if ( ! get_theme_mod( 'show_about_section', true ) ) {
    $class .= ' invisible';
}
// code to output section using $class on it

Dans le javascript chargé sur l’action ‘customize_preview_init’, utilisez quelque chose comme ça.

( function( $ ) {
    wp.customize( 'show_about_section', function( value ) {
        value.bind( function( show ) {
            $( '.about_me' ).toggleClass( 'invisible', show );
        } );
    } );
} )( jQuery );

Il n’est pas nécessaire d’envoyer le nom de la classe à l’aperçu, bien que vous puissiez le coder différemment si vous avez besoin d’un contrôle pour gérer plusieurs noms de classe. Le Customizer envoie déjà la valeur du contrôle à l’aperçu, mais dans cet exemple de code, il s’agit d’un booléen, pas d’un nom de classe. Il n’y a pas de code supplémentaire nécessaire pour enregistrer le theme_mod. C’est fait pour vous.