Как изменить цвет текста в WordPress (3 простых метода)

/

Недавно один из наших читателей спросил, есть ли простой способ изменить цвет текста в WordPress?

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

В этом руководстве мы покажем вам, как легко изменить цвет текста в WordPress, шаг за шагом.

Легко изменить цвет текста в WordPress

Есть много причин, по которым вы можете захотеть изменить цвет текста в своих сообщениях или страницах. Возможно, вы хотите выделить ключевое слово или использовать цветные подзаголовки на определенной странице.

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

В этом руководстве мы рассмотрим следующие методы:

Просто щелкните одну из этих ссылок, чтобы сразу перейти к этому методу.

Метод 1. Изменение цвета текста с помощью визуального редактора

Вы можете использовать редактор WordPress по умолчанию, чтобы выделить слова, абзацы или даже подзаголовки цвета, отличного от основного текста.

Пример цветного текста на странице WordPress

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

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

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

Как только ваш текст на месте, вы можете изменить цвет.

Изменение цвета текста блока

В этом первом примере мы собираемся изменить цвет текста всего блока.

Просто нажмите на блок, и в правой части экрана должна открыться панель настроек блока. Затем нажмите на стрелку «Настройки цвета», чтобы развернуть эту вкладку. Здесь вы увидите настройки цвета текста.

Выбор цвета текста для всего блока в WordPress

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

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

Выбор пользовательского цвета текста для вашего блока

Если вы передумали и хотите вернуться к цвету текста по умолчанию, просто нажмите кнопку «Очистить» под параметрами цвета:

Возврат вашего блока к цвету текста по умолчанию

Совет от профессионала: если вы хотите изменить цвет фона для блока, вы можете сделать это и здесь.

Изменение цвета текста слова или фразы

Что, если вы хотите изменить цвет только одного или двух слов? Это легко сделать и с помощью редактора блоков.

Во-первых, вам нужно выделить слова, которые вы хотите изменить. Затем щелкните маленькую стрелку вниз на панели инструментов редактора содержимого.

Выделите слова, цвет которых вы хотите изменить

Затем просто нажмите ссылку «Цвет текста» внизу раскрывающегося списка:

Щелкните ссылку Цвет текста внизу раскрывающегося списка.

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

Выберите цвет текста для выделенного слова (слов)

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

Изменение цвета текста блока заголовка в WordPress

Примечание. Вы не можете установить цвет фона для блоков заголовков.

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

Изменение цвета шрифта с помощью классического редактора

Если вы все еще используете классический редактор WordPress, вы можете изменить цвет шрифта с помощью панели инструментов.

В классическом редакторе щелкните Переключатель панели инструментов справа. Вы увидите второй ряд значков:

Нажмите кнопку переключения панели инструментов, чтобы увидеть второй ряд значков.

Теперь вы можете выбрать текст и изменить цвет шрифта с помощью раскрывающегося списка цветов шрифта.

Используйте кнопку цвета текста в классическом редакторе

Метод 2. Изменение цвета текста в настройщике темы

Что, если вы хотите изменить цвет текста на всем сайте? Многие из лучших тем WordPress позволят вам сделать это с помощью настройщика тем.

В этом примере мы используем тему OceanWP. Это одна из лучших бесплатных тем для WordPress.

На панели управления WordPress перейдите в Внешний вид »Настроить, чтобы открыть настройщик тем.

Перейдите в Внешний вид, затем выберите Настроить на панели инструментов WordPress.

Затем вам нужно найти такой вариант, как «Типографика». Доступные параметры и то, как они называются, зависят от вашей темы.

Выберите Типографика или аналогичный параметр в настройщике темы.

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

Выберите основной текст для изменения в настройщике

Когда вы нажмете на селектор цвета шрифта, вы увидите палитру цветов. Выберите любой цвет, который вы хотите использовать для своего текста. Это изменит цвет текста во всех ваших сообщениях и страницах.

Выбор цвета основного текста с помощью настройщика темы

Вы также можете изменить цвета заголовка аналогичным образом, используя параметры для изменения H1, H2 и так далее.

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

Публикация изменений на вашем сайте

Совет: выбор черного или темно-серого текста на белом или очень светлом фоне обычно лучше для читабельности.

Метод 3. Изменение цвета текста с помощью кода CSS

Что делать, если в вашей теме нет возможности изменить цвет текста?

Вы по-прежнему можете изменить цвет шрифта на всем сайте, используя настройщик темы. Перейдите в Внешний вид »Настройщик на панели инструментов WordPress.

Внизу списка параметров вы увидите вкладку с надписью «Дополнительные CSS».

Откройте раздел Additional CSS в настройщике темы.

Затем перейдите на вкладку «Дополнительные CSS», и вы увидите несколько инструкций и поле для ввода кода CSS.

Для начала вы можете скопировать этот код в коробку. После этого вы можете изменить 6 цифр на шестнадцатеричный код выбранного вами цвета.

п {цвет: # 99 00 00; }

Введите CSS для изменения цвета абзаца в настройщике темы

Это изменит цвет шрифта обычного текста во всех ваших сообщениях и страницах на темно-красный (или любой другой цвет, который вы выбрали), например:

Цвет текста настраивается для всего сайта с использованием кода CSS

Если вы хотите изменить цвет заголовков в своем сообщении, вы можете вместо этого добавить этот код:

h2 {цвет: # 99 00 00; }

Опять же, измените шестнадцатеричный код на любой желаемый цвет.

Если вы не знакомы с CSS или хотите удобный для начинающих редактор CSS, который позволяет легко настраивать все стили вашего веб-сайта, мы рекомендуем изучить CSS Hero. Это мощный визуальный редактор, который позволяет настраивать стили всего вашего сайта.

Плагин CSS Hero

Мы надеемся, что это руководство помогло вам узнать, как изменить цвет текста в WordPress. Вам также могут понравиться наши руководства о том, как изменить размер шрифта в WordPress и как добавить пользовательские шрифты в WordPress.

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как разрешить участникам редактировать свои сообщения WordPress после одобрения

Недавно один из наших читателей спросил, можно ли разрешить участникам редактировать одобренные сообщения? Роли пользователей WordPress позволяют

Как включить автоматические обновления в WordPress для основных версий

Знаете ли вы, что WordPress поставляется с автоматическими обновлениями для второстепенных выпусков? Это означает, что команда WordPress.org может автоматически

Как исправить проблему загрузки изображения в WordPress (шаг за шагом)

Вы сталкиваетесь с проблемами загрузки изображений на своем веб-сайте WordPress? Для большинства новичков ошибки загрузки изображений могут сбивать

Как показать всплывающее окно подтверждения для форм в WordPress

Случайное закрытие страницы без отправки комментария или с наполовину заполненной формой раздражает. Недавно один из наших пользователей спросил