В этом уроке я расскажу как добавлять в шаблоны WordPress индикатор отображения подменю WordPress.
Индикатор отображения подменю WordPress – стрелочка, которая показывает, что пункт меню – Все товары, имеет подменю. (Фото 2)
В 2-х словах, при использовании функции wp_nav_menu() WordPress добавляет класс ‘sub-menu’ к тегам <ul> каждого подменю. На этом теория закончена, приступаем к практике:
Шаг 1. Добавляем код в файл function.php
// Добавление CSS класса в меню, для отображения индикатора submenu
class Wpandyou_Menu_Walker extends Walker_Nav_Menu {
//начало функции Walker, которая поможет нам добавить класс в пункт меню
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
//id пункта меню
$wpandyou_id_field = $this->db_fields['id'];
if ( !empty( $children_elements[ $element->$wpandyou_id_field ] ) ) {
// название css класса, который будет отображаться в родительском меню
$element->classes[] = 'wpandyou-punkt-menu-parent';
}
Walker_Nav_Menu::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
}Чтоб этот код заработал, надо сообщить меню о его использовании, а это мы сделаем с walker аргументом при вызове функции wp_nav_menu()
Первый простейший php пример, это вызов всех страниц в виде меню:
Для этого в файлах шаблона находим файл header.php
wp_nav_menu( array( 'walker' => new Wpandyou_Menu_Walker ) );
Пример выше отобразит все Ваши опубликованные страницы в админ панеле. Если нам необходимо отобразить меню из раздела Внешний вид -> Меню, нам необходимо указать, какое именно меню отобразить.
Пример кода:
wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => new Wpandyou_Menu_Walker ) );Где ‘primary’ — это название Вашего меню.
На моём сайте первоначальный код выглядел так:
<!--<?php if (function_exists('wp_nav_menu')) { wp_nav_menu(
array( 'container_id'=-->'',
'menu_class' => '',
'menu_id'=>'',
'theme_location' => 'topnav',
'fallback_cb'=>'imediapixel_topmenu_pages','depth' =>4 ) );
}
?>Затем я внес изменения и код стал выглядеть так:
<!--<?php if (function_exists('wp_nav_menu')) { wp_nav_menu( array( 'container_id'=-->'',
'menu_class' => '',
'menu_id'=>'',
'theme_location' => 'topnav',
'fallback_cb'=>'imediapixel_topmenu_pages',
'depth' =>4,
'walker' => new Wpandyou_Menu_Walker ) );
}
?>
Я добавил в функции вызова меню код:
'walker' => new Wpandyou_Menu_Walke
Теперь, после того как мы добавили функцию вызова в header.php, нужно оформить нашу стрелку с помощью CSS. Добавляем следующие строки в файл style.css :
.wpandyou-punkt-menu-parent > a:after {
color: #999;
/* content отвечает за вывод стрелок. Вы можете воспользоваться background: url(); */
content: ' >>';
font-weight:normal;
font-size: 11px;
vertical-align: 1px;
}
.sub-menu .wpandyou-punkt-menu-parent > a:after {
content: ' >>>';
}Чтоб использовать background: url (); воспользуйтесь кодом, приведенным ниже
.wpandyou-punkt-menu-parent > a:after {
color: #fff;
/* content отвечает за вывод стрелок. Вы можете воспользоваться background: url(); */
content: ' __';
background: url(https://myhelps.ru/wp-content/uploads/2013/05/2menu-arrows.png) scroll 5px 1px no-repeat;
font-weight:normal;
font-size: 14px;
vertical-align: 1px;
}
.sub-menu .wpandyou-punkt-menu-parent > a:after {
content: ' >>>';
}Если у Вас все таки не выйдет сделать это самостоятельно, обращайтесь ко мне. Я выполню для Вас эту услугу.
Напоследок хотел посоветовать Вам почитать блог Валентина Прошкина.
