Изменить цвет ссылок на WordPress проще всего в настройках темы: в блочных темах это «Внешний вид» → «Редактор» → «Стили» → «Цвета» → «Ссылка», в классических — «Внешний вид» → «Настроить» и поле «Дополнительные стили» с правилом CSS для тега a. Редактировать файл style.css темы напрямую не стоит: при обновлении темы правки пропадут.
Как определить тип темы
Способ зависит от того, какая тема установлена. Откройте меню «Внешний вид» в админке:
- Есть пункт «Редактор», а «Виджетов» и «Меню» нет — у вас блочная тема (например, стандартные Twenty Twenty-Three, Twenty Twenty-Four, Twenty Twenty-Five).
- Есть пункт «Настроить» — классическая тема. Многие популярные темы этого типа имеют собственный раздел «Цвета» в настройщике.
Цвет ссылок в блочной теме
- Откройте «Внешний вид» → «Редактор» и нажмите «Стили» (значок с половинкой круга).
- Выберите «Цвета», затем в списке элементов — «Ссылка».
- На вкладке «По умолчанию» задайте основной цвет, на вкладке «При наведении» — цвет под курсором.
- Нажмите «Сохранить». Изменения сразу применятся ко всем страницам.
Если нужно поменять цвет ссылок только в одном блоке, например в группе или абзаце, выделите блок в редакторе записи, откройте вкладку «Стили» на боковой панели и задайте цвет в разделе «Цвет» → «Ссылка». Эта настройка перекрывает общий стиль только для выбранного блока.
Через theme.json в дочерней теме
Разработчики чаще задают цвета в файле theme.json дочерней темы. Фрагмент для ссылок:
"styles": { "elements": { "link": { "color": { "text": "#1a5fb4" }, ":hover": { "color": { "text": "#0b3d7a" } } } } }
Учтите, что настройки, сохранённые в редакторе стилей, хранятся в базе и имеют приоритет над файлом. Если правка в theme.json не видна, сбросьте пользовательские стили в редакторе («Стили» → меню из трёх точек → «Сбросить»).
Цвет ссылок в классической теме
Сначала проверьте «Внешний вид» → «Настроить» → «Цвета»: многие темы позволяют выбрать цвет ссылок в палитре без кода. Если такого пункта нет, используйте CSS:
- Откройте «Внешний вид» → «Настроить» → «Дополнительные стили».
- Вставьте правило и посмотрите результат в окне предпросмотра справа.
- Нажмите «Опубликовать».
Базовый набор правил:
a { color: #1a5fb4; }— обычная ссылка;a:visited { color: #6a3d9a; }— уже открытая посетителем;a:hover, a:focus { color: #0b3d7a; text-decoration: underline; }— при наведении и при переходе клавишей Tab;a:active { color: #c01c28; }— в момент нажатия.
Порядок важен: правило для :hover должно идти после :visited, иначе цвет при наведении не сработает на посещённых ссылках.
Только в тексте статей
Правило для всех a перекрасит и меню, и заголовки записей, и подвал. Чтобы изменить цвет только внутри статьи, ограничьте селектор контейнером записи. В большинстве тем это .entry-content a, в блочных — .wp-block-post-content a. Точный класс видно в браузере: щёлкните по ссылке правой кнопкой, выберите «Просмотреть код» и посмотрите классы родительских блоков.
Почему новый цвет не применяется
| Причина | Решение |
|---|---|
| Кеш плагина или браузера | Очистить кеш плагина кеширования, обновить страницу с Ctrl+F5 |
| У темы более точный селектор | Найти его в инспекторе и повторить в своём правиле |
| Цвет задан в настройках блока | Сбросить цвет в боковой панели блока |
| Стиль редактора перекрывает theme.json | Сбросить пользовательские стили |
| Правка внесена в файл родительской темы | Перенести в «Дополнительные стили» или дочернюю тему |
Объявление !important решает проблему быстро, но потом мешает любым другим правкам. Используйте его только если иначе перебить стиль плагина не получается.
Как выбрать цвет
Цвет записывается в шестнадцатеричном виде (#1a5fb4), в формате rgb() или hsl(). Подобрать оттенок можно встроенной пипеткой браузера: в инструментах разработчика нажмите на квадратик цвета рядом со свойством color.
- Контраст. Для обычного текста рекомендуемое соотношение с фоном не меньше 4,5:1. Светло-голубые и жёлтые ссылки на белом фоне плохо читаются. В палитре инструментов разработчика Chrome коэффициент контраста показывается сразу.
- Отличие от текста. Если ссылка отличается от текста только цветом, людям с нарушениями цветового зрения её трудно заметить. Оставьте подчёркивание хотя бы в тексте статей.
- Единый стиль. Возьмите основной цвет из логотипа или кнопок сайта, а для наведения — тот же оттенок, но темнее на 15–20%.
Чего лучше не делать
- Не правьте style.css родительской темы через «Редактор файлов тем»: обновление темы всё вернёт, а ошибка в синтаксисе может сломать вид сайта.
- Не ставьте плагин только ради цвета ссылок: задача решается одной строкой CSS.
- Не делайте ссылки того же цвета, что и обычный текст без подчёркивания: посетители перестанут их замечать, а внутренняя перелинковка потеряет пользу.
Частые вопросы
Где в WordPress «Дополнительные стили», если у меня блочная тема
В блочных темах этот пункт находится в редакторе сайта: «Стили» → меню из трёх точек → «Дополнительный CSS». Если нужен классический настройщик, его можно открыть по адресу /wp-admin/customize.php.
Как убрать подчёркивание ссылок
Добавьте правило a { text-decoration: none; }, а для наведения верните подчёркивание: a:hover { text-decoration: underline; }. В тексте статей подчёркивание лучше оставить для удобства чтения.
Сохранится ли цвет после смены темы
Нет. Стили из настройщика и редактора сайта привязаны к конкретной теме. Сохраните свои правила CSS отдельно, чтобы перенести их на новую тему.
Как поменять цвет ссылок в меню
В блочной теме выделите блок «Навигация» и задайте цвета в его настройках. В классической используйте селектор меню темы, например .main-navigation a; точный класс покажет инспектор браузера.