Навигацию не желаете? Меню для WordPress. Шаблон с нуля — Урок №4

Меню WordPress является одной из немногих функций системы, которая при обновлении на WP 3 претерпела огромные изменения. Честно говоря, меню — это то, что мне особенно не нравилось в старых версиях. Для того, чтобы создать простейшую навигацию приходилось использовать неудобную функцию, которая выводила в меню статические страницы. А если вы хотите добавить в него статью из заметок? Можно было конечно сделать его на html, но тогда невозможно было бы управлять из админки. И вот в новых версиях, наконец-то, эта проблема решена!

Меню wordpress

Подключение меню WordPress в шаблоне

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

Старый код вывода меню WordPress задействовал функции

wp_list_pages

или

wp_page_menu

и в самом своем простом варианте выглядел так:

<ul>
  <?php wp_list_pages('sort_column=menu_order'); ?>
</ul>

или так:

<?php wp_page_menu('show_home=1&exclude=5,9,23&sort_column=menu_order'); ?>

Второй вариант более кастомизированный, в нем исключены страницы с id 5,9 и 23.

Теперь же мы будем использовать новую функцию, появившуюся в 3 версии WP,

WP_NAV_MENU

.
Она намного более гибкая и избавляет нас от необходимости настраивать параметры для отображения в самом коде шаблона. Все делает просто из админпанели.

Для начала включим поддержку меню в шаблоне и добавим в functions.php код:

if (function_exists('add_theme_support')) {
    add_theme_support('menus');
}

Далее нам необходимо зарегистрировать одно или несколько меню, если мы хотим сделать разные варианты, например, для шапки и футера.

register_nav_menus(array(  
	    'top' => 'top',        //Название меню в шаблоне  
	    'bottom' => 'bottom'   //Название другого меню в шаблоне  
	));

После этого сохраняем файл, открываем header.php и вставляем в нужном месте:

<?php wp_nav_menu('menu=top'); ?>

а в подвал footer.php вот этот:

<?php wp_nav_menu('menu=bottom'); ?>

Здесь же можно сразу задать определенный css стиль:

<?php wp_nav_menu('menu=top&amp;menu_class=top-menu'); ?>

Вот таким образом подключается система меню WordPress к наблону в версии с 3.0.
Настоятельно советую посмотреть видео — там все рассказано еще более подробно + уделается внимание оформлению элементов списка в меню.





Создание меню из админки WordPress

Все технические подготовительные действия выполнены, осталось только создать непосредственно само меню для блога на WordPress. Переходим в раздел Внешний вид > Меню.

1. Добавляем новое меню (нажать на плюсик)
2. Задаем его местоположение
3. Даем заголовок
4. Отмечаем необходимые пункты из списка или произвольные ссылки и добавляем их.
5. После чего сохраняем изменения.

меню wordpress

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

Кроме этого для каждого пункта можно задать уникальный заголовок и всплывающую подсказку (title)

меню в вордпресс

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

Плагины для управления меню WordPress

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

Для навигации в сайдбаре:

и для создания верхнего меню WordPress

Если хотите узнать, как самостоятельно встроить динамическое меню в шаблон, то изучите модуль по созданию шаблона с нуля из html макета из видеокурса «Веб-сайт своими руками».

HTML в шаблон WordPress своими руками
Узнать детали о курсе

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

Комментариев: 32

  • Хорошая вещь. Только как быть, если в шаблоне только одно меню — верхнее или нижнее? А хочется сделать 2: 1 — на страницы, 2 — на рубрики? Возможно ли это?

    • Вы хотите, чтобы верхнее меню было для страниц одно, а для рубрик другое? Или чтобы было 2 верхних меню на всех страницах?

      • Я хочу вывести рубрики в меню, чтобы на отдельных страницах разместить записи разных рубрик. Но у меня на всех сайтах шаблоны либо с верхним, либо с нижним меню, а все вместе (страницы и рубрики) в одну строку не влезают.

        • Зарегистрируйте еще одно меню и вставьте в шаблон в нужном месте

          • Я зарегистрировала (в Функции), только не знала, куда именно вставлять. В шаблоне (в Заголовке) прописано только одно, я его поменяла, а куда второе вставлять, не нашла.
            Ладно, не буду Вас больше отвлекать. Спасибо за уроки и ответы.
            Меню подождет.

  • Хорошее видео но я хочу создать меню в виде картинок при навидении которых по горизонтали они выезжали как в шаблоне sliding-door-26 только на всю ширину страницы. Возможно ли? И направте плиз а то язамучался.

  • Опытный вебмастер конечно это все поймет, но нужно ли ему это? А вот для начинающего совершенно не понятно. Хотелось бы более подробного объяснения.

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

  • Пардон, не сразу нашел ваш фильм, там кажется все расписано до мелочей, попробую разобраться.

  • Здравствуйте, подскажите пожалуйста! Создал дополнительное боковое меню в сайдбаре из множества рубрик, так они все вылезли на главном горизонтальном меню (они там не нужны).
    Как их можно удалить из горизонтального меню, но чтобы остались в дополнительном боковом, а на главном меню были только страницы?

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

      • Всё, благодарю уже разобрался… Горизонтальное меню поддерживается шаблоном. Всё стало на свои места: в горизонтальном меню выводятся страницы, а в меню сайдбаре при помощи виджета выводятся рубрики. Но изначально почему-то эти рубрики все вышли в горизонтальном, я удалил созданное мною меню и сделал его снова и все стало, как нужно. (только не понятно почему вначале так не получилось 🙂 )

        Есть еще такой вопрос: по JQuery Mega Menu, как его разместить вместо основного горизонтального меню? Оно ставится у меня только в сайдбаре, при помощи виджета и всё, а как его поставить горизонтально вместо основного меню шаблона? Было бы хорошо, если Вы сделали видео-инструкцию и полностью разъяснили как им пользоваться, например, как вставлять в это меню изображения, как на примере: http://wp-voprosov.net/56203c/X0UQSApNHk4RRx5QUkcKBQ9aWFxfWlMCXR8FVltOUFlYVktRXgZUQUhAWEQYQwwQBUlCXEFAHRNdRAFQWBIdQlhDAEhCB0JKS0BcQVBdDU8LSEVcQEodB0NeFhRSDkVbGlwBX1FPXFwIRR1DXlAEBxUW/

        • Здорово, что все встало на свои места. Хорошо! Я расширю статью и дополню более подробным описанием, как вставить такое меню. В кратце, вам надо на месте существующего меню создать еще один сайдбар. Как добавлять сайдбары читайте в соответствующей статье из серии про создание шаблона. И в этот сайдбар уже добавить виджет с вашим меню из этого плагина

  • Добрый день Александр!
    Уже недели 2 сижу на месте… Может вы поможете!
    Нужно 2х уровневое меню — как на это сайте www dreams-factory ru
    Может конечно оно называется как — то по другому, и поэтому я застрял…
    В общем делаю на WP блог — там нужно такое меню — буду очень благодарен! )

    • Ну здесь все в CSS упирается, надо просто правильные стили задать и все. Можете воспользоваться плагином WP Dropdown Menu Widget, там уже есть несколько тем предустановленных. Можете попробовать у самого владельца сайта попросить код стилей для меню.

      • А может есть пример подробный — как это сделать?
        Я находил еще сегодня- но там там все сложно описано…
        Может и как раз повод, что б написать статью? ))

        • В данный момент другими делами занимаюсь, а это надо сесть и делать… Для статьи взял на заметку тему )

          • Жаль! Думаю конечно к тому времени я найду уже! но будет интересно зайти глянуть! )
            Тогда решил попробовать через дропдаун сделать, но он только в боковую панель может(как виджет)?
            Не понял — как его в заголовке использовать можно.
            А еще он на инглише -у меня с ним не совсем хорошо! )
            Ладно, пойду просторы перекапывать — может чего найду! )
            Все равно спасибо за помощь! )

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

          • О… А это как слделать?
            Есть пример?

            Вот читаю — и понимаю, что дофига еще предстоит!… )

        • Зашёл на dreams-factory ru, сейчас там нет 2-х уровневого меню. Но если нужен пример, то на сайте makoveckij ru Вы найдёте примеры и 2-х уровневого, и 3-х уровневого меню. Всё прекрасно описано. Он сам лично переделывал шаблон. Переделывать нужно и CSS, и ещё пару файлов. Весь код выложен.

  • А еще такой вопросик можно?…
    Хочу что б на некоторых страницах не статьи, а фотографии были, причем в 2 -3 колонки.
    А ссылались на статьи. Что – то похожее на ротатор картинок, но не совсем. Пока что нужно 2 х 2 сделать…
    Допустим, загружается главная, там все то же меню верхнее, а на месте, где должны начинаться список статей – там будет 4 картинки (ссылки на статьи) 2 ряда и 2 столбца.

    • Да, классно пишет. Мне сайт помог сначала роутер настроить, потом мини-сеть, потом видеонаблюдение, потом планшет. Но мне ещё много нужно и узнать.

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

    • Спасибо! Один раз открыв видео у вас оно всегда будет отображаться

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