Создание и настройка меню в WordPress

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

Поддерживает ли ваша тема такое меню?

Прежде чем выполнять какие-либо действия, проверьте используемую тему на совместимость с функцией управления. Для этого перейдите во «Внешний вид» – «Меню». Если увидите «Ваша тема не поддерживает функцию», не спешите расстраиваться. Исправить ситуацию вполне реально – достаточно открыть functions.php, добавить туда следующую строку:

add_theme_support( ‘menus’ )

Детали управления. Знакомство с дополнительными свойствами

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

1. Главная вкладка. Вам не нужно переключаться на вкладку «Управление областями» – основные действия выполняются здесь.
2. Ссылка «Создать меню. Когда меню для WordPress было создано в нескольких вариантах, они будут представлены как выпадающий список.
3. Опция добавления тоже есть – позволяет добавить в меню WordPress такие элементы, как «Записи», «Формат» и пр.
4. Структура меню. Здесь представлены добавленные элементы плюс дополнительные параметры. Например, «Классы CSS», «Описание XFN» и просто «Описание».

Вывод меню WordPress с помощью плагинов

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

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

JQuery Vertical

У вас есть веб-ресурс на Вордпресс, как сделать на нем выпадающее вертикальное меню? Воспользуйтесь плагином JQuery Vertical. Огромный плюс, которым обладает этот виджет для создания WordPress меню – его доступность. Без каких-либо финансовых затрат можно создать качественную менюшку уже сегодня.

Итак, какими возможностями обладает данный плагин?

• Создавать на WordPress виджет и всплывающее меню.
• Настраивать вывод.
• Для самостоятельной настройки стиля придется покопаться в CSS.
• Не забудьте произвести активацию виджета и расположить его в нужной части веб-сайта. Активация осуществляется во вкладке «Внешний вид».

Admin Menus Fixed

Создать адаптивное WP Menu поможет плагин Admin Menus Fixed. Доступны 3 вариации: горизонтальная, вертикальная широкая, просто виджет. Модуль очень прост и понятен в настройке, а еще он полностью совместим с версиями WordPress 3.5+. Интеграция в любую тему – вообще без проблем.

JQuery Mega

Еще один шикарный плагин для создания произвольного меню WordPress. Умеет встраивать JavaScript в HTML. Количество настроек просто огромное:

• Hover/Click – возможность настройки реагирования.
• Оболочка.
• Анимация категорий.
• Смена интенсивности анимационного эффекта.

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

Easy Menus

Ключевая фишка данного модуля в том, что он позволяет создавать заголовки категорий вместе с изображениями. Созданное своими руками графическое меню без вопросов вызовет интерес у посетителей. Также с помощью Easy Menus можно создавать следующие типы менюшек:

• Горизонтальное.
• Вертикальное.
• Горизонтальное с картинками.
• Круглые иконки для каждой из категорий.
• Симпатичные PNG-кнопки.

jQuery Dropdown

Мега полезный плагин jQuery, позволяющий создавать многофункциональные меню ВордПресс. Округленное menu, комплексная настройка стилевых классов, возможность подкорректировать цвет заднего фона по своему вкусу, изменить размеры, тип шрифта.

Dropdown

Если вы уже хорошо разбираетесь в CSS, вам однозначно подойдет виджет Dropdown Menu. С данным модулем вопрос о том, как сделать выпадающее меню в WordPress, вообще не стоит. Есть возможность гибкой настройки даже отдельных элементов, в наборе парочка стандартных CSS тем. Модуль позволяет настраивать параметр WordPress меню, чтобы отображение было либо вертикальным, либо горизонтальным.

Ozh’ Admin Drop Down Menu

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

WP Menu Vertical

Существуют разнообразные способы создания меню, но если вас интересует flash, попробуйте WP Menu Vertical. Благодаря данному виджету, даже новичок сможет запустить удобное, стильное, 100% адаптивное меню flash для своего сайта. В специальном административном отделе есть возможность настройки не только цвета фона, но и типа шрифта, его размера.

The official plugin for OpenMenu

Если понадобилось вывести оригинальное меню WordPress на сайте кафе, ресторана или любого другого заведения с опцией «Меню», на помощь придет данный плагин.

Custom Taxonomies

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

JQuery Accordion Menu

Как создать меню ВордПресс типа accordion? Обратите внимание на виджет JQuery Acordion Menu. Он обладает такими функциями:

• Количество пунктов Accordion может быть производным.
• Переход в категорию осуществляется как по клику, так и при наведении.
• Легко встраивается за счет шорткодов.
• Спустя 1 секунду Accordion закрывается автоматически.
• Скорость анимации тоже настраивается.

Одним словом делать меню в группе с помощью JQuery Accordion – одно удовольствие! Но будьте особенно осторожны с последним пунктом. Невысокая скорость способна повлечь за собой снижение юзабилити.

Responsive Select

Продолжаем рассказывать вам о самых крутых плагинах для настройки меню. На очереди Responsive Select – по-настоящему респектабельное меню веб-сайта. Удовлетворяет любые потребности, становится ключевым украшением и, что немаловажно, распространяется совершенно бесплатно. Организовать выпадающий список веб-ресурса на WordPress можно абсолютно в любом направлении. Ничто не мешает вам разбавить привычную менюшку эффектными кликабельными списками, добавить Google Maps, формы для регистрации и пр. CSS тоже настраивается. Одним словом, вместо скучного традиционного меню получаем в свое распоряжение настоящую «пушку».

JQuery Slick Menu

Абсолютно в любой части веб-сайта можно разместить еще один мега полезный виджет JQuery Slick Menu. Он обеспечит создание стильного, предельно аккуратного и точного меню – в том числе и адаптивного. Арсенал модуля включает в себя 12 вариантов дизайна, гибкую настройку. Положение, вывод менюшки полностью настраиваются: динамичное, вертикальное и пр.

Fading Menu

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

Особой сложностью настройка Fading Menu не отличается – все по стандартной схеме. Содержание menu и его вывод настраиваются в стандартной панели ВордПресса. Конечно, есть возможность добавления виджета снизу, но мы рекомендуем отдать предпочтение верхней позиции. Именно там пользователи проявляют наибольшую активность.

Подводим итоги

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

Одно из удобств сайтов на движке WordPress – это возможность создавать и настраивать произвольное меню прямо из админки (начиная с версии WP 3.0). Давайте более детально рассмотрим это удобство по пунктам.

Определение меню

Чтобы создать меню для сайта на ВордПресс сначала заходим в Консоль – Внешний вид – Меню и проверяем, есть ли там какое-нибудь меню.

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

Если это так – для начала нужно включить поддержку меню для используемой темы. Делается это просто: в файл functions.php добавляем небольшой код.

add_theme_support ('menus');

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

Для этого используйте код (вместо предыдущего; в файле functions.php) следующего вида:

register_nav_menus( array( 'menutop' => __( 'Menu Top', 'identifikator-dlya-perevoda' ), 'menubottom'  => __( 'Menu Bottom', 'identifikator-dlya-perevoda' ), )); 

Детали кода функции register_nav_menus:

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

— ‘menutop’ — это идентификатор для системы; должен быть уникальным

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

'menutop' => __('Menu Top', 'identifikator-dlya-perevoda'),

используйте упрощенный код

'menutop' => 'Menu Top',

— ‘Menu Top’ — это описательное название меню, которое нужно, пожалуй, только администратору сайта (чтобы визуально определять его расположение на сайте и различать среди остальных меню).

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

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

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

Создание меню для сайта на движке ВордПресс через админпанель сводится к следующим действиям:

1. Нужно дать имя этому меню, т.е. человекопонятное название (например, «Главное меню»)
2. Добавить пункты в это меню (страницы, рубрики-категории, или произвольные ссылки). Для этого отмечаем их галочкой и нажимаем кнопку «Добавить в меню»
3. Путем перетаскивания определить место этих пунктов. Например, если пункт расположить ниже и немного правее верхнего пункта (в результате чего он становится дочерним) — такой пункт будет отображаться в выпадающем списке.
4. Определить область вывода меню на сайте, проставив галочку напротив нужной области (которые мы создали в первом разделе этого урока). В нашем примере мы используем область темы «Menu Top».
5. Сохранить, нажав на кнопку «Сохранить меню».

Подключение меню в файл-шаблон

Итак, мы выходим на финишную прямую и готовы уже лицезреть наше меню на сайте. Осталось только подключить его через файл-шаблон. Нужный файл-шаблон вы определяете сами исходя из поставленной задачи. Это может быть, например, файл footer.php если нужно вывести меню в футере сайта, или sidebar.php – для бокового меню. Вы даже можете создать отдельные шаблоны для каждой категории и выводить для них разные меню, — вариантов множество! В нашем же примере мы хотим подключить меню в шапку (хедер) сайта, и использовать только одно такое меню для всего сайта. Посовещавшись с коллегами, мы решаем, что для этой цели идеально подойдет шаблон хедера – т.е. файл header.php.

В нужном нам месте этого файла добавляем код для вывода меню.

 if ( has_nav_menu('menutop') ) wp_nav_menu( array('theme_location' => 'menutop', 'menu_class' => 'class-dlya-ul'));  

Хотя меню вызывается функцией wp_nav_menu, мы решили дополнительно обернуть ее условием IF. Т.е. мы сначала проверяем функцией has_nav_menu наличие такого меню в системе, и только при наличии – показываем на сайте. На всякий случай.

У функции wp_nav_menu есть с десяток параметров, но мы воспользовались только двумя:

</pre></ol></pre>

• ‘theme_location’ => ‘menutop’ — а помните мы в начале урока регистрировали меню с таким идентификатором? Какое совпадение!
• ‘menu_class’ => ‘class-dlya-ul’ — нам захотелось, чтобы у нашего меню оберточный тег ul имел класс class-dlya-ul, т.е.  , чтобы мы могли с помощью CSS задать ему нужные нам стили.

Сохраняем файл-шаблон, обновляем сайт и – вуаля, наконец-то появилось наше меню!

Дополнительные плюшки

• Что делать, если нужно добавить к определенному пункту меню определенный класс?

Ничего сложного! Для начала включаем отображение дополнительных настроек в Консоли: в верхнем правом углу нажимаем на кнопку «Настройки экрана» и отмечаем галочкой в разделе «Показывать расширенные свойства меню» пункт «Классы CSS». Теперь мы можем дописывать нужные нам классы к нужным пунктам (т.е. этот класс будет добавлен к тегу li, обрамляющего ссылку меню).

Также, мы можем активировать отображение пункта «Цель ссылки» – чтобы добавлять ссылкам тег target, т.е. указывать, как открывать ссылку (в текущем окне – по умолчанию, либо же в новом окне браузера).

• Что делать, если нужно добавлять в меню ссылки на посты и теги?

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

• Как мне вывести меню на сайте, если я не умею добавлять код в файл-шаблон?

В таком случае попробуйте новинку – вывод меню через виджет! Заходите в Консоль – Внешний вид – Виджеты. И простым перетаскиванием виджета «Произвольное меню» в нужную область темы, вы его (меню) активируете на сайте (если еще укажете его название в выпадающем списке «Выберите меню», ну и нажав кнопочку «Сохранить»).

</ul></ul></ul></h3></ul>

Вступление

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

Создать меню WordPress при помощи встроенных инструментов администрирования

Для администрирования сайта WordPress, авторизуемся и входим в административную панель, консоль сайта. В меню панели нас интересует вкладка: Внешний вид → Меню.

Немного о принципах организации и структуре меню WordPress

Основной код WordPress позволяет создавать меню из трех составляющих: Произвольные ссылки, Рубрики сайта и Страницы сайта.

• Произвольные ссылки это возможность вставить в меню пункт — ссылку на любую стороннюю страницу Интернет или внутреннюю страницу сайта. Таким образом можно вставить в меню главную страницу сайта, указав в поле URL адрес главной страницы сайта.
• Рубрики и страницы сайта выбираются для меню из списка реально существующих на сайте рубрик и страниц. Черновики рубрик и страниц в этот список не попадают.

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

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

На странице «Меню» есть две кнопки : Редактировать меню и Управление областями. Изменение внешнего вида страницы не коим образом не меняет ее функциональность. Меню «собирается» по прежним принципам : пункты меню выбираются из внешних ссылок, страниц и рубрик.

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

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

Скриншоты для версии ниже WP 3.8.

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

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

В WordPress в качестве главной страницы можно выбрать:

• любую статическую страницу сайта;
• или последние публикуемые статьи в виде блога.

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

После добавления в меню появляется новый пункт с названием «Главная».

Интересен пункт произвольно. При нажатии на «Произвольно» появится форма в которой

• можно редактировать этот пункт, дополнить его атрибутами title (эта запись будет появляться при наведении мыши на пункт меню);
• сохранить изменения в пункте меню;
• удалить этот пункт меню;
• и что очень полезно, можно поменять его название.

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

Меню создано остается поместить его на сайте. Это можно сделать в части «Область темы». Из выпадающих меню Navigation (это могут быть Main и Top Navigation)  выбираем созданное меню «Главная» и нажимаем сохранить.

Меню создано и размещено на сайте Worpress.

Примечание.Таким же образом можно создать и наполнить любое меню нужными пунктами с произвольными ссылками на любые посты сайта по их URL адресам.

Создадим еще одно меню с рубриками и страницами сайта

Создаем меню с названием «Рубрики». Для этого сначала создадим меню дав ему имя. Нажимаем  знак плюс [+] , вписываем произвольное название меню в появившейся форме и нажимаем «Создать меню». Меню под новым названием создается и сохраняется. Остается собрать его,то есть наполнить нужными пунктами.

В окнах  «Страницы» и «Рубрики» выбираем  нужные рубрики и/или страницы для добавления в меню. Для добавления нажимаем  кнопку «Добавить в меню».

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

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

Оригинальное выпадающее меню WordPress плагином Dropdown Menu widget

Перед установкой плагина обратите внимание на его  тестирование  на вашей версии WordPress.

Для начала устанавливаем плагин на свой сайт. Сделать это можно любым из способов установки плагинов, в том числе  скачать плагин с официальной страницы плагина на WordPress.org (//wordpress.org/extend/plugins/dropdown-menu-widget/) и «залить» его в папку wp-content/plugins.

После активации плагина  в меню «Параметры» появляется новый пункт  «Dropdown Menu». Двумя кликами открываем его для настройки.

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

В пункте «Темы» выбираем одну из 10 тем нового меню.

В пункте «Эффекты» ставим галочку «Использовать эффект выпадения»;

В  пункте «Template Tag» (Шаблон тегов) выбираем из выпадающего списка, меню, которое нужно отображать. Здесь же копируем код, который нужно вставить в шаблон своего сайта, чтобы появилось новое меню на сайте.

Вставляем код меню Dropdown Menu в шаблон сайта

Чтобы вставить код(ниже) меню в шаблон, открываем в консоли Внешний вид >>> Редактор.

 shailan_dropdown_menu(); 

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

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

После  установки  плагина Dropdown Menu widget в списках виджетов появляется новый виджет Dropdown Menu.С его помощью также можно сделать выпадающее меню в боковой части сайта.

На этом про то, как создать простое и выпадающее меню WordPress все!

©www.wordpress-abc.ru

Другие статьи раздела: Администрирование WordPress

Используемые источники:

• https://awesome-design.com/cms/wordpress/proizvolnoe-menyu-sozdanie-i-nastrojka/
• https://sebweo.com/ru/kak-nastroit-menyu-na-vordpresse/
• https://www.wordpress-abc.ru/administrirovanie/kak-sozdat-menyu-wordpress-prostoe-i-vypadayushhee-menyu-wp.html