Настройка палитры цветов Wordpress

Wordpress 3.5+ использует палитру цветов Iris, которая имеет несколько доступных для использования параметров.

При инициализации объекта просто назначьте опцию palettes с массивом цветов.

var colorOptions = {
    // show a group of common colors beneath the square
    // or, supply an array of colors to customize further
    palettes: ['#4444,44','#ff2255','#559999','#99CCFF','#00c1e8','#F9DE0E','#111111','#EEEEDD']
};

jQuery('.my-color-picker-class').wpColorPicker(colorOptions);

Если вы используете редактор TinyMCE, вы можете изменить цветовую палитру следующим образом.

function my_mce4_options( $init ) {
    $custom_colours = '
        "e14d43", "Color 1 Name",
        "d83131", "Color 2 Name",
        "ed1c24", "Color 3 Name",
        "f99b1c", "Color 4 Name",
        "50b848", "Color 5 Name",
        "00a859", "Color 6 Name"
    ';

    $init['textcolor_map'] = '['.$custom_colours.']';

    // Set number of color rows
    $init['textcolor_rows'] = 3;
    // Set number of color columns
    $init['textcolor_cols'] = 2

    return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

Нам нужно wp_enqueue_script скрипт и wp_enqueue_style стиль с add_action в файл functions.php. Просто включите файл jQuery и файл таблицы стилей в этот скрипт.

// Register Scripts & Styles in Admin panel
function custom_color_picker_scripts() {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
wp_enqueue_script( 'cp-active', plugins_url('/js/cp-active.js', __FILE__), array('jquery'), '', true );

}
add_action( 'admin_enqueue_scripts', custom_color_picker_scripts);

Теперь создайте новый файл javascript, например, cp-active.js, и сохраните его в пути к файлу, определенному как «/js/cp-active.js», используя код сильфона.

jQuery('.color-picker').iris({
// or in the data-default-color attribute on the input
defaultColor: true,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
palettes: true
});

Добавьте текстовое поле на страницу настроек с классом CSS для палитры цветов, где вы хотите отображать вводимый текст. Я использовал «color_code» для ввода переменной $.

<input id="color_code" class="color-picker" name="color_code" type="text" value="" />

Дополнительные сведения см. в разделе Добавление темы или плагина WordPress для выбора цвета jQuery

Вот быстрое и грязное решение:

1. Перейдите на страницу wp-admin/js/iris.min.js.
2. Ищите там цвета палитры (примерно 1/3 от начала файла). Я нашел это:
   _palettes:["#000","#fff","#d33","#d93","#ee2","#81d742","#1e73be","#8224e3"]
3. Замените эти значения по умолчанию своими собственными цветами. Я оставил черный и белый, а затем добавил наши фирменные цвета вместо #d33 и остальных.
4. Загрузить на сервер.

Работает пока. Но еще не пробовал, если это выдержит следующее обновление Wordpress.