Как сделать меню в сайдбаре вордпресс

Добавил пользователь Дмитрий К.
Обновлено: 05.10.2024

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

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

После небольшого отступления перейдем к нашим “баранам” и окунемся в суть работы с темами, а именно рассмотрим боковое меню WordPress.

Перед тем, как приступить к рассказу и вникнуть в код и настройки, очерчу несколько нюансов, которые вы скорее всего знаете, связанных с боковыми панелями:

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

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

Вывод сайдбара WordPress происходит по определенному принципу, при помощи вызова в файлах шаблона и регистрации в файле functions.php функцией register_sidebar().

Первым делом откроем файл functions.php и напишем функцию регистрации сайдбара:

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

Как добавить sidebar в wordpress тему

Принцип добавления сайдбаров

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

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

Мы проверили существуют ли виджеты в правом сайдбаре и вывели их на странице. По аналогии, заменяя лишь значение ID сайдбара (right-side) на нужный нам, мы сможем вывести все блоки на страницу в необходимом месте.

Куда добавить код для вывода сайдбара в WordPress

Для сайдбаров в вордпресс зарезервирован файл шаблона sidebar.php. Именно в нем в большинстве случаев описывается все необходимое (обертки панелек, условия для вывода на определенных страницах и т.д.)

Если у вас один сайдбар, тогда добавляйте его код в sidebar.php, и подключайте его в нужном месте в файле index.php с помощью функции:

При использовании нескольких сайд баров вам нужно будет создавать дополнительные файлы к примеру sidebar-right.php, sidebar-left.php и sidebar-footer.php.

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

Месторасположение подключения вы выбираете самостоятельно. Значение в скобках должно соответствовать названию файла (sidebar-right.php), выделено жирным.

Как убрать сайдбар в WordPress?

Я детально рассказал как добавить сайдбар в WordPress, теперь пойдем от обратного и начнем удалять. Составлю небольшой план как убрать сайдбар в WordPress (перед редактированием файлов обязательно сделайте их копии и пользуйтесь FTP, не редактируйте с админки):

Заходим в папку с темой и открываем следующие файлы functions.php, sidebar.php и index.php;
ищем и удаляем регистрацию сайдбара в файле функций, как он выглядит описано выше в статье.
переходим к файлу sidebar.php и удаляем вызов боковой колонки (нужно удалить все что связано с dynamic_sidebar(), пример так же есть выше).
идем в индексный файл и удаляем подключение файлов сайдбара (get_sidebar()).

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

Привет! В моей жизни как всегда происходит множество событий, поэтому очень сложно выкроить время для блога. Вчера мы купили билеты в Шри-Ланку и скоро улетаем на 4 месяца, приезжайте в гости! А теперь я занимаюсь поиском самого красивого свадебного платья:))
Сегодня поговорим о том, как создать меню в WordPress, а также добавлять данные блоки в произвольных областях шаблона.
Мы научимся настраивать меню и редактировать его по своему усмотрению.

Редактирование и настройка меню в Вордпресс

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

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

Выбираем название того меню, которое мы создали.

Переходим на сайт и смотрим, что у нас получилось:

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

Это пример адаптивной темы. Вот так будет выглядеть меню в мобильной версии:

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

Как добавить произвольное меню в WordPress без плагина?

Перед тем, как сделать меню в Вордпресс своими руками, вспомним, как создавать дочернюю тему.

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

register_nav_menus( array( 'additionalmenu' => __( 'Additional Menu', 'Название Вашей Темы' ) ) );

Если вы не создаете дочернюю тему, то добавляем ее в основной файл функций вашей темы.

Данная функция позволит нам добавить дополнительное меню WordPress в наш шаблон и создаст для него еще одну область.

Должна появиться дополнительная область темы с названием, которое мы задали в функции.

В нашем случае создаем новое меню под названием Additional:

Но теперь нам нужно связать эту область с блоками шаблона. Например, нам нужно сделать дополнительное меню под шапкой сайта на WordPress. Заходим в файл header.php или копируем его в дочернюю тему. После тега body добавляем следующее:

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

Вносим следующие изменения в файл стилей style.css:

Смотрим, что получилось:

Отображение созданного нами меню еще далеко от идеала, но, при должном редактировании файла css WordPress, вы сможете привести его в соответствующий вашему блогу вид.

Далее разберем, как добавлять произвольное меню с помощью WordPress-виджетов.

Виджеты и плагины для добавления меню в WordPress

Предлагаю к просмотру видео о создании меню в WordPress:

В нашем случае блок меню добавлен в сайдбар. Для него мы выбрали разделы, созданного нами блока Additional.

Соответственно в боковой панели справа у нас отобразится следующий блок:

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

Вот, к примеру, плагин для создания вертикального мультиуровневого меню в WordPress: Navgoco Vertical Multilevel Slide Menu.

Или обладающий расширенными функциями настройки виджет Dropdown Menu Widget.

Также популярны виджеты с JQwery эффектами для меню, например: JQuery Slick Menu Widget.

Разберем на примере принцип его работы.

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

Раскрываем его настройки:

Выбираем название меню (разделы, которые мы создавали), Tab Text – название блока, который будет выводиться на сайте, место размещения (выберем Left – слева), Offset – отступ от верхнего края в пикселях, Animation Speed – скорость анимации (Fast). Можно выбрать Auto-Close Menu, чтобы блок исчезал автоматически. И выбираем цвет блока. Нажимаем сохранить и смотрим результат:

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

При повторном нажатии, блок снова исчезнет.

Это лишь один из видов установки, редактирования и вывода меню в WordPress.

Выбирайте наиболее приемлемый и удобный способ создания меню для своего WordPress-блога. Удачи!

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

Не так давно в комментариях к статье о выделении активного пункта меню с помощью JQuery один из посетителей попросил меня помочь разобраться с плагином меню для WordPress Jquery Vertical Accordion Menu, где подсветка текущего пункта меню не работала.

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

24 комментария к статье "WordPress плагины для меню: 6 лучших бесплатных решений"

Большое спасибо, добротная статья получилась)

На счет пункта меню в JQuery Accordion Menu Widget, на днях попробую, если не получиться отпишусь. Я в принципе так же делал, но не срабатывало, сейчас есть подозрение на саму тему. Будет по больше времени проверю 🙂

Рад, что мой труд был полезен 🙂 Спасибо за отзыв.

Спасибо за статью. Много полезного для себя узнал.

Статья понравилась. С JQuery Accordion Menu Widget у меня тоже проблемка. При клике на пункты меню, страница просто обновляется и все.

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

Промониторьте меню, которое отображается с помощью плагина (Админка -> Внешний вид -> Меню). Если ничего обнаружить не получится, тогда код в студию в виде скрина HTML кода меню, сгенерированного плагином, проинспектированным в инструментах разработчика браузера.

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

В итоге должно получится что-то вроде этого.

Спасибо за ответ! Я уже успел удалить JQuery Accordion Menu Widget и теперь пытаюсь настроить Max Mega Menu. Там с настройками более менее все понятно, единственное не нашел где изменить ширину рубрик. Сейчас ширина стоит на авто. Это я нашел в коде благодаря вашей статье о самостоятельном изменении интерфейса сайта. Но в настройках этого плагина нет ширины рубрик. Только ширина выпадающих вкладок. Я делаю вертикальное меню и как-то не очень смотрятся разнокалиберные кирпичики рубрик))

Если в настройках плагина такой опции нет, то попробуйте в css файле темы (в админке Внешний вид -> Редактор открывает этот файл по умолчанию) прописать для селектора пунктов меню:

Это, по идее, растянет элементы меню на всю ширину контейнера меню.Или пропишите этот код в уже существующем селекторе, если найдёте, конечно 🙂

Хотя, возможно, нужно внимательнее настройки Max Mega Menu, которых просто тьма, на самом деле.

Добрый день! Вопрос ваш (как и все) решаемый 🙂

Если возникнут ещё вопросы — пишите.

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

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

Надеюсь, мой ответ был полезен 🙂

Почему в вордпрессе все такое поганое? Ни одного нет нормального.

А чем Вас Max Mega menu не устроил? Как по мне, достойный вариант среди бесплатных плагинов.

+1, как раз, то, что искал

Подскажите пожалуйста по меню навигации, в левом виджете будет перечисление болезней (35-40), мне нужно, чтобы при клике мышки на болезнь, выдвигалось несколько слов-ссылок (названия препаратов для лечения) каким плагином это осуществить ? Искал подходящее решение, но даже не знаю как правильно сформулировать запрос в гугле. Спасибо

Доброго времени суток 🙂 Вам необходимы плагины меню WordPress для вертикального выпадающего меню. Из представленных в статье плагинов 100% подойдёт JQuery Accordion Menu Widget. Посмотрите видео с демонстрацией его возможностей в статье — там как раз разбирается пример реализации такого меню. Вам останется только подкорректировать его стили под дизайн Вашего сайта.

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

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

Есть, конечно 🙂 Тот же JQuery Accordion Menu Widget при всей его архаичности позволяет это делать. Посмотрите видео в статье. На нём показан весь процесс настройки, чтобы получить нужный Вам результат.

Здравствуйте!
Приобрёл плагин Jet menu, после установки на сайт возникла внутренняя ошибка сервера 500

Здравствуйте. Какой подробный текст ошибки? Что пишется в логах? И, я думаю, в любом случае лучше обратиться к поставщику плагина — официальному производителю или диллеру, у которого Вы непосредственно купили плагин.

Хорошая статья, но сейчас стандарт мега меню это Groovy Menu

За ссылку спасибо, но говорить о том, что плагин с 200+ активных установок — стандарт — это смело 🙂

Добрый день. С интересом прочитал ваш обзор. Интересно было бы в деле посмотреть Max Mega Menu, о котором вы пишете. В заголовках плагина написано, что есть русская версия, но при инсталяции идет стандартная английская, или я не могу до нее добраться? Бьюсь несколько дней, начитался много чего, что-то поставил, но путем ничего не получилось, все прибил и вернулся к началу. Из моей писанины ясно, что я гуманитарий, но ручки шаловливые хотят большего. Изначально искал ответа на потребность создать в главном правом вертикальном меню два предмета с дочерними файлами, желательно, чтобы они открывались или выпадали при нажатии. Речь идет о двух книгах — в одной 29 глав, в другой 6 глав. Хотелось бы, чтобы родительское меню отражалось на всех страницах каждой книги. Следует иметь в виду, что и сейчас вертикальное меню большое, а засунуть еще список такой это ужас. Сайт личный — итоги творческой деятельности за много-много лет. Контент интересный, на мой взгляд. Делаю это не для большой аудитории. Продвижение мне не нужно и неинтересно. Извините за длинное письмо. Буду рад вашему ответу.

Здравствуйте. У Max Mega Menu интерфейс в админке на английском, но меню на сайте Вы можете создавать на любых языках.

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

Меню в WordPress

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

Создание меню WordPress можно осуществить несколькими способами:

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

Создание меню WordPress стандартными способами

После того, как создано меню, вы можете добавлять в него разделы.

Произвольные ссылки

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

Кстати, если хотите вывести неактивный пункт меню, прочитайте эту статью.

Категории

То же самое мы делаем и с категориями, чтобы их добавить в меню WordPress.

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

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

Верхнее меню WordPress

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

Автоматическое добавление страниц в меню очень неудобно по двум причинам:

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

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

Если вы разбираетесь в HTML, сделать это не составит вам труда. Для тех, кто не понимает сути, вот объяснение: каждая строка, отвечающая за вывод пункта меню, будет отличаться от других по двум параметрам:

значением href — здесь вы меняете ссылку на нужную вам;
текстом между тегами и — здесь вы задаете текст ссылки пункта меню.

Плагины меню WordPress

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

Я перечислю пять разных плагинов WordPress для создания меню на своем сайте.

Floating Menu — простенький плагин для создания симпатичного меню на jQuery; — довольно необычное меню, которое можно разместить на одном из шести предложенных мест на периметре экрана, которое подойдет для вывода подписки на RSS, регистрационной формы, соцкнопок или поиска по сайту; — с помощью этого плагина вы можете создать вертикальное красивое меню для WordPress, которое будет использовать jQuery эффекты; — плагин WordPress меню, который похож на предыдущий, но создает меню не в боковой колонке, а в горизонтальном виде; — еще один плагин для меню WordPress, который использует jQuery и с помощью которого можно создать красивое аккордеон-меню (если вы не знаете, что это такое, — попробуйте этот плагин, вам должно понравиться).

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

Читайте также: