Создание пользовательских меню в WordPress

Статья читается: 3 мин.

Приветствую, друзья!

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

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

WordPress позволяет создавать собственные меню и их структуру. С помощью редактора меню вы можете создавать несколько меню, а затем назначать их в определенных местах меню на своем веб-сайте. Как? Я покажу вам сейчас.

Создаем меню вручную

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

В панели управления перейдите во вкладку «Внешний вид» и выберите «Меню».

Создание меню

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

Выберите «Страницы» и нажмите «Просмотреть все».

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

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

Структурирование меню с помощью перетаскивания

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

Чтобы сделать страницу, добавьте пункт меню в соответствие с элементами на их левой стороне. Чтобы сделать страницу подстраницей, переместите элемент меню вправо. В этом примере вы можете увидеть, что я создал страницу с именем «Sample Page». Затем я переместил страницу под названием «Sub Page 1» в область подменю «Sample Page», поместив ее в разделе «Sample Page» и перетянул ее вправо.

Я также переместил страницу под названием «Shop», перетащив ее в область, расположенную над страницей «Testimonials». Я оставил его как главную страницу.

Я вернусь к «Sample Page 2». Я перетащил «Sub Page 2» вправо и опустил его в разделе «Sub Item» в разделе «Sample Page 2». Затем я перетащил «Sub Page 3» и вставил его, но на этот раз вместо того, чтобы отбрасывать его в области «Sub Item Sample Page 2», я опустил его в области «Sub Item Sub Page 2». Это создало вспомогательную страницу подстраницы и позволило мне построить структуру того, как связаны эти страницы.

Другой способ их перемещения — щелкнуть по слову «Sample Page» рядом со стрелкой вниз, а затем выбрать нужный параметр «Переместить».

Удаление пункта меню

Теперь обратите внимание, что у меня есть две страницы под названием «Home». Одна из них — это страница, созданная WordPress, а другая — страница, которую я создал, чтобы иметь ссылку на домашнюю страницу. Поскольку WordPress делает это автоматически, я могу удалить ту, которую создал я.

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

Переименование текста ссылок

В этом примере имена моей страницы — это «Sample Page 1» и «Sub Page 1». Я не хочу, чтобы эти имена отображались в меню. Я могу изменить это, изменив текст ссылки. Выделите имя в текстовом поле «Текст ссылки» и измените его на имя, которое вы хотите показать в меню. Это не изменит имя страницы, но изменит имя, отображаемое в меню. Это удобная функция, так как позволяет вам маркировать вашу структуру таким образом, который легко понять, не переименовывая ваши страницы.

Обработка подстраниц

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

Здесь я создал новое меню и разместил «Sample Page 2» как подпункт «Sub Page 1». Однако я решил, что это должен быть подраздел «Resources». Вместо того, чтобы перемещать каждый из элементов «Sample Page 2» один за одним, я могу переместить весь блок сразу. Ухватив нужную страницу и перетащив ее, я могу переместить элементы «Sample Page 2» за один раз.

Использование ссылок

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

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

Использование категорий

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

Настройки меню

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

Сохраняем меню

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

Тестирование меню

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

Использование виджета Custom Menu

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

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

Типы меню WordPress

Многие темы от Elegant Themes имеют структуру для трех меню: первичное, вторичное и меню в подвале сайта. Каждое из этих меню может быть специально разработано, чтобы наилучшим образом использовать их позиционирование. Размещение и типы меню будут различаться в зависимости от темы, которую вы используете. Вот посмотрите на структуру меню для тем Divi и Twenty Fifteen.

Primary (первичное меню)

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

Secondary (второстепенное меню)

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

Footer menu (меню в подвале сайта)

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

Управление местоположениями

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

Социальные ссылки

Тема «Twenty Fifteen» имеет два меню: основное меню и меню социальных ссылок.

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

Это добавленные социальные значки со ссылками на боковую панель. Для ссылок, которые он не понимает (например, фэйковым, который я составил для Google+), он помещает круговой символ с точкой внутри.

Несколько советов по созданию больших меню

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

Завершение

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

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

На этом все. До скорых встреч!

Вам понравилась статья?
плохохорошо (+1 баллов, 1 оценок)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!
One Comment к статье "Создание пользовательских меню в WordPress"
  1. Ранис: 10.04.2018 в 17:51 - Ответить

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