Выпадающее меню вордпресс. Как создать боковое меню в wordpress. Оригинальное выпадающее меню WordPress плагином Dropdown Menu widget

Создание многоуровневого меню в WordPress занимает не больше времени, чем создание обычного «плоского» меню. Всё делается в том же интерфейсе в разделе «Внешний вид» - «Меню». Давайте для примера создадим структуру меню типичного сайта-визитки какой-нибудь абстрактной компании по оказанию IT-услуг.

Вот примерная структура меню, которая может быть у сайта-визитки сервисной компании:

• Главная
• Отзывы клиентов
• Услуги
  • Подбор оборудования
  • Монтаж и прокладка ЛВС
  • Виртуализация
  • IP-телефония
  • Видеонаблюдение
  • Мониторинг
• Контакты

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

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

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

Заходим в раздел «Внешний вид» - «Меню»:

Создаём новый набор меню или используем уже существующий.

В левой части этого интерфейса находим блок «Произвольные ссылки» и раскрываем его (подробнее о вставке ссылок я рассказывал в инструкции ):

Для создания структуры меню нам понадобятся ссылки-заглушки, чтобы не происходил переход на какие-то несуществующие страницы или внешние сайты. Для этого в поле «URL» достаточно указать символ решётки - #, а в поле «Текст ссылки» вставляем нужную нам фразу.

После нажатия на кнопку «Добавить в меню» в правой части экрана появится созданный нами пункт:

Добавляем остальные пункты в меню

Теперь по аналогии создаём остальные пункты меню первого уровня. В результате мы получим примерно такую картинку:

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

Пока неплохо выглядит, я думаю можно продолжить дальше. Кстати, если вы не видите созданное только что меню, тогда вам следует обратить внимание на раздел «Области темы» в интерфейсе управления меню и выбрать там нужную вам опцию. У меня это выглядит так:

Возвращаемся в интерфейс управления меню и теперь уже по аналогии добавим все меню второго уровня, которые будут у нас в виде выпадающего меню для пункта «Услуги». Всё точно так же, ничего нового я тут не покажу.

Результат должен получиться следующий:

Вы, скорее всего, удивитесь, почему же пункты меню не оказались под пунктом «Услуги». Возможно команда разработчиков WordPress и сделала бы создание дочерних пунктов путём добавления дополнительной опции, как, например, с , но они сделали это удобнее, взгляните:

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

По аналогии сделаем и другие пункты:

То, что всегда вызывало у меня сложности – невозможность быстро добавить выпадающий список рубрик к основному меню моей темы через панель управления меню в WordPress. Несмотря на то что система меню обеспечивает средства для добавления рубрик в меню, она не позволяет легко создать выпадающий список рубрик. К счастью, существует простой подход, который помогает добиться этой цели без использования кода. Спасибо Sami Keijonen, который рассказал мне о данной технике на форумах поддержки ThemeHybrid.

В чем заключается суть техники? Начнем с того, что перейдем в раздел Внешний вид – Меню. Выберем меню, в котором мы хотим, чтобы показывались ссылки. Создадим новую ссылку и введем символ «#» в качестве URL. В поле Link Text введем Categories. Затем щелкаем по кнопке Add to Menu.

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

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

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

И снова Здравствуйте! С Вами как обычно Владимир и тема сегодняшнего дня будет такая — как сделать выпадающее меню на WordPress сайте или блоге... Погодка сегодня ппц, -27 мороза! Уххх! Даже выходить на улицу не хочется =(А завтра уже -7 обещают… Ни чего себе колебания погоды, к чему бы это интересно?!

В общем раз такое дело, решил провести время с пользой и со своей кошкой «Боней», написать для Вас полезную статью! Читаем, внедряем, комментируем =)

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

Итак, задание:

• Я хочу создать такое меню, пунктами которого можно сделать как и страницу, так и любую запись из блога. Возможно, еще чтоб этот пункт выводил все записи из выбранной мной рубрики или все записи, которым дана определенная метка (тег).
• А может даже я захочу сделать пунктом меню любую ссылку, какую захочу.
• Еще я хочу сделать несколько пунктов меню в виде выпадающего списка на WordPress, в котором содержатся подпункты. Причем эти подпункты может мне даже захочется сделать и в одном из подпунктов.
• Короче, хочу выпадающее меню двух- , трех- или даже четырехуровневое.
• Та-а-ак, что еще придумать? А! Хочу, чтоб при наведении на любой из пунктов, всплывало какое-то пояснение к нему. И еще, чтоб некоторые из пунктов меню открывались в отдельном окне браузера.

Вроде все! А не много ли я хочу? =)

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

Итак, если Вы готовы, то давайте приступим к делу.

Делаем выпадающее меню на WordPress

Чтобы перейти к созданию меню WordPress нужно в админпанели перейти по вкладке «Внешний вид» -> «Меню».

Обращаю Ваше внимание на то, что эта возможность появилась у WordPress, начиная с 3-ей версии. Если у Вас более ранняя версия, то обязательно обновитесь.

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

Жмите, «Настройки экрана» и поставьте галочки так, как у меня.

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

Создаем выпадающее меню на WordPress

В поле для ввода имени меню, пишем любое название. Я назвал - « верхнее_горизонтальное_меню ».

Жмем справа кнопку «Создать меню». Теперь у нас стала активна левая колонка, которая отображает несколько блоков, позволяющие нам добавить пункты в наше меню.

Вкладка «Управление областями». Здесь нам говорят, сколько меню поддерживает наша тема. В моем случае - 1 меню. В выпадающем списке нужно выбрать название того меню, которое мы будем использовать. Мы ранее создали меню с названием «Верхнее меню». Выбираем его и жмем «Сохранить».

Давайте теперь разберем каждый блок:

• Первый блок «Страницы» — позволяет нам добавить в пункт меню страницы которые уже существуют на Вашем сайте.
• Второй блок «Ссылки» — позволяет нам добавить в пункт меню любую ссылку. Например, я хочу в меню сделать пункт, который будет вести на мой блог. В поле «URL» я пишу адрес своего блога, а в поле «Текст» - название пункта. Жмем кнопку «Добавить в меню».
• Третий блок «Рубрики» — позволяет в пункт меню добавить любую рубрику Вашего сайта. Опять же ставьте галочку напротив нужной рубрики и жмите «Добавить в меню».
• Четвертый блок «Записи» — можно добавить ссылку на любую статью которую Вы хотите видеть в меню WordPress и нажмите «Добавить в меню». Эта возможность может Вам пригодится тогда, когда Вы хотите обратить внимание Ваших посетителей на какой-то важный или полезный пост.

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

В поле «Атрибут title» впишите какое-то пояснение к пункту. Это пояснение будет всплывать при наведении на пункт меню курсора мыши. Если Вы хотите, чтоб этот пункт открывался в новом окне браузера, поставьте галочку напротив «Открыть ссылку в новом окне/вкладке».

Таким же образом настройте и все остальные пункты меню. Когда все будет готово, нажмите кнопочку «Сохранить меню». Все, можете обновлять Ваш сайт и смотреть результат.

Теперь давайте вспомним все мои капризы про выпадающее меню на WordPress и посмотрим, что мы еще можем сделать...

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

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

Так мы можем строить многоуровневые выпадающее меню WordPress. Смотрите видео!

20.10.2012

admin

Те кто пользуется движком wordpress наверное заметили, что часто не всегда просто создать нужное боковое меню на сайте. Как создать вертикальное раздвижное меню именно об этом пойдет речь в данной статье.

В CMS wordpress не так сложно разместить верхнее или нижнее горизонтальное меню. И для многих новичков не составит труда установить такое меню у себя на сайте. Но, когда речь заходит про навигацию сбоку, не все знают, как конкретно это сделать. А ведь именно левое боковое расположение меню считается более оптимальным с точки зрения посетителя. Это могут подтвердить многие исследования. Потому что человек, зайдя на сайт, начинает его мониторить, начиная с левой стороны. Поэтому не зря гугл тоже разместил свою навигацию именно слева от поисковой выдачи.

Установка бокового меню в wordpress

Чтобы установить боковое меню в wordpress можно воспользоваться виджетом «Собственное меню». Правда, перед этим нужно будет создать свое уникальное меню. К примеру, ваш сайт, занимается продажей кухонных оборудований, таких как, краны, смесители и другая сантехника. Поэтому, прежде всего, нужно создать страницы типа «Главная», «Товары», «Статьи», «О нас». В статьях же можно выложить материалы о том, какой марки выбрать сантехнику, как купить мойку для кухни из искусственного камня, какие бывают виды смесителей и т. п. После чего, следует зайти в раздел «Меню» в админке вордпресса, и создать там новое меню из этих страниц, которое будет боковым. Теперь, как я говорил выше, можно расположить боковое меню с помощью виджета вордпресс. Для этого достаточно установить виджет в сайдбар и выбрать в нем соответствующее меню. А можно пойти другим путем, воспользоваться специальным плагином.

Видео установка плагина jQuery Slick Menu

Создание вертикального меню с помощью плагина jQuery Vertical Accordion Menu

Данный бесплатный плагин позволяет создать вертикальное раздвижное меню. Причем по умолчанию, уже есть пару готовых вариантов шаблонов меню, причем с различными цветами. Самая главная особенность данного плагина в том, что он позволяет создавать именно раздвижное меню. Это очень удобно, если скажем, в одном пункте меню у вас есть несколько подпунктов. При наведении мышкой на первый раздел будет раскрываться дополнительный список пункта. Еще одной приятной особенностью, которой обладает Vertical Accordion Menu, является наличие специального шорт-кода плагина. Который можно разместить в самих записях сайта, тем самым создав там меню.

плагин позволяет создавать различного цвета и стиля меню

Установить плагин можно через саму админку вордпресса, набрав там «jQuery Vertical Accordion Menu» или же скачать с официального сайта автора. После установки плагина, вам нужно зайти в «Виджеты», найти там виджет плагина, и перетянуть его в сайдбар. В самом виджете вы найдете все необходимые настройки плагина. Хочется добавить, что у автора jQuery Vertical Accordion Menu есть и другие специальные плагины, которые позволяют создавать различные многоуровневые меню, как вертикальные, так и горизонтальные.

Таким образом, создать вертикальное выпадающие (раздвижное) меню в wordpress, не так уж сложно, если использовать специальные плагины.

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

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

1. Перед тем, как создать выпадающее меню, обязательно удалите стандартное меню. Откройте файл — sidebar.php , найдите в нем строчку:

и смело ее удаляйте;

2. Теперь откройте файл — header.php , найдите окончание блока «headerimg» и после него вставляйте следующие строки код:

Значение «menu» указывает на то, что меню будет для страниц, а если изменить это значение на «categories», то это меню будет выводить все созданные рубрики;

3. Сейчас необходимо зайти в style.css и добавить туда (желательно после блоков, которые отвечают за шапку) эти стили:

/*отвечает за общий стиль блока меню*/ #menu { height: 30px; background: #4182b8; margin: 5px 20px 100px 20px; clear: both; font-size: 14px; } /*отвечает за стиль ссылок в меню*/ #menu li a{ color: #fff; display: block; line-height: 27px; padding: 0 10px; } #menu li a:hover { background: #07599d; text-decoration: none; } /*отвечает за стиль для элементов первого уровня, т.е. дочерних страниц*/ #menu li { list-style: none; float: left; } /*отвечает за стиль для элементов дочернего меню*/ #menu li ul li { float: none; } #menu ul { background: #4182b8; margin: 0; padding: 0; position: absolute; z-index: 10; }

4. В этом шаге, мы немного изменим CSS, для того чтобы активные страницы подсвечивались. Следует использовать следующий код:

.current_page_item, .current_page_parent{ background: #07599d; text-decoration: none; }

5. Самый важный и последний шаг, который сделает из меню, выпадающее. Для этого в style.css редактируем последний блок стиля выпадающего меню и делаем его таким:

/*строка display:none прячет выпадающее меню*/ #menu ul{ display: none; background: #4182b8; margin: 0; padding: 0; position: absolute; z-index: 10; }

Теперь необходимо подключить jquery к нашему шаблону, а для этого снова идем в файл — header.php, прописываем там строчку:

И добавляем код, который позволит показывать меню дочернее при наведении:

jQuery(document).ready(function(){ jQuery(«#menu li»).hover( function(){ jQuery(this).find(‘ul’).show(); }, function(){ jQuery(this).find(‘ul’).hide(); } ); });

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

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