Здесь будут рассмотрены функции для создания главного меню сайта:
Основные достоинства нового меню:
- В качестве элементов меню могут быть не только страницы, но также записи, рубрики, метки и произвольные ссылки.
- Автоматическая поддержка многоуровневого меню (не требуется дополнительные скрипты для отображения выпадающих элементов нижних уровней).
- Удобный интерфейс управления:
Перейдем к рассмотрению основного функционала.
Для начала необходимо определиться — сколько отдельных независимых меню вам понадобиться. Например «главное меню» и «вспомогательное меню». Для них надо зарегистрировать соответствующие «области». Для этого воспользуемся функциями: register_nav_menu() или register_nav_menus(). Первая функция служит для создания единичной области, тогда как вторая создает сразу несколько (в качестве аргумента принимает массив).
Использование:
// Разместить в файле functions.php function register_my_menus() { // Функция нужна для последующей привязки к хукам register_nav_menus( array( 'main_menu' => 'Главное меню', 'secondary_menu' => 'Вспомогательное меню' ) ); // То же самое с помощью register_nav_menu() // register_nav_menu('main_menu', 'Главное меню'); // register_nav_menu('secondary_menu', 'Вспомогательное меню'); } add_action( 'init', 'register_my_menus' ); // Привязка
В разделе «Внешний вид» -> «Меню» становятся доступными две области:
Создаем меню и привязываем его к нужной области:
С помощью функции wp_nav_menu() вставляем меню в шаблон.
Описание:
<?php $args = array( 'theme_location' => , // Привязка к "области темы". Области задаются с помощью функции register_nav_menus() в functions.php. 'menu' => , // Если не задан параметр theme_location, то здесь можно указать: идентификатор (ID), ярлык (slug) или имя того меню, которое необходимо отобразить. 'container' => 'div', // Html-контейнер внутри которого помещается основная разметка меню (<ul>). 'container_class' => , // Класс контейнера. По умолчанию: menu-{ярлык_меню}-container. 'container_id' => , // Идентификатор контейнера. Значение по умолчанию отсутствует. 'menu_class' => 'menu', // Класс элемента <ul>, содержащего основную разметку меню. По умолчанию: menu. 'menu_id' => , // Идентификатор элемента <ul>. По умолчанию: menu-{ярлык_меню}. 'echo' => 1, // Варианты: 1 | 0. По умолчанию: 1. Определяет тип вывода: сразу вывести результат на экран (1) или вернуть для последующей обработки в php (0). 'fallback_cb' => 'wp_page_menu', // Если не указан параметр theme_location, и не найдено ни одного не пустого меню, тогда вызывается указанная функция. По умолчанию: wp_page_menu (описание см. ниже). 'before' => , // Текст для вставки перед ссылкой на элемент меню (перед <a>). 'after' => , // Текст после вставки после ссылки на элемент меню (после </a>). 'link_before' => , // Текст для вставки перед текстом ссылки (после <a>). 'link_after' => , // Текст для вставки после текста ссылки (перед </a>). 'depth' => 0, // Максимально число уровней меню. 0 - без ограничений (по умолчанию). 'walker' => // Позволяет переопределить под себя форму вывода меню, включая html-разметку. В качестве параметра необходимо передать ОБЪЕКТ. Исходный класс объекта создается наследованием от класса Walker или Walker_Nav_Menu. По умолчанию: new Walker_Nav_Menu. ); wp_nav_menu($args); ?>
Чтобы обеспечить вывод двух ранее созданных областей на экран, в шаблон (обычно в header.php) помещаем вызов двух функций wp_nav_menu(). В параметрах указываем соответствующие области темы (theme_location), остальные параметры оставляем без изменений:
<!-- header.php --> <div class="header"> <?php wp_nav_menu( array( 'theme_location' => 'main_menu' ) ); // главное меню. ?> </div><!--header--> <div class="sub-header"> <?php wp_nav_menu( array( 'theme_location' => 'secondary_menu' ) ); // вспомогательное меню ?> </div><!--sub-header-->
Главное меню на основе страниц
wp_page_menu() — функция для построения меню на основе страниц. Доступна с версии 2.7. С появлением WordPress 3.0 устарела, но все еще может быть полезна для создания жесткого меню, привязанного к иерархии страниц.
Использование:
<?php $args = array( 'menu_class' => 'menu', // Класс контейнера (div) в котором находятся элементы меню (ul). 'sort_column' => 'menu_order, post_title', // Сортировка страниц. Значение по умолчанию: 'menu_order, post_title' - сортировка по порядковому номеру и по заголовку в алфавитном порядке. Можно указать любой столбец из таблицы wp_posts. Например: 'post_date' (по дате создания), 'post_modified' (по дате изменения), 'ID' (по идентификатору), 'post_author' (по автору) 'sort_order' => 'ASC', // Определяет порядок сортировки. По возрастанию - ASC (по умолчанию) или по убыванию - DESC. 'depth' => 0, // 0 - вывод всех страниц с сохранением иерархии (по умолчанию). -1 - вывод всех страниц без иерархии. 1 - вывод страниц только первого уровня (без подстраниц). 2,3,4 и т.д - определяет максимальную глубину иерархии (если depth=3, то выводятся только страницы 1-го, 2-го и 3-го уровней). 'include' => , // Идентификаторы страниц, которые необходимо включить в меню. Указываются через запятую: '2,14,456'. По умолчанию включены все страницы. 'child_of' => 0, // Идентификатор страницы (единственный). Вывод всех подстраниц указанной страницы. Выводится все дерево подстраниц. Указанная страница не выводится. 'meta_key' => , // Имя произвольного поля. Используется вместе с meta_value. Вывод только тех страниц, для которых задано соответствующее произвольное поле. 'meta_value' => , // Значение произвольного поля. Используется вместе с meta_key. Вывод только тех страниц, для которых задано соответствующее произвольное поле. 'authors' => , // Идентификаторы авторов. Указываются через запятую: '1,3,4'. Выводятся только страницы указанных авторов. 'exclude' => , // Идентификаторы страниц, которые необходимо исключить из меню. Указываются через запятую: '2,14,456'. 'exclude_tree' => , // Идентификаторы страниц, которые необходимо исключить из меню. В отличие от предыдущего параметра исключает не только указанную страницу, но и все дерево подстраниц. 'echo' => 1, // Варианты: 1 | 0. Определяет тип вывода: сразу вывести результат на экран - 1 (по умолчанию) или вернуть для последующей обработки в php - 0. 'show_home' => 0, // Варианты: 1 | 0 | Строка. Ссылка на главную страницу. 0 - не отображать (по умолчанию). 1 - отображает ссылку с текстом "Главная". Если введена текстовая строка, то она переопределяет текст ссылки. 'link_before' => , // Текст для вставки перед текстом ссылки (после <a>) 'link_after' => // Текст для вставки после текста ссылки (перед </a>). ); wp_page_menu( $args ); ?>
66 ответов к “Навигация в WordPress ч.I. Главное меню.”
привет а как быть когда рубрики и сверху и в сайтбаре справа? — я хочу чтоб сверху были одни а справа другие .. по отдельности .. а то у меня после создания рубрик и сверху куча их и справа тож самое((
Сделай два меню!
Сделал, но все равно после обновления страницы сайта меню никак не меняется :(
Есть ссылка на сайт?
http://allnews7day.ru
Не вижу чтобы класс был присвоен…
А вообще стиль должен быть такой:
Дописать в конец style.css
СПАСИБО!!! Получилось!! :) ОГРОМНОЕ СПАСИБО! ))
Спасибо за статью!.. но у меня все равно есть один вопросик… Вот че мне в голову взбрело. Как можно в главном меню сайта выделить один из пунктов.. например все написано обычным шрифтом, а один из пунктов жирным… Где что нужно смотреть и заменить?
Все просто. В редакторе меню надо включить для отображения дополнительную опцию «Классы CSS». Включается через Настройки экрана.
Каждому элементу меню теперь можно присвоить произвольный класс.
Например, special-item. Теперь осталось только прописать в style.css стили для этого класса:
а можно подробнее, пожалуйста? вставил я в style эту строчку, а потом что?
Это и есть потом! А сначала надо этот класс присвоить элементу меню. Делается это, как я и сказал, в редакторе меню.
Тогда у меня что-то не получается…
На картинке я отобразил до вставки стиля и после, вверху и внизу соответственно. (пункт «Карта сайта»), вот почему пункт поменял только бекграунд, а нужно чтобы все осталось как есть а шрифт изменился :( как так сделать? скрин здесь
Все работает, просто надо применить правильные стили.
Для смены шрифта используется директива font-family.
Справочник по CSS: http://htmlbook.ru/css/
Мне ж не шрифт менять, а цвет.. :(
Цвет-цвет…
Попробуй чуть изменить инструкцию:
попробовал. но все равно не то.. может я че-то не то делаю.. вот сюда нужно вставлять стиль? скрин
Если да, то вероятно что-то не так работает, после сохранения исчезают все символы отличные от букв, т.е. в той строке остается лишь
special-item a color red
это же не нормально?
… Ну да, немного не так. В это поле надо вставить только имя класса — special-item (или какое сам выберешь).
А сами стили надо прописать в файле style.css текущего шаблона!!!
Делаю ( пытаюсь) сайт на домашнем компьютере, вставил
в functions.php, но в областях темы всё равно
Подскажите, пожалуйста, что не так?
Надо глянуть весь файл целиком.
Залейте его на http://pastebin.com/
Вот вроде получилось
http://pastebin.com/jpXmZ6V0
немогу понять как сделать ссылкой li а не текст. имхо не могу понять где хранится шаблон вывода меню
Надо с помощью CSS сделать тег a, который внутри li, по размеру таким же как li. Примерно так:
Про шаблон вывода меню см. здесь.
Отличная статья! А класс к не предусмотрен в меню? как его можно прописать?
Почему же? Предусмотрен.
См. параметр menu_class
класс к тегу
как можно прописать?
Есть возможность добавить класс через админку.
Открываем Внешний вид -> Меню
Затем идем в Настройки экрана. В разделе Показывать расширенные свойства меню отмечаем Классы CSS.
Теперь для каждого элемента меню можно прописать произвольные классы.
А как в подключенном новом меню сделать, так чтобы была ссылка на главную?
В редакторе меню, слева есть окошко выбора страниц. Переключитесь в режим «все страницы». Первой будет идти Главная. Вот ее и добавляете в меню.
Спасибо! обнаружила)) и всё так просто оказалось..
Здравствуйте! На локалке делаю шаблон, использую для создания меню функцию wp_nav_menu() (уж не знаю — важно ли это — один из пунктов меню картинка, сделанная из пользовательской ссылки), моя проблема в том, что все пункты меню, все ссылочки окантованы красным пунктиром. Конечно, среди стилей есть обнуление outline и для картинок и для ссылок. При просмотре через инструменты разработчика вижу когда стою на <a href rel="nofollow"> пункта меню, что в стилях появляется element.style {outline: #FF0800 dashed 1px;}. Беду вижу — а как исправить ее не знаю.плиз, хелп
Похоже, стиль жестко привязан к элементу:
Вылечить можно только поправив исходный код, через style.css это не исправить.
ни одному элементу своего шаблона я такого не задавала, более того, дополнительно приписала классу меню .menu{outline: none;} и результата нет. А а у ссылки в стилях неведомо откуда дополнительно появляется outline: #FF0800 dashed 1px;.
А вы шаблон с нуля создаете или какой-то взяли за основу?
да, с нуля
Это странно.
Посмотрите исходный код, там есть какие-нибудь inline стили?
инлайн стиль был у меня относительно шрифта, который я брала из googleapis.com, там размер шрифта и высота,(от отчаяния убирала — не помогало), еще я тыкала свое online:none не только в css но как и стили в элемент nav, но счастья мне это не принесло. И знаете, страница грузится — и красных черточек нет, и их нет ровно столько, чтоб я обрадовалась, и тут же они прорисовываются. вот такая печальная история. чувствую, что дело в какой-то ерунде — но в какой
Такая задержка похожа на javascript.
Может какой-то скрипт проставляет эти стили? Проверьте!
ну вообще какая гадость — щас проверила в другом браузере — нет этих поганых черточек, а в хроме есть — ну это еще хуже — что же делать
Все ясно. Похоже какое-то расширение в Хроме выделяет ссылки.
Вероятно Chrome SEO или что-то типа того.
Тарам-пам-пам!!! Правда! отключила плагин SEO — и нет этой надоеды, как говорил Фагот. Спасибо вам, умная и светлая головка, сколько вы своего времени тратите на нас, это так великодушно, спасибо вам. Успехов и счастья. Больших достижений и признания. Как вас зовут?
понравился шаблон «Health» http://www.wp-studio.org/?p=444 , все методы перебывал, то меню исчезает совсем, то появляется ниже главного меню, если смежите помогите, пожалуйста.
А цель какая? Заменить главное меню или добавить еще одно меню?
Если заменить, то нужно покопаться в header.php
art_menu_items(); заменить на wp_nav_menu( array( ‘theme_location’ => ‘main_menu’ ) );
Ну а дальше придется работать со стилями.
спасибо за ответ,цель разделить меню на верхнее и боковое, после замены «»art_menu_items(); заменить на wp_nav_menu( array( ‘theme_location’ => ‘main_menu’ ) );»» меню совсем исчезает
Конечно исчезает, ведь меню надо создать заново в разделе Внешний вид -> Меню. Этот раздел появится, если не забыли внести изменения в functions.php
изменения в functions.php внес, меню создал, в области темы выбрал из 2-х меню новое которое хочу чтобы появилось в верху, но ничего не происходит, строчка меню пустая. Эх…
Пришлось самому чуть поковырять.
Код в первом моем комментарии надо заменить на
Тогда вы увидите пункты своего меню, но стили будут поломанными. Исправить трудно, если только вы не хорошо разбираетесь в css.
Спасибо большое, теперь буду ковырять стили, главное заработало, если будут заказы буду обращаться за написанием кодов за денежку!!! спасибо!!!
Всегда пожалуйста! )
ни чего не получается
А что пытаетесь сделать и как?