WordPress4.8管理画面にカラーピッカーを設置する方法

WordPress管理画面にカラーピッカーを設置する方法です。

環境はWordPress4.8.2で確認しました。

/テーマ/js/colorPicker.js

(function( $ ) {
 $(function() {
 $('.myColorPicker').wpColorPicker();
 });
})( jQuery );

.myColorPickerクラスにカラーピッカーjsを適用させます。

function.php

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

add_action('admin_print_scripts', 'my_admin_print_scripts');
function my_admin_print_scripts() {
 wp_enqueue_script( 'wp-color-picker' );
 wp_enqueue_script( 'my-admin-script', get_bloginfo('stylesheet_directory') . '/js/colorPicker.js', array( 'wp-color-picker' ), false, true );
}

表示方法

https://normalblog.net/system/wordpress-adminmenu/

上記のfunction hoge_box_options_page()のinputのclassにmyColorPickerクラスを設定すればカラーピッカーが管理画面に表示されます。

実際のユーザが見る画面に表示するやり方は上記のページに記載があります。