Как создать шапку в WordPress без плагина
Шапка — единственная часть сайта, которую видит каждый посетитель, и обычно тема прячет её за экраном настроек с девятью параметрами. В Canvas шапка — это запись, которую вы собираете из блоков в редакторе, поэтому это руководство описывает сборку, а не обзор флажков.
Шаг 1: Что такое шапка в Canvas
Шапка — это запись, которая отображается в админке WordPress, как страница, и редактируется в том же блочном редакторе. Именно это решение позволяет отказаться от плагина для шапки.
Другие темы создают шапку иначе. Blocksy и Astra хранят конструкторы шапки в Customizer, панели настроек рядом с сайтом, отдельно от редактора, в котором вы пишете страницы. Наше сравнение с 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 выводит её над строкой шапки. Благодаря отдельной записи праздничное сообщение меняется на всём сайте, и открывать шапку для этого не нужно.
Источники
Там, где это руководство описывает то, что находится за пределами самой Canvas, ниже приведены официальные страницы, которые это документируют.
- Экран меню в разделе «Внешний вид»wordpress.org · Где создаются меню WordPress и назначаются на места, которые предлагает тема
- Понимание критерия успеха 2.5.8: Размер цели (минимальный)w3.org · Почему области нажатия должны быть не меньше 24 × 24 CSS-пикселя
Что делать дальше
Два руководства о том, почему шапка определяет более общий вопрос, и о самом конструкторе шапки.
Частые вопросы
Полный FAQ ответит на остальные вопросы, а документация подробно описывает каждую настройку.
Нужна ли отдельная шапка для мобильных устройств?
Обычно нет: одна запись шапки Canvas сама адаптируется под телефон. Зоны меняют порядок по брейкпоинтам, а каждую зону можно ограничить определённой категорией устройств, поэтому одна запись может расположить логотип по центру на телефоне, убрать контактные данные и спрятать меню за переключателем. Создавайте вторую запись, только если вам действительно нужен другой дизайн, а не чтобы исправить верстку.
Может ли у одной страницы быть другая шапка?
Да, у любой страницы Canvas может быть собственная шапка. У шапок, верхних панелей, заголовков страниц и подвалов есть общий вариант по умолчанию для всего сайта и переопределение для отдельной страницы, поэтому лендинг кампании может показывать прозрачную шапку поверх фотографии, а все остальные страницы сохраняют стандартную.
Это область виджетов или меню?
Шапка Canvas не является ни тем, ни другим: это запись, которую вы редактируете в редакторе блоков, как и любую страницу, а логотип, навигация, поиск, корзина и кнопки внутри неё являются блоками со своими панелями настроек. Ваши меню WordPress остаются обычными меню WordPress: блок Header Navigation выводит одно из них.
Что будет с шапкой, когда истечёт лицензия?
Ваш сайт продолжает отображаться так же, как сегодня. Приостанавливается сервис: обновления, импорт демо, CanvasAI Engine и редактирование премиум-блоков остаются недоступными до продления. Если проверка лицензии не может связаться с нашими серверами, действует льготный период 14 дней.
Создайте свой следующий сайт с Canvas
Новичок, фрилансер или агентство: вы получаете одни и те же блоки и одни и те же демо. Начните с одного сайта и создавайте столько, сколько нужно, на одной лицензии.