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

выпадающее меню WordPressНедавно я установил новый блог WordPress, подобрал неплохую по дизайну тему, начал уже ставить плагины и подбирать виджеты, словом, доводить тему до ума — но тут оказалось, что горизонтальное выпадающее меню эта тема не поддерживает. Дочерние страницы, в меню не выпадают, и вообще, нигде не появляются. Попробовал я и новое меню сделать в административной панели, в пункте Внешний вид — Меню, но это ничего не дало. Помог плагин Multi-level Navigation Plugin. О нем и пойдет речь.

горизонтальное выпадающее менюИтак, давайте разберем по порядку действия, которые нужно выполнить, чтобы получить горизонтальное выпадающее меню для WodrPress. При этом будем рассматривать меню для страниц, потому что меню для рубрик отображается обычно в сайдбаре. Хотя плагин Multi-level Navigation Plugin позволяет делать любые меню — и для страниц, и для рубрик, и для архивов, ссылок и так далее.

Выпадающее меню для WordPress появляется, когда есть хотя бы одна страница родительская. и одна дочерняя. К примеру, Вы сделали страницу О компании, и во время ее создания прописали атрибут Родительская — нет родительской. После этого делаете страницу Маркетинг-план, и атрибут Родительская прописываете — О компании. Таким образом, страница О компании будет являться родительской по отношению к странице Маркетинг-план.

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

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

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

В пункте Параметры меню поставьте галочку там, где данное меню будет применяться. В моей теме, например, были области Menu1 и Menu2. Одна область была над хедером, вторая — под хедером. Пробуйте добавить к какой-то области меню, и затем смотрите, что из этого получается. Можно при этом использовать закладку Управление областями.

Если и после этого выпадающее меню для WordPress не появилось, тогда остается третий вариант — использование плагина Multi-level Navigation Plugin.

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

Затем идете в Плагины — Добавить новый, в поисковой строке вбиваете Multi-level Navigation Plugin, находите и устанавливаете его.

После этого у Вас в параметрах появляется пункт Multi-level Navigation. Заходите в него. Работаете по вкладкам:

  • Home — в этой вкладке находится код, который нужно вставить вместо кода выпадающего меню WordPress, который у Вас стоит сейчас. Вот этот код:
    <?php if (function_exists('pixopoint_menu')) {pixopoint_menu();} ?>
    Идете в пункт Внешний вид — Редактор, выбираете Заголовок (header.php) и ставите вместо кода выпадающего меню, который стоит там, код из вкладки Home. То, что Вы удаляете, на всякий случай копируйте в блокнот, чтобы была возможность вернуть его назад. если что-то не то удалите. В этой же вкладке есть ссылка на CSS генератор, она находится чуть ниже кода: Multi-level Navigation CSS. Там Вы можете подобрать код CSS, который нужно вставить во вкладке Appearance.
  • Appearance — здесь находится код CSS. Изменяя его, Вы можете изменить внешний вид выпадающего окна.
  • Menu contents — вкладка, в которой Вы подключаете различные элементы выпадающего меню WordPress. Например, я подключил в Menu item #1: Home, а в Menu item #2: Pages. В остальных окнах я поставил None. Если в Вашей теме выпадающих меню несколько, то и в этой вкладке тоже их будет несколько. Ниже. в пункте Titles я прописал в окне Home: Главная. И у меня получился первый пукнт горизонтального выпадающего меню — Главная, а остальные пункты — страницы.
  • Settings — настройки выпадающего меню, например, самый первый пункт: скорость появления при наведении мышкой. Можно изменить от slow — медленная, до instant — мгновенная.

В самом низу нажимаете кнопку Update Options, и выпадающее меню WordPress будет готово. Плагин действительно универсальный, и практически всегда срабатывает. Так что желаю Успеха в создании выпадающих окон на своем блоге WordPress!

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

pro444.ru

Демо-версия

Ниже приведена ссылка на скачивание ZIP-архива, который содержит все необходимые для этой статьи коды.

Демо-версия: Выпадающее меню для WordPress — Версия 1.0 (3 кБ ZIP)

Создаем меню в WordPress

WordPress 3 имеет простой в использовании drag-and-drop интерфейс для создания структуры меню. Если вы еще не работали с меню, чтобы создать и сохранить пользовательское меню, перейдите Внешний вид > Меню. Задайте для меню название и сохраните его:

Добавление пользовательского Walker-класса в functions.php

Прежде, чем мы сможем вывести меню в файле темы WordPress, нам нужно добавить Walker-класс WordPress в файл functions.php.

Этот код «очистит» выводимую HTML-разметку нашего меню, чтобы мы могли легко создавать CSS. Скопируйте и вставьте код класса Walker в файл functions.php, который располагается в папке темы. Если файл functions.php не существует, создайте его, а затем вставьте в него код класса:

Вывод меню через файл темы

Теперь у нас есть созданное меню и размещенный класс Walker. Пришло время вывести наше меню через файл темы. Для этого мы используем функцию wp_nav_menu(). С помощью PHP мы вызовем эту функцию и передадим ей параметры нашего меню для вывода структуры HTML.

Параметр menu — это название меню, созданного нами в шаге 1. container_id добавляет в HTML-код меню идентификатор CSS, который мы будем использовать позже в стилях CSS. Параметр Walker указывает функции wp_nav_menu() использовать для вывода HTML-разметки наш пользовательский Walker-класс WordPress:

Добавьте этот PHP-код в один из файлов темы. Где бы вы его не поместили, меню будет выводиться в этом месте. Я использую тему WordPress по умолчанию Twenty Thirteen. Она содержит файл header.php, в него я и вставлю этот код.

Если вы сделали все правильно, то сейчас должны увидеть, что в вашей теме отображается HTML-список без заданных стилей:

Добавление CSS

Откройте файл CSS вашей темы styles.css (в папке CSS или в корневом каталоге темы). Вы можете сразу скопировать и вставить весь приведенный ниже код в файл CSS вашей темы. Я буду разбивать CSS-код на части, чтобы пояснять каждый его фрагмент.

Обратите внимание, что мы используем тот же идентификатор, который мы указали в функции wp_nav_menu() — #cssmenu.

Первый фрагмент CSS-кода — это всего лишь несколько строк, чтобы быть уверенными, что все браузеры начинают обработку с той же точки:

Следующий фрагмент CSS-кода — это стили первого уровня выпадающего меню. Если браузер пользователя не поддерживает градиенты, то заполните фон цветом #3c3c3c.

Псевдокласс :after позволяет добавить тонкую цветную рамку вокруг каждого пункта меню:

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

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

Сначала нам нужно установить для всех пунктов подменю display: none. После этого мы используем псевдокласс :hover, чтобы установить для подменю состояние:hover. Это создаст эффект скрытия и вывода подменю при наведении указателя мыши на родительский элемент:

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

Исходные файлы

По этой ссылке вы можете скачать исходные файлы. ZIP-архив содержит functions.php и styles.css:

Демо-версия: Выпадающее меню для WordPress — Версия 1.0 (3 кБ ZIP)

Устранение неполадок

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

Единственный способ решить эту проблему — определить эти стили CSS и удалить их. Лучше всего использовать для этого расширение Firebug для Firefox и проинспектировать стили CSS вручную. Как только вы найдете конфликтующие стили, удалите их.

Перевод статьи «CSS Dropdown Menu in WordPress» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Установка и настройка плагина выпадающего меню WordPress

Итак, для создания выпадающего меню WordPress нам для начала нужно установить плагин Mega Main Menu из репозитория.

  1. 1.Заходим в админку WordPress и переходим в раздел «Плагины» => «Добавить новый».
  2. 2.В строку поиска вставляем название, ждем, пока пройдет поиск, в результатах поиска выбираем нужный нам плагин и жмем на кнопку «Установить», а затем «Активировать».
  3. 3.Далее, нам нужно перейти в раздел «Внешний вид» => «Меню» и здесь создать новое, или выбрать уже существующее меню, которое мы хотим сделать выпадающим. Для наглядности и экономии времени я заранее сделала заготовку, которое имеет в разделе «Каталог» два уровня вложенности.
  4. 4.Для начала работы с плагином нам нужно включить его в левой панели управления, в разделе «Настройка Max Mega Menu»
  5. 5.Здесь же мы можем в графе «Событие» выбрать, при каких действиях пользователя будет открываться пункты меню.

    Доступно для выбора три варианта:

    Hover intent – тоже самое, что и «Наведение мышки»

    Наведение мышки — открывается при наведении указателя мышки на пункте

    Клик мышки – открывается при клике указателем мышки по пункту

  6. 6.В графе «Эффект» мы можем выбрать эффект при открытии выпадающего меню WordPress

    И скорость, с которой оно будет открываться:

  7. 7.Далее, при наведении указателя мышки на пункт меню, возле его названия появляется синяя кнопка «Мега Меню», нажав на которую мы откроем окно настроек для данного пункта.
  8. 8.Во вкладке открывшегося окна «Мега Меню» мы можем:
    • В разделе «Режим отображения» выбрать способ расположения элементов. Если мы выберем пункт «Выпадающее меню», то в результате мы получим стандартное выпадающее меню WordPress, где пункты будут открываться при наведении на них указателя мышки, либо клике по ним.

      Если же мы выберем пункт «Мега Меню» то в раскрывающейся области подпункты будут располагаться в столбик:

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

    В бесплатной версии плагина доступны для использования только стандартные иконки. Иконки Font Awesome, Genericons и возможность добавления своих иконок доступна только для Pro-версии.

  11. 11.Далее нам нужно перейти в раздел «Мега Меню» на главной странице WordPress. Здесь нам нужны две вкладки: «Темы меню» и «Локации меню»
  12. 12. На вкладке «Темы меню» нам нужно задать тему цветового оформления для нашего выпадающего меню WordPress, так как в этом плагине нет стандартных заготовок.

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

Добавление выпадающего меню WordPress на сайт

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

Для добавления выпадающего меню WordPress в область виджетов нам нужно:

  1. 1.Переходим в раздел «Внешний вид» => «Виджеты»
  2. 2.Выбираем виджет «Max Mega Menu» и добавляем его в сайдбар. Это можно сделать или путем перетаскивания виджета в нужную область, или выбрав виджет и кликнув на кнопку «Добавить виджет».
  3. 3.А дальше нам нужно стилями привести наше меню к нужному виду, так как по умолчанию оно отображается как горизонтальное.

Если же вам нужно сделать дублирующее выпадающее меню WordPress в футере сайта, то для этого нужно:

  1. 1.Переходим на вкладку «Локации меню» в настройках плагина и копируем php-функцию:
  2. 2.Далее, при помощи текстового редактора Notepad++ подключаемся к нашему сайту по FTP и открываем файл footer.php, который находится в корне темы оформления вашего сайта.
  3. 3.Далее, в соответствующем месте шаблона с новой строки вставляем скопированную функцию:
  4. 4.После чего сохраняем файл и выгружаем его на хостинг, нажив на дискетку или сочетанием клавиш CTRL+S.

Вот что у нас получилось:

Теперь у нас главное меню сайта продублировано в футере. Осталось его немного подправить css-стилями.

Как я уже говорила, плагин Max Mega Menu дает огромные возможности, и с его помощью вы можете создать для WordPress выпадающее меню любой сложности, хоть горизонтально, хоть вертикальное, и вставить его в любом месте на своем сайте. Но, к сожалению, у этого плагина есть и недостатки, основным из которых является необходимость дописывать стили для нормального вывода в виджетах.

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

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

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

WordPress меню

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

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

выпадающее меню

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

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

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

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

создание выпадающего меню

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

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

многоуровневое меню WordPress

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

сложное меню на Вордпресс

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

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

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

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

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

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

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

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

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

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

игра найди отличия

savme.ru

You May Also Like

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.