• Главная
  • Автор
  • Лучший хостинг
  • Оставить Заявку
Блог на wordpress своими руками
Блог на wordpress своими руками from Sun Sunich
  • Главная
  • Автор
  • Лучший хостинг
  • Оставить Заявку
Home  /  Оптимизация блога  /  Улучшение виджета — произвольное меню
Оптимизация блога

Улучшение виджета — произвольное меню

Александр Алексеенко 13.05.2013 блог, произвольное меню 12 комментариев 3571 Просмотр

Как улучшить произвольное меню в боковом виджете?

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

menu_plus

И вот, я решил поискать решение в интернете.

Сначала, я хотел поставить себе решение предложенное Иваном [1]. Суть его заключается в том, что можно с помощью скрипта и стиля сделать вложенное меню, которое будет открываться по клику по картинке плюса.

menu_plus2

Но минусом данного решения является то, что всё меню, каким бы длинным оно не было, придется делать вручную. Я даже сначала запасся оптимизмом и стал было писать длинный 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] — Доработка виджета произвольного меню

TimeWeb - мощный хостинг для вашего сайта

P.S. Если у вас возникли вопросы создания и монетизации блога на worpdress,
и вы хотите обратиться ко мне за помощью, то загляните на эту страничку.



С наилучшими пожеланиями, Ваш Sun Sunich — автор блога на wordpress своими руками

Вы всегда можете сказать мне ->>


Поделиться с друзьями...


Facebook
Вконтакте
Google+
Twitter



Об авторе

Александр Алексеенко

Дорогие Читатели! Представляю вам "Блог на wordpress своими руками" - как коллекцию моего личного опыта по созданию блогов. Буду рад, если мои открытия станут полезными и для Вас! =)

Похожие статьи

  • Как закрыть ссылки авторов комментариев от индексации?

    05.08.2017
  • Убрать дубли страниц replytocom одним простым действием!

    01.08.2014
  • Чрезмерная нагрузка на сервер — что делать?

    31.03.2014

12 комментариев

  1. Федор Ответить
    14.05.2013 at 00:14

    Да, меню работает отлично.
    Отважусь на маленькое замечание. К пунктам меню так и просится какой-нибудь значок (плюсик или треугольничек).
    Когда оно в свернутом виде, то можно посчитать, что это просто ссылки, ведущие на какую-то страницу (статью). Другими словами — нужен какой-то значок, чтобы неискушенный пользователь понимал, что под ссылкой скрывается еще кое-что интересное! 🙂 ИМХО.

    • DobrijZmej Ответить
      14.05.2013 at 10:23

      Присоединяюсь к Федору.
      Значков действительно очень не хватает =)

      • Sun Sunich Ответить
        14.05.2013 at 17:00

        Иван, я твой плюсик буду использовать… 🙂

        • DobrijZmej Ответить
          14.05.2013 at 17:01

          конечно, вот только не слишком ли он крупный будет для меню ?

          • Sun Sunich Ответить
            14.05.2013 at 19:00

            Действительно, что-то плюсик не пошел… добавил традиционную армянскую нумерацию, о чем дописал в статье UPD.

    • Sun Sunich Ответить
      14.05.2013 at 16:59

      Федор, так надо просто со стилями поработать, и там, где мы задаем отступ вызвать маленькую картинку… Найду свободную минутку — допишу… 🙂

    • Sun Sunich Ответить
      14.05.2013 at 18:59

      Федор, я добавил к своему меню — армянские циферки! 🙂 Мне понравилось!

      • Федор Ответить
        15.05.2013 at 01:08

        Прикольно! :)))
        Половина посетителей только из любопытства заглянет!

        • Sun Sunich Ответить
          15.05.2013 at 04:39

          Да, в этих древних цифрах есть что-то заманчивое! 🙂

  2. DobrijZmej Ответить
    14.05.2013 at 10:29

    P.S. позволю себе добавить замечание о плагине my category order.
    Благодаря ему я изначально получил в правой панели дерево меню (правда, его невозможно свернуть или развернуть, но я думаю это не очень большая проблема), с количеством статей в каждом пункте.
    Ну, и чтоб два раза не вставать, удобное Облако тегов.

  3. Анна Ответить
    22.05.2013 at 19:00

    Отличный совет… Но для меня наоборот второй вариант кажется сложнее. Я с первым вариантом попробовала так сказать пошаманить, и получилось))) Спасибо за подсказку.

    • Sun Sunich Ответить
      23.05.2013 at 17:08

      Анна, так я и не говорил, что первый вариант плох, скорее для небольших менюшек — или раскрывающегося списка он более подходит!

Добавить комментарий

Отменить ответ

Подпишись на блог!

Рубрики

  • Своими руками10
  • Защита блога1
  • Эксперименты8
  • Монетизация блога9
  • Установка Wordpress1
  • Настройка Wordpress6
  • Плагины Wordpress10
  • Внешний вид блога12
  • Оптимизация блога8
  • Статистика блога1
  • Полезные программы2
  • Продвижение в соц. сетях10
  • Железо1
  • В гостях у блога1

Мой Блог Вконтакте

Мой Блог в Google+

Статистика Блога

LiveInternet: показано количество просмотров и посетителей

Рекомендую лично!

TimeWeb - один из лучших хостингов в соотношении цена - качество.


Мои статьи помогли Вам! =)
Скажите ->>
Блог на wordpress своими руками
Александр Алексеенко (Sun Sunich) © Copyright 2012-2016. Блог на Wordpess своими руками