Как улучшить произвольное меню в боковом виджете?
Привет дорогие читатели, сегодня мне захотелось решить одну задачу, а именно, каким-то образом улучшить свое боковое меню, которое создано с помощью виджета произвольного меню и имеет один уровень вложенности. Мое боковое меню с каждой статьей увеличивается в размере и уже стало похоже на длинное полотно.
И вот, я решил поискать решение в интернете.
Сначала, я хотел поставить себе решение предложенное Иваном [1]. Суть его заключается в том, что можно с помощью скрипта и стиля сделать вложенное меню, которое будет открываться по клику по картинке плюса.
Но минусом данного решения является то, что всё меню, каким бы длинным оно не было, придется делать вручную. Я даже сначала запасся оптимизмом и стал было писать длинный html код в боковом сайдбаре. Но, вовремя одумался и вспомнил, что на дворе 21 век, и автоматизация всех процессов — давно облегчает людям жизнь! 🙂
В итоге, я вернулся в поисковые системы и решил узнать — как можно улучшить произвольное меню в боковом сайдбаре? Решение было найдено, как оно работает можете прямо сейчас посмотреть в моем боковом сайдбаре. Теперь мое меню раскрывается и закрывается на один уровень, и при этом, делать его нужно, как и положено, при помощи панели управления -> внешний вид -> меню. Проще говоря, обычное меню созданное с помощью произвольных ссылок.
Как же я добился такого результата спросите Вы? Оказывается, всё не так сложно, решение нашлось благодаря Евгению [2]. Для его реализации понадобилось несколько минут работы! Вот это действительно замечательно! 🙂
Ну, я так обрадовался, что забыл рассказать — как же виджет произвольного меню можно изменить и улучшить. Я добавил в файл своей темы style.css следующие строки:
.menu .menu-item { margin: 5px; /* Отступы для всех list-item */ } .menu .sub-menu { display: none; /* Скрываем вложенные пункты */ margin-left: 10px; /* Отступ слева для вложенных list-item */ }
Этими строками задается стиль, а точнее просто отступы моего меню. Чтобы срабатывало раскрытие и закрытие меню, нужно добавить в footer.php следующий скрипт:
<script> jQuery(document).ready(function() { // Выбираем все ссылки из .menu-item имеющего во вложении .sub-menu jQuery('.widget .menu-item:has(.sub-menu)').children('a').toggle( function() { // Показываем вложенный пункт jQuery(this).parent('.menu-item').children('.sub-menu').css('display', 'block'); }, function() { // Скрываем вложенный пункт jQuery(this).parent('.menu-item').children('.sub-menu').css('display', 'none'); }); // Раскрываем родительский пункт меню если активна дочерняя страница jQuery('.current-menu-item').parent('ul').css('display', 'block'); }); </script>
Сохраняю страницу, обновляю свой блог и вижу результат! Да-да, больше ничего делать не надо, уже всё должно работать, если у Вас не работает, то нужно сопоставить указанные стили со стилями вашей темы. Это сделать не сложно — открыть исходный код просматриваемой страницы блога и найти код виджета произвольного меню, и поглядеть какие стили там применяются.
На этом я заканчиваю данную статью, если у Вас будут вопросы и замечания — комментируйте на здоровье, будем искать истину сообща!
UPD: По просьбам трудящихся расскажу, как я добавил традиционную армянскую нумерацию к своему виджету произвольного меню. 🙂 Я просто добавил пару строк в файл style.css. Синтаксис list-style-type можно посмотреть здесь:
.menu .menu-item { margin: 5px; /* Отступы для всех list-item */ display: list-item list-style-image: none; list-style-type: armenian; } .menu .sub-menu { display: none; /* Скрываем вложенные пункты */ margin-left: 10px; /* Отступ слева для вложенных list-item */ }
Кстати, если кто-то из Вас имеет блог SEO или схожий тематике моего блога — приглашаю Вас в свое сообщество в гугл плюс — Блог на WordPress своими руками. Нас там уже 240 человек, и это в основном наши коллеги. Правила сообщества позволяют любому автору афишировать свои статьи на тему создания блога на вордпресс и тему SEO для всех участников. Которые, как Вы понимаете, являются очень даже целевой аудиторией! Короче говоря, приглашаю и Вас делиться с нами своими находками и статьями! 😉
А у нас по прежнему на острове Ко Ланта незабываемые закаты, вот так выглядел закат сегодня. Желаю Вам максимально комфортно оптимизировать Вашу жизнь! 🙂
[1] — Страница WordPress. Раскрывающиеся списки
[2] — Доработка виджета произвольного меню
Да, меню работает отлично.
Отважусь на маленькое замечание. К пунктам меню так и просится какой-нибудь значок (плюсик или треугольничек).
Когда оно в свернутом виде, то можно посчитать, что это просто ссылки, ведущие на какую-то страницу (статью). Другими словами — нужен какой-то значок, чтобы неискушенный пользователь понимал, что под ссылкой скрывается еще кое-что интересное! 🙂 ИМХО.
Присоединяюсь к Федору.
Значков действительно очень не хватает =)
Иван, я твой плюсик буду использовать… 🙂
конечно, вот только не слишком ли он крупный будет для меню ?
Действительно, что-то плюсик не пошел… добавил традиционную армянскую нумерацию, о чем дописал в статье UPD.
Федор, так надо просто со стилями поработать, и там, где мы задаем отступ вызвать маленькую картинку… Найду свободную минутку — допишу… 🙂
Федор, я добавил к своему меню — армянские циферки! 🙂 Мне понравилось!
Прикольно! :)))
Половина посетителей только из любопытства заглянет!
Да, в этих древних цифрах есть что-то заманчивое! 🙂
P.S. позволю себе добавить замечание о плагине my category order.
Благодаря ему я изначально получил в правой панели дерево меню (правда, его невозможно свернуть или развернуть, но я думаю это не очень большая проблема), с количеством статей в каждом пункте.
Ну, и чтоб два раза не вставать, удобное Облако тегов.
Отличный совет… Но для меня наоборот второй вариант кажется сложнее. Я с первым вариантом попробовала так сказать пошаманить, и получилось))) Спасибо за подсказку.
Анна, так я и не говорил, что первый вариант плох, скорее для небольших менюшек — или раскрывающегося списка он более подходит!