Как изменить шапку сайта в теме WordPress

Шапка сайта в WordPress обычно меняется без полной переделки дизайна, но способ зависит от того, какая у вас тема: классическая, блочная или собранная в конструкторе. В одном случае достаточно открыть настройки темы, в другом — редактировать шаблон через Site Editor, а иногда без дочерней темы и небольшого CSS уже не обойтись.

Если задача практическая — заменить логотип, переставить меню, добавить телефон, изменить фон или собрать верхнюю часть страницы по-другому — сначала нужно понять, где именно тема хранит шапку. От этого зависит, будете ли вы работать через админку, через редактор сайта или через файлы темы.

С чего начать: определить тип темы

Самая частая ошибка — искать нужную настройку не там, где она есть. В WordPress шапка может редактироваться по-разному:

• классическая тема — шапка настраивается через Внешний вид → Настроить, меню, виджеты или отдельные опции темы;
• блочная тема — шапка собирается в Редакторе сайта из блоков;
• тема с конструктором — верхняя часть сайта может редактироваться в Elementor, WPBakery или другом плагине;
• жёстко зашитая шапка — часть элементов меняется только через шаблон темы или дополнительный CSS.

Проверить тип темы просто: если в админке есть Внешний вид → Редактор и там открываются шаблоны сайта, у вас блочная тема. Если вместо этого есть только Внешний вид → Настроить, скорее всего, тема классическая. Если шапка сделана в конструкторе, обычно это видно по отдельным шаблонам хедера в интерфейсе плагина.

Как поменять шапку в классической теме WordPress

В классических темах шапка чаще всего настраивается без кода. Начните с базовых элементов: логотипа, меню, контактных данных и фонового оформления.

Заменить логотип и иконку сайта

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

• логотип;
• иконку сайта (favicon);
• иногда — отдельный логотип для мобильной версии или тёмной темы.

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

Настроить меню в шапке

Если в шапке не хватает навигации или нужно поменять порядок пунктов, идите в Внешний вид → Меню. Там можно:

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

У некоторых тем есть два меню: основное и дополнительное. Например, в верхней полосе могут стоять контакты и служебные ссылки, а ниже — основная навигация. Если тема поддерживает несколько областей меню, не путайте их: назначение не в ту область часто выглядит как «меню пропало», хотя оно просто отображается не там.

Добавить телефон, адрес или кнопку

Контакты в шапке обычно добавляются одним из трёх способов:

• через настройки темы;
• через виджет в верхней области;
• через HTML-блок или текстовый блок, если тема это поддерживает.

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

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

Изменить фон и отступы шапки

Фон шапки, цвет текста, высота и отступы обычно меняются в настройках оформления. Если тема позволяет, используйте встроенные параметры — это безопаснее, чем править CSS. Когда встроенных настроек нет, поможет дополнительный CSS.

Пример нужен только для точечной правки, когда тема не даёт нужного контроля. Допустим, нужно сделать шапку светлее и уменьшить вертикальные отступы:

.site-header {
  background: #ffffff;
  padding-top: 12px;
  padding-bottom: 12px;
}

Классы у разных тем отличаются. Перед применением такого кода откройте инспектор браузера или посмотрите исходный HTML шапки, иначе правило просто не сработает.

Как редактировать шапку в блочной теме

В блочных темах шапка — это не отдельная «магическая» зона, а часть шаблона, собранная из блоков. Здесь логика другая: вы редактируете не набор скрытых параметров, а сам шаблон хедера.

Откройте Внешний вид → Редактор, затем найдите шаблон или шаблонную часть, связанную с шапкой. Обычно это Header, Шапка или Template Part. Дальше можно:

• переставить блоки местами;
• добавить блок Логотип сайта;
• вставить блок Навигация;
• добавить кнопку, иконки соцсетей, поиск или текстовый блок;
• изменить фон, ширину, выравнивание и отступы.

Плюс блочной темы в том, что вы видите структуру шапки сразу. Минус — если тема собрана неаккуратно, можно случайно сломать мобильную версию или сделать шапку слишком высокой. Поэтому после каждого заметного изменения проверяйте, как хедер выглядит на телефоне.

Когда нужен паттерн, а когда ручная сборка

Если тема предлагает готовый паттерн шапки, это удобная отправная точка, но не финальное решение. Паттерн — это заготовка структуры, а не готовый сайт. После вставки шаблона всё равно придётся подставить свой логотип, меню, контакты и, возможно, подправить отступы.

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

Если шапка сделана в конструкторе

Некоторые темы используют Elementor, WPBakery или другой page builder для верхней части сайта. В этом случае шапка редактируется не в стандартном редакторе WordPress, а в шаблонах конструктора.

Здесь важно понять два момента:

• шапка может быть глобальной и применяться ко всему сайту;
• отдельные страницы могут иметь собственный шаблон, который перекрывает общую шапку.

Если вы поменяли хедер, а на части страниц он не изменился, проверьте, не назначен ли там другой шаблон. Это типичная ситуация на сайтах, где дизайн собирался поэтапно разными инструментами.

Что делать, если нужной настройки в теме нет

Если тема не позволяет изменить шапку через интерфейс, есть три рабочих варианта.

Использовать дочернюю тему

Это правильный путь, если нужно менять разметку шапки, а не только цвета и отступы. Дочерняя тема защищает ваши правки от обновления основной темы. Без неё любое обновление может затереть изменения в файлах.

Через дочернюю тему обычно правят:

• header.php;
• части шаблона, если тема их использует;
• дополнительные стили и условную логику вывода элементов.

Если вы не уверены в PHP и структуре темы, лучше не лезть в файлы на рабочем сайте без резервной копии.

Добавить CSS для точечной правки

Дополнительный CSS подходит, когда нужно изменить внешний вид без перестройки структуры: цвет, фон, высоту, выравнивание, скрытие лишнего элемента на мобильных устройствах. Это безопаснее, чем редактировать шаблон, но не решает задачу, если в шапке вообще нет нужного блока.

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

Поменять тему, если шапка слишком ограничена

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

Если вы подбираете тему под сайт, а не просто чините текущую, смотрите не только на внешний вид демо, но и на то, как устроены шапка, меню, мобильная версия и глобальные шаблоны. У WPShop, например, есть темы, где структура сайта и верхняя часть уже рассчитаны на практическую настройку без лишней ручной сборки: Reboot и Root — это не универсальный ответ для всех, но как ориентир по удобству настройки их имеет смысл посмотреть, если вам важна гибкость хедера.

Как проверить, что шапка настроена правильно

После изменений не ограничивайтесь просмотром главной страницы в браузере. Проверьте несколько вещей:

• главная страница — логотип, меню и контакты на месте;
• внутренние страницы — шапка не отличается от главной, если это не задумано;
• мобильная версия — меню открывается, элементы не налезают друг на друга;
• разные браузеры — шапка не «прыгает» из-за шрифтов или CSS;
• после обновления кэша — изменения действительно сохранились, а не скрыты старой версией страницы.

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

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

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

Осторожнее нужно быть, если вы:

• редактируете файлы темы напрямую;
• меняете разметку шапки в PHP;
• скрываете элементы только через CSS, не понимая, как это повлияет на мобильную версию;
• используете одновременно тему, конструктор и несколько плагинов, которые могут вмешиваться в верхнюю часть сайта.

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

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