Создание и вывод меню в WordPress. Как редактировать и удалить верхнее меню. Wordpress меню
Плагины меню для CMS WordPress / Полезное / FREELANCE.TODAY
Хотите создать многоуровневые сложные меню для своего веб-сайта, и при этом не возиться с этим делом слишком долго? Решение есть. Сборка и оформление меню сайта легко осуществляется с помощью специальных плагинов для WordPress.
Темы WordPress предоставляют отличные возможности для разработки великолепных сайтов. Однако современные навигационные меню отличаются от тех меню, которые использовались несколько лет назад. При этом темы WordPress продолжают предоставлять меню, которые работают с концепцией темы.
Это не всегда подходит для крупных сайтов с большим количеством страниц, содержащих разнообразные продукты или услуги.
Специальные плагины меню для WordPress помогут добавить на сайт удобную, адаптивную навигацию.
Адаптивные меню WordPress
Меню веб-сайта является одним из самых важных элементов, поскольку оно помогает перемещаться по страницам. Меню определяет варианты выбора, представленные пользователям. Нажав на выбранный пункт меню, пользователь переходит на определенную веб-страницу или совершает действие.
Как с эстетической, так и с навигационной точки зрения, визуально привлекательное меню имеет решающее значение для дизайна сайта.
Меню бывает разных типов, и в идеале вы можете выбрать один из них в зависимости от количества страниц и общего дизайна вашего сайта.
Горизонтальные отображаются в верхней части веб-страницы, а оставшееся пространство зарезервировано для основного содержимого. Оно интуитивно понятно, так как большинство людей предпочитают читать текст по горизонтали.
Вертикальные используются отдельно, или в сочетании с горизонтальным меню. В основном применяются, когда содержимое не может быть помещено горизонтально по всей странице.
Выпадающие могут использоваться как с горизонтальным, так и с вертикальным. Они отделяют видимые элементы главного меню от элементов подменю, которые появляются только при наведении указателя мыши.
Плагины меню WordPress
Сегодня мы познакомим вас с плагинами, которые позволяют создать как раз последний тип меню.
WordPress сам по себе предоставляет встроенные функции для создания различных типов меню. Однако эти функции являются общими, и не позволяют внедрять мега-меню.
Специальные плагины WordPress интегрируются с существующей системой меню WordPress, и предоставляют дополнительные возможности. Плагины помогают создавать профессионально выглядящие mega-меню.
Большинство плагинов имеют встроенную панель администратора для добавления или изменения элементов меню, стилизованных под ваш дизайн сайта. Есть настройки для шрифтов, цветов, фоновой текстуры, значков и т. д. Элементы шорткода позволяют добавлять в меню контактные формы, изображения, видео, карты Google и динамическое содержимое.
Большинство плагинов WordPress Mega Menu оптимизированы для работы с несколькими устройствами. Эти плагины включают в себя поддержку нескольких меню, эффекты наведения и другую анимацию.
Max Mega Menu Plugin
Max Mega Menu — это полный плагин управления меню. С полной легкостью можно изменить существующее меню в удобное, полностью доступное и отзывчивое. Опции включают встроенные настройки для переустановки, добавления виджетов, изменения поведения и преобразования простого меню в мега-меню. Этот плагин в бесплатной версии поддерживает встроенный редактор. В Max Mega Menu Pro добавлены такие функции, как вертикальное, гамбургер-меню, логотип-меню, поддержка шрифтов Google, поддержка WooCommerce и EDD.
Responsive Menu Plugin
Это настраиваемый плагин для WordPress. Интерфейс прост в использовании и предоставляет множество настраиваемых параметров. Различные варианты настройки меню включают в себя тип меню, фоновое изображение, анимацию меню, выравнивание и размещение меню, размер экрана. В бесплатной версии плагин предоставляет такие возможности, как логотипы меню, компоненты для изменения порядка, включающие скрипты, триггеры пользовательского меню. Функциональные возможности Advanced и Pro обеспечивают поддержку предварительного просмотра дизайна, анимации элементов меню, встроенной панели заголовка и т. д.
WP Responsive Menu Plugin
Настраиваемый плагин для мобильного меню. Плагин позволяет преобразовывать существующее меню WordPress во что-то элегантное, удобное и адаптивное. Этот плагин легко интегрируется с системой меню WordPress и работает на всех типах мобильных устройств. Бесплатная версия предоставляет простой в использовании интерфейс администратора. Он предлагает множество вариантов и возможность показывать категории, подкатегории и сообщения. Плагин предоставляет встроенную поддержку для добавления цветов, логотипов, скрытия определенных элементов на мобильных устройствах.
Nextend Accordion Menu Plugin
Плагин Nextend Accordion Menu является удобным для пользователя, настраиваемым и легко интегрируемым. Гамбургер-меню позволяет вам использовать различные уровни подменю. Обеспечивает полный контроль над меню, уровнями, цветами, анимационными эффектами. Его можно использовать для создания «гамбургера» из любого меню WordPress. Версия Lite поставляется с одной темой. 3 дополнительные темы доступны для покупки с PRO версией плагина. Список мощных функций также включает полный контроль над цветами, фоном, изображениями, шрифтами. Также добавлено несколько уровней меню и встроенная поддержка шрифтов Google.
WR Mega Menu Plugin
Плагин Mega Menu от WooRockets — мощный, отзывчивый, ориентированный на пользователя плагин. Предоставляет вам выделенный и интуитивно понятный конструктор. Обеспечивает полный контроль над проектированием и настройкой меню. Поддерживаются ориентация меню и параметры отображения значков, предварительный просмотр в реальном времени и профили для настроек меню. Вы также можете вставлять контент и встраивать Google Fonts из панели подключаемых модулей.
Вышеупомянутые плагины являются хорошо известными и высоко оцененными плагинами WordPress. С их помощью вы без труда создадите мега крутое меню на своем сайте.
Источник: Top 5 WordPress Menu Plugins (Pros and Cons Compared) 2017
freelance.today
8 лучших расширений для WordPress для совершенствования меню на вашем сайте
Чтобы полностью раскрыть потенциал меню на WordPress, попробуйте несколько доступных плагинов. Выбор достаточно широкий, ведь плагины позволяют расширить возможности меню самым разным образом, например, бывают и мега-меню, и адаптивные меню, и кнопки меню и т.д. Ниже список из 8 лучших, на мой взгляд, плагинов для меню на WordPress.
1. Адаптивное меню
Если на вашем сайте еще нет адаптивного меню, то плагин Responsive Menu – хороший выбор для каждого уважающего себя владельца сайта. Расширение предоставляет возможность использовать множество настроек и имеет платную и бесплатную версии. Бесплатный вариант Responsive Menu позволяет изменить немало: цвет, шрифт, кегль, фоновые изображения, реализована возможность деактивировать элементы меню или поменять их порядок, поменять расположение меню на странице (слева, справа, сверху или снизу) и т.д.
2. Max Mega Menu
Удобство навигации и использования на сайтах, где меню состоит из десятков или сотен категорий и элементов, можно улучшить с помощью мега-меню. Мега-меню позволяют разместить все необходимые элементы и при этом не усложнять пользовательский интерфейс. Один из лучших плагинов для создания мега-меню — Max Mega Menu. Созданные с помощью него меню адаптивные, могут использоваться на устройствах с сенсорными и retina экранами.
В расширении Max Mega Menu используется drag-and-drop. Можно одновременно открывать несколько экземпляров плагина и наладить достаточно много визуальных эффектов в меню, например, которые появляются при наведении мыши. Можно сделать так, чтобы при наведении или нажатии мышью появлялись подменю, чтобы изображение плавно появлялось и исчезало, чтобы при навигации выдвигалось подменю сверху или сбоку, добавить иконки. Все это доступно в бесплатной версии, а в платной – еще больше.
3. All in Menu
All in Menu – еще одно расширение на WordPress для создания адаптивных и динамических заголовков мега-меню. В этом плагине тоже используется drag-and-drop, но этот плагин не пользуется такой же популярностью как Max Mega Menu и в нем нет таких же возможностей для индивидуальной конфигурации. Но это не значит, что его не стоит попробовать. Можно настроить расположение элементов меню, их цвет и ширину.
4. WP Mobile Menu
Если на вашем сайте значительный трафик с мобильных устройств, вас не совсем устраивает, как на нем работают адаптивные элементы и вы хотели бы разработать что-то специально под мобильные устройства, то есть смысл попробовать WP Mobile Menu. С помощью этого адаптивного плагина можно изменить существующие настройки меню. Дизайн и функционал можно настроить в соответствии с индивидуальными требованиями. Можно даже добавлять виджеты.
5. If Menu
If Menu – простой, но очень полезный плагин. С его помощью можно настроить параметры, с учетом которых элементы меню отображаются и скрываются. К таким параметрам относятся состояние пользователя (в системе или нет), роль пользователя (администратор и т.д.), тип страницы (домашняя страница и т.д.) и тип устройства (например, мобильный телефон). Продвинутые пользователи могут сами настроить параметры.
6. Menu Buttons
Menu Buttons — скромное, простое, но очень полезное расширение для WordPress. Из названия вы, возможно, уже догадались, что оно позволяет добавить в меню кнопки. Допустим, по умолчанию в оформлении сайта таких кнопок нет, а вам бы хотелось чуть-чуть освежить его дизайн. Плагин позволяет задать цвет, цвет текста, цвет при наведении мышью, ширину, высоту и радиус границ кнопок меню.
7. Menus
Помимо меню для пользователей существуют и меню для администраторов. В них вам тоже может захотеть внести изменения. Menus – один из меню для администраторов, которым можно воспользоваться сразу при работе с несколькими сайтами. Расширение позволяет переключаться между меню сайтов в вашей сети и даже удалять некоторые элементы из полосы меню администратора. Это отличный способ навести порядок в интерфейсе администратора и скрыть меню, которыми вы не пользуетесь.
8. Admin Menu Editor
Admin Menu Editor – еще один плагин для внесения изменений в главную страницу администратора. С помощью drag-and-drop можно изменить порядок меню, создать собственное меню, скрыть или отобразить элементы меню, изменить права доступа и т.д. Существует как платная, так и бесплатная версия. В платной версии доступны следующие продвинутые инструменты: настройка прав доступа для разных ролей, скрытие меню от всех за исключением конкретного пользователя, экспорт меню администратора.
Удобное меню – залог удобной навигации. Пока ваш сайт небольшой и он состоит из нескольких страниц, структурирование меню может не требоваться, но по мере развития вашего сайта, меню пользователей и администратора постепенно будут становиться слишком громоздкими и неудобными. Этого можно избежать, воспользовавшись расширениями в этой статье и облегчив жизнь себе и своим пользователям при навигации на сайте.
Если вы ищете виртуальный хостинг или виртуальный сервер для вашего сайта на WordPress, то помочь в этом может HOSTING.cafe.
habr.com
Создание меню WordPress - 5 лучших плагинов. Верхнее меню wordpress.
Привет, друзья! Счастлив видеть вас на страницах моего блога. Эту статью целиком и полностью посвящаю меню WordPress. Постараюсь осветить эту тему со всех сторон: рассмотрю наиболее интересные плагины для меню WordPress, посвящу несколько строк созданию верхнего меню, расскажу о стандартных возможностях WP. Чтобы материал, описанный в этой статье, был понятен, обязательно перед его прочтением ознакомьтесь с постом о виджетах WordPress.
Стандартные способы создания и вывода меню в WordPress:
- Если тема поддерживает WordPress 3 Menu System, то верхнее menu можно создать через раздел «Внешний вид» — «Меню», в противном случае оно формируется автоматически из публикуемых страниц.
- Создать меню, содержащее активные рубрики блога, можно с помощью виджета «Рубрики».
- Меню с ссылками на страницы блога выводится с помощью виджета «Страницы». Лично я никогда этим виджетом не пользовался, потому что на блоге страницы WP используются для вывода технической информации (о себе, карта сайта, обратная связь и так далее). Лучшее место для них — в шапке блога в горизонтальном виде. Так уж принято.
- Произвольное меню создается в разделе «Внешний вид» — «Меню», для вывода на блог используется одноименный виджет.
- Использовать дополнительными плагины WordPress.
Если 2 и 3 пункты очевидны, и достаточно только добавить соответствующие виджеты, то остальные могут показаться запутанными, поэтому я рассмотрю их поподробнее.
Стандартные возможности WordPress
Перейдите в раздел «Внешний вид» — «Меню», нажмите на кнопку «+» и введите заголовок.
Теперь необходимо добавить в него пункты:
Произвольные ссылки — добавьте ссылку на страницу блога или внешний ресурс и введите текст, под которым она будет выводится. Таким способом можно добавить ссылку на какую-то отдельную запись блога.
Страницы — выберете нужные страницы и нажмите «Добавить в меню».
Рубрики - отметьте галочками нужные рубрики и тоже нажмите «Добавить в меню».
Есть возможность создать иерархию, просто перетаскивая их друг относительно друга. Как эта иерархия будет отображаться на блоге — зависит от используемой темы.
Не забывайте сохранять внесенные изменения.
В темах, которые поддерживают WordPress 3 Menu System присутствует так же опция «Области темы» — это место в шаблоне WordPress, которое специально отведено под меню. Чаще всего оно предназначено для вывода верхнего горизонтального меню блога, которое часто называют «главным». В таком случае достаточно задать «Область темы», и оно автоматически появится на сайте.
В противном случае, используется виджет «Произвольное меню». Перейдите в раздел «Внешний вид» — «Виджеты», найдите в общем списке данный виджет и перетащите его в сайтбар (боковая колонка). После этого появятся настройки, в которых нужно выбрать созданное ранее меню.
Сохраните настройки и полюбуйтесь на свое творение.
Верхнее меню WordPress — как отредактировать и удалить
Во многих темах верхнее menu формируется автоматически из публикуемых страниц, которые в основном используются для общей информации — «О блоге», «Полезная информация», «Карта сайта» и так далее. Для этого в файле header.php используется следующий код:
| <ul> <?php wp_list_pages('title_li=' ); ?> </ul> |
В моей теме оно дублируется еще внизу страницы, поэтому этот же код был и в шаблоне footer.php.
Чем это неудобно:
- Формируется динамически из всех созданных и опубликованных страниц, хотите вы того или нет. Порой некоторые страницы нужно оставить незамеченными.
- В некоторых темах под верхнее меню выделяется очень мало места, поэтому в нем отображаются только первые 3-4 пункта, а остальные скрываются под соседним слоем (будь то область контента или логотип). Смотрится это очень некрасиво, да и поисковые системы могут это счесть за преднамеренное сокрытие ссылок от посетителей.
Исправить эти недочеты достаточно легко — нужно просто удалить тот код, что я привел выше и написать следующую конструкцию:
| <ul> <li><a href="http://имя_блога.ru">Главная</a></li> <li><a href="http://fairheart.ru/o-bloge.html">О блоге</a></li> ... </ul> |
Для людей, которые знают html, разобраться в этом коде не составит труда, для незнающих поясню. Строчки будут отличатся только двумя параметрами:
- значением атрибута href — содержит ссылку на нужную страницу;
- значением между тегами <a></a> — задает текст ссылки.
Плагины меню для WordPress
Для расширения возможностей WordPress можно воспользоваться дополнительными плагинами. В большинстве своем, создаваемые таким образом меню хоть и красивые, но громоздкие, что может вызвать некоторые сложности с продвижением блога в поисковых системах. Использовать их или нет — решать вам.
Вот перечень плагинов меню для WordPress с лучшими рейтингами:
- Floating Menu — простой плагин, с помощью которого легко добавить симпатичное меню с использованием JQuery (библиотека JavaScript, которая используется для создания различного рода визуальных эффектов).
- JQuery Slick Menu Widget — весьма интересное меню, которое можно закрепить в одном из шести местах по периметру экрана. Отлично подойдет для вывода такой информации как подписка на RSS ленту, форма регистрация, социальные кнопки, поиск по сайту и так далее.
- JQuery Vertical Mega Menu Widget — плагин позволяет создать красивое вертикальное меню с использованием JQuery эффектов. После установки плагина добавляется новый виджет, в настройках которого можно выбрать внешний вид и эффекты. Само меню формируется стандартным образом — как я описывал выше.
- JQuery Mega Menu Widget — плагин во многом аналогичен предыдущему, только создает горизонтальное меню, поэтому используйте его не в боковых сайтбарах/колонках, а в горизонтальных.
- JQuery Accordion Menu Widget — продолжает серию плагинов с использованием JQuery. Создает красивый «аккордеон». Кто не знает, что такое «аккордеон», советую попробовать и увидеть своими глазами.
Спасибо за внимание! Подписывайтесь на мою RSS ленту новостей. Всех вам благ!
Лучший способ выразить благодарность автору - поделиться с друзьями!
Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:
Следите за обновлениями в Twitter и RSS.
fairheart.ru
Настройка меню в WordPress. Как создать меню в WordPress. Создание и настройка меню в WordPress
Приветствую друзья! В этом уроке вы узнаете как создать меню в WordPress и как добавить страницу в меню. В прошлых уроках мы уже разобрались с Вами как создавать страницы и записи в WordPress, а сегодня мы научимся и пошагово разберем как создать меню и как добавить вторую вкладку в шапке сайта (выпадающее подменю) в WordPress.
Создание меню в WordPress
1. Для начала необходимо перейдите в панели администратора в Внешний вид — Меню.
2. Теперь необходимо создать меню, для этого нажимаем по «Создайте новое меню».
3. В текстовом поле вводим название для меню WordPress и нажимаем кнопку «Создать меню».
4. Меню создано. Теперь необходимо добавить нужные Вам страницы, записи, метки, рубрики и т.п. в меню WordPress. Для этого нужно выбрать необходимый пункт, например «Страницы» и отметить галочками те, которые Вы хотите добавить. После этого нажимаем «Добавить в меню».
После того как вы добавили нужные страницы, рубрики или записи в меню нажмите «Сохранить меню».
Важно! Если Вы не видите в списке нужные пункты, нажмите в верхнем правом углу «Настройка экрана» и проставьте галочки на необходимых пунктах. После этого они появятся в списке и вы сможете добавить их в меню.
5. Для того, чтобы созданное меню отображалось на главной странице сайта WordPress, необходимо перейти в «Управление областями» и выбрать в списке созданное нами меню, после чего нажать «Сохранить изменения».
Вот и все! Как видите, всего за несколько шагов можно легко создать новое меню в WordPress.
Порядок размещения меню в WordPress
Для того чтобы изменить порядок пунктов в меню, необходимо зажать левой кнопкой мыши нужный нам пункт и перетянуть его выше или ниже. Для сохранения изменений нажмите «Сохранить меню».
В этом примере страницу «Роланд Дискейн» передвигаем в меню после «Добавление видео»
Создание выпадающего меню в WordPress
Для того чтобы сделать выпадающее подменю, необходимо зажать левой кнопкой мыши нужный нам пункт и перетянуть его левее под пункт меню, из которого будет выпадать наше подменю.
В этом примере страницу «Пример страницы» делаем выпадающим подменю для пункта меню «Роланд Дискейн»
Если у вас возникли вопросы по созданию меню, задавайте их в комментариях.
Приветствую друзья! В этом уроке вы узнаете как создать меню в WordPress и как добавить страницу в меню. В прошлых уроках мы уже разобрались с Вами как создавать страницы и записи в WordPress, а сегодня мы научимся и пошагово разберем как создать меню и как добавить вторую вкладку в шапке сайта (выпадающее подменю) в WordPress. Создание меню в WordPress 1. Для начала необходимо перейдите в панели администратора в Внешний вид - Меню. 2. Теперь необходимо создать меню, для этого нажимаем по "Создайте новое меню". 3. В текстовом поле вводим название для меню WordPress и нажимаем кнопку "Создать меню". 4. Меню создано. Теперь необходимо добавить нужные Вам страницы,…
Проголосуйте за урок
100
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Рейтинг: 4.22 ( 19 голосов ) 100wp-lessons.com
Как добавить меню WordPress
Меню – это основной навигационный элемент и без него не обойдётся ни один сайт. В этой статье я расскажу вам, как можно добавить меню WordPress, используя для этого лишь стандартные возможности. У этой CMS достаточный встроенный функционал в части меню.
Это вам тоже будет интересно:
Как добавить меню WordPress
Переходим в пункт консоли «Внешний вид» и выбираем «Меню». Здесь есть две вкладки – «Редактировать меню» и «Управление областями». Чтобы добавить меню WordPress, необходимо перейти во вкладку «Редактировать меню» и потом нажать «Создать новое меню».
В поле «Название меню» необходимо вписать название. Оно не отображается на сайте и используется лишь для того, чтобы вы могли друг от друга отличать все меню, если их у вас будет несколько. Затем нужно нажать «Создать меню». Появится пустое меню, которое необходимо заполнить.
Создание меню
С левой стороны представлен список элементов, которые можно добавить в меню WordPress – страницы, произвольные ссылки и рубрики. Чтобы добавить в меню рубрики или страницы, необходимо раскрыть соответствующий список, выбрать вкладку «Все», отметить галочками нужное и нажать кнопку «Добавить в меню». Потом выбранные элементы появятся в меню, их можно будет видеть в секции «Структура меню».
Добавление элементов в меню
Так добавляются рубрики и страницы. С произвольными ссылками немного иначе. Необходимо в списке слева открыть «Произвольные ссылки», указать в поле «URL» нужный адрес (это может быть как внутренний адрес, так и внешний) и в поле «Текст ссылки» выписать название пункта меню. Затем нужно нажать «Добавить в меню» и этот пункт появится также в секции «Структура меню».
Добавление произвольных ссылок в меню
Итак, когда все необходимые пункты добавлены в будущее меню, следует знаться его структурой. Можно добавить меню WordPress любой сложности и вложенности – у каждого пункта может быть любое количество подпунктов. Чтобы сделать многоуровневое меню WordPress, необходимо мышкой подвинуть будущий подпункт немного вправо, а потом отпустить. Тогда рядом с ним появится надпись «Дочерний элемент» и родителем его будет тот пункт, который прямо над ним. Каждый пункт может стать как родительским, так и дочерним для любого другого пункта.
Не забывайте, что, несмотря на то, что добавить меню WordPress возможно с любым количеством уровней, не рекомендуется делать более 2-х уровней подпунктов, так как это негативно скажется на поведенческих факторах, пользователям будет неудобно.
Благодаря реализованной функции drag and drop можно также мышкой менять местами все пункты. Таким образом, можно отсортировать их, как угодно.
Создание многоуровневого меню
Когда со структурой меню покончено, можно перейти ниже в секцию «Настройки меню». Тут всего две опции:
- Автоматически добавлять страницы. Если поставить тут галочку, то в меню будут включаться все новые страницы автоматически.
- Области темы. Здесь необходимо поставить галочку на той области шаблона, в которой следует выводить созданное меню.
Чтобы добавить меню WordPress, многие начинают искать в настройках возможность сделать его вертикальным или горизонтальным. На самом деле таких настроек нет. Будет меню вертикальным или горизонтальным предусматривается областью, созданной в шаблоне.
Чтобы сохранить все внесённые изменения, необходимо нажать «Сохранить меню». И потом можно идти смотреть, как оно выглядит на сайте.
Вкладка «Управление областями» служит для того, чтобы разметить то или иное меню в какой-либо области, предусмотренной шаблоном. Это удобно, когда на сайте несколько меню. Области меню можно также определить в настройках шаблона WordPress.
Добавить меню WordPress можно не только в область меню, но и в область виджетов, в сайдбар, например. Для этого используется виджет «Произвольное меню».
wp-system.ru
Меню в WordPress. Работа с классом Walker.
Функционал меню появился в версии WordPress 3.0. До этого вывод навигации обычно осуществлялся при помощи функций wp_list_categories() и wp_list_pages(). Конечно, иногда бывает нужно вывести категории сайта в виде меню и ещё чтобы дочерние категории были в виде выпадающих списков, но гораздо удобнее, если каждый элемент меню можно добавить, изменить или удалить по отдельности в админке сайта.
Также в меню WordPress вы можете изменять порядок элементов банальным перетаскиванием.
Давайте подробно рассмотрим весь процесс добавления меню. Для начала переходим в админке во Внешний вид > Меню… У вас нет такого пункта? Окей, значит вашей темой меню не поддерживаются, сейчас мы это исправим, рассмотрим даже два способа.
Способ 1. Включение поддержки меню в теме WordPress
Для активации функционала меню вы можете использовать функцию add_theme_support(). Всё просто и легко, вставляем этот код в functions.php текущей темы и да, после этого мы можем зайти в админку и начать создавать меню.
| add_theme_support('menus'); |
От себя добавлю, что этот способ я не люблю и практически его не использую. На мой взгляд он несколько ограничивает наши возможности и хорош только тогда, когда вы хотите использовать меню в виджетах (т.е. только в виджетах).
Способ 2. Регистрация областей темы
В двух словах, область темы — это такая условная область, которая предназначена для вывода меню. Условная, потому что сама по себе она нигде не выводится. Как всё это происходит по порядку:
- Сначала мы регистрируем область темы. После этого у нас сразу появляется функционал меню тут: Внешний вид > Меню. Допустим мы создадим две области темы: «Шапка сайта» и «Левый сайдбар».
- Затем, при создании меню мы указываем область темы, в которой хотим отображать данное меню. Также можно указать несколько областей сразу.
- И завершающий шаг. В разных частях темы выводим меню, соответствующие разным областям.
Не знаю, насколько понятно я всё это объяснил в теории, но на практике определенно будет легко. Итак, для того, чтобы зарегистрировать область темы, нам понадобится функция register_nav_menus(). Давайте тогда создадим две области, о которых я писал выше: «Шапка сайта» и «Левый сайдбар».
Да, код — в functions.php.
| register_nav_menus( array( 'head_menu' => 'Шапка сайта', 'side_menu' => 'Левый сайдбар' ) ); |
Создание меню
Давайте теперь разберемся, как создавать и как управлять меню. В принципе в админке WordPress всё сделано интуитивно, но на всякий случай мы всё подробно рассмотрим.
Переходим во Внешний вид > Меню, указываем в поле название нового меню и нажимаем кнопку Создать меню.
В итоге у нас получилось вот что:
Теперь, используя колонку со списком страниц и рубрик, давайте заполним меню.
- Для того, чтобы добавить один или несколько элементов в меню, просто отметьте их галочкой и нажмите кнопку Добавить в меню.
- Если вы не видите нужной вам страницы в списке, перейдите на вкладку «Все» либо воспользуйтесь вкладкой «Поиск».
- Для того, чтобы добавить в меню ссылку на главную страницу, в списке страниц перейдите на вкладку «Все», отметьте галочкой элемент «Главная» и добавьте его в меню.
- По умолчанию в меню можно добавлять только страницы, рубрики и произвольные ссылки. Если вам нужно добавить в меню произвольный тип поста, элементы созданной вами таксономии или записи, перейдите по этой ссылке.
- Вы можете изменять порядок элементов перетаскиванием.
- Также, чуть перетащив элемент вправо, его можно сделать дочерним для вышестоящего элемента. Дочерние элементы можно будет реализовать в виде выпадающего списка на сайте.
- Если отметить галочкой «Автоматически добавлять в это меню новые страницы верхнего уровня», то, после публикации новох страниц, они автоматически будут добавляться в конец этого меню (тогда такое меню лучше будет добавлять в сайдбар, так как в шапке может просто не хватить места).
- Отметьте галочкой области темы, в которой вы хотите отобразить это меню.
Всё получилось? Тогда нажимаем кнопку Сохранить меню.
Вы можете удалить или отредактировать (переместить, переименовать) элемент, нажав на стрелку справа (на скриншоте отмечена красным).
Сохранили своё меню? Тогда перейдите на вкладку Управление областями, тут вы также сможете назначить меню для областей сайта, очень удобно, если у вас на сайте много менюх и много зарегистрированных областей.
CSS-классы для отдельных элементов меню, открытие некоторых ссылок в новой вкладке
Как?
На первый взгляд кажется, что таких настроек в админке нет, и, чтобы добавить для какого-то определенного элемента меню CSS-класс, нужно колдовать в коде, но на самом деле это не так.
Видите в правой верхней части экрана вкладки «Настройки экрана» и «Помощь»? Нам нужна первая. Кликаем по ней, после чего у нас выпадает блок, в котором можно включить дополнителные настройки элементов меню.
Например, мне в данный момент требуется добавить несколько CSS-классов элементу меню и сделать, чтобы ссылка открывалась в новой вкладке браузера.
Как добавлять в меню записи, таксономии и произвольные типы постов
На предыдущых скриншотах видно, что по умолчанию в меню можно добавлять только страницы, ссылки и рубрики. А если нам надо добавить запись? Конечно, вы можете добавить её через «ссылки», но тогда, если изменится URL записи, у нас появится ошибка 404.
Решение этой задачи есть и оно очень простое.
Записи и метки
Уже на предыдущем скриншоте можно было увидеть, что записи и метки включаются в меню в настройках экрана. Все, что требуется сделать, это отметить их галочками. Аналогичный образом вы можете и отключить то, что вам не нужно.
Таксономии и типы постов
И у тех и у других принцип один и тот же — при регистрации таксономии (register_taxonomy()) или типа поста (register_post_type()) значение параметра функции show_in_nav_menus должно быть true.
| register_taxonomy('mytaxonomy', array('post'), array( ... 'show_in_nav_menus' => true, ... ) ); |
| $args = array( ... 'show_in_nav_menus' => true, ... ); register_post_type('product',$args); |
Если после этого элементы таксономии или типы записей так и не появились в меню, в правом верхнем углу страницы откройте вкладку «Настройки экрана» и включите их там.
Вывод меню на сайте
Сейчас мы рассмотрим два примера того, как можно вывести меню на сайте, в каждом из них будет использоваться одна и та же функция для вывода wp_nav_menu().
Пример 1. Используем для вывода ID / ярлык / название меню
Если вы всё-таки захотите использовать этот первый способ, я рекомендую в качестве параметра задавать только ID меню. Читайте подробнее о том, как узнать ID меню или его ярлык.
В итоге имеем:
| $args = array( 'menu' => 381 ); wp_nav_menu( $args ); |
Пример 2. Использование зарегистрированных областей темы для вывода меню
На первый взгляд, этот пример может показаться сложнее, потому что сначала нам требуется зарегистрировать область темы (в этом посту мы уже зарегали две области — head_menu (Шапка сайта) и side_menu (Левый сайдбар), затем, при создании меню, нам надо присвоить его одной из этих областей (мы уже создали с вами меню и присвоили его области head_menu) и только после этого мы можем выводить область с содержащимся в ней меню на сайте.
Но на самом деле этот способ намного лучше, ведь для того, чтобы присвоить меню, скажем, для шапки, или отключить меню, или поменять меню местами, вам не придется каждый раз залазить в код темы WordPress.
А если вы разработчик тем WordPress, то первый способ, который просто выводит определенное меню из базы данных, для вас и вовсе не подойдет.
| $args = array( 'theme_location' => 'head_menu' ); wp_nav_menu( $args ); |
Функция wp_nav_menu() имеет большое количество параметров, все они описаны в документации этой функции.
Вставляем меню в сайдбар (в виде виджета)
Существует ещё и третий способ вывода меню на сайте — в виде виджета. Для этого переходим во Внешний вид > Виджеты, находим виджет «Произвольное меню» и перетаскиваем его в сайдбар. Если по каким-то причинам у вас не получается это сделать, сначала прочитайте пост про сайдбары в WordPress.
Переделываем меню при помощи волкера
Рассмотрение класса Walker безусловно заслуживает отдельного поста. Сейчас я покажу лишь простой пример, который позволит вам использовать этот класс при выводе меню, тем самым подстраивая его под свой сайт, меняя HTML-разметку, добавляя различные атрибуты элементам и PHP-условия.
Для начала нужно создать класс, у меня это True_Walker_Nav_Menu, код которого я вставил в functions.php текущей темы.
Хочу сказать, что в этом примере класс не будет делать никаких изменений, он выведет элементы меню в их первоначальном виде. Зато вы сможете использовать этот класс как шаблон, если вам понадобится сделать какие-то изменения в структуре меню.
| class True_Walker_Nav_Menu extends Walker_Nav_Menu { /** * @see Walker::start_el() * @since 3.0.0 * * @param string $output * @param object $item Объект элемента меню, подробнее ниже. * @param int $depth Уровень вложенности элемента меню. * @param object $args Параметры функции wp_nav_menu */ function start_el(&$output, $item, $depth, $args) { global $wp_query; /* * Некоторые из параметров объекта $item * ID - ID самого элемента меню, а не объекта на который он ссылается * menu_item_parent - ID родительского элемента меню * classes - массив классов элемента меню * post_date - дата добавления * post_modified - дата последнего изменения * post_author - ID пользователя, добавившего этот элемент меню * title - заголовок элемента меню * url - ссылка * attr_title - HTML-атрибут title ссылки * xfn - атрибут rel * target - атрибут target * current - равен 1, если является текущим элементов * current_item_ancestor - равен 1, если текущим является вложенный элемент * current_item_parent - равен 1, если текущим является вложенный элемент * menu_order - порядок в меню * object_id - ID объекта меню * type - тип объекта меню (таксономия, пост, произвольно) * object - какая это таксономия / какой тип поста (page /category / post_tag и т д) * type_label - название данного типа с локализацией (Рубрика, Страница) * post_parent - ID родительского поста / категории * post_title - заголовок, который был у поста, когда он был добавлен в меню * post_name - ярлык, который был у поста при его добавлении в меню */ $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; /* * Генерируем строку с CSS-классами элемента меню */ $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes[] = 'menu-item-' . $item->ID; // функция join превращает массив в строку $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = ''; /* * Генерируем ID элемента */ $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args ); $id = strlen( $id ) ? '' : ''; /* * Генерируем элемент меню */ $output .= $indent . '<li' . $id . $value . $class_names .'>'; // атрибуты элемента, title="", rel="", target="" и href="" $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; // ссылка и околоссылочный текст $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } |
Если вам нужны ещё параметры объектов $item, смотрите документацию функции wp_get_nav_menu_items(), которая кстати является ещё одним нестандартным способом вывода меню в WordPress.
Окей, класс вставили, второй шаг — добавить параметр walker в функцию wp_nav_menu(). То есть, если у вас уже используется меню на сайте, не нужно менять его код на тот, который указан тут ниже, надо всего лишь добавить туда ещё один параметр.
| $args = array( 'theme_location' => 'head_menu', 'walker'=> new True_Walker_Nav_Menu() // этот параметр нужно добавить ); wp_nav_menu( $args ); |
Вот и всё, теперь, редактируя класс, вы сможете отредактировать и ваше меню. Всё просто. Если есть вопросы — оставьте их в комментариях, буду рад вам помочь.
Посты по теме:
- wp_nav_mеnu(), создание пользовательских менюМеню в WordPress. Использование функции wp_nav_menu() с описанием параметров и примерами.
- has_nav_menu() — проверяет, добавлено ли меню в указанную область темыУсловный тег, возвращает true, если меню добавлено в указанную область темы, false - если к области не присвоено меню.
- register_nav_menus() — регистрирует области темы для менюВключает поддержку функционала меню, также регистрирует области темы, указанные в параметрах.
- wp_get_nav_menu_object() — возвращает объект менюВ случае успеха функция возвращает объект меню, в случае неудачи – логическое false. Позволяет узнать ID, ярлык, название меню и количество элементов в нем.
- wp_get_nav_menu_items() — позволяет получить элементы меню в виде объектовФункция возвращает массив объектов элементов меню. Позволяет создать нестандартные HTML-шаблоны вывода меню.
misha.blog
