+7-978-086-71-46
заказать звонок
Заказать обратный звонок

Введите ваше имя и любой контакт
(телефон, скайп или e-mail)

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

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

Введите контактный логин скайп *

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

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

Опубликовано: | Обновлено: Блог вебмастера

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

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

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

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

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

Фото 2

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

В 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(http://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: ' >>>';
 }

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

[divider]

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

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

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

Введите ваше имя и любой контакт
(телефон, скайп или e-mail)

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

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

Введите контактный логин скайп *

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

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

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

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

или позвоните мне по телефону
+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"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

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

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

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

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