【ワードプレス】カラーピッカーを自作したプラグインやテーマに表示

<?php
/*
Plugin Name: lesson
Plugin URI: https://jisaku-hp.jp/
Description: 
Author: 山根　隆史
Version: 1.0
Author URI: https://jisaku-hp.jp/
*/
add_action('admin_init', 'register_custom_setting2');

function register_custom_setting2()
{
    register_setting('custom-menu-group55', 'color');
}
add_action('admin_print_styles', 'add_color_picker_admin_print_styles');
function add_color_picker_admin_print_styles() {
	wp_enqueue_style( 'wp-color-picker' );
}
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_add_inline_script(
      'wp-color-picker',
      'jQuery(document).ready(function($){
        $(\'.add-color-picker-number-field\').wpColorPicker();
      });'
);
}
  add_action('admin_menu', 'custom_menu_page');
  function custom_menu_page()
  {
    add_menu_page('共通設定画面', '共通設定', 'manage_options', 'custom_menu_page', 'add_custom_menu_page', 'dashicons-admin-generic', 4);
  }
  function add_custom_menu_page()
  {
?>
<div class="wrap">
  <h2>共通設定画面</h2>
<form method="post" action="options.php" enctype="multipart/form-data" encoding="multipart/form-data">
    <?php
    settings_fields('custom-menu-group55');
    do_settings_sections('custom-menu-group55'); ?>
<label style="border:solid 3px <?php echo get_option('color');?>; padding:3px 10px;">カラーピッカー</label>
<input type="text" name="color" class="add-color-picker-number-field" value="" >
<?php submit_button(); ?>
</form>
</div>
<?php
}