Когда WordPress 3 представил нам новую функциональность меню, это навсегда изменило способ просмотра навигационных меню. Мы больше не были обязаны использовать обычные функции листинга страниц или создавать собственные пользовательские функции меню для интеграции категорий и меню страниц, а также внешних или жестко связанных элементов в навигационном меню. Но насколько индивидуально мы можем получить эту новую функциональность? В этом уроке мы wp_nav_menu во все, что может сделать функция wp_nav_menu , с помощью класса Walker добавим описание и коснемся некоторых связанных с ним функций.
Параметры
Функция имеет несколько параметров для работы. Вот значения по умолчанию, перечисленные в Кодексе WordPress.org :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php $defaults = array(
‘theme_location’ => ,
‘menu’ => ,
‘container’ => ‘div’,
‘container_class’ => ‘menu-{menu slug}-container’,
‘container_id’ => ,
‘menu_class’ => ‘menu’,
‘menu_id’ => ,
‘echo’ => true,
‘fallback_cb’ => ‘wp_page_menu’,
‘before’ => ,
‘after’ => ,
‘link_before’ => ,
‘link_after’ => ,
‘items_wrap’ => ‘<ul id=\»%1$s\» class=\»%2$s\»>%3$s</ul>’,
‘depth’ => 0,
‘walker’ =>
);
?>
<?php wp_nav_menu( $defaults );
|
Расположение темы
Используя этот параметр, мы можем установить местоположение темы, которое затем используется на странице меню, чтобы настроить меню для работы с этой частью вашей темы, без необходимости вручную определять, какое меню должно там отображаться. Это очень полезно для распространителей тем, поскольку вы можете использовать условные выражения для отображения меню, только если пользователь определил меню для этого местоположения. Единственное другое требование — вы используете функцию register_nav_menu() для регистрации этих мест. Обычно это делается из ваших функциональных файлов, когда вы настраиваете поддержку меню.
Давайте начнем создавать параметры нашей пользовательской функции меню, предполагая, что мы зарегистрировали расположение темы под названием « primary ».
|
1
2
3
|
$params = array(
‘theme_location’ => ‘primary’
);
|
Меню
Этот параметр используется, чтобы вручную определить, какое меню следует использовать. В нашем примере мы только устанавливаем общее расположение меню и не определяем точное для использования, но если бы мы хотели сказать функции использовать меню под названием «Основная навигация», наши параметры выглядели бы так:
|
1
2
3
4
|
$params = array(
‘theme_location’ => ‘primary’,
‘menu’ => ‘Primary Navigation’
);
|
Контейнер
По умолчанию наше меню будет заключено в div , но если вы похожи на меня, это обычно вам не нужно и, вероятно, вы хотите сократить количество div ов и других тегов, используемых для сохранения вашего кода в чистоте насколько это возможно. Вы также можете использовать этот параметр для определения другого тега, такого как html5 <section> или <nav> . В нашем примере мы не хотим, чтобы контейнер изменял значения контейнера по умолчанию, так как стили темы Twenty Eleven полагаются на его наличие.
Класс контейнера и идентификатор контейнера
Как вы можете догадаться, эти параметры используются для установки класса и идентификатора контейнера. Поскольку мы вообще опускаем это, нам не нужно определять значения.
Класс меню и идентификатор меню
Они работают так же, как и предыдущие параметры, за исключением того, что на этот раз мы определенно хотим установить идентификатор « nav », потому что этот идентификатор мы будем использовать в нашей таблице стилей для стилизации панели навигации.
|
1
2
3
4
5
|
$params = array(
‘theme_location’ => ‘primary’,
‘container’ => false,
‘menu_id’ => ‘nav’
);
|
эхо
Вы можете использовать этот параметр, чтобы указать, хотите ли вы отобразить (отобразить) результаты или вернуть его для использования в PHP. Этот элемент является логическим, поэтому для его возврата просто установите для этого параметра значение 0.
Fallback CB
Это функция обратного вызова, к которой вы можете вернуться, если меню не найдено. По умолчанию он использует старую поддержку wp_page_menu() и передает все те же параметры и этой функции.
До и после
Эти элементы используются для определения того, что можно размещать до и после тегов привязки ( <a></a> ). Вы можете использовать их, чтобы поставить перед каждым элементом вертикальную черту или обернуть элементы навигации в тег span.
Ссылка до и ссылка после
Они работают так же, как и предыдущие элементы, которые мы рассмотрели, за исключением того, что вы определяете, будет внутри тегов привязки. Наш пример не требует, чтобы мы использовали их, поэтому мы проигнорируем их и оставим пустой элемент по умолчанию.
Упаковка предметов
По умолчанию элементы упакованы в неупорядоченный список с идентификатором меню и классом меню. Этот параметр позволяет вам изменить это, если вы того пожелаете.
глубина
Этот параметр действительно хорош, когда вы хотите использовать одно и то же меню дважды, но не хотите, чтобы какие-либо дочерние элементы отображались в месте, которое вы устанавливаете с помощью функции wp_nav_menu() . Например, если вы хотите, чтобы основная навигация включала раскрывающийся список второго уровня, вы можете оставить это значение по умолчанию. Затем, если вы хотите использовать одни и те же родительские элементы в навигации нижнего колонтитула и опустить дочерние элементы, вы можете установить этот параметр на глубину 1. По умолчанию «0» означает, что будут выведены все уровни. Для краткости нашего примера мы предполагаем, что основная навигация не содержит дочерних элементов.
ходунки
Параметр используется для определения объекта-обходчика, который можно использовать для управления работой всей функции и вывода ее информации. Мы рассмотрим хороший пример в следующем разделе.
Добавление описания к элементам меню Nav
В нашем примере мы хотим добавить описание к каждому пункту главного меню. Функциональность для добавления самого описания уже имеется в системе WordPress Menu. Чтобы включить это, перейдите в меню, а затем нажмите вкладку параметров экрана в верхнем правом углу. Опция, которую вы должны удостовериться в щелчке, должна сказать «Описание». С этим отмеченным пункт меню теперь должен выглядеть следующим образом:
После того, как наши описания заполнены, нам нужно создать класс ходунков и добавить его в параметры wp_nav_menu() . Мы назовем класс description_navigation поэтому наш полный код параметров должен выглядеть следующим образом:
|
1
2
3
4
5
6
|
$params = array(
‘theme_location’ => ‘primary’,
‘menu_id’ => ‘nav’,
‘walker’ => new description_walker()
);
wp_nav_menu($params);
|
Уокер класс
Теперь мы готовы добавить эти описания в наш класс Walker:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
class description_walker extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ?
$class_names = $value = »;
$classes = empty( $item->classes ) ?
$class_names = join( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item ) );
$class_names = ‘ class=»‘. esc_attr( $class_names ) . ‘»‘;
$output .= $indent .
$attributes = !
$attributes .= !
$attributes .= !
$attributes .= !
$description = !
if($depth != 0) {
$description = $append = $prepend = «»;
}
$item_output = $args->before;
$item_output .= ‘<a’.
$item_output .= $args->link_before .apply_filters( ‘the_title’, $item->title, $item->ID );
$item_output .= $description.$args->link_after;
$item_output .= ‘</a>’;
$item_output .= $args->after;
$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}
|
Здесь много чего происходит. Для получения дополнительной информации о классах Уокера, позвольте мне отослать вас к другому учебнику: Понимание класса Уокера Самая важная часть, которую вы должны понимать здесь, это то, что мы перестраиваем вывод каждого элемента ссылки и добавляем в описание. В строке 19 приведенного выше фрагмента вы можете увидеть, где мы получаем описание элемента, если оно существует, и установить для него значение $description заключенное в тег span, чтобы мы могли стилизовать описания по отдельности. Затем в строках 24-29, где мы объединяем элемент ссылки, мы добавляем описание непосредственно перед закрытием тега привязки, чтобы он стал частью самой ссылки.
Используя тему Twenty Eleven, у вас должно получиться что-то похожее на это:
Стиль это до
Давайте добавим немного стиля, чтобы сделать его более разборчивым:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
#nav a {
line-height: 20px;
padding: 10px 15px;
}
#nav a span {
display: block;
font-size: 11px;
color: #ccc;
}
#nav a:hover span {
color: #999;
}
|
Это изменит высоту и отступ каждой ссылки, приведет к тому, что описание в теге span будет перенесено на собственную строку, и немного отрегулирует размеры и цвета шрифта для конечного результата, который выглядит следующим образом:
Функции отношений
Вы можете не только использовать wp_nav_menu() для вывода меню со всеми настройками, вы можете пойти немного дальше с некоторыми из связанных с ним функций.
has_nav_menu()
Эта функция отлично подходит для отображения определенного меню, только если это меню было назначено для местоположения вашей темы. Например, вы можете захотеть создать верхнюю навигацию в своей теме для меньших элементов навигации, которые пользователь может не захотеть в своей основной навигации. Это могут быть такие вещи, как домашняя ссылка, «Реклама у нас» или другие призывы к действию. Но как распространитель тем, если вы не знаете, будет ли это то, что пользователь хочет использовать, просто используйте условие, например, так:
|
1
2
3
|
if (has_nav_menu(‘top-menu’)) {
wp_nav_menu(‘theme_location=’top-menu’);
}
|
wp_get_nav_menu_items()
Эта функция вернет массив элементов из определенного меню. Это может быть особенно полезно, если вы хотите создать собственный список меню без использования класса Walker. Вы теряете много функций, таких как текущий класс элемента меню, но это отличный способ перебрать массив пунктов меню для простого решения.
Вывод
Есть много вещей, которые вы можете сделать, чтобы настроить свои навигационные меню, когда вы знаете больше о гибкости, предлагаемой со встроенными параметрами и способностью иметь больший контроль с классом Walker. Нужно добавить еще один тег span с классом « icon » для пользовательских значков для каждого элемента? Нет проблем.
Возможность иметь полный контроль над размещением и выводом меню расширяет ваши возможности как разработчика тем на неизмеримое количество возможностей. Что вы можете использовать в этом классе Уокера?