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

Меню навигации - один из важнейших элементов вашего сайта. Без этого ваши посетители не смогут получить доступ к нужному им контенту, не поймут, какой контент вы предлагаете, и, как правило, будут находиться в состоянии замешательства относительно вашего сайта. К сожалению, система меню WordPress - не самая интуитивно понятная часть CMS (системы управления контентом). Мы понимаем это и хотим показать вам, как лучше всего ориентироваться в навигационной системе WP. Чтобы у вас и ваших пользователей был лучший опыт.

Перед тем, как создать меню WordPress

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

• Для кого я делаю меню?
• Куда я хочу, чтобы мои посетители уходили?

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

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

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

ElegantThemes.com как пример из реального мира

Например, некоторое время назад мы в Elegant Themes переработали меню заголовка. Мы хотели сосредоточиться на привлечении трафика в нашу группу Facebook, пользователей темы Divi и нашу сеть Meetup. Помимо самого Divi, но это само собой разумеется. Для этого мы упростили структуру меню, чтобы предоставить пользователю лишь несколько опций по сравнению с более надежной версией, которая существовала раньше.

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

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

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

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

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

Перейдите в Внешний вид - Меню на панели инструментов WordPress. Вы должны увидеть что-то вроде этого:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь, в качестве примера, предположим, что вы хотите создать меню, которое отображается только на боковых панелях блога, чтобы помочь пользователям ориентироваться. Мы могли бы назвать меню чем-то вроде S idebar Widget, чтобы отслеживать его. Но если вы посмотрите на вкладку « Отображать местоположение» или « Управление местоположениями », там может не оказаться опции боковой панели.

Это просто означает, что нам придется вручную разместить меню. На панели инструментов WordPress перейдите в Внешний вид - Виджеты и найдите виджет Меню навигации .

По большей части ваша тема будет иметь общую опцию боковой панели . Виджет " Меню навигации" по умолчанию установлен в WordPress. Так что это будет работать независимо от вашей темы. Однако в вашей теме может быть что-то еще для виджетов меню, и основные шаги все равно должны применяться.

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

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

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

Завершение работы с меню WordPress

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

Как вы структурируете свои меню WordPress? Сколько различных меню есть на вашем сайте?

Статья от Джулии Тим / Shutterstock.com