WordPressのプラグインやテーマの開発者として、管理画面にカラーピッカーを導入する際、wpColorPickerは非常に便利なツールです。しかし、そのchangeイベントの扱いには注意が必要です。
特に、カラーパレット上でマウスを動かしている間もchangeイベントが頻繁に発生し、処理が追いつかず不具合を引き起こす可能性があります。
この記事では、wpColorPickerの基本的な使い方と、changeイベントの適切なハンドリング方法について解説します。

wpColorPickerの基本的な導入方法

1. スクリプトとスタイルの読み込み：管理画面でwp-color-pickerのスクリプトとスタイルを読み込みます。
   
   add_action('admin_enqueue_scripts', 'load_wp_color_picker');
   function load_wp_color_picker($hook_suffix) {
   wp_enqueue_style('wp-color-picker');
   wp_enqueue_script('wp-color-picker');
   wp_enqueue_script('custom-color-picker', plugin_dir_url(__FILE__) . 'custom-color-picker.js', array('wp-color-picker'), false, true);
   }
   

   0001 add_action('admin_enqueue_scripts', 'load_wp_color_picker');
   0002 function load_wp_color_picker($hook_suffix) {
   0003 wp_enqueue_style('wp-color-picker');
   0004 wp_enqueue_script('wp-color-picker');
   0005 wp_enqueue_script('custom-color-picker', plugin_dir_url(__FILE__) . 'custom-color-picker.js', array('wp-color-picker'), false, true);
   0006 }
   

2. 入力フィールドの作成：カラーピッカーを表示させたい入力フィールドを作成します。
   
   <input id="my_color_field" class="my-color-field" name="my_color_field" type="text" value="#ffffff" />
   

   0001 <input id="my_color_field" class="my-color-field" name="my_color_field" type="text" value="#ffffff" />
   

3. カラーピッカーの初期化</strong>：作成した入力フィールドに対して、wpColorPickerを適用します。
   
   jQuery(document).ready(function($) {
   $('.my-color-field').wpColorPicker();
   });
   

   0001 jQuery(document).ready(function($) {
   0002 $('.my-color-field').wpColorPicker();
   0003 });
   

これらの手順により、基本的なカラーピッカーを導入できます。

changeイベントの適切なハンドリング

デバウンス（遅延）処理の導入

jQuery(document).ready(function($) {
var debounce;
$('.my-color-field').wpColorPicker({
change: function(event, ui) {
clearTimeout(debounce);
debounce = setTimeout(function() {
// カラー変更時の処理をここに記述
var color = ui.color.toString();
console.log('選択されたカラー:', color);
// 例: 背景色を変更
$('#preview').css('background-color', color);
}, 300); // 300ミリ秒（0.3秒）遅延
}
});
});

0001 jQuery(document).ready(function($) {
0002 var debounce;
0003 $('.my-color-field').wpColorPicker({
0004 change: function(event, ui) {
0005 clearTimeout(debounce);
0006 debounce = setTimeout(function() {
0007 // カラー変更時の処理をここに記述
0008 var color = ui.color.toString();
0009 console.log('選択されたカラー:', color);
0010 // 例: 背景色を変更
0011 $('#preview').css('background-color', color);
0012 }, 300); // 300ミリ秒（0.3秒）遅延
0013 }
0014 });
0015 });

このコードでは、changeイベントが発生するたびにタイマーをリセットし、最後のイベントから指定した時間（この場合は300ミリ秒）経過後にのみ処理を実行します。これにより、頻繁なイベント発生によるパフォーマンス低下を防ぐことができます。

まとめ