После создания меню и добавления в него ссылок может возникнуть желание изменить его внешний вид. В этом руководстве рассмотрены типичные изменения дизайна меню.
Темы с редактором сайта позволяют полностью настроить дизайн меню через раздел Редактор в пункте Внешний вид в консоли. В классических темах возможности оформления меню ограничены и доступны через конфигуратор в разделе Внешний вид в консоли.
Чтобы определить, какой раздел этого руководства вам подходит, откройте консоль WordPress.com и посмотрите на пункт Внешний вид в левом меню. Если там есть пункт Редактор, воспользуйтесь разделом Редактор сайта данного руководства. В противном случае следуйте инструкциям для конфигуратора.
Если в теме используется редактор сайта (то есть в консоли есть раздел Внешний вид → Редактор), дизайном меню можно управлять в настройках блока «Навигация», выполнив следующие действия:
- В консоли сайта перейдите в раздел Внешний вид → Редактор.
- Нажмите Шаблоны и выберите шаблон, содержащий меню, например «Главная» или «Титульная страница».
- Откройте Режим списка в верхнем левом углу экрана (значок, состоящий из трёх горизонтальных линий, одна над другой).
- В Режиме списка выберите блок «Навигация».
- Проверьте настройки блока «Навигация» в правой части экрана.
- Настройте стили блока «Навигация» с помощью значка настроек или значка стилей.
- Нажмите кнопку Сохранить, чтобы сохранить изменения.
Подробнее о каждой настройке читайте в нашем руководстве по настройкам блока «Навигация», в том числе:
- Стили блока «Навигация» — цвет, оформление и размеры.
- Настройки разметки блока «Навигация» — выравнивание, ориентация и отображение меню.
В этом видео показано, как выбрать блок «Навигация» и изменить его настройки и стили. Эта возможность доступна в наших полностью настраиваемых темах с редактором сайта. Замедлить или ускорить воспроизведение видео можно с помощью элементов управления в правом нижнем углу после нажатия кнопки воспроизведения.
Этот раздел относится к сайтам, созданным с помощью ИИ-конструктора сайтов (все платные тарифные планы), или к сайтам, на которых разрешён Агент WordPress (все платные тарифные планы). Откройте Агент WordPress, нажав на значок ИИ (четырёхконечная звезда) в нижней части экрана.
Агент WordPress может напрямую вносить изменения во внешний вид и поведение меню. Вот примеры запросов, которые можно ему отправить:
- «Измени цвет моего навигационного меню в соответствии с фирменным стилем моего бренда.»
- «Сделай так, чтобы выпадающие меню открывались по клику, а не при наведении.»
- «Отображай меню в виде «гамбургера» на экранах любого размера.»
- «Добавь CSS-класс «featured-link» элементу меню «Контакты».»
Расположение меню можно изменить во всех темах с редактором сайта. Такие темы используют Редактор в разделе Внешний вид, предоставляя полный контроль над разметкой, включая расположение меню на сайте.
Хотя расположение меню в темах с редактором сайта полностью настраивается, имеет смысл начать с выбора темы, в которой меню уже отображается в подходящей позиции. Узнайте больше о замене тем.
Если вы уже выбрали тему с редактором сайта и хотите изменить расположение меню, есть несколько вариантов:
- Узнайте, как выбрать и переместить блок «Навигация», или перейдите к обучающему видео.
- Добавьте новое меню в шаблон.
- Добавьте навигацию на отдельную страницу или запись с помощью блока «Список страниц».
- Добавьте навигацию внутри страницы или записи с помощью блока «Оглавление».
Если ваша тема не использует Редактор в разделе Внешний вид в консоли, обратите внимание на наши полностью настраиваемые темы с редактором сайта.
На больших экранах меню обычно отображается как строка текстовых ссылок. На экранах меньшего размера (планшетах и мобильных устройствах) места может не хватать, чтобы показать все текстовые ссылки так, чтобы посетителям с мобильных устройств было удобно нажимать их.
Вместо этого элементы меню обычно скрываются под кнопкой меню, которую называют «наложение» или «гамбургер» (так как три горизонтальные линии напоминают гамбургер).
В настройках блока «Навигация» в редакторе сайта можно настроить отображение меню с наложением. Чтобы настроить отображение меню с наложением, выполните следующие действия:
- В консоли сайта перейдите в раздел Внешний вид → Редактор.
- Выберите Шаблоны и шаблон, содержащий меню, например «Главная» или «Титульная страница».
- Откройте Режим списка в верхнем левом углу экрана (это значок с тремя горизонтальными линиями, расположенными друг над другом).
- В Режиме списка выберите блок «Навигация».
- Проверьте настройки блока «Навигация» в правой части экрана.
- Нажмите значок настроек (значок шестерёнки).
- В разделе Отображение выберите настройки меню с наложением:
- Мобильное: настройка по умолчанию. Меню с наложением будет отображаться только на экранах мобильных устройств.
- Выкл.: вообще не отображать меню с наложением.
- Всегда: показывать меню с наложением постоянно, независимо от размера экрана.
- С помощью шаблона наложения можно настроить внешний вид полноэкранного наложения, которое появляется на мобильных устройствах. Ознакомьтесь с нашим руководством по настройке наложения навигации.
- Нажмите кнопку «Сохранить», чтобы сохранить изменения.
Посетители сайтов привыкли видеть значок или меню «гамбургер» на мобильных устройствах. Если отображать меню для настольных компьютеров (то есть отключить меню с наложением), посетителям может быть сложно пользоваться навигацией по сайту на мобильных устройствах.
Ознакомьтесь с руководством по блоку «Навигация», чтобы узнать обо всех возможностях этого блока.
Классические темы и сторонние темы могут использовать собственные настройки по умолчанию для отображения меню на мобильных устройствах. Обратитесь к документации выбранной темы, чтобы узнать подробнее.
Можно настроить, как будет открываться выпадающее меню: при наведении на элемент меню, при нажатии или с постоянным отображением.
Чтобы настроить видимость подменю, выполните следующие действия:
- В консоли сайта перейдите в раздел Внешний вид → Редактор.
- Выберите Шаблоны и шаблон, содержащий меню, например «Главная» или «Титульная страница».
- Откройте Режим списка в верхнем левом углу экрана.
- Выберите блок «Навигация».
- На боковой панели настроек блока нажмите значок Настройки (значок шестерёнки).
- В разделе Отображение найдите настройку «Видимость подменю» и выберите одну из следующих опций:
- Наведение: выпадающее меню открывается при наведении на родительский элемент меню. При желании можно отключить этот параметр, чтобы рядом с меню отображалась стрелка.
- Нажатие: выпадающее меню открывается при нажатии на родительский элемент меню.
- Нажмите кнопку Сохранить, чтобы сохранить изменения.
Этот раздел руководства относится к сайтам с тарифными планами WordPress.com Starter, Explorer, Creator и Entrepreneur. Для бесплатных сайтов обновите тарифный план, чтобы получить доступ к этой возможности.
Классы CSS — это расширенное свойство меню, с помощью которого можно применить класс CSS к отдельным элементам меню.
Чтобы определить, какой раздел этого руководства использовать, откройте консоль WordPress.com и проверьте раздел Внешний вид слева. Если там есть пункт Редактор, воспользуйтесь разделом Темы блоков этого руководства. В противном случае следуйте инструкциям для Классических тем.
Чтобы добавить класс CSS в редакторе сайта, выполните следующие действия:
- В консоли сайта перейдите в раздел Внешний вид → Редактор.
- Выберите Шаблоны и шаблон, содержащий меню, например «Главная» или «Титульная страница».
- Откройте Режим списка в верхнем левом углу экрана (это значок с тремя горизонтальными линиями, расположенными друг над другом).
- В Режиме списка выберите блок «Навигация».
- Если блок «Навигация» не отображается, добавьте его создать.
- Проверьте настройки блока «Навигация» в правой части экрана.
- Нажмите значок настроек ⚙️ (шестерёнка) и откройте раздел «Расширенные».
- Добавьте класс CSS.
Класс CSS можно также задать для отдельных ссылок в блоке «Навигация». Выберите нужную ссылку, прежде чем переходить к разделу «Расширенные».
Ознакомьтесь с руководством по блоку «Навигация», чтобы узнать обо всех возможностях этого блока.
Узнайте больше о добавлении пользовательских CSS.
Поддержка 