wordpress разное меню для разных страниц
Произвольное меню в WP 3.0+ (wp_nav_menu)
Широко известно, что в WordPress 3.0 добавлена поддержка произвольных меню (настраиваемых меню). Вещь, на мой взгляд, крайне удобная и полезная. Собственно, отсюда и эта статья.
Удобство заключается в том, что теперь можно создавать и конфигурировать меню прямо из админки, добавляя ссылки кликами по чекбоксам и меняя порядок ссылок простым перетаскиванием. В меню можно добавить ссылки на страницы, категории и отдельные посты. Можно создавать многоуровневые меню, так же в меню можно добавлять свои произвольные ссылки, о которых WordPress не знает. В общем, полная свобода действий.
Однако, чтобы такая «свобода» была доступна, нужно, скажем так, легким движением мышки, настроить вывод произвольного меню в шаблон.
Использовать такие меню будет крайне удобно, если пользоваться мультисайтовой возможностью WordPress, потому что для разных сайтов можно будет настраивать разные меню, а шаблон для них использовать один.
Заметка: меню работает через таксономию (nav_menu) WordPress, а произвольные (внешние) ссылки, записываются в основную таблицу БД posts. Такой подход более гибкий и динамичный, однако требует постоянной генерации таких меню.
Видео по меню в WordPress
Включаем поддержку произвольных меню (wp_nav_menu)
Для начала нужно зарегистрировать возможность использования произвольных меню и сами меню. Делается это в файле functions.php,с помощью функции register_nav_menu(), так:
После того, как меню зарегистрированы, идем в админку и создаем свои меню (в данном примере 2 менюшки):
Задаем название меню (меню в шаблоне можно выводить по указанному названию, функцией wp_nav_menu()
Создаем пункты меню. Используем левый блок: страницы ссылки, рубрики
Поддержка произвольных меню в WordPress включается для каждой темы отдельно, такой строчкой в файле functions.php add_theme_support(‘menus’); Однако, в этой строчке нет необходимости, если мы регистрируем меню. В этом случаем поддержка будет включена автоматически.
Вывод произвольных меню через функцию wp_nav_menu
Меню зарегистрированы и созданы, осталось добавить их в шаблон. Делается это функцией wp_nav_menu(), которая может принимать следующие параметры:
В данном примере в шаблон нужно вставить примерно (зависит от необходимых вам параметров) такие, 2 кода:
#1. Вывод меню по расположению
Верхнее меню. Вставляем в шапку шаблона (header.php), там где будет выводится верхнее (top) меню:
Выведет созданное в админке меню, прикрепленное к расположению «Верхнее меню» с подобной структурой:
Нижнее меню. Вставляем в подвал шаблона (footer.php), там где будет выводится нижнее (bottom) меню:
Выведет созданное в админке меню, прикрепленное к расположению «Нижнее меню». Структура будет идентичная первой.
#2 Выводим меню по названию
Можно указать ID меню, а не название. Так, при изменении названия меню, код останется рабочим. ID меню можно посмотреть в УРЛ во время редактирования меню:
Заметки
Уберем обертку Div
Изменяем параметры по умолчанию
Проверка зарегистрировано ли меню
Параметр walker
Из всех передаваемых аргументов, непонятным является walker. Для тех, кто хочет разобраться для чего он нужен, читайте раздел в описании функции wp_nav_menu(). Там коротко и ясно описан принцип. Если очень коротко, то с его помощью можно внедриться в процесс генерации меню и изменить его как угодно.
Включение доп. параметров у меню
Меню можно настроить, например, можно добавить возможность указывать CSS класс для элемента меню, для ссылки меню. Для этого откройте вкладку «Настройки экрана»:
Как отображать разные Сайдбары для разных Записей и Страниц в WordPress (через плагин)
Сайдбар — это область боковой панели на сайте, где обычно отображаются ваши виджеты, баннеры, поисковая строка и социальные кнопки.
По-умолчанию WordPress отображает один и тот же сайдбар на всех записях и страницах сайта. Но что если вы хотите для какой-то отдельной записи показать другой сайдбар с отличающимся контентом?
В нашем предыдущем уроке мы рассказывали, как отображать разные сайдбары для отдельных Записей и Страниц с помощью произвольных полей и правки кода.
В этом уроке мы покажем, как отображать разные Сайдбары для разных Записей и Страниц в WordPress с помощью бесплатного плагина.
Зачем нужны разные Сайдбары в WordPress?
Как правило, сайдбарами управляет ваша тема оформления WordPress. В каждой теме может быть предусмотрено один или несколько сайдбаров с предустановленными виджетами.
Этот сайдбар будет отображаться на всем вашем сайте на каждой странице, записи, в метках и рубриках. Но иногда для некоторых страниц нужен отдельный сайдбар с другим набором баннеров или виджетов.
Например, вы можете отображать другую форму подписки или другую рекламу на странице с последними или самыми популярными записями.
Плагин Easy Custom Sidebars
Настроить разные сайдбары в WordPress очень просто с бесплатным плагином Easy Custom Sidebars :
Плагин создаст новый сайдбар, и вы сможете настроить его остальные параметры:
После этого вы должны выбрать, какой стандартный сайдбар будет заменен вашим новым сайдбаром. Выберите из выпадающего списка свой старый сайдбар и впишите краткое описание, чтобы потом не запутаться.
Далее вам нужно указать, где именно вы хотите отобразить свой новый сайдбар взамен стандартного старого. Слева в колонке вы увидите на выбор: записи, страницы, рубрики, метки и т.д.
Просто выберите из раскрывающейся области, где вы хотите разместить новый сайдбар, и нажмите Add to Sidebar :
Вы можете создавать столько кастомных сайдбаров для отдельных записей, сколько захотите.
Добавление виджетов для нового сайдбара
Когда вы создали новый сайдбар и назначили ему конкретные записи и страницы для отображения, пора добавить виджеты для него.
Перейдите в меню Внешний вид → Виджеты и вы увидите, что у вас теперь 2 сайдбара: ваш старый и новый, который вы только что создали:
Вы можете добавлять любые виджеты обычным образом, как и для стандартного сайдбара. После этого можно зайти на сайт и убедиться, что для выбранных записей отображается другой сайдбар с другими виджетами.
На этом все! Мы показали, как с помощью бесплатного плагина создавать и отображать разные Сайдбары для разных Записей и Страниц в WordPress.
Разное обычное и мобильное меню в WordPress, функция wp_is_mobile, плагин WP Responsive Menu
В процессе работы над одним интернет-магазином у меня возникла ситуация, когда основное горизонтальное WordPress меню содержало около двух десятков ссылок. На сайте их легко можно оформить в виде выпадающих списков, но в мобильной версии все это скапливалось в одном блоке. Такой элемент выглядит «захламленным» и, вероятно, мешает некоторым пользователям сориентироваться.
Одним из выходов из ситуации есть создание альтернативного мобильного меню в WordPress, которое бы имело упрощенный вид и содержало лишь ссылки на основные разделы. Это можно сделать с помощью некоторых модулей или функции wp_is_mobile. Рассмотрим все варианты:
Функция wp_is_mobile
Данный условный оператор проверяет посещает ли человек ваш сайт с мобильного устройства, возвращает значение True или False. Синтаксис его следующий:
В Wodpress wp_is_mobile не используется для выбора/задания стилей адаптивного дизайна. Он лишь определяет элементы веб-проекта, которые должны выводиться исключительно на мобильных устройствах не зависимо от размера экрана — соответствующие классы, viewport, скрипты сенсорного дисплея и т.п.
Внимание! В функции есть 2 нюанса:
И если первая ситуация возникает достаточно редко, то с кэшированием получается не совсем хорошо (в посещаемых сайтах без него не обойтись).
Алгоритм создания альтернативного мобильного меню
1. Первым делом заходим в раздел админки «Внешний вид» — «Меню». Здесь нужно создать два меню разные для каждой из версий, например:
2. Далее в файле дочерней темы используемого шаблона, отвечающем за вывод шапки (header.php или др.), вставляете вместо вывода меню конструкцию:
В вашем макете код может немного отличаться за счет дополнительных параметров функции wp_nav_menu. Суть метода в том, чтобы в качестве мобильного меню WordPress выводить вариант top-mobile-menu, для обычного — top-pc-menu (если надо, подставляйте свои названия).
После внедрения проверяете работу навигации на смартфонах/планшетах. Как я уже сказал выше, функия wp_is_mobile определяет именно User Agent, поэтому желательно заходить на сайт с телефона, вариант с панелью разработчика Ctrl+Shift+I может глючить.
Плагин WP Responsive Menu
Если нет времени разбираться с условными операторами, всегда найдется подходящий модуль. Существует несколько вариантов, но мы рассмотрим лишь тот, что нужен для текущей задачи — отображения разных WordPress меню в мобильной и десктопной версии.
Скачивайте WP Responsive Menu в репозитории отсюда или устанавливайте плагин из админки. Данное решение позволяет вам без труда создать простое и полностью настраиваемое выезжающее меню для смартфонов, планшетов и т.п. Вот как приблизительно будет выглядеть итоговый результат (цвета настраиваются, есть блок поиска):
WP Responsive Menu весьма популярен — 70тыс. загрузок и 4,5 баллов оценки. За основу взят sidr jquery menu plugin. Не смотря на то, что последний апдейт был год назад, работа над багами (судя по статистике) активно ведется.
После установки модуля все настройки найдете в разделе «WPR Menu», они разделены на 2 вкладки — General (основные) и Appearance (внешний вид).
Дабы решить поставленную перед нами задачу, мы должны:
Таким образом, во-первых, выбираете объект для мобильной версии сайта, во-вторых, скрываете любые ненужные элементы (в нашем случае это основная навигация). В итоге сможете реализовать разные меню в WordPress для десктопа и смартфонов.
Просмотрите остальные параметры плагина и отметьте их по желанию: свайп, зум, блок поиска, отображение логотипа, сторона появления элемента и разрешение экрана, при котором оно срабатывает. Также во вкладке «Menu Appearance» требуется изменить цвета фона и убрать рамки при необходимости.
В целом работать с WP Responsive Menu достаточно просто. Хотя и функция wp_is_mobile не вызывает каких-либо чрезмерных сложностей. Я тестировал оба варианта, и они неплохо себя проявили. Однако следует помнить, что условный оператор wp_is_mobile становится бесполезным при включении кэширования. Учитывая настройки плагина с размерами экрана, там нет привязки к User Agent, а значит подобные ограничения ему не страшны.
Если знаете другие интересные решения для реализации мобильного меню под WordPress, пишите в комментариях. По модулям, думаю, будет отдельный обзор.
Как в WordPress создать второе меню
Приветствую посетителей моего блога!
Постоянный читатель Михаил вновь обратился за WordPress помощью. В этот раз он хочет разобраться как в WordPress создать и вывести второе меню.
Например, у вас есть меню, которое выводится в шапке сайта. Вы хотите выводить еще одно меню в подвале сайта, но это меню должно отличаться от того, что в хедере. В футере вам не нужны выпадающие пункты подменю и, возможно, вы захотите заменить какой-то пункт меню на другую ссылку.
Давайте разберемся как это реализовать.
Как создать второе меню в WordPress
Давайте начнем с создания второго меню в том виде, в котором мы хотим его видеть в футере сайта. Излагаю я на примере темы Twenty Twelve, которая, по умолчанию, поддерживает только одно меню.
Зайдите в админку WordPress и перейдите в Внешний вид – Меню.
Вы попадете на страницу, где будет показана структура вашего базового меню. И здесь же вы можете наблюдать аж две кнопки “Создать меню” (справа вверху и внизу) и еще есть ссылка с текстом “Отредактируйте меню ниже или создайте новое меню”.
Кликайте по кнопке или ссылке создания меню.
На открывшейся странице заполните название меню. Если желаете, чтобы новые страницы верхнего уровня автоматически добавлялись в это меню, то поставьте соответствующую галочку.
Область темы отмечать не надо. Если вы поставите галочку “Основное меню”, то ваше меню в хедере заменится вот этим, которое вы сейчас создаете. Т.е., если вам не нужно второе меню, а вы хотите изменить содержимое основного, тогда отмечайте область темы “Основное меню”.
Далее слева отметьте галочками те страницы, ссылки на которые вы хотите вывести в меню.
Также, ниже вы можете добавить в меню произвольную ссылку или ссылку на рубрику(и).
После того, как выбрали все необходимое для вывода в меню жмите Добавить в меню. И затем кликайте по Сохранить меню.
Все, второе меню создано.
Как вывести меню WordPress
Итак, у нас уже есть второе меню, но оно пока не выводится. Как я написал выше, тема Twenty Twelve изначально использует только одно меню и таких “одноменюшных” тем много. Давайте разберемся как подключить и вывести второе меню.
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 можно изменить порядок меню, создать собственное меню, скрыть или отобразить элементы меню, изменить права доступа и т.д. Существует как платная, так и бесплатная версия. В платной версии доступны следующие продвинутые инструменты: настройка прав доступа для разных ролей, скрытие меню от всех за исключением конкретного пользователя, экспорт меню администратора.
Удобное меню – залог удобной навигации. Пока ваш сайт небольшой и он состоит из нескольких страниц, структурирование меню может не требоваться, но по мере развития вашего сайта, меню пользователей и администратора постепенно будут становиться слишком громоздкими и неудобными. Этого можно избежать, воспользовавшись расширениями в этой статье и облегчив жизнь себе и своим пользователям при навигации на сайте.