Выпадающее меню на вордпресс

Для меня настало время разобраться как интегрировать верстку многоуровневого выпадающего меню в вордпресс. Сначала, конечно, было разобрано как это сделать для одноуровневого меню. Алгоритм следующий:

1. В файле functions.php надо добавить тип меню:

   register_nav_menus(array(   
     'footer_menu' => 'Меню в footer'
   ));

2. В то место верстки, где раньше была конструкция ul>li>a добавляем код:

   wp_nav_menu(array(
     'theme_location' => 'footer_menu', // расположение меню в теме
     'menu' => '', // название меню
     'container' => 'div', // контейнер для меню, по умолчанию 'div', в нашем случае ставим 'nav', пустая строка - нет контейнера
     'container_class' => '', // класс для контейнера
     'container_id' => '', // id для контейнера
     'menu_class' => 'footer-menu', // класс для меню
     'menu_id' => '', // id для меню
   ));

   Тут важно понимать, что с помощью данной функции можно задать класс только для тега ul,  для тегов li и a этого сделать данным механизмом нельзя. Отсюда сразу следует, что если вы оформляли в css используя классы для элементов списка и ссылок, то нужно будет эти селекторы переписывать. Вордпресс сам вставит свои системные имена классов для этих элементов.

   Теперь как быть с многоуровневым меню? Как правило его верстают с использованием bootstrap и приведенное ниже решение подходит только для сайтов, сверстанных с использованием данного фрэймворка. Тут алгоритм будет следующий:  в functions.php прописываем код:

   /* Nav Walker for bootstrap menu */
   add_action( 'after_setup_theme', 'wpt_setup' );
   if ( ! function_exists( 'wpt_setup' ) ):
   function wpt_setup() {
   register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
   } endif;
   // Register custom navigation walker
   require_once('wp_bootstrap_navwalker.php');

   wp_bootstrap_navwalker.php есть на github. Именно он и реализует вывод вложенного меню, для этого, в то место верстки, где располагалось меню необходимо внести:

   <nav class="navbar navbar-default" role="navigation">
   
   <div class="container-fluid">
   
   <!-- Brand and toggle get grouped for better mobile display -->
   
   <div class="navbar-header">
   
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
   
   <span class="sr-only">Toggle navigation</span>
   
   <span class="icon-bar"></span>
   
   <span class="icon-bar"></span>
   
   <span class="icon-bar"></span>
   
   </button>
   
   
   </div>
   
    
   
   <?php
   
   wp_nav_menu( array(
   
   'menu'              => 'primary',
   
   'theme_location'    => 'primary',
   
   'depth'             => 2,
   
   'container'         => 'div',
   
   'container_class'   => 'collapse navbar-collapse',
   
   'container_id'      => 'bs-example-navbar-collapse-1',
   
   'menu_class'        => 'nav navbar-nav',
   
   'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
   
   'walker'            => new wp_bootstrap_navwalker())
   
   );
   
   ?>
   
   </div>
   
   </nav>

   После этого, возможно придется немного подкорректировать стили, но самое главное — появится меню. Само меню еще нужно корректно настроить в админке сайта