カラーピッカーを使用する方法【簡単】

wordpressでカラーピッカーを使用する方法を紹介します。

管理画面で主に使用するようです。

カスタムフィールドでの使用や、カスタマイザーでの使用、管理画面のメニューなどで使用する機会があると思います。

カラーピッカーの利用は簡単でwordpressで用意されているのものを使用することで簡単に実装できます。

カラーピッカーの使用方法

フックの利用やJSでの記述がありますのでそれぞれ分けて説明していきます。

まず、HTML部分です。

<input id="color_pick" type="text" name="main-color" >

後でJS側で処理するためにidでcolor_pickと振っておきます。

inputのtypeはテキストで問題ありません。カラーコードが入ります。

JS部分です。

　jQuery(document).ready(function(){　
		jQuery('#color_pick').wpColorPicker();
	});

JSでは先ほどのidに対して「wpColorPicker」を使用します。

JSの実行タイミングによってはコンソールに「wpColorPicker is not a function」のようなメッセージが出る場合があります。

その場合上記のような準備完了後に実行してください。

最後にPHPでのフック部分です。

add_action( 'admin_enqueue_scripts', function(){
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'wp-color-picker' );
} );

管理画面用にスタイルとスクリプトを読み込んでおきます。wordpressのデフォルトのカラーピッカーが使用できるようになります。

これがない場合通常のテキストボックスの表示になってしまいます。

以上を記述することで以下のようなカラーピッカーが表示されます。

また、JS部のオプション指定などでカラーピッカーの挙動を変更できます。