Настройка внешнего вида

c

Чем настройка внешнего вида отличается от обычной правки шаблона

Когда речь заходит о настройке внешнего вида сайта на WordPress, большинство статей повторяют одно и то же: «выберите тему, измените цвета, добавьте логотип». Но реальная работа с оформлением — это не про декорацию, а про производительность, доступность и единую систему стилей. В этом материале мы разберём те аспекты, которые обычно упускают новички, и покажем, на что обращают внимание специалисты при реальной кастомизации.

Главное отличие профессиональной настройки от любительской — системный подход. Вместо того чтобы менять каждый элемент через админку, вы разрабатываете правила, по которым все элементы будут выглядеть согласованно. Это экономит время при обновлении дизайна в будущем и исключает «кашу» из случайных шрифтов и отступов. Мы пройдём семь шагов, где каждый шаг — это не просто инструкция, а разбор распространённого заблуждения.

Шаг 1: Выбор темы с учётом архитектуры блоков

Первая ошибка — брать тему с витрины, не проверив её совместимость с редактором блоков (FSE). В 2026 году сайты на классических темах без поддержки блоков работают медленнее и сложнее поддаются настройке без кода. Выбирайте тему, которая помечена как «Block Editor — Full Site Editing»: это гарантия, что вы сможете менять шапку, подвал и архивы через интерфейс, а не через PHP-файлы.

Пример из практики: тема Twenty Twenty-Six из официального репозитория даёт 80% необходимых настроек через админку — цвета, шрифты, интервалы, ширину контента. Если вы берёте стороннюю тему, проверьте, поддерживает ли она блоки «Group», «Cover» и стили по умолчанию (theme.json). Без этого вы застрянете в написании сложных CSS-селекторов.

  1. Оцените дерево блоков. Откройте демо-сайт темы, нажмите F12 и посмотрите вкладку «Элементы»: сколько вложенных div’ов внутри секции? Идеально — не более трёх уровней.
  2. Проверьте theme.json. Скачайте тему, откройте файл theme.json в корне. Если там прописаны палитра цветов, набор шрифтов и размеры, работа пойдёт быстрее.
  3. Протестируйте подвал. В классической теме подвал — это отдельный template-part. В FSE-теме вы сможете менять его прямо в редакторе. Убедитесь, что нужные вам элементы (контакты, соцсети, копирайт) выносятся в блок «Site Footer» без хака.

Шаг 2: Работа с дочерней темой — не для галочки

Многие считают, что дочерняя тема нужна только будущим разработчикам, которые планируют править PHP. На деле любой, кто меняет хотя бы один CSS-стиль, должен использовать дочернюю тему. Без неё после обновления родительской темы ваши настройки слетят, и вернуть их придётся вручную, ища каждое изменение по истории браузера.

Чтобы избежать этого, создайте дочернюю тему сразу после выбора основной. Простейший способ — установить плагин Child Theme Configurator или вручную создать папку с файлами style.css и functions.php. Важно: в style.css обязательно укажите название родительской темы через комментарий Template, иначе WordPress не распознает связь.

Профессиональный нюанс: не копируйте весь CSS из родительской темы в дочернюю — это увеличит размер страницы на 30–50 КБ и затруднит поиск своих правок. Вместо этого подключайте родительскую таблицу стилей через functions.php, а в дочерней оставляйте только переопределения. Пример функции: add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } );

Шаг 3: Цветовая палитра через theme.json — меньше кода, выше стабильность

Когда вы задаёте цвета через настройщик темы (Customizer), WordPress сохраняет их в базе данных. При смене темы эти цвета теряются. Более правильный способ — прописать палитру в theme.json дочерней темы. Так вы получаете явные имена (Color Slug), которые можно использовать во всех блоках без писанины CSS.

На примере: файл theme.json содержит объект „settings.color.palette“ с массивом из 6–10 цветов. У каждого цвета обязательны поля slug (идентификатор), name (понятное название) и color (шестнадцатеричный код). После добавления палитры в редакторе блоков появляются ваши цвета — незаменимо для единого стиля. Если нужно сменить брендовый синий, вы меняете хекс в одном месте, и весь сайт обновляется автоматически.

Как не надо: указывать цвета в CSS классами .primary-color, .secondary-color — при замене оттенка придётся переписывать 20 страниц CSS. Как надо: задать 4 основных цвета (primary, secondary, background, text) + 2 акцента. Этого хватит для 90% проектов.

Шаг 4: Типографика — тонкие настройки, которые решают всё

Выбор шрифта — это не про красоту, а про читаемость и скорость. В 2026 году Google Fonts всё ещё популярны, но их загрузка добавляет 150–300 мс к загрузке. Оптимальный путь — скачать шрифт, конвертировать в WOFF2, разместить в папке дочерней темы и подключить локально через @font-face. Так вы полностью контролируете кеширование и не зависите от стороннего сервера.

Ещё один момент — иерархия заголовков. Многие новички задают одинаковый шрифт для H1, H2, H3, отличая их только размером. Профессионалы же рекомендуют для H1 использовать жирное начертание, для H2 — полужирное, для H3 — обычное, но с междустрочным интервалом 1,2. Это создаёт контраст и ускоряет сканирование текста. Проверить легко: открываем страницу, щёлкаем вкладку «Стили» — если все заголовки в редакторе выглядят монотонно, меняем font-weight.

  1. Загрузите шрифт в формате WOFF2 (не более 50 КБ для основного гарнитура).
  2. В дочерней теме создайте папку /fonts/ и положите файл.
  3. В functions.php добавьте функцию для очереди стилей, подключите шрифт через @font-face с указанием формата.
  4. В theme.json пропишите имя шрифта в „settings.typography.fontFamilies“ и slug для использования в редакторе.
  5. Проверьте контраст: заголовок H1 должен быть не менее 24px, основной текст — 16–18px, строчный интервал — 1.5.

Шаг 5: Шапка и меню — где 90% ошибок кастомизации

Стандартная ситуация: клиент просит логотип слева, меню справа, но после сохранения меню переносится на новую строку. Причина — ширина контейнера. В теме Twenty Twenty-Six контейнер шапки по умолчанию шириной 1200px, а логотип + меню суммарно занимают 1280px. Исправляется одним свойством: в дочерний CSS добавьте .wp-block-site-header { flex-wrap: nowrap; justify-content: space-between; } — но лучше через theme.json указать ширину maxWidth для блока Header.

Второй камень преткновения — мобильное меню. Многие темы скрывают горизонтальное меню на экранах меньше 768px и показывают кнопку «гамбургер». Но дефолтный гамбургер часто плохо адаптируется — кнопка маленькая, фон сливается с шапкой. Рекомендую сразу после настройки шапки переключиться на мобильный вид через инструменты разработчика и проверить: 1) размер кнопки (минимум 44×44 пикселя по правилу доступности), 2) контраст иконки с фоном (не менее 3:1).

Совет специалиста: если меню содержит 7–10 пунктов, не используйте выпадающее подменю с вложенными списками — они плохо работают на тач-устройствах. Вместо этого сделайте пункт «Ещё» как отдельный элемент, ведущий на страницу со всеми разделами.

Шаг 6: Архив записей и единичная запись — два разных интерфейса

Типичная ошибка — настроить внешний вид единичной записи (single) и не тронуть страницу архива категорий. В результате внутри статьи красивая шапка с обложкой, а на странице блога — серый список без изображений. Решение: через редактор блоков (FSE) отредактируйте два шаблона — archive.html и single.html. Для архива обязательно задайте сетку миниатюр (3–4 колонки, ширина изображения 330px, высота 220px — проверено, ломает меньше всего).

Настройка сниппетов: в шаблоне archve по умолчанию выводятся полные тексты записей — это убивает страницу по объёму. Замените блок «Post Content» на «Post Excerpt» и установите лимит в 50–60 слов. Дополнительно добавьте блок «Read More» с ссылкой на полную статью. Так вы снизите нагрузку на сервер при рендеринге архива и сделаете страницу более сканируемой.

Шаг 7: Финальная проверка производительности и кроссбраузерности

Когда внешний вид настроен, не спешите радоваться. Откройте вкладку Lighthouse в инструментах разработчика Chrome и проверьте метрику CLS (Cumulative Layout Shift). Если переключились изображения или шрифт загрузился с задержкой, CLS выше 0,1 — визуально это воспринимается как «дёрганье» элементов при загрузке. Исправляется явным указанием размеров для картинок и disable автозамены шрифта через системные запасные теги font-display: swap.

Дополнительно проверьте сайт в Firefox и Safari. В спецификации 2026 года браузеры по-разному обрабатывают CSS-функцию clamp() для резиновых шрифтов. В Chrome она работает безупречно, в Safari 16+ — с ошибками, если не указан кеш-контроль. Альтернатива — задать шрифты через calc() и фиксированные точки минимума/максимума.

Резюме эксперта: Настройка внешнего вида в WordPress — это не про «сделать красиво», а про создание предсказуемой системы, которая не разваливается при обновлении темы или плагина. Используйте theme.json, дочернюю тему, локальные шрифты и адаптивную типографику. И всегда проверяйте CLS.

Добавлено: 23.04.2026