Сайт на WordPress работает, но выглядит как сотни других? Та же стандартная тема, те же шрифты, ни намёка на индивидуальность. Платформа даёт тонну возможностей для кастомизации, вопрос в том, с чего начать и не сломать сайт по дороге.

Смена дизайна WordPress-сайта не обязательно означает полную переделку с нуля. Иногда достаточно трёх-четырёх точечных правок, чтобы сайт перестал выглядеть шаблонно и начал запоминаться. Ниже, пошаговый разбор: от цветовой схемы до favicon, с конкретными инструментами и без строчки кода там, где можно обойтись без неё.

💡 Быстрый обзор:

• Подберите цветовую схему из 3 цветов через Adobe Color, Coolors или ColorHexa
• Настройте шрифты через Google Fonts, Use Any Font для кастомных гарнитур
• Поменяйте формат даты и времени одной строкой кода или через Customizer

Подбор цветовой схемы

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

Оптимальный подход, три базовых цвета: основной (фон/текст), акцентный (кнопки, ссылки, важные элементы) и вспомогательный (обводки, разделители, hover-состояния). Больше трёх, риск получить визуальный шум; меньше, скучно. Главное правило: акцентный цвет используйте дозированно, только там, где нужно привлечь внимание.

С чего начать подбор:

Adobe Color (бывший Kuler)

Инструмент от Adobe для создания цветовых схем по правилам гармонии: монохроматическая, комплементарная, триадная, аналоговая. Под капотом, цветовой круг, где вы задаёте базовый оттенок, а система автоматически подбирает остальные. Можно вытащить палитру из загруженного изображения, удобно, если есть референс. Доступен бесплатно на color.adobe.com.

Coolors

Генератор палитр, заточенный под скорость. Нажимаете пробел, получаете новую комбинацию из пяти цветов. Каждый можно зафиксировать и крутить остальные. На выходе, готовые HEX-коды. Есть плагин для Chrome/Firefox и iOS-приложение. Работает на coolors.co.

ColorHexa

ColorHexa, не просто пипетка, а энциклопедия цвета. Вводите HEX, RGB или название, получаете страницу с комплементарными оттенками, градиентами, триадами, процентным составом и слепым просмотром (как цвет видят люди с разными типами дальтонизма). Блендер цветов: введите #ff0000+#0000ff+#ff00ff, получите результирующий #aa00aa с полной раскладкой. colorhexa.com.

Готовые HTML-палитры

Если не хочется подбирать с нуля, берите готовые палитры. htmlcolorcodes.com, 216 веб-безопасных цветов с HEX-кодами, совместимых с CSS, Photoshop и любой графикой. Сервис Paletton (ранее Color Scheme Designer) даёт схемы с предпросмотром на макете сайта.

CSS Gradient Generator

Градиенты возвращаются, теперь это не полосы из 2012-го, а тонкие переходы на фоне секций и кнопок. ColorZilla Gradient Editor, Photoshop-подобный редактор: задаёте опорные точки с цветами и прозрачностью, двигаете midpoint, копируете готовый CSS. Поддерживает linear, radial, repeating-градиенты. Есть плагин для Chrome и Firefox, пипетка прямо из браузера.

Выбор и настройка шрифтов

Цвета привлекают внимание, текст, удерживает. Шрифт влияет на читаемость и восприятие тона: строгий serif создаёт ощущение редакционного качества, чистый sans-serif, технологичности.

Проблема веб-шрифтов в том, что посетитель увидит только те, что установлены у него на компьютере, если не использовать встроенные (web fonts). Поэтому для кастомного оформления, только внешние шрифты.

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

Google Fonts, основной источник

Бесплатный каталог из 1 500+ семейств на fonts.google.com. Подключение, двумя строчками. Классический способ, через header.php темы:

1
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Или в style.css:

1
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

После импорта шрифт доступен в любом CSS-правиле:

1
body { font-family: 'Roboto', sans-serif; }
2
h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

GDPR-нюанс: Google Fonts, подгружаемые напрямую с серверов Google, передают IP-адреса посетителей. С 2022 года суды в ЕС признали это нарушением. Решение, плагин Local Google Fonts, который скачивает шрифты на ваш сервер и раздаёт локально. Альтернатива для тех, кто не хочет возиться с плагинами, статья о локальной загрузке Google Fonts на нашем блоге.

Кастомные шрифты через плагин

Если нужен фирменный шрифт, которого нет в Google Fonts, Use Any Font. Загружаете ttf, otf или woff, плагин конвертирует в woff2 и добавляет в админку. Бесплатная версия позволяет загрузить один шрифт; Pro снимает ограничение.

Ручное подключение через @font-face

Если предпочитаете код плагинам, положите файл шрифта в папку /wp-content/themes/ваша-тема/fonts/ и добавьте в style.css:

1
@font-face {
2
    font-family: 'Museo300';
3
    src: url('fonts/museo300-regular.ttf') format('truetype');
4
    font-weight: normal;
5
}

Использование:

1
#menu { font-family: 'Museo300', sans-serif; }

Форматирование даты и времени

Стандартный формат даты не всегда вписывается в дизайн. К счастью, WordPress позволяет менять его без плагинов.

Способ 1: через Customizer (без кода)

Перейдите в Appearance → Customize → General Settings. Там же меняется формат времени. Подходит для большинства классических тем.

Способ 2: через single.php (точный контроль)

Откройте Appearance → Theme Editor → single.php. Найдите функцию the_time() или the_date():

1
<?php the_time('F Y'); ?>

Символы формата:

• l, полное название дня недели (строчная L)
• F, месяц словом
• j, день месяца числом
• Y, год четырьмя цифрами
• y, год двумя цифрами

Примеры комбинаций:

('l, j F Y') → Sunday, 14 June 2026. ('j F, Y') → 14 June, 2026.

Не трогайте одинарные кавычки внутри скобок, редактируйте только символы между ними. Если в теме используется the_date() вместо the_time(), формат меняется проще: Settings → General → Date Format.

Использование изображений

Добавление картинок в WordPress, через кнопку «Добавить медиафайл» в редакторе поста. Курсор в нужное место → Add Media → выбрать изображение из медиатеки или загрузить новое.

Справа, панель настроек вложения: заголовок, alt-текст (важен для SEO и доступности), размер, выравнивание, ссылка. Для скорости сайта загружайте изображения уже сжатыми (TinyPNG или ShortPixel до загрузки). Подробнее, в нашем руководстве по медиа-библиотеке WordPress.

Добавление favicon

Фавикон, крошечный квадрат в браузерной вкладке и закладках. Маленькая деталь, которая работает на узнаваемость: когда у пользователя открыто 20 вкладок, favicon, единственное, что визуально отличает ваш сайт от остальных.

Как создать favicon

Самый надёжный сервис, RealFaviconGenerator. Загружаете квадратное изображение (хотя бы 260×260), получаете пакет иконок под все платформы: iOS, Android, Windows tiles, Safari pinned tab. Плюс готовый HTML-код для вставки.

Если нужен простой.ico размером 16×16, подойдёт любой графический редактор с сохранением в.ico (GIMP бесплатен). Или онлайн-сервис Favicon.io.

Как установить в WordPress

Самый простой способ, встроенный Site Icon. С версии WordPress 4.3 он доступен в Customizer:

Appearance → Customize → Site Identity → Site Icon. Загружаете квадратную картинку, WordPress сам нарежет нужные размеры под все платформы. Без плагинов, без FTP, без header.php.

Плагинный способ, All In One Favicon, даёт больше контроля: отдельные иконки для админки, фронтенда, разные для разных устройств. Но для 95% сайтов встроенного Site Icon достаточно.

Ручной метод (добавить в header.php):

1
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Файл favicon.ico положите в корень папки темы. Не забудьте продублировать в public_html, чтобы favicon открывался по адресу вашсайт.com/favicon.ico.

⁉️🤔 Частые вопросы

Можно ли изменить дизайн сайта без потери контента?

Да, смена темы WordPress не затрагивает посты, страницы и медиафайлы. Они хранятся в базе данных отдельно от темы. Единственное, что может «поехать», вёрстка и расположение элементов, особенно если старая тема использовала кастомные типы записей или шорткоды. Перед сменой сделайте полный бэкап (хостинг + база данных). Для безопасного тестирования используйте staging-сайт, многие хостинги (SiteGround, Kinsta, WP Engine) дают его в один клик.

Сколько шрифтов оптимально для сайта?

Два: один для заголовков, один для основного текста. Третий, моноширинный для кода, если он есть на сайте. Каждый дополнительный шрифт увеличивает время загрузки на 200-400 мс и создаёт визуальный шум. Google Fonts позволяет выбрать только нужные начертания (regular + bold = 2 файла вместо 9), а плагин Local Google Fonts дополнительно кеширует их на сервере.

Обязательно ли возиться с кодом для кастомизации?

Нет. WordPress Customizer (Appearance → Customize) перекрывает большинство задач: цвета, шрифты, логотип, favicon, фоновые изображения, CSS. Block-темы (с WP 5.9) дают Site Editor, ещё более визуальный способ без кода. Код нужен, когда требуется тонкая настройка: формат даты в single.php, кастомный @font-face, специфичный CSS для конкретного плагина.

Что делать, если после смены темы сайт сломался?

Первое: не паниковать, контент никуда не делся. Второе: если админка доступна, верните старую тему (Appearance → Themes → Activate). Если админка недоступна, зайдите по FTP в /wp-content/themes/, переименуйте папку новой темы (добавьте _disabled), и WordPress автоматически переключится на стандартную тему. После восстановления включите WP_DEBUG в wp-config.php, чтобы увидеть ошибки.

Как проверить, что favicon работает?

Откройте вашсайт.com/favicon.ico, если иконка отображается, файл на месте. В браузере favicon появляется не сразу: кешируется агрессивно. Для проверки откройте сайт в режиме инкогнито или принудительно обновите кеш (Ctrl+Shift+R). RealFaviconGenerator даёт инструмент проверки favicon по URL.

Редизайн WordPress: что делать в первую очередь

Порядок действий для кастомизации с нуля: цветовая схема → шрифты → логотип и favicon → формат даты → компоновка виджетов и меню. Именно в такой последовательности: цвета и типографика, фундамент, на который нанизывается всё остальное.

Если сайт уже работает и приносит трафик, не делайте редизайн на живом домене. Staging-копия + тестирование → перенос. Изменения, заметные поисковикам (смена HTML-структуры, заголовков, URL), делайте с пониманием: резкий редизайн без редиректов может просадить позиции.

Для тех, кто хочет углубиться в тему: руководство по пользовательским шрифтам на нашем блоге, статья о медиа-библиотеке WordPress для работы с изображениями, а также детальный разбор локальной загрузки Google Fonts с тестом GTmetrix до/после.

Начните с трёх цветов и двух шрифтов, остальное подтянется.