Функция Экспертиза: wp_nav_menu

24 января 2018

Когда 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'
);

Echo

Вы можете использовать этот параметр, чтобы указать, хотите ли вы отображать (эхо) результаты или возвращать его для использования в PHP. Этот элемент является логическим, поэтому для его возврата он просто устанавливает этот параметр равным 0.

Резервный CB

Это функция обратного вызова, на которую вы можете вернуться, если меню не найдено. По умолчанию он использует старый стенд с помощью wp_page_menu () и передает все одинаковые параметры этой функции.

До и после

Эти элементы используются для определения того, что можно разместить до и после тегов привязки (). Вы можете использовать их, чтобы предшествовать каждому элементу вертикальной полосой или обернуть элементы nav в теге span.

Ссылка до и ссылка после

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

Элементы Wrap

По умолчанию элементы обернуты в неупорядоченный список с помощью идентификатора меню и класса меню. Этот параметр позволяет вам изменить это, если вы этого желаете.

Глубина

Этот параметр очень хорош для того, когда вы хотите использовать одно и то же меню дважды, но не хотите, чтобы дочерние элементы отображались в местоположении, которое вы настраиваете с помощью функции wp_nav_menu (). Например, если вы хотите, чтобы основная навигация включала раскрывающийся список второго уровня, вы можете оставить это в настройке по умолчанию. Затем, если вы хотите использовать одни и те же родительские элементы в навигации нижнего колонтитула и опустить дочерние элементы, вы можете установить этот параметр на глубину 1. Значение по умолчанию «0» означает, что будут выводиться все уровни. Чтобы наш пример был кратким, мы предполагаем, что основная навигация не включает дочерние элементы.

Walker

Параметр используется для определения объекта walker, который может использоваться для управления работой всей функции и вывода ее информации. Мы рассмотрим хороший пример в следующем разделе.


Добавление описания в элементы меню Nav

В нашем примере мы хотим добавить описание для каждого элемента главного меню. Функциональность для добавления самого описания уже находится в системе WordPress. Чтобы включить это, перейдите в меню, а затем нажмите вкладку параметров экрана в верхнем правом углу. Вы должны щелкнуть опцию, которую нужно сделать, чтобы сказать «Описание». После этого элемент меню должен выглядеть следующим образом:

После заполнения наших описаний нам нужно создать класс walker и добавить его в параметры wp_nav_menu (). Мы будем называть класс description_navigation, чтобы наш полный код параметров выглядел так:

$params = array(
    'theme_location' => 'primary',
    'menu_id' => 'nav',
    'walker' => new description_walker()
);
wp_nav_menu($params);

Класс Walker

Теперь мы готовы добавить эти описания в наш класс 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, вы должны теперь иметь что-то похожее на это:

Style It Up

Давайте добавим немного стиля, чтобы сделать его более понятным:

#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 ()

Эта функция отлично подходит для отображения только определенного меню, если это меню было назначено для вашего местоположения темы. Например, вы можете создать верхнюю навигацию по своей теме для меньших элементов навигации, которые пользователь может не захотеть в своей основной навигации. Это могут быть такие вещи, как домашняя ссылка, «Реклама с нами» или другие более низкие призывы к действию. Но в качестве дистрибьютора темы, если вы не знаете, будет ли это то, что пользователь хочет использовать, просто используйте такое условие:

if (has_nav_menu('top-menu')) {
    wp_nav_menu('theme_location='top-menu');
}

wp_get_nav_menu_items ()

Эта функция вернет массив элементов из определенного меню. Это может быть особенно полезно, если вы хотите создать собственный список меню без использования класса Walker. Вы теряете много функциональных возможностей, таких как текущий класс элемента меню, но это отличный способ перебрать массив элементов меню для простого решения.


Заключение

Есть много вещей, которые вы можете сделать, чтобы настроить свои навигационные меню, когда вы знаете больше о гибкости, предлагаемой со встроенными параметрами, и возможности иметь больший контроль с классом Walker. Нужно добавить еще один тег span с классом «значок» для пользовательских значков для каждого элемента? Нет проблем.

Возможность иметь полный контроль над размещением и выпуском меню расширяет ваши возможности в качестве разработчика тем, что неизмеримо много возможностей. Каковы некоторые из вещей, которые вы можете использовать для этого класса Уокера?