Как сделать выпадающее меню на WordPress?
И снова Здравствуйте! С Вами как обычно Владимир и тема сегодняшнего дня будет такая - как сделать выпадающее меню на WordPress сайте или блоге... Погодка сегодня ппц, -27 мороза! Уххх! Даже выходить на улицу не хочется =( А завтра уже -7 обещают… Ни чего себе колебания погоды, к чему бы это интересно?!
В общем раз такое дело, решил провести время с пользой и со своей кошкой "Боней", написать для Вас полезную статью! Читаем, внедряем, комментируем =)
Меню на Вордпресс, начиная с третей версии движка, имеет очень гибкие настройки. Это позволяет пользователям настроить меню WordPress так, как им необходимо, с любыми их капризами. Вот и мы с Вами покапризничаем сейчас и дадим себе трудное задание по созданию верхнего меню для нашего сайта. А потом с легкостью его выполним.
Итак, задание:
- Я хочу создать такое меню, пунктами которого можно сделать как и страницу, так и любую запись из блога. Возможно, еще чтоб этот пункт выводил все записи из выбранной мной рубрики или все записи, которым дана определенная метка (тег).
- А может даже я захочу сделать пунктом меню любую ссылку, какую захочу.
- Еще я хочу сделать несколько пунктов меню в виде выпадающего списка на WordPress, в котором содержатся подпункты. Причем эти подпункты может мне даже захочется сделать и в одном из подпунктов.
- Короче, хочу выпадающее меню двух-, трех- или даже четырехуровневое.
- Та-а-ак, что еще придумать? А! Хочу, чтоб при наведении на любой из пунктов, всплывало какое-то пояснение к нему. И еще, чтоб некоторые из пунктов меню открывались в отдельном окне браузера.
Вроде все! А не много ли я хочу? =)
Как Вы, наверное, поняли настройка меню включает в себя все перечисленные мной «капризы». Причем, как я говорил выше, все эти капризы с легкостью можно реализовать в админпанели WordPress.
Итак, если Вы готовы, то давайте приступим к делу.
Делаем выпадающее меню на WordPress
Чтобы перейти к созданию меню WordPress нужно в админпанели перейти по вкладке «Внешний вид» -> «Меню».
Обращаю Ваше внимание на то, что эта возможность появилась у WordPress, начиная с 3-ей версии. Если у Вас более ранняя версия, то обязательно обновитесь.
Теперь найдите в верхнем правом углу окна вот такой выплывающий чекбокс:
Жмите, «Настройки экрана» и поставьте галочки так, как у меня.
Это необходимо для того, чтобы на странице отобразились соответственные возможности, которые нам нужны для исполнения моих капризов.
Создаем выпадающее меню на WordPress
В поле для ввода имени меню, пишем любое название. Я назвал — «верхнее_горизонтальное_меню».
Жмем справа кнопку «Создать меню». Теперь у нас стала активна левая колонка, которая отображает несколько блоков, позволяющие нам добавить пункты в наше меню.
Вкладка «Управление областями». Здесь нам говорят, сколько меню поддерживает наша тема. В моем случае — 1 меню. В выпадающем списке нужно выбрать название того меню, которое мы будем использовать. Мы ранее создали меню с названием «Верхнее меню». Выбираем его и жмем «Сохранить».
Давайте теперь разберем каждый блок:
- Первый блок «Страницы» - позволяет нам добавить в пункт меню страницы которые уже существуют на Вашем сайте.
- Второй блок «Ссылки» - позволяет нам добавить в пункт меню любую ссылку. Например, я хочу в меню сделать пункт, который будет вести на мой блог. В поле «URL» я пишу адрес своего блога, а в поле «Текст» — название пункта. Жмем кнопку «Добавить в меню».
- Третий блок «Рубрики» - позволяет в пункт меню добавить любую рубрику Вашего сайта. Опять же ставьте галочку напротив нужной рубрики и жмите «Добавить в меню».
- Четвертый блок «Записи» - можно добавить ссылку на любую статью которую Вы хотите видеть в меню WordPress и нажмите «Добавить в меню». Эта возможность может Вам пригодится тогда, когда Вы хотите обратить внимание Ваших посетителей на какой-то важный или полезный пост.
Теперь давайте посмотрим в правую колонку. Здесь видны те пункты, которые мы добавили. Чтобы немного отредактировать каждый из пунктов, нужно нажать на маленький треугольник справа. У нас раскроются дополнительные возможности настройки для пункта меню.
В поле «Атрибут title» впишите какое-то пояснение к пункту. Это пояснение будет всплывать при наведении на пункт меню курсора мыши. Если Вы хотите, чтоб этот пункт открывался в новом окне браузера, поставьте галочку напротив «Открыть ссылку в новом окне/вкладке».
Таким же образом настройте и все остальные пункты меню. Когда все будет готово, нажмите кнопочку «Сохранить меню». Все, можете обновлять Ваш сайт и смотреть результат.
Теперь давайте вспомним все мои капризы про выпадающее меню на WordPress и посмотрим, что мы еще можем сделать...
- Во-первых, мы можем все наши пункты простым перетягиванием левой кнопкой мыши расположить в удобном для нас порядке.
- Во-вторых, мы имеем возможность сделать выпадающие подпункты для любого пункта просто передвинув дочерний подпункт немного правее.
Таким образом пункт, который находится выше будет родительским, а тот, который ниже и сдвинутый правее, будет дочерним. Нажмите «Сохранить меню» и посмотрите, как это выглядит на сайте.
Так мы можем строить многоуровневые выпадающее меню WordPress. Смотрите видео!
Вот, кажется, все свои капризы я выполнил и создал классное выпадающее меню на WordPress. Можно и заканчивать пост. Единственное, что еще хочу сказать — для грамотной перелинковки Вашего сайт сделайте еще и нижнее меню в футере Вашего сайта.
Если Вам понравилась данная статья, и Вы хотите получать похожие статьи в моем исполнении к себе на почтовый адрес, то подпишитесь на обновление блога. В ближайшее время я планирую написать статьи - Создание кнопки вверх/вниз для сайта, варианты создания логотипа и много других интересностей.