背景色や文字色を変更できるようにする」という機能を実装することにしました。カラーコードをテキストで入力してもいいのですが、WordPressの管理メニュー内の外観→カスタマイズなどで見かけるカラーピッカーがあるので、これを上手く使えないかと思い調査することに。外観→カスタマイズメニューのカラーピッカーJavaScriptライブラリ:wp-color-pickerとりあえずサンプルとしてプラグインの形式で作成していこうと思います。カラーピッカーのライブラリ読み込みWordPressのデフォルトでインストールされているJavaScript(/wp-includes/js/下)は事前に登録されているので、自分が実装するメインのJavaScriptへの依存関係として読み込みます。'</div>';}}23行目でJavaScirptを読み込んでいます。js/color-picker-main.jsが自分で実装する用のJavaScriptファイル。jQueryも使いたいので、wp-color-pickerと同時にjqueryも依存関係ファイルとして読み込んでおきます。19行目でカラーピッカー用のスタイルシートをキューに入れます。こちらもJavaScript同様、wp_register_style関数で事前に登録されているのでキューに入れるだけでOKです。先程のソースコード内に既に書きましたが、カラーピッカーの対象となるテキストボックスを準備します。type="text"></p>';id属性にcolor-pickerという値をセットしました。値は任意で大丈夫です。class属性でも可能ですが、JavaScriptなのでid属性のほうがスコープしやすいかもです。(実際はパフォーマンスやStyleとの住み分けなど言いたいことは沢山ありますが割愛)これでフロント側の準備はOKです。JavaScriptからカラーピッカーをコールするコールは非常にシンプル。対象のテキストボックス要素でwpColorPicker()メソッドをコールしてあげるだけです。true};$('#color-picker').wpColorPicker(options);});})(jQuery);オプションの設定ができるようになっています。オプション内容defaultColorデフォルトカラーの設定でデフォルト色を設定したい場合はカラーコード文字列を設定する。changeカラー変更時のコールバック関数を指定できる。clearカラークリア時のコールバック関数を指定できる。hide画面ロード時のカラーピッカー表示/非表示設定。palettersカラーパレットの表示/非表示設定。サンプルを動作させると以下の用に画面が表示されます。サンプル完成!\(^o^)/これをプラグインに実装していきます。プラグインへの実装カラーピッカーをウィジェットに組込みまずは管理メニューのウィジェットからカレンダーウィジェットにカラーピッカーを実装します。サンプルと異なりjQueryは既にウィジェットメニュー内で読み込まれているので読み込み不要。カラーピッカーのCSSとJavaScriptをキューにセットします。$html;カラーコードを保存するので、もし保存されていたらその値を。保存されていなければデフォルト値をセットしてカラーピッカーに渡すロジックを5〜8行目に記述しています。あとはJavaScriptを書くだけなのですが、PHP側からJavaScriptに値を渡す必要があるため、外部ファイルにするのは逆に可読性が悪くなるかなと思ったり。$this->get_field_id()でid値をセットしているのは、カレンダーウィジェットを複数配置する場合、同じclassやid属性を使用してしまうとカラーピッカーが重複して表示されてしまうため、それを防止しています。そのカレンダーウィジェット一意の値が必要です。カラーピッカーの実装テキストボックスは通常ウィジェットに追加するのと同じ方法で問題なし。あとは更新処理なども普通のウィジェットフィールドの更新処理と同じです。カラーコードの正規表現チェックあとはフロント側に登録したカラーコードを使用してスタイルを設定するのですが、出力時にカラーコードの形式で登録されているかチェックします。正規表現で「#+6桁(数字・アルファベット大文字/小文字)」「#+3桁(数字・アルファベット大文字/小文字)」は真、それ以外は偽という判定用の関数を作ります。__return_false();}}この関数に登録したカラーコードを渡して真が返ってきた場合のみスタイルを設定するように処理を書きます。