web-dev-qa-db-ja.com

新しいウィジェットが追加されたときのWpカスタマイザイベント

プレビューアに新しいウィジェットが追加された後、そしてウィジェットが削除された後にイベントを発生させたいと思います。

ユースケース：プレビューアDOMにウィジェットが追加された後、その同じサイドバー領域に他のウィジェットがいくつあるかに基づいて、そのクラスを変更します。そうするとき

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

すべてのウィジェットを数えるには早すぎます。

そのため、Customizerコントロールのサイドバーにウィジェットを追加し、それからプレビューアDOMにウィジェットが追加されると、「このウィジェットが追加されました」というイベントが発行されることを望んでいました。そのイベントを監視してから、そのサイドバーのすべてのウィジェットのクラス名を変更するためのコードを実行することができました。

カスタマイザがプレビューアにデータを送信し、1秒待ってからウィジェットをカウントすることで、これはすでに機能しています。しかし、それは非常に信頼できるようには思われません（ウィジェットがロードされるのに1.3秒かかるとしたらどうでしょうか）。

Previewerのjavascript（customize_preview_initフックを介してロードされたもの）には、次のものがあります。

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

しかし、これは何もしないようです。

誰かがそれが何であるかを知っていますか？

widgetstheme-customizer
1
rugbert

サイドバーにあるウィジェットの数に応じてクラスを変更したいので、サイドバーレベルでの変更に対処するほうが得策です。

これを始めるためのコードは次のとおりです（ 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);

このコードをファイルに入れ、customize_controls_enqueue_scriptsアクションフックを使用してカスタマイザにのみロードする必要があります。

これが役に立つことを願っています。

1
Vlad Olaru

"widget-added"イベントと対話するには、 "customize_controls_enqueue_scripts"を使用してJavaScriptファイルをエンキューし、それが繰り返しロードされるプレビューiframeの一部にならないようにします（$（document）は親ページのdocumentとは異なります）。

私はこの例を使って "widget-added"イベントと対話することができました：

テーマのfunctions.phpに

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

JavaScriptファイル

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


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



});
0
Mohamed Ali