# Как создать шапку в WordPress без плагина URL: https://canvaswp.com/ru/guides/build-a-wordpress-header-without-a-plugin/ Updated: 2026-11-03 Руководство Шапка — единственная часть сайта, которую видит каждый посетитель, и обычно тема прячет её за экраном настроек с девятью параметрами. В Canvas шапка — это запись, которую вы собираете из блоков в редакторе, поэтому это руководство описывает сборку, а не обзор флажков. Опубликовано 5 сентября 2026 г.Обновлено 3 ноября 2026 г.Автор: команда Canvas в SemiColonWeb ## Шаг 1: Что такое шапка в Canvas Шапка — это запись, которая отображается в админке WordPress, как страница, и редактируется в том же блочном редакторе. Именно это решение позволяет отказаться от плагина для шапки. Другие темы создают шапку иначе. Blocksy и Astra хранят конструкторы шапки в Customizer, панели настроек рядом с сайтом, отдельно от редактора, в котором вы пишете страницы. [Наше сравнение с Blocksy](https://canvaswp.com/ru/compare/blocksy/) показывает оба подхода рядом. ### Вложенность Запись шапки содержит **Header Root**. Корень содержит **Header Container**, который определяет, ограничена ли шапка по ширине, занимает ли она всю ширину или одним образом выглядит на одной точке перелома и другим во всех остальных случаях. Контейнер содержит **Header Zones**, а зона — это ячейка в строке шапки. Логотип размещается в одной зоне, навигация в следующей, а значок поиска и корзина в последней. Всего в семействе шапки насчитывается 22 блока, и на типичном сайте вы используете четыре или пять из них. Остальные пригодятся, когда понадобится поиск по магазину, ссылка на языковую версию или блок с часами работы в углу. Это не отдельный редактор. Если вы редактируете страницы в WordPress, вы можете редактировать и шапку, а отмена действий, настройки блоков и сочетания клавиш работают так же. ## Шаг 2: Создайте запись шапки Откройте список «Шапки» в меню Canvas и добавьте новую запись. Перед вами два честных варианта начала работы. ### Начните с паттерна Вставьте шаблон шапки, и вы получите обычные блоки, уже расположенные нужным образом; их можно переставлять, переименовывать или удалять. Шапки — самая большая категория шаблонов в продукте из 183 шаблонов всего, поэтому обычно найдётся что-то близкое к нужной форме. Это самый быстрый путь, и его стоит выбрать для первой сборки. ### Начните с демо Если вы импортировали один из 88 демо-сайтов, его шапка уже есть на вашем сайте как запись. Откройте её и внесите изменения или дублируйте её и поэкспериментируйте с копией. Редактирование рабочей шапки быстрее учит структуре, чем пустой холст. Дайте записи название, которое говорит о её назначении, например «Основная шапка» или «Шапка лендинга». Через месяц у вас будет три таких записи, и отличить их друг от друга можно будет только по названиям. ## Шага 3: Разметьте зоны Зоны отвечают за разметку, поэтому вам почти не придётся бороться с классами выравнивания. - **Вынесите зону к краю.** Левая зона для логотипа, центральная для меню и правая для действий — такое расположение чаще всего выбирают большинство сайтов. - **Группируйте связанные элементы.** Значок поиска, корзина и кнопка в одной зоне остаются одной группой и располагаются с общим интервалом. - **Меняйте порядок для каждого брейкпоинта.** Зона, которая на десктопе стоит третьей, может на телефоне стоять первой, без второй записи шапки. - **Ограничьте зону классом устройств.** Укажите зоне пропускать устройства, на которых для неё нет места, и тогда ничего не придётся скрывать потом с помощью CSS. - **Добавьте собственные классы** к зоне, если хотите обращаться к ней из своей таблицы стилей. Сначала соберите расположение для десктопа и не трогайте его, пока не добавлены все части. Решения по раскладке гораздо проще принимать, когда в строке уже стоит реальный контент. **Шапка в редакторе.** Зоны содержат части; каждая часть является блоком со своей панелью настроек. ## Шаг 4: Добавьте элементы Теперь заполните зоны. Каждая из них — блок, и у каждого есть панель настроек с параметрами, которые понимает именно этот блок. - **Header Logo.** Ваш логотип в отдельных файлах для закреплённой шапки и для тёмного состояния, поэтому прозрачная шапка поверх тёмной фотографии не требует обходных решений. - **Header Navigation.** Главное меню с выпадающими списками и панелями мега-меню. Оно выводит меню WordPress, поэтому само меню по-прежнему настраивается там, где вы привыкли. - **Header Search.** Иконка, которая открывает поле, или поле, которое всегда открыто. Выбирайте то, что лучше подходит дизайну. - **Header Button.** Призыв к действию с обычными настройками размера, стиля и ссылки. Одна убеждает, три только мешают. - **Header Cart.** Корзина WooCommerce с количеством товаров и выпадающей сводкой для магазинов. - **Header Icon Link, Header Social и Header Info.** Телефон, ряд ссылок на профили в соцсетях, небольшой блок контактных данных, адрес или часы работы. ### Мега-меню, когда обычного списка недостаточно Мега-меню — это отдельная запись, которая создаётся из блоков и выводится блоком Мега-меню, поэтому пункт меню открывает панель на всю ширину с колонками, изображениями и кнопками. Mega Menu Column удерживает панель в сетке. Используйте его, когда у категории действительно есть структура, а не чтобы сделать небольшой сайт перегруженным. ## Шаг 5: Закреплённая, прозрачная шапка и пресеты макетов Поведение задают пресеты: это наборы настроек макета, которые вы применяете в один клик, а затем подстраиваете. Выберите нужное поведение и при желании измените любые настройки после этого. - **Прозрачный.** Без фона, поэтому всё, что находится за шапкой, будет видно сквозь неё. Сочетайте с тёмным или светлым вариантом логотипа, чтобы надпись оставалась разборчивой. - **Полупрозрачность.** Фон с просвечиванием, который сохраняет видимость изображения за ним и читаемость текста. Обычно это надёжнее, чем насыщенная деталями фотография. - **Плавающая,** а **плавающая полупрозрачная** или **плавающая маленькая**, при которой шапка находится внутри страницы с отступами, не касаясь краёв окна. - **Во всю ширину, с закреплением.** Растягивается на всю ширину окна и остаётся на месте при прокрутке страницы. - **Закрепление при прокрутке вверх.** Шапка уходит с верхней части экрана, когда посетитель прокручивает страницу вниз, и возвращается, когда он прокручивает её вверх. Так длинные страницы получают больше места ### Общие настройки сайта, на которых они держатся Параметры шапки — самый большой раздел в «Настройках темы»: 94 из 533 полей. Они хранят то, что не должна содержать ни одна отдельная запись: шапку по умолчанию, поведение фиксированной шапки, высоту, отступы и брейкпоинт для мобильных устройств. Импорт демо заполняет их все, а вы меняете только те, которые важны. **Настройки темы, шапка.** Общие для всего сайта значения по умолчанию, на которых основана каждая запись шапки. ## Шаг 6: Шапка для телефона Большая часть трафика приходит с телефона, поэтому проверьте это в первую очередь. Хорошая новость: это та же запись. - **Меняйте порядок, а не перестраивайте.** Переместите логотип в центр, переключатель меню поставьте слева, кнопку звонка справа: всё через порядок зон. - **Уберите то, что не помещается.** Показывайте контактные данные и ряд с соцсетями только на больших экранах. Втискивать их на телефон никому не поможет. - **Сделайте зоны нажатия крупными.** Кнопка меню и значок телефона чаще всего нажимаются на ходу. - **Задайте брейкпоинт осознанно.** Ширина, при которой меню сворачивается, задаётся в настройках, поэтому длинное меню может свернуться раньше короткого. - **Рассмотрите боковую панель** для мобильного меню. Боковая панель представляет собой запись, которая выезжает от края экрана и вмещает полноценное меню, поле поиска и кнопку. Проверьте в редакторе перед публикацией. Canvas выводит шапку в области редактирования тем же кодом, что и для посетителя, поэтому версию для телефона вы видите прямо в процессе сборки. ## Шаг 7: Назначьте для всего сайта или для отдельной страницы Запись ничего не делает, пока на неё ничто не ссылается. Есть два уровня, и работают они одинаково для любого элемента оформления сайта. ### Значение по умолчанию для всего сайта Задайте шапку по умолчанию в Настройках темы, и каждая страница будет её использовать. Сделайте так же для верхней полосы, оформления заголовка страницы и подвала. Именно эта настройка делает так, что новая страница выглядит правильно сразу после публикации. ### Переопределение для отдельной страницы Любая отдельная страница может переопределить любой из этих параметров в своих настройках. Рекламная посадочная страница получает прозрачную шапку без верхней панели, а страница контактов сохраняет стандартную. Ничего не дублируется и ничего не нужно запоминать потом, потому что переопределение хранится на той странице, которую оно меняет. ### Верхние панели Верхняя панель хранится как отдельная запись со своими блоками: номер телефона, часы работы, переключатель языка, объявление. Блок Header Topbar выводит её над строкой шапки. Благодаря отдельной записи праздничное сообщение меняется на всём сайте, и открывать шапку для этого не нужно. ## Шаг 8: То же самое с подвалом Подвал строится по той же системе, только для другой части страницы, поэтому всё из последних семи шагов переносится на него. ### Две записи, а не одна Запись подвала хранит колонки, а отдельная запись Copyrights содержит тонкую полосу под ними. Благодаря такому разделению юридическая строка или год меняются по всему сайту, не затрагивая расположенный выше дизайн. ### Блоки Footer About для описания компании, Footer Contacts для адреса и номера телефона, Footer Instagram для ленты, Footer Widget Area для любого содержимого виджетов, Widget Links для аккуратной колонки ссылок и Copyrights для нижней полосы. Шаблоны подвала дают готовую схему расположения, а за подвалом стоят собственные настройки для всего сайта. ### Что разместить в шапке В подвале люди ищут подтверждения и адрес. Контакты, часы работы, юридические страницы, одна строка о том, кто вы, и ссылки, которым не нашлось места в шапке. Назначьте подвал глобально, переопределите его на страницах, где нужно что-то более сдержанное, и с общими элементами сайта в проекте будет покончено. [Каждый блок и параметр конструктора](https://canvaswp.com/ru/header-builder/) ## Источники Там, где это руководство описывает то, что находится за пределами самой Canvas, ниже приведены официальные страницы, которые это документируют. - [Экран меню в разделе «Внешний вид»](https://wordpress.org/documentation/article/appearance-menus-screen/) wordpress.org · Где создаются меню WordPress и назначаются на места, которые предлагает тема - [Понимание критерия успеха 2.5.8: Размер цели (минимальный)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) w3.org · Почему области нажатия должны быть не меньше 24 × 24 CSS-пикселя Что делать дальше ## Что делать дальше Два руководства о том, почему шапка определяет более общий вопрос, и о самом конструкторе шапки. [Руководство **Блочная тема или конструктор страниц** Почему шапка — задача, которая обычно решает весь вопрос.](https://canvaswp.com/ru/guides/block-theme-vs-page-builder/) [Руководство **Импорт демо-сайта WordPress** Самый быстрый способ изнутри увидеть готовый сайт, собранный из блоков.](https://canvaswp.com/ru/guides/import-a-wordpress-demo-website/) [Продукт **Конструктор шапки** Зоны, ряды и шапки для отдельных страниц с экранами, которые их показывают.](https://canvaswp.com/ru/header-builder/) Вопросы ## Частые вопросы [Полный FAQ](https://canvaswp.com/ru/faq/) ответит на остальные вопросы, а [документация](https://docs.canvaswp.com/) подробно описывает каждую настройку. **Нужна ли отдельная шапка для мобильных устройств?** Обычно нет: одна запись шапки Canvas сама адаптируется под телефон. Зоны меняют порядок по брейкпоинтам, а каждую зону можно ограничить определённой категорией устройств, поэтому одна запись может расположить логотип по центру на телефоне, убрать контактные данные и спрятать меню за переключателем. Создавайте вторую запись, только если вам действительно нужен другой дизайн, а не чтобы исправить верстку. **Может ли у одной страницы быть другая шапка?** Да, у любой страницы Canvas может быть собственная шапка. У шапок, верхних панелей, заголовков страниц и подвалов есть общий вариант по умолчанию для всего сайта и переопределение для отдельной страницы, поэтому лендинг кампании может показывать прозрачную шапку поверх фотографии, а все остальные страницы сохраняют стандартную. **Это область виджетов или меню?** Шапка Canvas не является ни тем, ни другим: это запись, которую вы редактируете в редакторе блоков, как и любую страницу, а логотип, навигация, поиск, корзина и кнопки внутри неё являются блоками со своими панелями настроек. Ваши меню WordPress остаются обычными меню WordPress: блок Header Navigation выводит одно из них. **Что будет с шапкой, когда истечёт лицензия?** Ваш сайт продолжает отображаться так же, как сегодня. Приостанавливается сервис: обновления, импорт демо, CanvasAI Engine и редактирование премиум-блоков остаются недоступными до продления. Если проверка лицензии не может связаться с нашими серверами, действует льготный период 14 дней.