Все о WEB программировании

wordpress

Меню в WordPress: меняем вид меню и делаем выпадающее меню

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

Шаг 1. Создание выпадающего меню в WordPress

Выпадающее меню в WordPress создается в админке. Для этого переходим в «Внешний вид»-> «Меню»

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

После перехода в пункт меню мы видим окно редактирования меню:

Создадим новое меню. Для этого в пункте «Название меню» введм название меню и нажмем «Создать меню».

Теперь добавим пункт меню. Например страницу «Главная». Выбираем ее в левой части и жмем «Добавить в меню». Дальше в правой части жмем «Сохранить меню». Все пункт меню добавлен.

04

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

Аналогичным образом создадим еще несколько пунктов меню.

05

Если мы хотим поменять порядок пунктов, то просто перетащите необходимый пункт

на необходимую позицию. Так, например, я захотел, чтобы пункт «Без рубрики» стоял после пункта «Главная».

06

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

07

После всех изменений не забывайте сохранять меню.

Мы с вами создали меню, создали пункты меню и создали подпункты меню. Теперь самое интересное – будем делать выпадающее меню.

 Шаг 2. Настройка внешнего вида меню.

Давайте посмотрим как выглядит наше меню. Для этого перейдем на наш сайт:

08

Теперь наведем курсор мыши на пункт «Главная»

09

Как видим появился выпадающий подпункт «Без рубоики».

Теперь давайте рассмотрим подробнее html код нашего меню:

  • Все меню по умолчанию заключено в div с классом menu-menu-container .
  • Дальше идет список ul с классом menu .
  • Каждый пункт меню заключен в li со многими классами, но нам интересны два класса menu-item и current-menu-item (этот класс только у текущего пункта меню)
  • Подпункты определенного пункта заключены в список ul с классом sub-menu .
  • Каждый подпункт заключен в li с теми же классами, что и пункты родительского меню.

Теперь изменяя CSS свойства данных классов мы с легкостью можем привести наше меню к любому виду. Еще раз напомню, что приведенные классы для меню – это автоматически генерируемы классы по умолчанию WordPress.

В данной статье мы с Вами рассмотрели как создать меню в WordPress, как создать пункты и подпункты меню в WordPress. А также затронули основные CSS-классы меню WordPress

Понравилась статья? Поделись с друзьями.

Источник: web-programming.com.ua

Категория: Выбор и покупка

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