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

Publié par Jean-Michel le

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.

The code was working fine until recent wp update (not sure which version first broke this).

Here is the code for enqueuing the js file.

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' );
}

The JS file

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();
    }

});

The problem is, JS loads and hides the customizer control section just fine with inline css display:none. Then the cusomizer js script revises it and update the inline css to display:list-item which makes them visible. So, I need to run the JS code later after the customizer loads fully.

I looked into customizer script in wp-includes directory but haven’t find anything that I can use. Perhaps I missed something.

Further Information

  1. The code that revising the css can be found in /wp-admin/js/customize-controls.js.

  2. The script is using the ready event to add class and revise visibility of panels, sections and controls. But I am unable to add listener to that event.

  3. 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’ readyévénement.

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.phpcustomize-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
    );
}
Catégories : Wordpress

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *