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

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

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

Тип меню

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

• Основное меню — оно появляется под заголовком. Он должен включать основную навигацию и страницы, которые посетители ожидают в зависимости от типа вашего веб-сайта: домашняя страница, информация о сайте, контактная информация, блог, портфолио и т. д.
• Дополнительное меню — оно появляется над заголовком. Это должно включать ссылки и страницы, которые вы хотите предоставить своим читателям в удобном месте, но не обязательно в вашей основной структуре навигации. Это могут быть такие предметы, как учебные пособия, корзина для покупок и т. д.
• Боковая панель — ваши пользовательские меню могут быть размещены на боковой панели с помощью виджета пользовательского меню. Вы можете использовать сколько угодно виджетов и размещать в них любое меню.
• Нижний колонтитул — вы можете создать меню только для нижнего колонтитула. В этом меню обычно меньше информации, чем в вашем основном меню. В зависимости от потребностей вашего сайта, он обычно содержит домашнюю страницу, информацию о вас, контакты, блог и т. д. Если ваш сайт содержит объявления о вакансиях, партнерскую программу и дочерние сайты, они также могут быть включены сюда.
• Меню социальных ссылок — это специальное меню, которое можно найти в таких темах, как Twenty Fifteen, которое размещает ссылки на ваши социальные сети на боковой панели. Если тема распознает социальную сеть, она предоставит соответствующую иконку. Если нет, то имена будут отображаться в виде текста (в соответствии с тем, как вы пометили ссылку).

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

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

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

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

Создание меню из бэкенда

На задней панели перейдите в раздел «Внешний вид» и выберите «Меню». В интерфейсе перейдите в «Настроить» и выберите «Навигация».

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

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

Страницы

Выберите вкладку Страницы в левом окне, если она еще не открыта. Чтобы добавить страницы в меню, выберите все нужные страницы и нажмите «Добавить в меню».

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

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

Пользовательские ссылки

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

Затем вы можете перетащить его в нужное место в структуре меню.

Категории

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

Сохраните ваше меню

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

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

Есть два способа использовать ваше меню из бэкенда.

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

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

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

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

Виджет

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

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

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

Использование внешнего интерфейса для представления WYSIWYG

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

Настройте внешний вид с помощью таких тем, как Divi

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

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

Дальнейшая настройка — использование плагинов для изменения меню

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

Виджет мастера пользовательского меню

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

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

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

Nextend Аккордеонное меню

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

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

Существует также версия Pro, которая добавляет три темы и поддержку. Цены начинаются от 29 долларов.

Адаптивное меню

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

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

Другие плагины для изменения меню

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

• Мега меню WordPress
• Выпадающее меню CSS3 Mega
• Адаптивное меню WP
• Font Awesome 4 Меню
• Шорткоды в меню
• Более быстрый внешний вид — меню
• Меню еды и напитков
• Простые розничные меню
• Очистить меню WordPress
• Виджет меню

Советы по созданию отличной структуры меню

• Используйте свои меню, чтобы сохранить организованную структуру навигации.
• Используйте как можно меньше уровней. Подумайте о первичном и вторичном.
• Используйте имена, понятные читателям, чтобы им не приходилось расшифровывать ваш код.
• Используйте метод ПОЦЕЛУЙ. Помните – чем проще, тем лучше. Меню должно быть простым в использовании и интуитивно понятным.
• Проверьте структуру меню ваших любимых сайтов и посмотрите, что вам нравится, а что нет. Тогда сделай свою лучше.

Последние мысли

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

Твой ход! Вы создали свою собственную структуру меню? У вас есть что добавить? Используете ли вы плагины для изменения меню? Расскажите нам об этом в комментариях ниже.