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

Привет, всем посетителям моего скромного бложика. Давненько ничего не писал, как всегда завал на работе, прихожу домой как зомби ничего не хочется. Уверен и для вас знакомая ситуация. Ну да ладно, сегодня не об этом. Расскажу я сегодня о том как добавить в текстовый редактор wordpress дополнительные цвета. Не совсем поняли о чем я? Да сейчас поясню.

Знаете вы наверное, что в редакторе TinyMCE  — который используется в вордпресс есть возможность (да впрочем как и в большинства подобных редакторов) задавать цвет для текста. Кнопочка есть там такая:

add_color_btn-min

Выделяете текст, кликаете по кнопке выбираете подходящий цвет и вуаля выделенный текст перекрашивается в ваш цвет. Все круто вроде!

Круто да не круто, потому что цветов-то ограниченное количество, как правило того, нашего «корпоративного» нет, эх беда беда, что же делать… Не стоит отчаивается, на самом деле вы можете добавить в список цветов и свой, тот который лучше всего подойдет под дизайн сайта.

Буквально вчера, я и сам столкнулся с это проблемой на работе.  Короче верстал сайт для фирмы и там была страница «О нас» с  изобилием  разных выделений текста, которые окрашивались в корпоративные цвета сайта. Конечно можно было заверстать эти страницы и тупо вставить в текстовый редактор, но понятно не комильфо все это, лучше чтобы администратор сайта сам мог добавлять и красить нужные ему текста.

В общем пришлось добавлять цвета в текстовый редактор. По гуглил немного, нашел я парочку решений данной проблемы и спешу поделится ими (решениями в смысле) с вами.

Короче говоря есть два способа «втулить» в редактор  TinyMCE дополнительные цвета для текстов. Первый способ как говорится: «для самых маленьких», тупо поставить плагин «TinyMCE Color Grid ».

plagin_tinymce_color-min

Просто устанавливаете данные расширение для вордпресс  идете в редактор и вуаля:

demo_tinymce_color-min

Выбираете нужный цвет.

Но этот способ мне не очень понравился, ставить лишний плагин для такой ерунды,  не хорошо. Это не наш путь, мы же профессионалы, что нам какие-то плагинчики!  Есть более оптимальный способ, а именно.

Вы можете расширить функциональность, соответственно и добавить дополнительные цвета используя специальный код:


function my_new_tiny_options($init) {
  $default_colours = '"000000", "Black",
                      "993300", "Burnt orange",
                      "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";

  $custom_colours =  '"e0b36f", "My color 1",
                      "2e2e2e", "My color 2"';

  // build colour grid default+custom colors
  $init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';

  // enable 6th row for custom colours in grid
  $init['textcolor_rows'] = 6;

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

Если вы хоть немного работали с php, то наверняка данный код вам понятен. Если вкратце, то  мы создаем функцию  my_new_tiny_options в которой инициализируем и заполняем две переменный одну с дефолтными цветами — $default_colours (просто копируем с примера) и вторую — $custom_colours  с теми цветами, которые нам нужно добавить в редактор. Ну и далее собственно используя специальные опции добавляем наши цвета в редактор  TinyMCE wordrpess . Ну и вызываем данную функцию используя фильтр вордпресс.

Если ничего не понятно просто тупо копируете код, вставляете его в файл functions.php вашей темы (!) и в переменную $custom_colours,  в том же формате как показано в примере, добавляете свои цвета. И все дела. После этого в вашем редакторе появятся добавленные цвета, в моем случаи все выглядит так:

result-min

Вот и все, как всегда буду рад комментариям и вопросам к данному посту и надеюсь, что данный материал поможет вам в вашей работе. До новых встреч!!