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

Доброго здравия, друзья мои!

Меню навигации — один из важнейших элементов вашего сайта.

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

К сожалению, система меню WordPress — не самая интуитивно понятная часть CMS (системы управления контентом).

Мы это понимаем и хотим показать вам, как лучше всего ориентироваться в системе навигации WP.

Чтобы вы и ваши пользователи получили наилучший возможный опыт.

Прежде чем создать меню WordPress

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

Хотя создать меню просто (просто перейдите во «Внешний вид – Меню» и начните щелкать), создание полезного меню немного сложнее.

По сути, задайте себе два вопроса:

• Для кого я составляю меню?
• Куда я хочу направить своих посетителей?

Что касается того, для кого я делаю меню?, это может показаться глупым.

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

Разным пользователям нужны разные вещи.

Нужны ли новым пользователям те же страницы, что и вернувшимся?

Видят ли вошедшие в систему участники те же меню, что и те, кто не вошел в систему?

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

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

Самое замечательное в меню WordPress то, что вы можете создавать много версий и отображать их в разных местах.

Что приводит нас к вопросу номер два: куда я хочу, чтобы мои посетители направлялись?

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

Возьмем очень знаменитый зарубежный сайт как реальный пример

Например, некоторое время назад они сделали редизайн меню заголовка в Elegant Themes.

Они хотели сосредоточиться на привлечении трафика в свою группу Facebook, Divi Theme Users и их сеть Meetup.

В дополнение к самому Divi (тема), но это само собой разумеется.

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

Наведите курсор на Divi, и вы увидите ссылки не только на функции темы, но и на их социальные сети, которые они хотели бы выделить.

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

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

Контакты также есть для всех.

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

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

Меню заголовка тоже все еще там.

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

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

Итак, давайте приступим к созданию вашего меню WordPress.

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

Перейдите в раздел «Внешний вид – Меню» в панели управления WordPress.

Вы должны увидеть что-то вроде этого:

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

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

Отслеживайте, куда ведет меню, называя его соответствующим образом.

Слева вы видите «Страницы», «Записи», «Пользовательские ссылки» и «Категории».

Некоторые темы включают здесь больше опций.

Ваша тема может включать, а может и нет.

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

Кроме того, «Пользовательские ссылки» позволяют ссылаться на что угодно, просто помните о https://, иначе ваши ссылки могут оказаться недоступными.

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

Эта опция добавляет все новые страницы, созданные на вашем сайте, в меню WordPress.

Большинство людей никогда не установят этот флажок.

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

Однако это те места на вашем сайте, где ваше меню может отображаться полностью.

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

Затем добавьте любой контент, который вы хотите в самом меню.

Просто отметьте галочкой поле рядом с ним и нажмите «Добавить в меню».

Это добавит его в «Структуру меню».

Щелкните стрелку, чтобы отобразить другие параметры, такие как «Ярлык навигации».

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

Это часть, которая отображается в меню.

Так что если у вас слишком длинный заголовок страницы, вы можете сократить его здесь.

Теперь самая важная часть создания меню WordPress (и, возможно, одно из самых забытых действий на всей платформе) — нажать кнопку «Сохранить меню» в правой части экрана.

После сохранения меню будет запущено.

Если оно уже отображается на вашем сайте, изменения вступят в силу немедленно.

Как создать выпадающее меню WordPress

По большей части, шаги выше те же самые, что и для создания выпадающего меню в WordPress.

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

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

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

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

Вложив их, вы создадите раскрывающееся меню во внешнем интерфейсе.

Повторите это для любого количества элементов в раскрывающемся списке.

Вложенная иерархия проста для понимания.

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

Во внешнем интерфейсе это будет выглядеть примерно так:

Теперь эти шаги предполагают, что вы используете существующие пункты меню.

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

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

Если вы хотите большего контроля над своими мегаменю, рассмотрите возможность использования плагина мегаменю, например «UberMenu» или «Max Mega Menu».

Такие плагины меню привносят широкий спектр функциональности и дизайна в ваши меню WordPress.

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

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

Иногда мегаменю являются лучшим выбором для навигации по сайту.

Например, Amazon — отличный пример сайта, который отлично использует мегаменю.

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

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

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

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

Мы могли бы назвать меню чем-то вроде «Sidebar Widget», чтобы отслеживать его.

Но если вы посмотрите на вкладку «Местоположение отображения» или «Управление местоположениями», там может отсутствовать опция боковой панели.

Это значит, что нам придется вручную разместить меню.

В панели инструментов WordPress перейдите в раздел «Внешний вид – Виджеты» и найдите виджет «Меню навигации».

По большей части, ваша тема будет иметь общую опцию боковой панели (Sidebar).

Виджет «Меню навигации» по умолчанию установлен в WordPress.

Так что это будет работать независимо от вашей темы.

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

Понравившиеся пункты раскрывающегося меню щелкните и перетащите в область боковой панели.

Из-за особенностей работы виджетов в WordPress виджет сразу же появится на вашем сайте.

Однако вы не выбрали меню для отображения, поэтому это будет пустое место.

Если вы выберете «Заголовок» (Title), он будет отображаться в виде заголовка над меню.

Опция «Выбрать меню» позволяет выбрать конкретное меню, которое вы хотите отобразить.

Вы также можете нажать на ссылку «Видимость» и открыть дополнительное поле, которое вы видите выше.

Это новое поле дает вам возможности для условной видимости.

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

Вот и все.

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

Поэтому, если вы создали какие-либо URL-адреса-заполнители с использованием #, это будет некликабельная ссылка в этом меню.

Просто спланируйте создание меню WordPress соответствующим образом.

Заключение по меню WordPress

Система меню WordPress не должна пугать.

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

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

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

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

В случае с меню WordPress меньшее, безусловно, может быть большим.