memocarilog

WordPress ではカラーピッカーを簡単に呼びだす機能（ wp-color-picker ）が内蔵されていますが、このカラーピッカー機能を付けたウィジェットを、ウィジェット管理画面のサイドバーへ追加した際に、何故かウィジェット内にカラーピッカーが2つ表示されてしまうという現象に悩まされました…。

いろいろググってみたところそういうバグのようで、その現象を避けて表示する方法がなんとか分かったので、基本的なカラーピッカーの呼び出し方と合わせてまとめてみました。

管理画面でカラーピッカーを呼び出す基本的な方法

wp-color-picker スクリプトで呼び出せるカラーピッカーは以下のようなものです。

カラーピッカーを以下のフォームの箇所へ呼び出したいとします。

<input type="text" class="color-picker" value="" >

プラグインファイルなどで wp-color-picker のスクリプトとスタイルのファイルを読み込みます。

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

続けて wp-color-picker を呼び出すコードを、管理画面側へ出力するために以下のように記入します。

add_action( 'admin_print_scripts', 'print_scripts' );
function print_scripts() { ?>
<script>
(function($){
	$(document).ready(function(){
	    $('.color-picker').wpColorPicker();
	});
}(jQuery));
</script>		
<?php } ?>

wpColorPicker() メソッドには以下のオプションが用意されています。

// デフォルトカラーの設定
defaultColor: false,
// 選択された色が変わった時に呼び出す関数を登録
change: function(event, ui){},
// 選択された色をクリアした時に呼び出す関数を登録
clear: function() {},
// ロード時にカラーピッカーのパレットを非表示にする
hide: true,
// カラーパレットを通常の UI で表示するか（true）配列で表示する（false）
palettes: true

基本的に管理画面でカラーピッカーを表示するには以上のような方法で可能です。

ウィジェットでカラーピッカーを呼び出す場合のコード

ウィジェット管理画面でカラーピッカーを表示したい場合は少々違った書き方でないと、ウィジェットをサイドバーに追加時、カラーピッカーが2つ表示されてしまうので注意が必要です。

wp-color-picker のスクリプトとスタイルの読み込みは基本的な方法と同じです。

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

次に、基本的な方法と同じく wpColorPicker() メソッドでカラーピッカーを呼び出しますが、ウィジェット内に呼び出す場合は、以下のようにウィジェットに変化があった時のイベントを使って呼び出します。

add_action( 'admin_footer-widgets.php', 'print_scripts' );
function print_scripts() { ?>
<script type="text/javascript">
(function($){
	function initColorPicker(widget) {
		widget.find( '.color-picker' ).wpColorPicker( {
			change: _.throttle( function() { // カスタマイザー用コード
				$(this).trigger('change');
			}, 3000 )
		});
	}
	
	function onFormUpdate(event, widget) {
		initColorPicker(widget);
	}
	
	$(document).on('widget-added widget-updated', onFormUpdate );
	// widget-added → ウィジェットが追加されたときのイベント
	// widget-updated → ウィジェットが更新されたときのイベント
	
	$(document).ready( function() {
		$('#widgets-right .widget:has(.color-picker)').each( function () {
			initColorPicker( $(this) );
		});
	});
}(jQuery));
</script>		
<?php } ?>

ver 3.9 で wp-admin/js/widgets.js ファイルへ widget-added と widget-updated というイベントが追加されたことにより解決できるようになったようです。（たぶん…）

ググってもなかなかこの方法まで辿りつけなくて、結構な時間を費やしてしまいました…。