Добавить класс / стиль Bootstrap в пункты меню WordPress wp_list_pages

У меня есть код, который генерирует боковое меню на моем сайте WordPress, как показано ниже …

<ul>
<?php
if($post->post_parent)
$children = wp_list_pages("title_li=&sort_column=menu_order&child_of=".$post->post_parent."&echo=1");
else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=1");
if ($children) { ?>
<?php echo $children; ?>
</div>
<?php } ?>
</ul>

Это выводит код следующим образом …

<ul>
<li class="page_item page-item-94 current_page_item"><a href="#">Menu Item</a></li>
</ul>

Проблема в том, что мне нужно использовать стили Bootstrap 3 и вывести список, как показано ниже …

<div class="list-group submenu">
<a href="#" class="list-group-item">Menu Item</a>
</div>

В основном мне нужно добавить класс list-group-item к тегу в элементах списка вывода. Это вообще возможно?

0

Решение

Вы можете сделать это через JQuery

$(document).ready(function(){
$("ul").find("li").each(function(){
$(this).addClass("YourClass");
})
})
1

Другие решения

Вы можете использовать класс Walker, чтобы просто расширить wp_list_pages изменить ваш $output поставить класс в functions.php

class NS_CS_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 );
$output .= $indent . '<li><div>' . get_post_meta( $post_id, $key, $single ) . '</div></li>';
// modify your output here

} // End start_el
} // End Walker Class

Тогда ваш код рендеринга должен быть

$args = array(
'walker'      => new NS_CS_Walker()
// your extra $args would be here
);

wp_list_pages( $args );
0

По вопросам рекламы [email protected]