独自ウィジットの保存ボタンがアクティブにならないのは

ウィジットとは

このタイトルでウィジットとは何かを説明しなくてもいい気もしますが、WordPressのサイトに気軽に機能を追加できる機構です。

このサイトで言えば右サイドナビに並んでいるような、このような機能です。

これはWordPressに最初からついているウィジットで、管理画面のカスタマイザーかウィジットの設定画面で追加し、設定します。

独自のウィジット

サイトに何かの独自機能を追加したいときに、独自のウィジットを作成することがあります。

ウィジットを作成することは、それほど難しいことではありません。
HTML、PHPについては理解している必要があります。

作り方は以下のCODEXページで解説されています。

WordPress ウィジェット API
関数リファレンス/register_widget

関数リファレンスページにある通り、WP_Widgetを継承したクラスを作成し、以下の4メソッドを実装し、widgets_initアクションフック内でregister_widgetメソッドでクラスをウィジットとして登録すれば、独自のウィジットを作成できます。

・コンストラクタ
・widget メソッド　・・・　ウィジットとして表示する内容を出力する
・update メソッド　・・・　管理画面で「保存」ボタンを押下した際の保存処理
・form メソッド　・・・　管理画面でのWidget設定画面を出力する

サンプルのソースがWordPress ウィジェット APIページに載せられていますので、コピーして変更するのが簡単だと思います。

保存ボタンがアクティブにならない時は

やっと本題ですが、ウィジット設定画面内で設定値を変更すると、保存ボタンがアクティブになり、保存できるようになります。

しかし、設定を変更してもボタンがアクティブにならない場合があります。

例えば、以下のような画像ウィジットのような場合です。

画像にaltタグを入れることができるだけのウィジットです。

画像を選択してみます。

するとどうでしょう。
画面上にある保存ボタンが「公開済み」のままで、どうやったら保存できるのか。
左上のバツを押したら保存を聞いてくれるのかと思えば、そのままカスタマイザーが閉じられて終了です。
altのテキストフィールド値を変更すると、「保存」ボタンがアクティブになり、まぁ、一応は保存できるようになりますが、そんなヒッドいウィジットはあり得ないので何とかしたいところです。

どういうことか

WordPressのウィジット設定画面は、いずれかのフィールド値を変更すると、保存ボタンがアクティブになる仕組みです。

この画像選択は、画像をそのままウィジットに保存したりするわけではなく、画像を選択した際に隠しフィールド（hiddenのテキストフィールド）に、JavaScriptで画像IDを設定しています。
その隠しフィールドを更新しているので保存ボタンがアクティブになってよさそうなもの・・・

なんですが、JavaScriptでフィールドを変更した場合は、変更イベントが実行されないHTMLの仕様となっております。
そのため、変更を認識できないために保存ボタンがアクティブにならないのです。

どうすれば良いか

非常に簡単なことですが、JavaScriptで値を変更した時、同時にフィールドのonchangeイベントを実行してやれば良いだけです。

jQueryでの例としてはこんな風です。

id_field.val(file.id);
id_field.change();

これだけで、めでたく保存できるようになります。