Как добавить класс в <ul> и childs <li> виджета боковой панели – WordPress

Примечание. Обратите внимание, что я создаю эту тему для повторной продажи, поэтому мне нужно немного неплохо добавить ее.

Вот как я регистрирую меню на правой боковой панели:

if(function_exists('register_sidebar')){ register_sidebar(array( 'name'=>'sidebar_default', 'before_widget' => '<div class="panel panel-info">', 'after_widget' => '</div>', 'before_title' => '<div class="panel-heading"><h4>', 'after_title' => '</h4></div>' )); } 

И это результат:

 <div class="panel panel-info"> <div class="panel-heading"> <h4>Title</h4> </div> <div class="menu-openings-menu-container"> <ul id="menu-openings-menu" class="menu"> <li id="" class="menu-item-object-page menu-item-381"><a href="">Software</a></li> <li id="" class="menu-item-object-page menu-item-382"><a href="">Software</a></li> <li id="" class="menu-item-object-page menu-item-383"><a href="">Software</a></li> <li id="" class="menu-item-object-page menu-item-384"><a href="">Software</a></li> <li id="" class="menu-item-object-page menu-item-385"><a href="">Software</a></li> </ul> </div> </div> 

и именно так ему нужен вывод, чтобы иметь возможность использовать стили стилей Twitter Bootstrap:

 <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> 

Я ценю все предложения. Благодарю.

вывод

Исходный код

Если вы имеете дело с одним сайтом и не создаете тему, возможно, самым простым решением является «вручную». Это не самый «профессиональный» способ сделать это, но он работает.

Возьмите текстовый виджет или новый html-виджет, вставьте свой код, например:

 <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> 

и внесите изменения (по ссылкам) вручную.

Если вы собираетесь продавать свою тему, как указано в ваших комментариях, и вы хотите внести радикальные изменения в навигационное меню для использования в виджетах, я не уверен, что даже создание ходока может быть решением.

Вместо этого я предлагаю использовать виджет или короткий код для дальнейшего использования. Вот пример: wp_get_nav_menu_items() :

 add_shortcode('my-nav-menu','my_nav_menu_callback'); function my_nav_menu_callback($atts){ $atts = shortcode_atts( array( 'location' => '', ), $atts, '' ); // Get the menu by its theme location $menu = get_term( $locations[$atts['location']], 'nav_menu' ); $menu_items = wp_get_nav_menu_items($menu->term_id); // Run a loop and output the menu $menu_list = '<ul class="list-group">'; foreach( $menu_items as $menu_item ) { if( $menu_item->menu_item_parent == 0 ) { $parent = $menu_item->ID; $menu_array = array(); foreach( $menu_items as $submenu ) { if( $submenu->menu_item_parent == $parent ) { $bool = true; $menu_array[] ='<li class="list-group-item">'.$submenu->title.'</li>'; } } if( $bool == true && count( $menu_array ) > 0 ) { $menu_list .= '<li class="list-group-item">'.$menu_item->title.'</li>'; } else { $menu_list .= '<li class="list-group-item">' . $menu_item->title . '</li>'; } } } $menu_list .='</ul>'; return $menu_list; } 

Теперь вы можете получить доступ к своему меню, используя [my-nav-menu location='menu-location] в содержании или любом текстовом виджете.

Убедитесь, что вы сначала включили поддержку коротких кодов в текстовых виджетах, используя:

 add_filter('widget_text','do_shortcode');