Меню и виджеты — это те части сайта, которые владельцу приходится менять чаще всего. Появилась новая услуга — её нужно добавить в навигацию. Сменился адрес офиса — поправить подвал. Запустили акцию — вывести баннер в боковой колонке. Платить разработчику за каждую такую мелочь не нужно: WordPress позволяет делать это прямо в админке. Ниже — практическое руководство, которое мы даём клиентам после сдачи сайта, дополненное ответами на вопросы, которые нам задают чаще всего.
Где находятся настройки
В зависимости от темы настройки навигации и боковых блоков живут в разных местах, и это главный источник путаницы.
- Классические темы — раздел «Внешний вид» → «Меню» и «Внешний вид» → «Виджеты». Здесь же меню и виджеты доступны в настройщике с предпросмотром.
- Блочные темы с полным редактированием сайта — раздела «Меню» нет. Навигация редактируется в «Внешний вид» → «Редактор» через блок «Навигация», а вместо виджетов используются блоки в шаблонах и шаблонных частях: шапке, подвале, боковой колонке.
- Темы с визуальным конструктором — шапка и подвал часто собираются в самом конструкторе, и стандартные меню лишь подставляются в его элементы.
Если вы не нашли привычный пункт «Меню», скорее всего, у вас блочная тема. Это не ошибка, а другой подход к оформлению.
Создаём меню в классической теме
- Откройте «Внешний вид» → «Меню» и нажмите «Создать новое меню». Дайте понятное название: «Главное», «Подвал — услуги».
- В левой колонке выберите, что добавить: страницы, записи, рубрики, товары или произвольные ссылки. Отметьте нужные и нажмите «Добавить в меню».
- Перетаскивайте пункты мышью, чтобы изменить порядок. Если сдвинуть пункт немного вправо, он станет вложенным — появится выпадающее подменю.
- Раскройте пункт, чтобы изменить подпись. Текст в меню может отличаться от заголовка страницы: «Цены» вместо «Прайс-лист на услуги студии».
- Внизу отметьте область отображения — «Основное меню», «Меню в подвале» и так далее — и сохраните.
Если в настройках экрана, которые открываются в правом верхнем углу, включить дополнительные поля, появятся параметры «Открывать в новой вкладке», «CSS-класс» и «Атрибут title». Обычному пользователю они нужны редко, но класс иногда используется темой, например, чтобы выделить пункт кнопкой.
Области меню: почему пункт «не появляется»
Меню в WordPress и место его вывода — разные сущности. Вы можете создать хоть десять меню, но на сайте появятся только те, что назначены в области, предусмотренные темой. Классическая жалоба: «Я всё добавил, а на сайте ничего не изменилось». В девяти случаях из десяти отредактировано не то меню, которое назначено в шапке.
Проверить просто: во вкладке «Управление областями» видно, какое меню куда выведено. Обратите внимание и на мобильную версию — многие темы используют для неё отдельную область, и если её не назначить, на телефоне будет показано другое меню или вообще ничего.
Совет от студии: прежде чем удалять «старое» меню, проверьте, не используется ли оно в подвале, мобильной версии или в виджете «Меню навигации». Удалённое меню не восстанавливается, а пункты придётся собирать заново.
Как сделать меню удобным
Технически собрать меню легко, сложнее сделать его понятным посетителю. Несколько принципов, которых мы придерживаемся:
- в верхнем уровне — не больше семи пунктов, иначе меню переносится на вторую строку или превращается в «гамбургер» уже на ноутбуке;
- подписи короткие и привычные: «Услуги», «Цены», «Контакты», а не креативные метафоры;
- вложенность — максимум два уровня; трёхуровневые выпадающие списки неудобны на сенсорных экранах;
- пункт-родитель, у которого есть подменю, тоже должен вести на осмысленную страницу, а не на решётку-заглушку;
- «Контакты» — последним пунктом справа, там их ищут по привычке.
Меню влияет и на продвижение: ссылки из навигации есть на каждой странице, поисковые системы считают их важными. Поэтому в главное меню стоит выводить ключевые разделы, а не случайные страницы. Если структура сайта давно «расползлась», это задача уже для специалиста по SEO-продвижению.
Виджеты: что это и где они выводятся
Виджет — это блок с определённой функцией: текст, список свежих записей, рубрики, поиск, изображение, меню, произвольный HTML. Виджеты размещаются в областях, которые определяет тема: боковая колонка, подвал в несколько колонок, зона над контентом. Набор областей у каждой темы свой.
В современных версиях WordPress экран виджетов работает на блоках. Это значит, что в боковую колонку можно добавить любой блок редактора: заголовок, абзац, кнопку, колонки, изображение. Старые виджеты тоже доступны через блок «Устаревший виджет». Если тема или плагин возвращают классический экран, интерфейс будет выглядеть как список перетаскиваемых плашек — принцип тот же.
Типичные задачи с виджетами
| Задача | Как сделать |
|---|---|
| Контакты в подвале | Блок «Абзац» или «Список» в нужной колонке подвала |
| Баннер акции в сайдбаре | Блок «Изображение» со ссылкой на страницу акции |
| Список рубрик блога | Блок «Рубрики», при желании с количеством записей |
| Второе меню в подвале | Создать меню, затем добавить блок «Навигация» или виджет «Меню навигации» |
| Убрать лишний блок | Выделить его и удалить через меню блока |
Разные виджеты на разных страницах
Стандартно область виджетов одинакова на всех страницах, где она выводится. Но часто хочется иного: в блоге показывать свежие статьи, а на страницах услуг — форму заявки. Варианты решения:
- некоторые темы предлагают разные боковые колонки для страниц, записей и магазина — проверьте области в настройках;
- плагины условной видимости позволяют задать правило для каждого виджета: показывать только в такой-то рубрике или только на главной;
- в блочной теме можно создать отдельный шаблон для нужного типа страниц со своей боковой колонкой.
Не увлекайтесь: десяток виджетов в сайдбаре отвлекает от основного контента и замедляет загрузку, особенно если это ленты из внешних сервисов и счётчики.
Чего лучше не делать самостоятельно
Большинство операций с меню и виджетами безопасны, но есть исключения.
Произвольный HTML и скрипты
Блок «Произвольный HTML» позволяет вставить любой код, включая скрипты сторонних сервисов. Код, скопированный с сомнительного сайта, может нести вредоносную нагрузку, а ошибка в разметке ломает вёрстку всей страницы. Вставляйте только код из доверенных источников.
Изменение областей в коде темы
Если вам нужна новая область меню или виджетов, которой нет в теме, её придётся регистрировать в коде. Делать это нужно в дочерней теме, иначе правка пропадёт при обновлении.
Массовая перестройка меню перед запуском рекламы
Перед запуском кампаний проверьте, что все пункты ведут на существующие страницы. Битые ссылки в меню — это потерянные посетители и сигнал поисковикам о небрежности.
Удаление страниц, которые стоят в меню
Если удалить или перевести в черновик страницу, которая была добавлена в меню, пункт автоматически исчезнет из навигации. Это удобно, но иногда неожиданно: снятая с публикации на пару дней страница акции «выпадет» из меню, и после возвращения её придётся добавлять заново. А вот произвольные ссылки WordPress не отслеживает — если адрес страницы изменился, такой пункт продолжит вести на несуществующий адрес. Поэтому для внутренних страниц всегда добавляйте их через список страниц, а не вручную вводом адреса.
После любых крупных изменений откройте сайт в режиме инкогнито, на компьютере и телефоне, и пройдитесь по всем пунктам меню. Это занимает пару минут и избавляет от неловких ситуаций, когда клиент первым замечает, что раздел «Цены» ведёт на страницу ошибки.
Вывод
Меню и виджеты в WordPress задуманы так, чтобы владелец сайта управлял ими сам. Создайте меню, назначьте его в нужную область, держите навигацию короткой и понятной, а в виджетах выводите только то, что действительно помогает посетителю. Если тема блочная — ищите навигацию в редакторе сайта. А когда понадобится то, чего тема не умеет, — новые области, особые меню для мобильных, условный вывод блоков — обращайтесь в нашу техническую поддержку: сделаем аккуратно и объясним, как пользоваться результатом.
