Рубрики
WordPress Шаблоны

Навигация в WordPress ч.I. Главное меню.

Здесь будут рассмотрены функции для создания главного меню сайта:

Главное меню WordPress 3.0

Основные достоинства нового меню:

  1. В качестве элементов меню могут быть не только страницы, но также записи, рубрики, метки и произвольные ссылки.
  2. Автоматическая поддержка многоуровневого меню (не требуется дополнительные скрипты для отображения выпадающих элементов нижних уровней).
  3. Удобный интерфейс управления:
Внешний вид -> Меню
Внешний вид -> Меню
Дополнительные опции
Дополнительные опции

Перейдем к рассмотрению основного функционала.

Для начала необходимо определиться – сколько отдельных независимых меню вам понадобиться. Например “главное меню” и “вспомогательное меню”. Для них надо зарегистрировать соответствующие “области”. Для этого воспользуемся функциями: 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' ); // Привязка

В разделе “Внешний вид” -> “Меню” становятся доступными две области:

Области темы WordPress 3
Области темы WordPress 3

Создаем меню и привязываем его  к нужной области:

Привязка меню к области
Привязка меню к области

С помощью функции 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. Главное меню.”

привет а как быть когда рубрики и сверху и в сайтбаре справа? – я хочу чтоб сверху были одни а справа другие .. по отдельности .. а то у меня после создания рубрик и сверху куча их и справа тож самое((

… Ну да, немного не так. В это поле надо вставить только имя класса — special-item (или какое сам выберешь).
А сами стили надо прописать в файле style.css текущего шаблона!!!

Сделал, но все равно после обновления страницы сайта меню никак не меняется :(

Не вижу чтобы класс был присвоен…

А вообще стиль должен быть такой:

ul.nav .special-item a { color: red; }

Дописать в конец style.css

Спасибо за статью!.. но у меня все равно есть один вопросик… Вот че мне в голову взбрело. Как можно в главном меню сайта выделить один из пунктов.. например все написано обычным шрифтом, а один из пунктов жирным… Где что нужно смотреть и заменить?

Все просто. В редакторе меню надо включить для отображения дополнительную опцию “Классы CSS”. Включается через Настройки экрана.
Каждому элементу меню теперь можно присвоить произвольный класс.
Например, special-item. Теперь осталось только прописать в style.css стили для этого класса:

.special-item { color: red; background-color: white }

а можно подробнее, пожалуйста? вставил я в style эту строчку, а потом что?

вставил я в style эту строчку, а потом что?

Это и есть потом! А сначала надо этот класс присвоить элементу меню. Делается это, как я и сказал, в редакторе меню.

Тогда у меня что-то не получается…
На картинке я отобразил до вставки стиля и после, вверху и внизу соответственно. (пункт “Карта сайта”), вот почему пункт поменял только бекграунд, а нужно чтобы все осталось как есть а шрифт изменился :( как так сделать? скрин здесь

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

special-item a color red

это же не нормально?

… Ну да, немного не так. В это поле надо вставить только имя класса – special-item (или какое сам выберешь).
А сами стили надо прописать в файле style.css текущего шаблона!!!

Делаю ( пытаюсь) сайт на домашнем компьютере, вставил

// Разместить в файле 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' ); // Привязка

в functions.php, но в областях темы всё равно

Ваша тема поддерживает 1 меню.

Подскажите, пожалуйста, что не так?

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

Отличная статья! А класс к не предусмотрен в меню? как его можно прописать?

Есть возможность добавить класс через админку.
Открываем Внешний вид -> Меню
Затем идем в Настройки экрана. В разделе Показывать расширенные свойства меню отмечаем Классы CSS.
Теперь для каждого элемента меню можно прописать произвольные классы.

А как в подключенном новом меню сделать, так чтобы была ссылка на главную?

В редакторе меню, слева есть окошко выбора страниц. Переключитесь в режим “все страницы”. Первой будет идти Главная. Вот ее и добавляете в меню.

Здравствуйте! На локалке делаю шаблон, использую для создания меню функцию wp_nav_menu() (уж не знаю – важно ли это – один из пунктов меню картинка, сделанная из пользовательской ссылки), моя проблема в том, что все пункты меню, все ссылочки окантованы красным пунктиром. Конечно, среди стилей есть обнуление outline и для картинок и для ссылок. При просмотре через инструменты разработчика вижу когда стою на <a href rel="nofollow"> пункта меню, что в стилях появляется element.style {outline: #FF0800 dashed 1px;}. Беду вижу – а как исправить ее не знаю.плиз, хелп

Похоже, стиль жестко привязан к элементу:

<div style="outline: #FF0800 dashed 1px;">

Вылечить можно только поправив исходный код, через style.css это не исправить.

ни одному элементу своего шаблона я такого не задавала, более того, дополнительно приписала классу меню .menu{outline: none;} и результата нет. А а у ссылки в стилях неведомо откуда дополнительно появляется outline: #FF0800 dashed 1px;.

инлайн стиль был у меня относительно шрифта, который я брала из googleapis.com, там размер шрифта и высота,(от отчаяния убирала – не помогало), еще я тыкала свое online:none не только в css но как и стили в элемент nav, но счастья мне это не принесло. И знаете, страница грузится – и красных черточек нет, и их нет ровно столько, чтоб я обрадовалась, и тут же они прорисовываются. вот такая печальная история. чувствую, что дело в какой-то ерунде – но в какой

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

Все ясно. Похоже какое-то расширение в Хроме выделяет ссылки.
Вероятно Chrome SEO или что-то типа того.

Hi guys, I’m the creator of the Chrome SEO plugin, I’m so sorry, looks like this was turned on by default in the new version I just released, you can easily turn it off by clicking on the Chrome SEO icon and at the bottom of the popup it says “Show NoFollow”. I’ll release an update now and turn it off by default.

Тарам-пам-пам!!! Правда! отключила плагин SEO – и нет этой надоеды, как говорил Фагот. Спасибо вам, умная и светлая головка, сколько вы своего времени тратите на нас, это так великодушно, спасибо вам. Успехов и счастья. Больших достижений и признания. Как вас зовут?

понравился шаблон “Health” http://www.wp-studio.org/?p=444 , все методы перебывал, то меню исчезает совсем, то появляется ниже главного меню, если смежите помогите, пожалуйста.

А цель какая? Заменить главное меню или добавить еще одно меню?
Если заменить, то нужно покопаться в header.php

<div class="art-nav">
	<div class="l"></div>
	<div class="r"></div>
	<ul class="art-menu">
		<?php art_menu_items(); ?>
	</ul>
</div>

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-х меню новое которое хочу чтобы появилось в верху, но ничего не происходит, строчка меню пустая. Эх…

Пришлось самому чуть поковырять.
Код в первом моем комментарии надо заменить на

<div class="art-nav">
	<div class="l"></div>
	<div class="r"></div>
	
	<?php wp_nav_menu( array( 'theme_location' => 'main_menu', 'menu_class' => 'art-menu' ) );  ?>
	
	<!--<ul class="art-menu">
		<?php //art_menu_items(); ?>
	</ul>-->
</div>

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

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

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

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