Intereting Posts

Уокер добавит разметку Bootstrap для wp_list_pages

Я использую wp_list_pages() чтобы создать навигацию на страницах моего сайта.

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

Чтобы использовать Bootstrap, мне нужно добавить имена классов в соответствующие элементы <ul> , <li> и <a> .

Я думаю, что лучший способ добавить эти классы – использовать пользовательский ходок.

Как написать этот пользовательский класс для добавления классов, которые мне нужны?

Текущий html:

 <ul class=""> <li class="page_item page-item-6 current_page_item"><a href="/">Home</a></li> <li class="page_item page-item-6 current_page_item"><a href="/">Profile</a></li> <li class="page_item page-item-8 page_item_has_children"> <a href="#">Products & Services</a> <ul class="children"> <li class="page_item page-item-17"><a href="">Buying</a></li> <li class="page_item page-item-19"><a href="">Selling</a></li> <li class="page_item page-item-23"><a href="">Managing</a></li> </ul> </li> </ul> 

HTML мне нужно:

 <ul class=""> <li class="page_item page-item-6 current_page_item"><a href="/">Home</a></li> <li class="page_item page-item-6 current_page_item"><a href="/">Profile</a></li> <li class="page_item page-item-8 page_item_has_children dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Products & Services</a> <ul class="children dropdown-menu"> <li class="page_item page-item-17"><a href="">Buying</a></li> <li class="page_item page-item-19"><a href="">Selling</a></li> <li class="page_item page-item-23"><a href="">Managing</a></li> </ul> </li> </ul> 

Я попытался расширить класс walker, но не могу понять, как определить, имеет ли страница дочерние элементы и при необходимости применить класс. Вот мой ходок:

 class My_Walker extends Walker_page { function start_el(&$output, $page, $depth, $args, $current_page) { if($depth) { $indent = str_repeat("\t", $depth); } else { $indent = ''; } extract($args, EXTR_SKIP); $css_class = array('page_item', 'page-item-'.$page->ID); $attributes = []; $children = get_pages('child_of='.$post->ID); if(!empty($current_page)) { $_current_page = get_page($current_page); _get_post_ancestors($_current_page); if(isset($_current_page->ancestors) && in_array($page->ID, (array) $_current_page->ancestors)) { $css_class[] = 'current_page_ancestor'; } if($page->ID == $current_page) { $css_class[] = 'current_page_item'; } elseif($_current_page && $page->ID == $_current_page->post_parent) { $css_class[] = 'current_page_parent'; } } elseif($page->ID == get_option('page_for_posts')) { $css_class[] = 'current_page_parent'; } $css_class = implode(' ', apply_filters('page_css_class', $css_class, $page, $depth, $args, $current_page)); $output .= $indent . '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '">' . $page->post_title .'</a>'; if(!empty($show_date)) { if('modified' == $show_date) { $time = $page->post_modified; } else { $time = $page->post_date; } $output .= " " . mysql2date($date_format, $time); } } }