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

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

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

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

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

スポンサーリンク
レクタングル(大)広告

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

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

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

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

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

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

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

動作確認

上記コードの記入後、ウィジェット管理画面でウィジェットをドロップしてみました。

ウィジェット管理画面でウィジェットをドロップ

すると、Chromeのデベロッパーツールでは以下のように表示されます。

デベロッパーツールのConsole画面でウィジェットイベントの動作を確認

保存処理は2回呼び出されるみたい。

まとめ

このように、JavaScript(jQuery)を用いてウィジェット画面操作のイベントを取得することができました。

正直、あまり使用する機会もないと思います。ただ、使用する場合は、大いにハマる部分でもあるので書き記しておきたいと思います。

僕の場合、どうせ3ヶ月後には綺麗サッパリ忘れてしまうので。