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

Число просмотров: 527 |







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

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

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

Фото 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(/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: ' >>>';
 }

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

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



Твитнуть









Отблагодарить проект myhelps.ru:




Комментарии: