【中級者】ワードプレスの管理画面にカラーピッカーを導入する方法

ワードプレスには標準でカラーピッカー機能が搭載されています。カラーピッカーはマウス操作で色を自由に選べる機能です。以下では管理画面にカラーピッカーを導入する手順をご紹介いたします。

【中級者】ワードプレスの管理画面にカラーピッカーを導入する方法

管理画面にカラーピッカーを追加すると以下の機能が使えます。

色の部分を選ぶとカラーピッカーが立ち上がります。

ちなみに上記はワードプレス「4.1系」で実装した例です。当然ですが、5系でも動きます。

細かいこと言うとワードプレスの4系ってカラー番号が入る部分の高さが合っていませんよね。仕様なので仕方ありませんが、過去にデザイナーとして働いていた経験からなのかやけに気になります。

このように見比べると「ボタン系の高さ」が低いのがわかりますよね。ワードプレス5系ではボタンの高さもしっかりと合わされています。こういった細部を仕上げるためにバージョンアップを繰り返すわけです。

管理画面にカラーピッカーを実装する流れ

以下が流れとなります。ちなみに導入方法次第では「ワードプレス4系で動かないけど5系では動く」といったカラーピッカーになってしまう場合があるのでその点も注意が必要です。

１. カラーピッカーを動かすCSSとJavascriptを読み込む
２. カラーピッカーを適用するためのinput要素を追加する
３. Javascriptでinput要素をカラーピッカーに切り替える

上記で「カラーピッカーの操作まで」ができるようになります。

１. カラーピッカーを動かすCSSとJSを読み込む

プラグイン内のphpファイルに以下を追加しましょう。CSSが読み込まれます。

add_action('admin_print_styles', 'add_color_picker_admin_print_styles');
function add_color_picker_admin_print_styles() {
	wp_enqueue_style( 'wp-color-picker' );
}

次にもう１つphpファイルに追記していきます。Javascriptを読込みます。

add_action('admin_print_scripts', 'add_color_picker_admin_print_scripts');
function add_color_picker_admin_print_scripts() {
	wp_enqueue_script( 'wp-color-picker' );
	wp_enqueue_script( 'add-color-picker-admin-script', plugins_url() . '/js/color-picker.js', array( 'wp-color-picker' ), false, true );
}

以上で必要なスクリプトは揃いました。カラーピッカーはスタイルを読み込むだけで使えるという話もありますが、ワードプレスのバージョンによっては正しく動かなくなるので注意が必要です。

２. カラーピッカーを適用するためのinput要素を追加する

カラーピッカーは「input」タグを拡張して実装する仕組みとなります。カラーピッカーを設置する管理画面内のphpでは以下の記述を行いましょう。バリュー内は色データを呼び出す処理を書きます。

<input type="text" name="color" class="add-color-picker-number-field" value="" >

管理画面内のphpではカラーピッカーの値を保存する処理を書く必要があります。本記事は中級者向けなので概要は省略しますが、サイトオプションを定義して色データを保存できる準備をしてください。

３. Javascriptでinput要素をカラーピッカーに切り替える

上記の「２」のinputに対して外部ファイルのJavascriptからカラーピッカーを適用します。

(function( $ ) {
	$('.add-color-picker-number-field').wpColorPicker();
})( jQuery );

上記を「color-picker.js」として保存。任意の名前でもOKです。ただし、上記「１」のJavascript側で読み込むので名前を一致する必要があります。ディレクトリ構造（/js）などはプラグインに準じます。

以上で実装は完了となります。

カラーピッカーにデフォルト色を指定する

なお、上記のスクリーンショットではカラーピッカーに「デフォルト」というボタンが表示されていますが標準でデフォルト色の設定は無効になっているので元は「クリア」と出る仕様です。

デフォルト設定は以下が参考になります。下記がデフォルトの色を指定した例です。

上記のルールに乗っ取って「color-picker.js」内の記述を微調整すればOKです。たとえば「デフォルト」のカラー番号をあらかじめ設定しておくなら以下となります。下記は白を指定しています。

(function( $ ) {
	var defaultColorNumber = {
		defaultColor: '#FFFFFF',
	};
	$('.add-color-picker-number-field').wpColorPicker( defaultColorNumber );
})( jQuery );

色番号は赤でも青でもお好きなカラーを指定可能です。ただし、デフォルトカラーと言っても元から色が選ばれているわけではなく「デフォルト」というボタンを押さないと指定した色が反映されません。

なお、「デフォルト」ボタンを押さなくてもデフォルトカラーを先に指定しておきたい場合はinput側のvalue値に初期値を指定する必要があります。input側は“変更後のカラー番号が保存される場所”なので状況によっては、条件文を足して、保存されたカラー番号がない場合は【#FFFFFF】を読み込むといった処理が必要ですね。

<input type="text" name="color" class="add-color-picker-number-field" value="#FFFFFF" >

inputの値を保存できれば完了

上記の手順が完了すれば「input」にカラーピッカーを適用できます。

データの保存はinput側なので手順はシンプルです。カラーピッカーは色番号を自由に選べる点が目的とされた便利な機能です。最終的には色番号が保存されるだけなので扱いもカンタン。

プラグインにカラーピッカー（色番号の選択）を導入できれば色々な機能を実装できます。結構便利な機能なのでぜひお試しくださいませ。活かし方はアイデア次第になりますが色を指定する場合には最適です。