Как изменить и добавить цвет текста в WordPress (плагин TinyMCE Color Grid)
Сегодня поговорим о таком, казалось бы, простом вопросе как изменить цвет шрифта в WordPress сайте. Однако тема будет полезна не только новичкам, а и более продвинутым пользователям, т.к. я собираюсь включить в рассказ небольшой хак для добавления своего варианта цвет текста в WordPress редакторе. Это можно сделать как с помощью базовых функций системы, так и через специальный модуль TinyMCE Color Grid (который мы тоже рассмотрим).
Хочу заметить, что все скриншоты ниже показывают работу в плагине TinyMCE Advanced для WordPress. Это продвинутый функциональный текстовый редактор, что я ставлю на все свои проекты и рекомендую другим. Тем не менее, рассмотренные в посте решения для вордпресс шрифтов (хак и дополнительный модуль TinyMCE Color Grid) будут также отлично работать и в базовом редакторе системы.
Итак, начнем с изменения цвета текста.
В панели текстового редактора найдете иконку с буквой «А» и прозрачным фоном. При клике откроется палитра цветов для выбора. Чтобы изменить цвет текста в WordPress, просто выделяете фрагмент контента (слово, букву, абзац) и выбираете ему нужный окрас. Если переключиться в режим HTML (Текст), то увидите, что форматирование осуществляется за счет тега span:
Пример выделения цветом .
В первом скриншоте рядом с буквой «А» находится еще одна похожая кнопка, которая используется в WordPress для цвета фона. В базовом редакторе ее по умолчанию найти не удалось, а вот в TinyMCE Advanced она добавляется в панель инструментов через настройки.
Добавление своего цвета текста в WordPress
Также на картинке выше под вариантами цветов найдете ссылку «Произвольный» — она откроет инструмент палитры для выбора других вариантов кроме базовых.
Цвет текста можно задать через RGB и Hex коды или просто выбрать на палитре. После этого новый вариант сохранится вместе с базовыми. Правда, все это будет работать лишь во время редактирования данной конкретной заметки до перехода на другие страницы админки.
Именно поэтому более надежным способом добавления своего цвета изменения шрифта является следующий хак. Вам нужно открывать файл функций functions.php и дописать туда такой код:
Немного пояснений. Здесь вначале в переменной default_colours определяется список базовых цветов, затем — ваши новые значения в custom_colours. После оба массива объединяются в один. Всего получится 40 пар «код цвета + название». Переменная textcolor_rows:
… добавляет новую строку в элемент выбора цвета. Вот как в итоге выглядит результат (можете сравнить с первым сриншотом).
Кстати, вы можете задавать разное число колонок (rows) и строк (cols) для этого элемента, например:
$init[‘textcolor_rows’] = 5; $init[‘textcolor_cols’] = 10;
Хак работает для версий WP 3.9+ и для редактора TinyMCE 4+.
TinyMCE Color Grid — улучшенная палитра цветов
С помощью плагина вордпресс для редактирования цвета текста TinyMCE Color Grid добавить свои варианты оформления в систему сможет даже начинающий пользователь. Модуль установило более 2 тыс. человек, оценка пока что максимальная, поддерживается WP начиная с 2.7.
По факту, TinyMCE Color Grid содержит 2 функции. Первая значительно расширяет стандартную палитру цветов:
С таким то выбором вы легко сможете изменять цвета вордпресс в любом сайте. Если их недостаточно, плагин позволяет добавлять свои персональные варианты. Для этого заходите в меню «Настройки» — «TinyMCE Color Grid» и отмечаете галочкой опцию «I’d like to define some custom colors». Сразу после этого появится инструмент как на картинке ниже:
Здесь можно определить свои варианты и далее использовать их в текстовом редакторе. В принципе, действие аналогично описанному выше хаку, но без необходимости вникать и править PHP код. В целом, плагин изменения цветов интуитивно понятен + базовая палитра побольше.
Итого. Выбор из этих двух методов изменения цвета текста в WordPress зависит от вашего уровня подготовки. Мне лично проще использовать хак: в нем меньше кода, он проще, не требуется следить за новыми версиями модуля. Хотя здесь есть такой нюанс, что движок TinyMCE может изменится, и тогда нужно будет обновлять код.
Напоследок советую глянуть решение похожей задачи, когда нужно добавить шрифт в вордпресс редактор TinyMCE Advanced, заменив/дополнив базовые функции. Если у вас есть что сказачать по теме изменения цвета текста в вордпресс, пишите в комментариях.
Источник
Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress + видео
Как изменить шрифт (цвет, размер) текста, меню, заголовков в wordpress, чтобы улучшить вид страниц сайта . Внести кардинальные правки с минимальными знаниями кода . Предлагаю два способа. Первый — без использования плагинов, потому что для новичков настройки выглядят сложными. Второй — видео, если предпочитаете установить расширение.
Шаг №1: Сделайте бэкап файла style.css
Прежде всего обезопасьте ресурс от некорректного вмешательства. Сделав что-то не так, вернете прежний вид. В зависимости от того, где вносите правки, локальный это ресурс или находящийся в интернете, используйте удобный для вас метод:
- скопируйте содержание файла, с которым будете работать;
- создайте бэкап файла (сайта) с помощью плагина;
- сделайте скриншот файла стилей до внесения изменений;
- проверьте на локалке, как выглядит страница по-новому.
В первом случае, перейдите: Консоль управления WP → Внешний вид → Редактор тем . Откройте файл стилей, скопируйте весь код. Сохраните в каком-либо редакторе на компьютере. При необходимости, заменив содержание файла, вернете первоначальные настройки.
Скопируйте содержание файла style.css
- Если работаете на локалке , используя «Денвер» , проще скопировать файл style.css , перейдя в директорию: Z:(или папка Сервер)→home → localhost → www → web → wp-content → themes →название установленной темы . Найдите файл стилей, скопируйте, сохраните в удобном месте.
- В случае использования OpenServer , путь будет таким: Диск, на который установили платформу (у меня это D:/) —OSPanel — domains —домен сайта —wp-content— themes —название Темы —style.css.
Если не понравится новый вид страниц (не заметили, что изменились блоки связанные одним кодом настроек), замените содержание или файл стилей на копию. Неважно, какой вариант используете, главное — возможность вернуть прежние настройки.
Обратите внимание: Если изменяемый параметр, например, цвет, есть в кастомных настройках Темы, правка кода не нужна. Меняйте цвет в окне, которое открывается слева. Этот функционал имеет приоритет.
Кастомные настройки цвета в Теме wordpress имеют приоритет
Шаг №2: Как просто выбрать шрифт для замены
Выбрать шрифт можно, используя сервис Google fonts. Там же предлагается код для вставки в файлы header и style.css . Но проще и нагляднее вносить правки вручную. Если хотите внедрить не слишком вычурный тип шрифта, найдите его в редакторе, имеющем подобный список.
Например, для создания текстов использую OpenOffice . Выбираю шрифт, смотрю, как он выглядит (обычный, курсив, жирность, цифры), запоминаю название.
Как просто подобрать нужный шрифт
Подбирайте вариант , чтобы текст легко читался. Учитывайте, выбранный шрифт будет отражаться у пользователя, только в том случае, если имеется в его системе (браузере).
Например, шрифты, входящие в Windows могут отсутствовать в Linux и на телефонах. Поэтому лучше использовать популярные, более распространенные, имеющиеся в каждом браузере. В кодировке приведено несколько вариантов. Если первого по списку у читателя нет, отображаться будет следующий и т. д.
Приоритетные шрифты (2-4), заданные разработчиком Темы
Нежелательно применять много разных стилей: особый для заголовка, подзаголовка, виджетов, текстов и пр. Многообразие влияет на скорость загрузки сайта. Поэтому увлекаться шрифтами не следует. Подобрав нужный, скопируйте название и переходите на сайт.
Шаг №3: Предварительный визуальный обзор измененных параметров шрифта
Перейдите на сайт, выделите область, которую хотите изменить. Это может быть любой блок: заголовок, контекст, записи, виджеты, меню и т. д. Правой кнопкой мыши вызовите контекстное меню, нажмите «Просмотреть код». Попадете на страницу, где меняют визуальные настройки. При этом содержание файлов останется нетронутым.
Перейдите на страницу визуального изменения шрифтов (цвета, размера, семейства)
В wordpress предусмотрена функция демонстрации вносимых изменений. Это прекрасная возможность, ничего не ломая, предварительно увидеть правки. Скорректировав шрифт, как только переключитесь на другую страницу, все вернется к прежнему виду. Поэтому не бойтесь, на этой стадии ничего не испортите.
Параметр шрифта font-family: первое значение- приоритетное
Поле с кодом может располагаться как внизу, так и справа. Это зависит от браузера. В Google работать удобнее, лучше виден блок для внесения правок. Открывается мобильная версия сайта. Прокрутите экран, чтобы выделенный фрагмент был в поле зрения. Справа ищите параметры, соответствующие шрифтам. Это все связанное с наименованием « font» . Окна, если они закрыты, раздвигайте направляющими стрелочками.
Параметры шрифтов для изменения
Примечание: Сохраняйте все знаки препинания, обозначения. Меняйте только числа. Список шрифтов не удаляйте, просто первым пропишите свое название. Подобрав нужный цвет, скопируйте код ( типа # e34a83d). В файле стилей нет цветных квадратиков, только эти значения.
Пример: правки вносят в файл стилей; строка 410; параметр: font-famile; первый: lobster
Запишите номер строки файла style.css и данные, которые меняли. Аналогично меняют цвет и размер шрифтов. Подобрав параметры, закройте панель с блоком кодировки, не страницу. Иначе настройки пропадут. Посмотрите внимательно, возможно изменения коснулись других блоков.
Шаг №4: Как изменить шрифт в файле Стилей
Если все устраивает, переходите в консоль управления: Внешний вид → Редактор тем. Ищите в открытом файле style номера строк, в которые внесете правки. Не нарушая обозначений (артиклей, запятых, кавычек), пропишите вместо имеющихся параметров свои настройки шрифта. Сохраните новые значения, нажав кнопку внизу ( можно несколько раз, чтобы ускорить обновление).
Замените (пропишите на 1 место) нужный шрифт
Заключение
Описывать процесс пошагово — долго, но проделав это пару раз, будете корректировать шаблон, ничего не опасаясь, очень быстро (так же меняют вид кнопок ). Единственное препятствие — особо сгруппированный код. Когда для разных блоков прописывают параметры в общем разделе. Изменяя шрифт в одном месте, то же самое происходит в другом.
На какие-то элементы могут налагаться ограничения. Как не меняй, они останутся прежними, где-то есть более приоритетное указание. Поэтому адаптируя шрифты Темы, проверяйте все сначала на локальном сайте.
Важно: При обновлении темы, настройки, сделанные таким способом, пропадут. Чтобы этого не случилось, скопируйте и сохраните файл стилей перед этим процессом. После замените обновленный (дефолтный style.css ). Либо восстановите данные из бэкапа, либо не обновляйте шаблон, пока не найдете оптимального решения. Например, создав дочернюю Тему. При нестандартном коде поможет установка шрифтов через плагин.
Изменение шрифтов с помощью плагина
Опытом делится известный в сети вебмастер А. Абрамович. Автор чудо- скрипта Art Decoration Shortcode для красивого оформления статей. Сама часто пользуюсь советами Артема при работе с wordpress, поэтому рекомендую посмотреть ролик.
Нажав на кнопку, можно поделиться статьей с друзьями
Источник
Text Color изменить цвет текста на сайте WordPress
Привет ! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress ! Сегодня вы узнаете как можно очень просто и быстро изменить цвет текста на сайте WordPress. Вы сможете очень просто изменить цвет текста в любом месте на вашем сайте. Изменить цвет текста на сайте вы сможете с помощью специального визуального редактора. При изменении текста вы сможете сразу же видеть все изменения на сайте. Очень простой и полезный плагин !
Установить плагин SiteOrigin CSS вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Данный плагин я уже разбирал, поэтому все функции плагина мы не будем разбирать. Подробнее о плагине Смотрите Здесь . Далее я вам покажу как изменить цвет текста и всё.
После установки и активации плагина, перейдите на страницу: Внешний вид – Custom CSS. На странице плагина, вверху справа, нажмите на кнопку в виде одного глазика.
Далее, у вас откроется ваш сайт с CSS редактором. Обратите внимание, вверху страницы вы можете указать URL адрес страницы вашего сайта, на которой вы хотите изменить цвет текста.
Далее, нажмите по тексту, который вы хотите изменить. В CSS редакторе, вверху слева, появится CSS название элемента. Нажмите по полю Text Color , чтобы выбрать цвет текста. После выбора цвета, нажмите вверху на кнопку в виде галочки.
Далее, на странице плагина у вас появятся CSS стили для изменения цвета текста. Чтобы сохранить стили, нажмите на кнопку – Save CSS .
Всё готово ! После сохранения стилей, на вашем сайте изменится цвет текста. Если вы используете кэш плагина, удалите кэш и обновите страницу.
Остались вопросы ? Напиши комментарий ! Удачи !
Источник