WordPressのウィジェット管理画面の操作イベントをJavaScriptで取得する方法（ウィジェットドロップ時、設定保存時など）

PR 2017/12/13 2018/6/5 WordPressカスタマイズ 0

先日、ウィジェット管理画面で、ウィジェットをドロップした時のイベントを取得して処理する必要が出てきました。

ただ、ウィジェットのドロップ操作は、JavaScriptで動作しています。

なので、イベントを取得するにもPHPで関数をフックするわけにもいかず、JavaScriptで処理を書く必要があるようです。

で、調べてみたら良い方法が見つかったのでメモがてら紹介です。

ウィジェット画面のイベントを取得する方法

ウィジェット管理画面で「ページ読み込み時」、「ウィジェットドロップ時」、「ウィジェット設定保存時」のイベントをJavaScriptで取得するには、functions.php等に以下のように貼り付けます。

//ウィジェット管理画面のイベント取得
add_action( 'admin_footer', 'widget_custom_script' );
if ( !function_exists( 'widget_custom_script' ) ):
function widget_custom_script() {?>
<script type="text/javascript">
jQuery(document).ready(function($){
  //ページ読み込み時
  console.log('読み込み');

  //ウィジェットをドロップした時
  $('div.widgets-sortables').bind('sortstop',function(event,ui){
    console.log('ウィジェットをドロップ');
  });

  //データの保存時
  $('body').ajaxSuccess(function(evt, request, settings) {
    console.log('保存');
  });
});
</script>
<?php
}
endif;

参考 #19587 (JavaScript hooks for widgets) – WordPress Trac

上記のコードをコピペして、必要なイベントのみを残して、処理を書けばOKです。

ただWordPressの仕様で、ウィジェットをウィジェットエリアにドロップして配置した直後は、「ウィジェットID」は決まっていません。

ウィジェットIDは、後からJavaScriptによって動的に割り当てられるので、「要素IDを用いたウィジェット操作処理」をJavaScriptで書く場合は、少し工夫が必要です。

これについて、詳しく書くと結構な文字数が必要となるので、詳細は以下の記事を参照してください。