WordPress : Exécution de JS après la fin de l’initialisation du personnalisateur de thème

J’ai un morceau de code JS que j’utilise pour afficher/masquer les groupes de contrôle de personnalisation en fonction d’une valeur d’élément sélectionnée.

Le code fonctionnait bien jusqu’à la récente mise à jour de wp (je ne sais pas quelle version a cassé cela en premier).

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

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 que JS charge et masque la section de contrôle du personnalisateur très bien avec l’affichage css en ligne: aucun. Ensuite, le script cusomizer js le révise et met à jour le css en ligne pour display:list-item qui les rend visibles. Donc, je dois exécuter le code JS plus tard après le chargement complet du personnalisateur.

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 raté quelque chose.

Informations complémentaires

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

Le script utilise l’événement ready pour ajouter une classe et réviser la visibilité des panneaux, des sections et des contrôles. Mais je ne parviens pas à ajouter un auditeur à cet événement.

La propriété activePanels, activeSections, activeControls est définie à partir de PHP à partir du fichier. /wp-admin/customize.phpJe n’ai trouvé aucun moyen d’écraser cette variable car vous pouvez voir qu’elle est imprimée juste avant la fin de la balise body.

Donc, la solution possible est peut-être de trouver un moyen de s’accrocher à l’évènement Ready.

Solution n°1 trouvée

Cela me semble être un problème de synchronisation, peut-être/probablement que je simplifie à l’excès, mais qu’en est-il de l’utilisation du $debsparamètre wp_register_scriptet wp_enqueue_scriptpropose de contrôler l’ordre de chargement, où l’un de ceux – dans l’ordre dans lequel ils sont ajoutés script-loader.php– customize-base, customize-loader, customize-preview, customize-models, customize-views, customize-controls, customize-widgetsou customize-preview-widgetsdoit être une dépendance.

Solution n°2 trouvée

Donc, jusqu’à présent, le problème était lié au chargement initial du fichier JS. Comme je n’ai trouvé aucune solution en utilisant le JS. Le problème ne concernait pas le chargement du script plutôt que le timing d’exécution.

Quoi qu’il en soit, le personnalisateur de thème examine la variable globale pour laquelle Panel/Section/Control il s’affichera comme actif lors du chargement.

Comment activer/désactiver des sections/commandes/panneaux lors du chargement initial

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

1. Pour les panneaux, utilisez le customize_panel_activefiltre. Passe deux paramètres $activebooléen et $panelobjet.
2. Pour les sections, utilisez le customize_section_activefiltre. Passe deux paramètres $activebooléen et $sectionobjet.
3. Pour les contrôles, utilisez le customize_control_activefiltre. Passe deux paramètres $activebooléen et $controlobjet.

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 des personnalisateurs. Je serais très intéressé car la question était initialement destinée à une solution JS.

Solution n°3 trouvée

Cela ressemble à un problème de dépendance. Vous ne vérifiez que 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
    );
}