Сен
22
0

Как изменить и добавить цвет текста в WordPress (плагин TinyMCE Color Grid)

цвет шрифта wordpressСегодня поговорим о таком, казалось бы, простом вопросе как изменить цвет шрифта в WordPress сайте. Однако тема будет полезна не только новичкам, а и более продвинутым пользователям, т.к. я собираюсь включить в рассказ небольшой хак для добавления своего варианта цвет текста в WordPress редакторе. Это можно сделать как с помощью базовых функций системы, так и через специальный модуль TinyMCE Color Grid (который мы тоже рассмотрим).

Хочу заметить, что все скриншоты ниже показывают работу в плагине TinyMCE Advanced для WordPress. Это продвинутый функциональный текстовый редактор, что я ставлю на все свои проекты и рекомендую другим. Тем не менее, рассмотренные в посте решения для вордпресс шрифтов (хак и дополнительный модуль TinyMCE Color Grid) будут также отлично работать и в базовом редакторе системы.

Итак, начнем с изменения цвета текста.

Как изменить цвет текста в WordPress

В панели текстового редактора найдете иконку с буквой «А» и прозрачным фоном. При клике откроется палитра цветов для выбора. Чтобы изменить цвет текста в WordPress, просто выделяете фрагмент контента (слово, букву, абзац) и выбираете ему нужный окрас. Если переключиться в режим HTML (Текст), то увидите, что форматирование осуществляется за счет тега span:

<span style="color: #ff6600;">Пример</span> <span style="color: #00ff00;">выделения</span> <span style="color: #3366ff;">цветом</span>.

В первом скриншоте рядом с буквой «А» находится еще одна похожая кнопка, которая используется в WordPress для цвета фона. В базовом редакторе ее по умолчанию найти не удалось, а вот в TinyMCE Advanced она добавляется в панель инструментов через настройки.

Добавление своего цвета текста в WordPress

Также на картинке выше под вариантами цветов найдете ссылку «Произвольный» — она откроет инструмент палитры для выбора других вариантов кроме базовых.

Палитра цветов в WordPress

Цвет текста можно задать через RGB и Hex коды или просто выбрать на палитре. После этого новый вариант сохранится вместе с базовыми. Правда, все это будет работать лишь во время редактирования данной конкретной заметки до перехода на другие страницы админки.

Именно поэтому более надежным способом добавления своего цвета изменения шрифта является следующий хак. Вам нужно открывать файл функций functions.php и дописать туда такой код:

function my_mce4_options($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", "Red violet",
                      "bfbfbf", "Light gray",
                      "FF99CC", "Pink",
                      "FFCC99", "Peach",
                      "FFFF99", "Light yellow",
                      "CCFFCC", "Pale green",
                      "CCFFFF", "Pale cyan",
                      "99CCFF", "Light sky blue",
                      "CC99FF", "Plum",
                      "FFFFFF", "White"';
 
  $custom_colours =  '"4c83c3", "Nice Blue Header",
                      "D83131", "Color 2 Name",
                      "ED1C24", "Color 3 Name",
                      "F99B1C", "Color 4 Name",
                      "50B848", "Color 5 Name",
                      "00A859", "Color 6 Name",
                      "00AAE7", "Color 7 Name"';
 
  // 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_mce4_options');

Немного пояснений. Здесь вначале в переменной default_colours определяется список базовых цветов, затем — ваши новые значения в custom_colours. После оба массива объединяются в один. Всего получится 40 пар «код цвета + название». Переменная textcolor_rows:

$init['textcolor_rows'] = 6;

… добавляет новую строку в элемент выбора цвета. Вот как в итоге выглядит результат (можете сравнить с первым сриншотом).

Добавление цвета текста в WordPress

Кстати, вы можете задавать разное число колонок (rows) и строк (cols) для этого элемента, например:

$init['textcolor_rows'] = 5;
$init['textcolor_cols'] = 10;

Хак работает для версий WP 3.9+ и для редактора TinyMCE 4+.

TinyMCE Color Grid — улучшенная палитра цветов

TinyMCE Color Grid - улучшенная палитра цветов

С помощью плагина вордпресс для редактирования цвета текста TinyMCE Color Grid добавить свои варианты оформления в систему сможет даже начинающий пользователь. Модуль установило более 2 тыс. человек, оценка пока что максимальная, поддерживается WP начиная с 2.7.

По факту, TinyMCE Color Grid содержит 2 функции. Первая значительно расширяет стандартную палитру цветов:

TinyMCE Color Grid - улучшенная палитра цветов

С таким то выбором вы легко сможете изменять цвета вордпресс в любом сайте. Если их недостаточно, плагин позволяет добавлять свои персональные варианты. Для этого заходите в меню «Настройки» — «TinyMCE Color Grid» и отмечаете галочкой опцию «I’d like to define some custom colors». Сразу после этого появится инструмент как на картинке ниже:

TinyMCE Color Grid - добавляем цвета текста

Здесь можно определить свои варианты и далее использовать их в текстовом редакторе. В принципе, действие аналогично описанному выше хаку, но без необходимости вникать и править PHP код. В целом, плагин изменения цветов интуитивно понятен + базовая палитра побольше.

Итого. Выбор из этих двух методов изменения цвета текста в WordPress зависит от вашего уровня подготовки. Мне лично проще использовать хак: в нем меньше кода, он проще, не требуется следить за новыми версиями модуля. Хотя здесь есть такой нюанс, что движок TinyMCE может изменится, и тогда нужно будет обновлять код.

Напоследок советую глянуть решение похожей задачи, когда нужно добавить шрифт в вордпресс редактор TinyMCE Advanced, заменив/дополнив базовые функции. Если у вас есть что сказачать по теме изменения цвета текста в вордпресс, пишите в комментариях.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 4, средний балл: 5,50 из 7)
Загрузка...

категория Категории: Возможности; Плагины; Хаки и секреты;
теги Теги: , , , , , .
Оставить комментарий

(предыдущая статья)

Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Полезные заметки
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости