Как в WordPress зарегистрировать и добавить выпадающее при наведении меню?

#javascript #html #jquery #wordpress #bootstrap

Есть сайт на WordPress, где в тему хочу добавить bootstrap меню с выпадающим списком
при наведении. Регистрирую меню стандартным способом:

 'Верхнее меню'
));

wp_nav_menu( array(
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse navbar-ex1-collapse', 
    'menu_class'=>'nav navbar-nav navbar-right',
    'theme_location'=>'top'
) );
?>


Затем хочу перенести в него функционал этого меню, но есть проблемы с добавлением
в ссылку классов class="dropdown-toggle" атрибутов data-toggle="dropdown" и во внутренний
список ul класса dropdown-menu. Как это можно сделать? фидл



.dropdown:hover > .dropdown-menu {
  display: block;
}




  

    

      
      Название проекта
    
    

      

        
Главная
        
        

          
            Меню
            
          
          

            
Текст подпункта
            
            
Текст подпункта
            
            

            
Текст подпункта
            
          
        
        

          
            Меню
            
          
          

            
Текст подпункта
            
            
Текст подпункта
            
            

            
Текст подпункта
            
          
        
      
      

        

          
            Меню
            
          
          

            
Текст подпункта
            
            
Текст подпункта
            
            

            
Текст подпункта
            
          
        
      
    
  




    

Ответы

Ответ 1

Нужно использовать класс Walker, следующий код при добавлении в function.php, добавляет
нужные классы к пунктам меню и ссылкам внутри него, при этом стандартные классы меню
wordpress не выводятся.  

class mainMenuWalker extends Walker_Nav_Menu {
  function start_el(&$output, $item, $depth, $args) {
    // назначаем классы li-элементу и выводим его
    $class_names = ' class="main-menu_item"';
    $output.= '';

    // назначаем атрибуты a-элементу
    $attributes.= !empty( $item->url ) ? ' href="' .esc_attr($item->url). '" class="main-menu_link"
 ' : '';
    $item_output = $args->before;

    // проверяем, на какой странице мы находимся
    $current_url = (is_ssl()?'https://':'http://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    $item_url = esc_attr( $item->url );
    $item_output.= ''.$item->title.'';


    // заканчиваем вывод элемента
    $item_output.= $args->after;
    $output.= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth,
$args );
  }
}  


И в шаблоне где выводиться меню, выводим его следующим образом:  


             'header_menu',
                                    'container' => 'nav',
                                    'container_class' => 'main-menu',
                                    'menu_class' => 'main-menu_list',
                                    'menu_id' => 'menu-header',
                                    'walker' => $main_menu
                                )); ?>  


В этом варианте конечно классы добавляются напрямую, без использования массива classes
и у вложенного меню у тега ul генерируется дефолтный класс sub-menu.
Если же необходим более тонкий контроль, то еще немного расширим класс Walker:  

class mainMenuWalker extends Walker_Nav_Menu {
    //для начала зададим класс для вложенного пункта меню тегу ul
    //функция start_lvl формирует превую строчку в шаблоне вывода списка, это нам
и нужно.
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent
\n";// указываем нужный нам класс,
теперь все вложенные теги ul будут иметь указанный класс.
    }
    // если необходимо обозначить тег li, что он является родительским элементом
вложенного списка модифицируем немного функцию display_element.
    function display_element( $element, &$children_elements, $max_depth, $depth=0,
$args, &$output ) {
        //получим  id элемента пункта меню
        $parent_elem = $this->db_fields['id'];
        // проверим есть ли в нем вложенный список
        if ( !empty( $children_elements[ $element->$parent_elem ] ) ) {
            // запишем в массив classes необходимый нам класс и присвоим элементу списка
            $element->classes['parent_class'] = 'parent-item';
        }
        Walker_Nav_Menu::display_element( $element, $children_elements, $max_depth,
$depth, $args, $output );
    }
  //Ну а здесь уже приведем в нужный нам вид классы li элемента
  function start_el(&$output, $item, $depth, $args) {
    // назначаем классы li-элементу и выводим его
    //для этого добавим наш класс в массив classes
    $item->classes['my_class'] = 'main-menu_item';
    // и напрямую укажем какие классы из массива мы хотим использовать.
    $class_names = ' class="' .esc_attr( $item->classes['my_class'] .' '. $item->classes['parent_class']
). '"';
    $output.= '
';

    // назначаем атрибуты a-элементу
    $attributes.= !empty( $item->url ) ? ' href="' .esc_attr($item->url). '" class="main-menu_link"
 ' : '';
    $item_output = $args->before;

    // проверяем, на какой странице мы находимся
    $current_url = (is_ssl()?'https://':'http://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    $item_url = esc_attr( $item->url );
    $item_output.= ''.$item->title.'';


    // заканчиваем вывод элемента
    $item_output.= $args->after;
    $output.= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth,
$args );
  }
}  


PS
Eсли хотим использовать все классы и дефолтные, указываем просто массив $item->classes  

тогда строка будет иметь вид:  

$class_names = join( ' ', $item->classes );
$class_names = ' class="' .esc_attr( $class_names ). '"';
$output.= '
';


Можно воспользоваться фильтрами и отсортировать классы так как нам нужно

Несколько ссылок по теме:
Может оказаться полезной
Кодекс (англ)
wp-кама
еще статья из wp-кама