Добавляем дополнительный цвет в палитру цветов wordpress

Будучи web-мастером, не по-наслышке знакомым с html и css, никогда не приходило в голову, что кто-то пользуется встроенным в вордпрес wysiwyg-редактором (т.к. самому быстрее все оформить в коде). Однако столкнулся по работе с тем, что такие люди все же есть. И хотят они добавлять статьи на сайт красивые (читай: с различными выделениями текста курсивом, жирным и цветом).

В целом, визуальный редактор справляется с этой задачей вполне неплохо, но есть одно НО (скорее всего не одно, но сейчас не об этом): цветовая палитра жестко задана. И если вдруг случится дизайнеру выбрать цвет для текста отличный от стандартного, то редактор (человек, добавляющий на сайт статьи) не раз его припомнит недобрым словечком, ибо придется ему постоянно лезть в расширенную настройку и держать нужный код цвета  под рукой.  Однако есть более гуманный способ перекрашивать текст — можно добавить свои цвета в палитру (или вовсе их заменить на свои). 

Как добавить свой цвет?

Для добавления своего цвета в палитру будем работать с файлом functions.php, который находится в папке с вашей темой (wp-content/themes/название_темы/functions.php). В конец этого файла необходимо вставить следующий код:

/////////////////////// *********************************** ////////////////////////
/////////////////////// Добавляем кастомные цвета в редактор ///////////////////////
/////////////////////// ********************************* //////////////////////
function wpds_custom_palette( $init ) {
    $default_colours = '
        "000000", "Black",        "993300", "Burnt orange", "333300", "Dark olive",   "003300", "Dark green",   "003366", "Dark azure",   "000080", "Navy Blue",      "333399", "Indigo",       "333333", "Very dark gray",
        "800000", "Maroon",       "FF6600", "Orange",       "808000", "Olive",        "008000", "Green",        "008080", "Teal",         "0000FF", "Blue",           "666699", "Grayish blue", "808080", "Gray",
        "FF0000", "Red",          "FF9900", "Amber",        "99CC00", "Yellow green", "339966", "Sea green",    "33CCCC", "Turquoise",    "3366FF", "Royal blue",     "800080", "Purple",       "999999", "Medium gray",
        "FF00FF", "Magenta",      "FFCC00", "Gold",         "FFFF00", "Yellow",       "00FF00", "Lime",         "00FFFF", "Aqua",         "00CCFF", "Sky blue",       "993366", "Brown",        "C0C0C0", "Silver",
        "FF99CC", "Pink",         "FFCC99", "Peach",        "FFFF99", "Light yellow", "CCFFCC", "Pale green",   "CCFFFF", "Pale cyan",    "99CCFF", "Light sky blue", "CC99FF", "Plum",         "FFFFFF", "White"
    ';

    $custom_colours = '
        "004c99", "Blue Additional", "9a9a9a", "Свой серый"
    ';

    $init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']'; // build colour grid default+custom colors
    $init['textcolor_rows'] = 6; // enable 6th row for custom colours in grid
    return $init;
}

add_filter('tiny_mce_before_init', 'wpds_custom_palette'); //фильтр для применения функции изменения палитры перед загрузкой wysiwyg-редактора

Немного пояснений к коду:

  • переменная $default_colours определяет стандартный набор цветов в палитре.
    Здесь мы ничего не меняем, дабы не сбить стандартную настройку. При этом цвета задаются в двойных кавычках через запятую в последовательности: «hex-код цвета без знака #», «Название цвета, которое будет отображаться в палитре при наведении».
  • переменная $custom_colours определяет дополнительные цвета.
    Цвета записываются в таком же порядке, как у предыдущей переменной (код, название). Свои цвета дописываем в эту переменную!
  • $init[‘textcolor_rows’] определяет количество строк в палитре. Изначально их 5, но чтобы отобразить дополнительные цвета, нам нужно установить значение 6 (или больше, если все ваши цвета не помещаются).

Этот нехитрый код позволит добавить необходимые вам цвета в палитру и использовать их при редактировании текста наиболее удобным и естественным способом.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *