Создание и кастомизация меню WordPress: для классических и блочных тем

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

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

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

В этом подробном руководстве я сначала покажу, как создать и кастомизировать меню с помощью классического редактора WP. Затем я проведу вас через процесс создания меню с помощью блока «Навигация» (для тех сайтов, которые используют блочную тему).

Классическое меню или блочная навигация: что выбрать

Выбор между классическим экраном «Внешний вид» > «Меню» и новым блоком «Навигация» в редакторе сайта зависит от вашей темы. Вот краткий обзор основных различий.

Функции	Классический редактор меню	Навигация по блокам (FSE)
Удобство использования	Привычный, стабильный интерфейс	Более наглядный, с функцией перетаскивания
Гибкость	Ограничено ссылками, категориями и пользовательскими линками	Добавление любых блоков (кнопок, поиска, значков)
Предварительный просмотр	Доступно через кастомайзер	Редактирование в реальном времени в редакторе сайта
Стиль	Зависит от темы; для изменений требуется CSS	Встроенные элементы управления цветом, шрифтом, интервалом
Идеально подходит для	Старых тем, пользователей, предпочитающих традиционный дашборд	Современных блочных тем, пользователей, желающих полного визуального контроля

Создание меню с помощью классической темы WordPress

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

Как найти редактор меню WordPress

Начнем с поиска традиционного редактора меню WP. Сначала войдите в дашборд ВордПресс, затем перейдите в «Внешний вид» > «Меню». Возможно, вы уже увидите готовое к работе меню, которое можно либо отредактировать, либо создать новое.

Вы также можете редактировать меню с помощью экрана кастомизации темы. Преимущество этого метода в том, что вы видите предварительный просмотр изменений в режиме реального времени по мере работы. На странице «Меню» нажмите кнопку «Управление с предварительным просмотром» или перейдите в раздел «Внешний вид» > «Настройка». Выберите пункт «Меню».

Как создать кастомное меню WordPress

Сначала давайте узнаем, как создать новое меню в ВордПресс, если используете классическую тему. Если уже есть меню, просто нажмите ссылку «Создать новое меню» в верхней части страницы.

Если еще не создавали его, не нужно ничего нажимать — вы сразу попадете на экран разработки.

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

Как редактировать меню в WordPress

Нужно отредактировать существующее меню на сайте WordPress? Если у вас только одно меню, просто перейдите на экран «Внешний вид» > «Меню», и оно будет прямо там, на странице, готовое к кастомизации.

Если используете кастомайзер, то увидите список всех существующих меню вверху, как только откроете экран «Меню». Просто нажмите на то, которое хотите открыть.

Как добавить пункты в меню WordPress

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

Добавление страницы или записи в меню

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

Посмотрите на поле слева, где вы должны увидеть поле «Добавить пункты меню» с несколькими вкладками. Откройте «Страницы». Эта вкладка содержит 3 категории: «Последние», «Просмотреть все» и «Поиск».

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

Когда вы выбрали нужные разделы, нажмите «Добавить в меню», чтобы завершить выбор. Новые страницы теперь будут отображаться в списке справа.

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

Что делать, если хотите удалить добавленный пункт меню? Сделать это можно 2 способами. В разделе «Структура меню» справа выберите одну из страниц или записей, нажав на стрелку справа. Затем кликните красную ссылку «Удалить».

Вы также можете удалить сразу несколько страниц. Установите флажок «Массовый выбор», а затем отметьте каждый пункт, который хотите убрать. Затем кликните «Удалить выбранные элементы».

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

Добавление категории блога в меню

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

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

Когда закончите, нажмите «Добавить в меню», и оно появится сбоку, как запись или страница.

Добавление в меню кастомную ссылку

Что делать, если на сайте есть страница, которая не входит в другие категории, или вы хотите, чтобы меню содержало ссылку на внешний сайт? В этом случае можно добавить кастомный линк. Он может вести на любой URL-адрес.

Нажмите вкладку «Кастомные ссылки», затем вставьте URL-адрес, задайте текст меню и нажмите «Добавить в меню».

Добавьте в меню ссылку, открывающуюся в новой вкладке

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

Это скрытая опция в интерфейсе «Меню». Вам нужно включить ее, нажав «Параметры экрана» в верхней части экрана, а затем установив флажок «Цель ссылки».

Добавление ссылки на раздел страницы из меню

Иногда требуется создать ссылку на конкретный раздел страницы. В этом случае вместо стандартного раскрывающегося списка «Записи» или «Страницы» используйте вариант «Пользовательские ссылки».

Сначала нужно создать кастомный URL-адрес, который перенаправит посетителей в нужный раздел. Вам нужно разработать анкор. Это можно сделать в редакторе блоков. Затем добавьте созданный анкор в конец URL-адреса сайта с символом #. Например, если анкор — «create-a-page-jump», URL-адрес будет https://example.com/#create-a-page-jump.

Вставьте его в панель пользовательских ссылок, задайте его название и нажмите «Добавить в меню».

Добавление пункта раскрывающегося меню

Вложенность пунктов — важная часть функциональности меню. Вы делаете это, чтобы определенные пункты раскрывались при наведении курсора.

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

Второй способ — открыть пункт меню, который хотите переместить, и щелкнуть по ссылке «Под [Название пункта меню]».

Добавление пункта меню без ссылки

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

Для этого создайте пользовательскую ссылку, как обычно, но вместо вставки ссылки вставьте символ #. Затем присвойте пункту меню название, как обычно, и нажмите «Добавить в меню».

Вы можете оставить символ #, если хотите, или открыть новый пункт меню, удалить символ и нажать «Сохранить меню».

Хотя пункт меню по-прежнему выглядит как ссылка, он не будет активным. Вы всегда можете изменить его стиль с помощью CSS, если хотите, чтобы он выглядел иначе. Я покажу, как это сделать, позже.

Добавьте в меню значок или панель поиска

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

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

Добавьте описание к пункту меню

Хотя обычно в этом нет необходимости, можете захотеть добавить описание к пунктам меню.

Сначала на экране «Меню» откройте «Параметры экрана» в правом верхнем углу и установите флажок «Описание». Теперь будете видеть поле «Описание» при открытии пункта меню с помощью стрелки раскрывающегося списка.

Введите описание и не забудьте нажать «Сохранить меню». При посещении сайта вы должны увидеть новое описание. Помните, что не все темы поддерживают эту функцию.

Как активировать навигационное меню WordPress

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

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

Не знаете, как установить место отображения? Давайте разберемся.

Как изменить положение меню WordPress

Если не нравится расположение меню или не знаете, как изменить его отображение в нужном месте, поменять локацию меню в WP очень просто.

Есть 3 способа сделать это. Во-первых, на экране «Внешний вид» > «Меню» на вкладке «Редактировать меню» по умолчанию обратите внимание на основную область редактирования. Вы должны увидеть раздел с названием «Настройки меню». Затем найдите «Место отображения».

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

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

Наконец, возможно использовать онлайн кастомайзер. Откройте «Внешний вид» > «Кастомизация». Перейдите на вкладку «Меню», затем либо выберите меню, которое хотите отредактировать, либо нажмите кнопку «Просмотреть все расположения». Преимущество этого в том, что вы сразу видите, как будут выглядеть меню и где будет располагаться каждый вариант отображения.

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

Как использовать несколько меню на сайте WordPress

Вы не ограничены одним меню. Возможно создать столько, сколько поместится на сайте (и даже больше).

В любом случае вы можете создать второе меню, нажав «Создать новое меню» и выбрав для него отдельное место отображения. Просто введите название и настройте страницы, как делали с первым меню, и повторяйте это столько раз, сколько нужно.

Не забудьте использовать экран «Управление расположениями», чтобы проще назначить каждое меню определенному месту, так как это гораздо удобнее, чем вручную выбирать и настраивать параметры для каждого.

Как кастомизировать внешний вид меню с помощью CSS

Хотя ВордПресс предоставляет некоторые базовые опции, позволяющие кастомизировать поведение меню так, как нужно, когда дело доходит до его фактического внешнего вида, возможностей не так много. Но если не устраивает стиль меню вашей темы, можете взять все под контроль с помощью CSS.

Вы можете редактировать файлы темы напрямую. Но это, как правило, не рекомендуется, если только не добавляете много CSS, особенно если не используете дочернюю тему. Вместо этого возможно применить поле «Дополнительный CSS» на экране «Внешний вид» > «Кастомизации».

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

Например, в Twenty-Twenty класс для основного меню — просто «.primary-menu».

Кликните правой кнопкой мыши по меню и воспользуйтесь инструментом «Просмотр элемента», чтобы найти класс.

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

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

Возможно, вы захотите изменить стиль одного пункта меню, а не всех сразу. Для этого перейдите на страницу «Внешний вид» > «Меню». Откройте «Параметры экрана» и включите «Классы CSS». Отредактируйте пункт меню и присвойте ему класс CSS. Затем замените «.primary-menu» в примерах кода, приведенных ниже, на кастомный класс CSS.

Таким образом, если установили для ссылки на главную страницу класс «home-menu», замените «.primary-menu» на «.home-menu».

Как изменить размер шрифта в меню

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

<code>.primary-menu {

font-size: 30px;

}</code>

Просто замените «30px» на любой размер, который нравится.

Как изменить цветовую схему меню

Частым запросом пользователей WordPress является изменение цвета ссылок в меню или даже добавление цвета фона.

Сначала давайте изменим оттенок шрифта. Используйте следующий код.

<code>.primary-menu li a {

color: #000000;

}</code>

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

А как насчет цвета фона? Попробуйте это для бирюзового варианта.

<code>.primary-menu {

background-color: #00ffff;

}</code>

Как изменить эффекты при наведении курсора на элементы меню

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

<code>.primary-menu li.menu-item a:hover {

color: #DEB0F1;

}</code>

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

Как сделать меню WordPress липким

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

Для этого используется тег «position:fixed». Но, скорее всего, понадобится добавить еще кое-что, чтобы все работало как следует.

Следующий код создаст базовое плавающее меню навигации.

<code>.primary-menu {

position: fixed;

top:0;

right:0;

}</code>

Но вы, возможно, захотите использовать теги background, height, width, border, padding и top/down/left/right, чтобы создать фиксированное меню, которое будет чем-то большим, чем просто плавающий текст. Вот простой пример.

<code>.primary-menu {

position: fixed;

top:0;

right:0;

background:#000000;

height:50px;

width:100%;

border-bottom: 2px solid #F7156B;

padding-top:10px;

padding-right:30px;

}</code>

Как добавить кнопку в меню

Хотя добавить кнопки в меню можно с помощью плагинов, давайте попробуем сделать это с помощью CSS. Сначала нужно задать собственный CSS-класс для пункта меню с кнопкой, если только не хотите, чтобы все пункты меню были оформлены таким образом.

Теперь попробуйте этот код.

<code>.menu-button {

    background: #000000;

    padding: 5px 10px 5px 10px;

}</code>

Если вы хотите скруглить углы кнопки, попробуйте добавить эту строку кода над закрывающей скобкой.

<code>border-radius: 5px;</code>

Часть 2: Создание меню с помощью редактора блоков (FSE)

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

В этом разделе поговорим подробнее об этой функции и я покажу, как использовать ее для создания меню.

Что такое блок «Навигация»

Блок «Навигация» был выпущен вместе с WordPress 5.9. В этой версии ВордПресс был представлен редактор сайта — основной инструмент для редактирования блочных тем.

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

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

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

Как узнать, есть ли у меня блок «Навигация»?

Как упоминалось ранее, блок «Навигация» доступен только для тем, построенных на основе блоков.

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

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

Если видите опцию «Меню», это, как правило, означает, что используете классическую тему, и придется редактировать меню навигации, используя описанный выше метод. Но если видите опцию «Редактор», значит, вы применяете блочную тему с доступом к блоку «Навигация».

Как получить доступ к блоку «Навигация»

Существует несколько способов получить доступ к блоку «Навигация», если используете блочную тему.

Вы можете открыть редактор сайта, перейдя в раздел «Внешний вид» > «Редактор». Здесь можете выбрать страницу, шаблон или макет, который хотите изменить.

В данном случае нужно нажать на опцию «Навигация» вверху.

Затем выберите значок карандаша, чтобы открыть и отредактировать блок.

Обратите внимание, что, поскольку редактор сайта более гибкий, чем кастомайзер, не имеет значения, какой аспект вы редактируете. Достаточно кликнуть по пунктам меню, и вы увидите опцию «Выбрать родительский блок: Навигация».

Многие блочные темы имеют собственные панели настроек или параметры. Например, EarthTones предоставляет доступ к опции «Настройки темы», когда переходите в раздел «Внешний вид».

Как создать меню с помощью блока «Навигация»

Если активируете тему на основе блоков на существующем сайте, меню навигации, как правило, будет сгенерировано на основе того меню, которое создали с помощью стандартного редактора меню WP.

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

Ваша страница обычно будет разделена на столбцы и строки (как записи и страницы, которые создаете с помощью блочного редактора). Поэтому, наведя курсор на страницу, увидите различные места, где можно добавить новые блоки.

В качестве альтернативы возможно добавить новые столбцы и строки, если не можете вставить меню в нужное место.

Нажмите на значок «+», чтобы добавить новый блок. Найдите «Навигация» и перетащите его на нужное место.

Здесь возможно заменить название пункта, ввести новый URL и добавить описание, используя параметры блока в правой части экрана. Если перейти на вкладку «Стили», можно также кастомизировать размер шрифта и размеры.

Кроме того, возможно добавлять новые пункты, нажав на значок «+» внутри блока «Навигация». Также можно создавать подменю, изменять порядок пунктов и многое другое. В следующем разделе я покажу, как выполнить все эти действия.

Кастомизация стиля меню с помощью блока «Навигация»

Существует несколько способов персонализировать меню, созданное в редакторе сайта. В этом разделе я покажу, как добавлять новые пункты, менять их порядок, изменять цвета и многое другое.

Как добавить новые пункты меню в блок «Навигация»

Во-первых, может понадобиться добавить в меню навигации новые страницы, записи или даже пользовательские ссылки. К счастью, это очень просто сделать с помощью редактора сайта.

Убедитесь, что выбрали блок «Навигация» в редакторе. Вы должны увидеть значок «+», который позволяет добавлять новые блоки внутри других блоков, строк и столбцов. Все, что нужно сделать, это нажать на этот значок.

Затем можете выполнить поиск по существующим страницам на сайте или ввести пользовательский URL-адрес. Допустим, вы хотите добавить ссылку на страницу блога. Просто найдите ее в списке или выполните поиск по слову «блог».

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

Как добавить ссылки подменю в блок «Навигация»

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

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

При создании новой категории вы также можете ввести собственный слаг. Он будет служить ссылкой для пункта подменю. Итак, в редакторе выберите блок «Навигация» и перейдите к только что добавленному пункту «Блог».

На панели инструментов нажмите на значок «Добавить подменю».

Как и ранее, вы можете искать страницы или ввести собственный URL-адрес. Поскольку для категорий постов настроены постоянные ссылки, вы также можете искать их здесь.

После добавления первой ссылки нажмите клавишу «Esc», чтобы вставить еще больше пунктов в подменю «Блог».

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

Чтобы конфигурировать это, выделите блок «Навигация» и найдите «Настройки блока» справа.

Затем повторите процесс, описанный в этом разделе.

Как изменить порядок пунктов меню в блоке «Навигация»

Хотя я показал, как добавлять новые пункты меню в блок «Навигация», вы, возможно, захотите изменить порядок их отображения.

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

Чтобы настроить это, достаточно кликнуть по блоку «Навигация» и выбрать пункт «Блог». Если не выберете конкретную ссылку, вы переместите весь блок «Навигация».

Поскольку пункт «Блог» находится в самом конце, вы не сможете выбрать правую стрелку, так как переместить его некуда. Но если нажмете на левую, пункт меню должен сместиться на одно место влево.

Если хотите изменить порядок пунктов подменю, нужно просто выбрать нужный. На панели инструментов вместо стрелок вправо и влево вы должны увидеть стрелки для перемещения пунктов вверх и вниз.

Просто нажмите на них, чтобы изменить порядок отображения подменю.

Как добавить дополнительные блоки в блок «Навигация»

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

Затем найдите нужный блок, как обычно. Я выберу «Иконки соцсетей».

Перейдя в редактор, нажмите на иконки соцсетей. Вы увидите мини-значок «+», который позволит добавить нужные ссылки.

После нажатия на значок «+» вы можете либо добавить собственную ссылку, либо выбрать один из виджетов, поддерживаемых WP, таких как Instagram* и TikTok.

Когда выбран блок «Иконки соцсетей», можете добавить в него дополнительные значки.

 

При этом, выбрав конкретную иконку, например блок Instagram*, можете добавить ссылку на свою страницу в социальной сети.

Кроме того, возможно изменить расположение значков с помощью стрелок на панели инструментов вверху.

 

Как изменить цвета, шрифты и выравнивание блока «Навигация»

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

Вы также можете персонализировать некоторые важные параметры для мобильного меню. Убедитесь, что в разделе «Меню-наложение» выделен вариант «Мобильное». Затем можете выбрать новый значок для отображения.

Теперь перейдем на вкладку «Стили».

Ниже можете кастомизировать размер текста. Если нажмете на 3 точки в разделе «Типографика», то увидите дополнительные параметры.

Ниже, в разделе «Размеры», возможно увеличить расстояние между пунктами меню с помощью ползунка «Интервал между блоками». Когда все будет готово, просто сохраните и просмотрите блок «Навигация».

FAQ

Можно удалить или переименовать меню WordPress?

Классическая тема

В ВордПресс вы можете создавать столько меню, сколько захотите, и их вполне можно удалить. Просто откройте экран «Внешний вид» > «Меню» и нажмите на красный текст «Удалить меню».

Если просто хотите переименовать меню, откройте его, измените значение в поле «Название меню», а затем нажмите кнопку «Сохранить меню». Все просто.

Блочная тема

Чтобы удалить меню, перейдите в раздел «Внешний вид» > «Редактор» > «Навигация». Нажмите на вертикальные многоточие в правом верхнем углу. Выберите «Переименовать» или «Удалить».

Можно добавлять теги в меню WordPress?

Классическая тема

В меню WP можно добавлять категории, но как насчет тегов? Хорошая новость: эта функция уже встроена в меню. Нужно просто включить её.

Сначала убедитесь, что находитесь на экране «Внешний вид» > «Меню». Затем нажмите «Параметры экрана» в правом верхнем углу. В разделе «Элементы экрана» вы увидите ряд опций, все из которых, кроме одной, отмечены галочкой: «Теги». Выберите ее сейчас.

Блочная тема

В блоке навигации нажмите «+», чтобы добавить новую ссылку. Затем можете либо выполнить поиск по конкретному тегу, либо ввести URL-адрес этого тега.

Можно дублировать меню в WordPress?

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

Классическая тема

ВордПресс по умолчанию не поддерживает эту функцию, но возможно реализовать ее с помощью простого плагина под названием «Duplicate Menu». Установите его через экран «Плагины» > «Добавить новый». Вы увидите новую страницу на вкладке «Внешний вид»: «Duplicate Menu».

Перейдите туда, и вы увидите простой экран, на котором будет предложено назвать дубликат меню. Затем нажмите «Дублировать меню».

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

Блочная тема

Перейдите в «Внешний вид» > «Редактор» > «Навигация», выберите вертикальные многоточия и нажмите «Дублировать».

Можно добавить изображение в меню?

По умолчанию добавить изображение в меню невозможно, но плагин под названием Menu Image меняет эту ситуацию.

Установите его через «Плагины» > «Добавить новый» и обратите внимание на новую опцию «Menu Image» в сайдбаре. Здесь вы можете кастомизировать размеры изображений для меню. Вернувшись в «Внешний вид» > «Меню», откройте пункт меню и нажмите новую кнопку «Добавить изображение/значок».

Кастомизируйте параметры по своему усмотрению. Нажмите «Изображение», чтобы загрузить изображение, или «Значок», чтобы выбрать из значков. Перед сохранением вы увидите предварительный просмотр.

Можно добавить мега-меню в WordPress?

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

К сожалению, WordPress не поддерживает мега-меню, поэтому понадобится установить плагин, например Max Mega Menu.

Установите его через «Плагины» > «Добавить новый». Вы увидите новый пункт «Мега-меню» внизу сайдбара.

Чтобы настроить его, перейдите в «Мега-меню» > «Расположение меню» и установите флажок «Включено», чтобы активировать его. Затем сможете изменить анимацию при наведении курсора и поведение меню, а также кастомизировать тему на вкладке «Темы меню».

Возможно получить доступ к некоторым базовым функциям мега-меню на экране «Внешний вид» > «Меню», где вы найдете новую вкладку «Настройки Max Mega Menu».

Могу я добавить событие onclick в JavaScript в свое меню?

Вы можете добавить JavaScript на свой сайт WP, либо отредактировав файлы темы, либо установив плагин, такой как Simple Custom CSS and JS.

Если не уверены, как выбрать отдельный пункт меню, попробуйте перейти на страницу «Внешний вид» > «Меню», откройте «Параметры экрана», а затем включите «Классы CSS». Добавьте класс к пункту меню, а затем укажите этот класс в событии onclick.

Если используете Mega Menu, дополнительно нужно перейти в раздел «Mega Menu» > «Расположение меню», выбрать нужное меню, нажать «Дополнительно» и отключить опцию «Отвязать события JavaScript». Просто будьте осторожны при этом, так как это может вызвать конфликты.

Что произойдет с меню при смене темы?

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

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

Где находятся навигационные меню в базе данных WordPress?

Классическая тема

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

Блочная тема

При использовании блока «Навигация» меню хранятся в wp_posts с использованием типа записи wp_navigation.

Как сделать навигационное меню фиксированным, чтобы оно было вверху?

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

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

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

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

Используйте простые, описательные слова для названий, такие как «Услуги» или «Контакты», вместо запутанных терминов. Размещайте самые важные страницы в начале меню (слева), а менее важные пункты, такие как «Контакты», — в конце (справа). Хорошо организованное меню помогает пользователям быстро находить то, что им нужно, что улучшает их впечатления от сайта.

Как добавить значки социальных сетей в меню WordPress?

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

Второй способ — добавить значки вручную. В редакторе меню создайте новую «Пользовательскую ссылку» для каждого профиля в социальной сети. В поле «Название навигации» вместо текста вставьте HTML-тег для значка или класс шрифта значков, например из набора Font Awesome. Для этого потребуются базовые знания HTML.

Можно использовать разные навигационные меню на разных страницах сайта?

Да, вы можете отображать разные меню на разных страницах. Хотя ВордПресс по умолчанию не предлагает эту функцию, ее можно реализовать с помощью плагина. Такие варианты, как «Conditional Menus», позволяют устанавливать правила, определяющие, где будет отображаться каждое меню.

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

Заключение

WordPress позволяет создавать и кастомизировать меню навигации для сайта без необходимости установки плагинов или использования кода. По мере роста посещаемости ресурса становится еще важнее иметь оптимизированное меню, помогающее посетителям ориентироваться.

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

*Instagram признан экстремистской организацией и запрещен на территории РФ.