+7-499-70-300-44
заказать звонок
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Спасибо за оставленную заявку
Ожидайте звонка

Индикатор отображения подменю WordPress

Индикатор отображения подменю WordPress

В этом уроке я расскажу как добавлять в шаблоны WordPress индикатор отображения подменю WordPress.

Индикатор отображения подменю WordPress — стрелочка, которая показывает, что пункт меню — Все товары, имеет подменю. (Фото 2)

Фото 2

Для того, чтоб добавить индикатор отображения подменю WordPress, будем использовать  функцию wp_nav_menu().

В 2-х словах, при использовании функции  wp_nav_menu()  WordPress добавляет класс  ‘sub-menu’  к тегам  <ul>  каждого подменю. На этом теория закончена, приступаем к практике:

Шаг 1. Добавляем код в файл function.php

[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 );
}
}
[/php]

Чтоб этот код заработал, надо сообщить меню о его использовании, а это мы сделаем с walker аргументом при вызове функции wp_nav_menu()

Первый простейший php пример, это вызов всех страниц в виде меню:

Для этого в файлах шаблона находим файл header.php

[php]
wp_nav_menu( array( ‘walker’ => new Wpandyou_Menu_Walker ) );
[/php]

Пример выше отобразит все Ваши опубликованные страницы в админ панеле. Если нам необходимо отобразить меню из раздела Внешний вид -> Меню, нам необходимо указать, какое именно меню отобразить. Пример кода:
wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘walker’ => new Wpandyou_Menu_Walker ) );
Где ‘primary’ — это название Вашего меню.

На моём сайте первоначальный код выглядел так:

[php]
<!—?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]

Затем я внес изменения и код стал выглядеть так:

[php]
<!—?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 ) );
}
?>
[/php]

Я добавил в функции вызова меню код:

[php]
‘walker’ => new Wpandyou_Menu_Walke
[/php]

Теперь, после того как мы добавили функцию вызова в header.php, нужно оформить нашу стрелку с помощью CSS. Добавляем следующие строки в файл style.css :

[php]

.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: ‘ >>>’;
}

[/php]

Чтоб использовать background: url (); воспользуйтесь кодом, приведенным ниже

[php]

.wpandyou-punkt-menu-parent > a:after {
color: #fff;
/* content отвечает за вывод стрелок. Вы можете воспользоваться background: url(); */
content: ‘ __’;
background: url(https://max-webs.com/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: ‘ >>>’;
}

[/php]

Если у Вас все таки не выйдет сделать это самостоятельно, обращайтесь ко мне. Я выполню для Вас эту услугу.

[divider]

Напоследок хотел посоветовать Вам почитать блог Валентина Прошкина.

Другие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Введите адрес сайта, который нуждается в продвижении *

Указать точное время звонка

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам,
чтобы ответить на ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Начать сотрудничество
Введите ваше имя и телефон.
Я лично перезвоню Вам,
чтобы ответить на ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Обсудить условия
Вкратце опишите Вашу ситуацию или задайте свои вопросы, я свяжусь с вами в течении 15 минут в рабочее время
Введите контактный E-mail (используется для ответа)

Введите контактный телефон

Сообщение

Введите анти-спам код в поле ниже:captcha

Спасибо за оставленную заявку
Ожидайте звонка