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

0 0

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

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

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

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

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

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы сделать страницу, добавьте пункт меню в соответствие с элементами на их левой стороне. Чтобы сделать страницу подстраницей, переместите элемент меню вправо. В этом примере вы можете увидеть, что я создал страницу с именем «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 делает это автоматически, я могу удалить ту, которую создал я.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типы меню WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Источник

    Оставьте ответ

    Ваш электронный адрес не будет опубликован.