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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

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

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

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

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

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

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

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

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

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

1. カラーピッカーを動かす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' );
}

次にもう1つ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 );
}

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

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

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

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

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

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

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

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

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

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

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

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

💻受講料無料でプログラミング習得

⇒ 完全無料のプログラミングスクール - 手に職をつけて安定的に働きたい人へ -

デフォルト設定は以下が参考になります。

var myOptions = {
    // you can declare a default color here,
    // or in the data-default-color attribute on the input
    defaultColor: false,
    // a callback to fire whenever the color changes to a valid color
    change: function(event, ui){},
    // a callback to fire when the input is emptied or an invalid color
    clear: function() {},
    // hide the color picker controls on load
    hide: true,
    // show a group of common colors beneath the square
    // or, supply an array of colors to customize further
    palettes: true
};
 
$('.my-color-field').wpColorPicker(myOptions);

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

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

色番号は赤でも青でもお好きなカラーを指定可能です。上記では白を指定しています。

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

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

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

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

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください