web-dev-qa-db-fra.com

Exécution de JS après l'initialisation du personnaliseur de thème terminée

J'ai un morceau de code JS que j'utilise pour afficher/masquer les groupes de contrôles du personnaliseur en fonction de la valeur de l'élément sélectionné.

Le code fonctionnait correctement jusqu'à la dernière mise à jour de wp (vous ne savez pas quelle version a brisé cette situation en premier).

Voici le code pour mettre le fichier js en file d'attente.

add_action('customize_controls_print_scripts', 'ppl_customize_controls_scripts');
function ppl_customize_controls_scripts(){
    wp_register_script( 'ppl-customize-control', get_template_directory_uri().'/js/customizer-control.js', array('jquery'), 1, true);
    wp_enqueue_script( 'ppl-customize-control' );
}

Le fichier JS 

jQuery(document).ready(function($){
    var skin_select = $('#customize-control-ppl-ninja-theme-options-skin').find('select');

    //alert(skin_select.attr('class'));
    var selected_val = skin_select.children('option:selected').val();
    var custom_group = [
        '#accordion-section-custom_header_styles',
        '#accordion-section-custom_slider_styles',
        '#accordion-section-custom_footer_styles',
        '#accordion-section-custom_general_colors'
    ];

    if(selected_val != 4){
        hide_custom_controls(custom_group);
    }

    skin_select.change(function(){
       var val = $(this).val();

        if(val != 4){
            hide_custom_controls(custom_group);
        }else{
            show_custom_controls(custom_group);
        }

    });

    function hide_custom_controls(custom_group){
        var selector = custom_group.join(',');
        $(selector).hide();
    }

    function show_custom_controls(custom_group){
        var selector = custom_group.join(',');
        $(selector).show();
    }

});

Le problème est , JS charge et cache parfaitement la section de contrôle du personnalisateur avec inss css display:none. Ensuite, le script csomizer js le révise et met à jour le css intégré à display:list-item, ce qui les rend visibles. Donc, je dois exécuter le code JS plus tard après le chargement complet du personnaliseur.

J'ai examiné le script de personnalisation dans le répertoire wp-includes mais je n'ai rien trouvé que je puisse utiliser. J'ai peut-être manqué quelque chose.

Informations complémentaires

  1. Le code qui révise le fichier css se trouve dans /wp-admin/js/customize-controls.js .

  2. Le script utilise l'événement ready pour ajouter une classe et modifier la visibilité des panneaux, des sections et des contrôles. Mais je ne peux pas ajouter d'auditeur à cet événement.

  3. La propriété activePanels, activeSections, activeControls est définie à partir de PHP à partir du fichier /wp-admin/customize.php Je n'ai trouvé aucun moyen de remplacer cette variable peut voir qu'il est imprimé juste avant la fin de la balise body.

Donc, la solution possible est peut-être de trouver un moyen d’accrocher l’événement ready.

javascripttheme-customizer
1
Sisir

Le problème était donc lié au chargement initial du fichier JS. Comme je ne pouvais trouver aucune solution en utilisant le JS. Le problème ne concernait pas le chargement du script, mais plutôt le moment d'exécution.

Quoi qu'il en soit, le personnalisateur de thème examine la variable globale pour laquelle Panel/Section/Control il apparaît comme actif lors de son chargement.

Comment rendre les sections/contrôles/panneaux actifs/désactivés lors du chargement initial

Après avoir passé des heures dans les fichiers de base, j'ai trouvé la solution.

  1. Pour les panneaux, utilisez le filtre customize_panel_active. Passe deux paramètres $active boolean et $panel object.
  2. Pour les sections, utilisez le filtre customize_section_active. Passe deux paramètres $active boolean et $section object.
  3. Pour les contrôles, utilisez le filtre customize_control_active. Passe deux paramètres $active boolean et $control object.

Exemple: Si je suppose que j'ai un panneau et que son identifiant est my_panel. Et je veux le cacher si certaines options de thème ne sont pas définies.

add_filter('customize_panel_active', 'maybe_panel_active', 10, 2);

function maybe_panel_active($active, $panel){

    if($panel->id == 'my_panel' && !theme_option('certain_theme_option') ){
        $active = false;
    }

    return $active;
}

C'est à peu près ça! Assez simple :)

Remarque: La solution est purement php. Si quelqu'un est capable de le faire fonctionner en écoutant les événements JS du programme de personnalisation. Cela m'intéresserait beaucoup car la question était initialement destinée à une solution JS.

2
Sisir

Bien que ce ne soit pas une belle solution, vous pouvez peut-être l’échantillonner à l’aide de window.setInterval () et une fois visible arrêter l’intervalle et faire ce que vous voulez.

0
nadavy

Cela ressemble à un problème de dépendance. Vous ne faites que vérifier jQuery, votre script pourrait donc être préempté. Vous pouvez vous assurer que votre script se charge après tous les autres scripts de personnalisation avec 'customize-preview-widgets'. Essaye ça…

add_action('customize_preview_init', 'ppl_customize_controls_scripts');
function ppl_customize_controls_scripts(){
    wp_enqueue_script(
          'ppl-customize-control',
          get_template_directory_uri().'/js/customizer-control.js',
          array( 'jquery','customize-preview-widgets' ),
          '',
          true
    );
}
0
Matt van Andel

Cela me semble être un problème de synchronisation, peut-être/probablement que je simplifie trop, mais pourquoi ne pas utiliser les paramètres $debs, wp_register_script et wp_enqueue_script, qui permettent de contrôler l’ordre de chargement, où l’un de ceux-ci - dans l’ordre dans lequel ils ont été ajoutés à script-loader.php - - customize-base, customize-loader, customize-preview, customize-models, customize-views, customize-controls, customize-widgets ou customize-preview-widgets devrait être une dépendance.

0
Nicolai

Plutôt que d'essayer de deviner les mystères de l'initialisation javascript du customizer, qui, comme vous le dites, est loin d'être claire, vous pouvez utiliser un contrôle personnalisé pour injecter votre javascript , en remplaçant la render_content(), par exemple

add_action( 'customize_register', function ( $wp_customize ) {
    // Custom control.
    class PPL_Ninja_Skin_Select_Customize_Control extends WP_Customize_Control {
        public $type = 'select';

        // Override to inject our javascript.
        public function render_content() {
            parent::render_content();
            ?>
<script type="text/javascript">
(function () {
    var skin_select = $('#customize-control-ppl-ninja-theme-options-skin').find('select');
    var custom_group = [
        '#accordion-section-custom_header_styles',
        '#accordion-section-custom_slider_styles',
        '#accordion-section-custom_footer_styles',
        '#accordion-section-custom_general_colors'
    ];

    skin_select.change(function () {
        if ($(this).val() == 4) {
            $(custom_group.join(',')).hide();
        } else {
            $(custom_group.join(',')).show();
        }
    });
    skin_select.change();
}());
</script>
            <?php
        }
    }

    $wp_customize->add_setting( 'ppl-ninja-theme-options-skin' );
    $wp_customize->add_section( 'ppl-ninja-theme-options', array(
        'title' => __( 'Ninja Options', 'ppl' ),
    ) );

    // Add custom control.
    $wp_customize->add_control( new PPL_Ninja_Skin_Select_Customize_Control(
        $wp_customize, 'ppl-ninja-theme-options-skin', array(
            'label' => __( 'Skin', 'ppl' ),
            'section' => 'ppl-ninja-theme-options',
            'choices' => array(
                '' => __( 'Select', 'ppl' ),
                1 => __( 'One', 'ppl' ),
                2 => __( 'Two', 'ppl' ),
                3 => __( 'Three', 'ppl' ),
                4 => __( 'Four', 'ppl' ),
            ),
        )
    ) );

    // Test data.
    foreach ( array( 'header_styles', 'slider_styles', 'footer_styles', 'general_colors' ) as $setting ) {
        $wp_customize->add_setting( 'custom_' . $setting . '-setting' );
        $wp_customize->add_section( 'custom_' . $setting, array(
            'title' => sprintf( __( 'Ninja %s', 'ppl' ), $setting ),
        ) );
        $wp_customize->add_control( 'custom_' . $setting . '-setting', array (
            'label' => __( 'Setting', 'td' ),
            'section' => 'custom_' . $setting,
        ) );
    }
} );

(Ne vous embêtez pas non plus avec les CSS).

0
bonger