Когда WordPress 3 представил нам новые функции меню, он изменил способ просмотра навигационных меню навсегда. Мы больше не были связаны с использованием обычных функций перечисления страниц или создания собственных пользовательских функций меню для интеграции меню категорий и страниц, а также внешних или жестко связанных элементов в навигационном меню. Но как именно пользователь может получить эту новую функциональность? В этом уроке мы глубоко погрузимся во все, что может сделать функция wp_nav_menu, используйте класс Walker, чтобы добавить описание, и коснитесь некоторых связанных с ним функций.
У функции есть несколько параметров для работы. Ниже приведены значения по умолчанию, указанные в коде WordPress.org:
<?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».
$params = array(
'theme_location' => 'primary'
);Этот параметр используется для ручного определения того, какое меню следует использовать. В нашем примере мы устанавливаем только общее расположение меню, а не определяем то, что нужно использовать, но если бы мы хотели сказать функции, чтобы использовать меню под названием «Первичная навигация», наши параметры выглядели бы так:
$params = array(
'theme_location' => 'primary',
'menu' => 'Primary Navigation'
);По умолчанию наше меню будет обернуто в div, но если вы похожи на меня, вам это обычно не нужно, и, вероятно, вы захотите сократить количество разделов и других тегов, используемых для сохранения кода насколько это возможно. Вы также можете использовать этот параметр для определения другого тега, такого как html5
Как вы можете догадываться, эти параметры используются для установки класса и идентификатора контейнера. Поскольку мы вообще ничего не делаем, нам не нужно определять значения.
Они работают так же, как и предыдущие параметры, за исключением этого времени, мы определенно хотим установить идентификатор «nav», потому что это идентификатор, который мы будем использовать в нашей таблице стилей, чтобы создать панель навигации.
$params = array(
'theme_location' => 'primary',
'container' => false,
'menu_id' => 'nav'
);Вы можете использовать этот параметр, чтобы указать, хотите ли вы отображать (эхо) результаты или возвращать его для использования в PHP. Этот элемент является логическим, поэтому для его возврата он просто устанавливает этот параметр равным 0.
Это функция обратного вызова, на которую вы можете вернуться, если меню не найдено. По умолчанию он использует старый стенд с помощью wp_page_menu () и передает все одинаковые параметры этой функции.
Эти элементы используются для определения того, что можно разместить до и после тегов привязки (). Вы можете использовать их, чтобы предшествовать каждому элементу вертикальной полосой или обернуть элементы nav в теге span.
Они работают так же, как и предыдущие элементы, которые мы рассмотрели, за исключением того, что все, что вы определили, будет внутри тегов привязки. Наш пример не требует, чтобы мы использовали их, поэтому мы их проигнорируем и допустим пустой элемент по умолчанию.
По умолчанию элементы обернуты в неупорядоченный список с помощью идентификатора меню и класса меню. Этот параметр позволяет вам изменить это, если вы этого желаете.
Этот параметр очень хорош для того, когда вы хотите использовать одно и то же меню дважды, но не хотите, чтобы дочерние элементы отображались в местоположении, которое вы настраиваете с помощью функции wp_nav_menu (). Например, если вы хотите, чтобы основная навигация включала раскрывающийся список второго уровня, вы можете оставить это в настройке по умолчанию. Затем, если вы хотите использовать одни и те же родительские элементы в навигации нижнего колонтитула и опустить дочерние элементы, вы можете установить этот параметр на глубину 1. Значение по умолчанию «0» означает, что будут выводиться все уровни. Чтобы наш пример был кратким, мы предполагаем, что основная навигация не включает дочерние элементы.
Параметр используется для определения объекта walker, который может использоваться для управления работой всей функции и вывода ее информации. Мы рассмотрим хороший пример в следующем разделе.
В нашем примере мы хотим добавить описание для каждого элемента главного меню. Функциональность для добавления самого описания уже находится в системе WordPress. Чтобы включить это, перейдите в меню, а затем нажмите вкладку параметров экрана в верхнем правом углу. Вы должны щелкнуть опцию, которую нужно сделать, чтобы сказать «Описание». После этого элемент меню должен выглядеть следующим образом:
После заполнения наших описаний нам нужно создать класс walker и добавить его в параметры wp_nav_menu (). Мы будем называть класс description_navigation, чтобы наш полный код параметров выглядел так:
$params = array(
'theme_location' => 'primary',
'menu_id' => 'nav',
'walker' => new description_walker()
);
wp_nav_menu($params);Теперь мы готовы добавить эти описания в наш класс Walker:
class description_walker extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';
if($depth != 0) {
$description = $append = $prepend = "";
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$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 );
}
}Здесь многое происходит. Для получения дополнительной информации о классах Уолкера в целом позвольте мне отнести вас к другому учебнику: Понимание класса Walker. Самая важная часть, которую вы должны понимать здесь, заключается в том, что мы перестраиваем вывод каждого элемента ссылки и добавляем в описание. В строке 19 вышеприведенного фрагмента вы можете увидеть, где мы получаем описание элемента, если оно существует, и присваиваем ему значение $ description, завернутое в тег span, чтобы мы могли отдельно стилизовать описания. Затем в строках 24-29, где мы собираем элемент ссылки обратно вместе, мы добавляем описание непосредственно перед закрытием тега привязки, чтобы оно стало частью самой ссылки.
Используя тему Twenty Eleven, вы должны теперь иметь что-то похожее на это:
Давайте добавим немного стиля, чтобы сделать его более понятным:
#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 () для вывода вашего меню со всеми настройками, вы можете пойти немного дальше с некоторыми из связанных с ним функций.
Эта функция отлично подходит для отображения только определенного меню, если это меню было назначено для вашего местоположения темы. Например, вы можете создать верхнюю навигацию по своей теме для меньших элементов навигации, которые пользователь может не захотеть в своей основной навигации. Это могут быть такие вещи, как домашняя ссылка, «Реклама с нами» или другие более низкие призывы к действию. Но в качестве дистрибьютора темы, если вы не знаете, будет ли это то, что пользователь хочет использовать, просто используйте такое условие:
if (has_nav_menu('top-menu')) {
wp_nav_menu('theme_location='top-menu');
}Эта функция вернет массив элементов из определенного меню. Это может быть особенно полезно, если вы хотите создать собственный список меню без использования класса Walker. Вы теряете много функциональных возможностей, таких как текущий класс элемента меню, но это отличный способ перебрать массив элементов меню для простого решения.
Есть много вещей, которые вы можете сделать, чтобы настроить свои навигационные меню, когда вы знаете больше о гибкости, предлагаемой со встроенными параметрами, и возможности иметь больший контроль с классом Walker. Нужно добавить еще один тег span с классом «значок» для пользовательских значков для каждого элемента? Нет проблем.
Возможность иметь полный контроль над размещением и выпуском меню расширяет ваши возможности в качестве разработчика тем, что неизмеримо много возможностей. Каковы некоторые из вещей, которые вы можете использовать для этого класса Уокера?