меню

Как сделать выпадающее меню в WordPress

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

Spread the love

меню

Привет, друзья! Вот мы с вами медленно, но верно подошли уже к непосредственнной настройке блога, к его оформлению. До сегодняшнего дня мы уже проделали большую работу на пути создания своего веб-ресурса.

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

Не знаешь о чем создать блог? Выбери тему прямо сейчас

Разбираемся вместе, где и как зарегистрировать домен

Отличный хостинг для Вордпресс — наш выбор Fullspace

Как установить шаблон на WordPress за три простых шага

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

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

Виды меню

На сайте вордпресс можно выделить несколько видов:

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

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

Для чего используют меню

В чем плюс создания такого вида списков? Все просто:

  1. Экономия места. Вам не придется умещать в одну основную строку каталога несколько разделов своего сайта. Вы сможете качественно сгруппировать все страницы, при этом сэкономив место.
  2. Красота. Просто нажимать на ссылки не на столько интересно, как навести на нее и посмотреть, а что еще есть в разделе.
  3. Удобство. Читателю гораздо удобнее сразу перейти на интересующую ссылку, нежели переходить 10 раз со страницы на страницу, чтобы добраться до желаемого результата.

В общем, достоинств очень много, давайте подробнее разберем, как его сделать?

Как сделать выпадающее меню

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

меню

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

меню

 

Нажимаем на «Меню».

меню

 

Нам откроются настройки.

меню

Здесь мы нажимаем на кнопку «Создать новое меню».

меню

 

Вводим название нового каталога (на примере я ввела Главная) и кликаем на «Создать меню».

меню

Нажимаем на стрелку «Ссылки».

меню

Копируем из адресной строки свой сайт и вставляем его в строку «URL», после чего нажимаем на кнопку «Добавить в меню».

меню

 

Затем кликаем на вкладку «Страницы».

меню

 

Выбираем те, которые нам нужны, и нажимаем на «Добавить в меню».

меню

 

У нас добавились элементы, которые мы хотим видеть в нашем меню.

меню

Простое меню готово!

Теперь рассмотрим как сделать выпадающее меню.

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

Создаем произвольную ссылку. Для этого в поле «URL» прописываем http://# и называем «Навигация». Затем нажимаем «Добавить в меню».

меню

Появился новый элемент. Теперь мы можем его перетащить под «Главная», чтобы раздел находился в ней, появится надпись «Дочерний элемент».

меню

 

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

Затем, нажав на стрелочку вкладки «Навигация» в поле «URL» удаляем всю информацию.

меню

Таким же образом смещаем все остальные элементы.

меню

У нас готов первый уровень.

Теперь сделаем по этому же принципу второй уровень. Для этого нам понадобится еще один элемент: рубрики. Добавим его сразу также как мы добавляли элемент «Навигация».

Выделим все для нас необходимое и добавим в наше основное.

меню

Теперь все что появилось, переносим в «Рубрики», создаем дочерние элементы.

меню

 

Теперь «Рубрики» добавляем в «Навигацию» и у нас появляется 3-х уровневый выпадающий список.

меню

 

Чтобы посмотреть, что получилось, нужно нажать на «Сохранить».

меню

И затем в поле «»Управления областями», мы выбираем нужное нам название и кликаем на «Сохранить изменения».

меню

Готово!

Заходим на наш проект, наводим на кнопку «Главная" и у нас всплывает перечень.

меню

Наводим на поле «Навигация» и «Рубрики», и у нас открывается следующие вкладки.

меню

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

Удачи в ваших начинаниях!

Екатерина Калмыкова

7 ответов на “Как сделать выпадающее меню в WordPress”

  1. Отлично, Екатерина. Теперь расскажите, пожалуйста, как добавить поддержку выпадающего меню в саму тему? Не все темы поддерживают выпадающие меню.

  2. Абсолютно тупая и бесполезная статья. А как-же объявление произвольного меню в functions.php? А если вывод произвольного меню там попросту тупо не включён? А как-же объявление меню в файле шаблона? А как — стилевое оформление выпадающей ветки, ведь изначально она должна быть скрыта, и появляться лишь по наведению курсора? Итого: автор — тупорылый сео-дрочер, клепающий говно исключительно ради попадания в ТОП поиска. В топку.

    1. Не знаю о чём вы спьяну написали, но у меня всё отлично заработало по этой инструкции. Делал одноуровневое меню, мне нужен простой выпадающий список. Стилевое оформление выпадающего списка зависит от используемого шаблона, по умолчанию всё скрыто... В чём проблема то? Когда протрезвеете напишите.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Похожие записи