web-dev-qa-db-fra.com

Evénement Wp Customizer pour l'ajout d'un nouveau widget

Je souhaite déclencher un événement lorsque APRÈS un nouveau widget a été ajouté à l'aperçu, puis APRÈS qu'un widget a été supprimé.

Cas d'utilisation: une fois que le widget a été ajouté au DOM de l'aperçu, je souhaite modifier sa classe en fonction du nombre d'autres widgets présents dans la même zone de la barre latérale. Donc quand

wp.customize('sidebars_widgets[sidebar-1]').get().length

incendies, il est un peu trop tôt pour compter tous les widgets.

Donc, je pense que j'ajoute un widget dans la barre latérale Commandes du personnalisateur, puis l'aperçu l'a ajouté. Une fois que le widget a été ajouté au DOM Previewer, j'espérais qu'il émettrait un événement disant "ce widget a été ajouté". Je pourrais écouter cet événement, puis exécuter du code pour modifier les noms de classe sur tous les widgets de cette barre latérale.

J'ai déjà ce travail, en faisant en sorte que le personnaliseur envoie des données à l'aperçu, attende 1 seconde, puis compte les widgets. Mais cela ne semble pas très fiable (que se passe-t-il si le chargement du widget prend 1,3 seconde?).

Dans mon javascript Previewer (chargé via le hook customize_preview_init, j'ai les éléments suivants:

  $( document ).on( 'widget-added', function(event, widget) {
    console.log(widget);
  });

Mais cela ne semble rien faire.

Quelqu'un sait ce que ce serait?

widgetstheme-customizer
1
rugbert

Je pense que vous feriez mieux de gérer le changement au niveau de la barre latérale, car vous souhaitez changer les classes pour tous les widgets dans la barre latérale en fonction de leur nombre.

Voici le code pour vous aider à démarrer (inspiré par this ):

(function($){
    $(document).on('ready', function () {
        // Change this selector depending on your target widget area
        var widgetArea = $('#secondary .widget-area');

        if ('undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh) {
            wp.customize.selectiveRefresh.bind('sidebar-updated', function (sidebarPartial) {
                if ('sidebar-1' === sidebarPartial.sidebarId) {
                    // Do something to the widgetArea or its children
                }
            });
        }
    });
})(window.jQuery);

Vous devez placer ce code dans un fichier et le charger dans le personnaliseur uniquement à l'aide du hook d'action customize_controls_enqueue_scripts.

J'espère que ça aide.

1
Vlad Olaru

Afin d'interagir avec l'événement "ajouté au widget", vous devez mettre en file d'attente votre fichier JavaScript en utilisant "personnaliser_controls_enqueue_scripts" pour éviter qu'il ne fasse partie de l'aperçu de chargement répétitif iframe (où $ (document) est différent du document de page parent).

J'ai pu interagir avec l'événement "widget-added" en utilisant cet exemple:

dans functions.php du thème

function custom_enqueue_scripts(){
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js',array('jquery','customize-widgets'),'',1 );

}
add_action('customize_controls_enqueue_scripts','custom_enqueue_scripts',10);

Fichier JavaScript:

jQuery(document).ready(function($) {


    $( document ).on( 'widget-added', function(event, widget) {
        console.log(widget);
    });



});
0
Mohamed Ali