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

Ромчик
9

wordpress

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

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

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

01

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

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

02

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

03

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

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

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Эла - 07.11.2013 в 20:56

    Спасибо большое!
    Единственный сайт, где есть информация как создать подпункт пункта меню.
    Очень просто оказалось, но хитро спрятано…
    С уважением, Эла

  • Oleg - 19.01.2014 в 20:13

    Спасибо! Вполне доступно! Но хотелось бы понять, как не меняя сам шаблон, изменить дизайн кнопок горизонтального меню? Сделать их объемными или с эффектами свечения? Стандартное меню слишком квадратично, как его улучшить?

  • Наталья - 24.02.2014 в 15:56

    У меня все шло нормально, но в самом конце меню отказалось дополняться, если дополню, то предыдущее исчезает. Как бы вдруг стало не резиновое. Что делать? Интернет магазин, я в очаянии.

  • Александр - 02.08.2014 в 21:43

    Здравствуйте!
    Очень нужна помощь, делаю сайт (каталог), поэтому у меня много дочерних элементов или подразделов… они уже не только виснут , но и не загружаются новые, тоесть я создаю новый раздел в меню и подразделы к нему. при сохранении меню подразделы последние не сохраняются…Что делать?!
    P.S.:Заранее спасибо!

  • Erkinbek - 14.08.2014 в 12:01

    Здравствуйте. Мне Нужно помош. Как можно исправить меню сайта tuitkf.uz . Или как можно делать сайт responsive

  • Drew - 26.09.2014 в 09:24

    Только стили править css@Oleg

  • Дмитрий - 28.10.2014 в 12:04

    И где же инфа о «Настройка внешнего вида меню» ? У Вас только указано где пункты и подпункты меню в WordPress, о самой же настройке внешнего вида, ничего не сказано.

  • Ромчик - 28.10.2014 в 20:34

    @Дмитрий
    А менять внешний вид надо в CSS, в конце статьи написаны классы: menu-menu-container — класс для div куда помещено меню, menu-item и current-menu-item — это классы пунктов, sub-menu — это класс подменю.

  • Павел - 12.03.2016 в 17:20

    Добрый День
    Есть 3 меню :
    Top Menu
    Menu Principal
    Raccourcis

    как не меня позиций на сайте поменять местами в Responsive Menu чтоб было следующее:
    Raccourcis
    Menu Principal
    Top Menu

    Заранее спасибо
    PS : тема gadgetine-theme

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика