有没有办法在页面层次结构中使用Twitter Bootstrap/wp_list_pages

Question

有没有办法在页面层次结构/ wp_list_pages中使用Twitter Bootstrap？

我试图使用twitter引导，而不是使用wp_nav_menu我想使用wp_list_pages。

我的目标是直接从页面层次结构中获取下拉菜单，而不是自定义菜单。

Answer 1

好消息，wp_list_pages有一个你可以设置的Walker - 并在新的Walker中应用所需的引导类。

https://wordpress.stackexchange.com/questions/130877/ways-to-give-a-wp-list-pages-menu-link-specific-class-names

http://petercoughlin.com/getting-to-grips-with-wordpress-custom-walkers/

Answer 2

感谢补充说 - 这给了它一些背景。

你要添加以下代码：

<nav class="navbar navbar-default"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" 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> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <?php //this will be where you add your statement if we're on a parent/child page 
      wp_list_pages(array(
       'title_li' => '', 
       'child_of' => $post->ID, 
       'walker' => new BS_Page_Walker(), 
      )); 
      ?> 
     </ul> 
    </div> 
</div> 

然后你会想这沃克添加到您的功能文件 - 或某处你的主题。

class BS_Page_Walker extends Walker_Page { 
    public function start_lvl(&$output, $depth = 0, $args = array()) { 
     $indent = str_repeat("\t", $depth); 
     $output .= "\n$indent<ul class='dropdown-menu' role='menu'>\n"; 
    } 

    public function start_el(&$output, $page, $depth = 0, $args = array(), $current_page = 0) { 
     if ($depth) { 
      $indent = str_repeat("\t", $depth); 
     } else { 
      $indent = ''; 
     } 

     $css_class = array('page_item', 'page-item-' . $page->ID); 

     if (isset($args['pages_with_children'][ $page->ID ])) { 
      $css_class[] = 'page_item_has_children'; 
     } 

     if (! empty($current_page)) { 
      $_current_page = get_post($current_page); 
      if (in_array($page->ID, $_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'; 
     } 

     /** 
     * Filter the list of CSS classes to include with each page item in the list. 
     * 
     * @since 2.8.0 
     * 
     * @see wp_list_pages() 
     * 
     * @param array $css_class An array of CSS classes to be applied 
     *        to each list item. 
     * @param WP_Post $page   Page data object. 
     * @param int  $depth  Depth of page, used for padding. 
     * @param array $args   An array of arguments. 
     * @param int  $current_page ID of the current page. 
     */ 
     $css_classes = implode(' ', apply_filters('page_css_class', $css_class, $page, $depth, $args, $current_page)); 

     if ('' === $page->post_title) { 
      $page->post_title = sprintf(__('#%d (no title)'), $page->ID); 
     } 

     $args['link_before'] = empty($args['link_before']) ? '' : $args['link_before']; 
     $args['link_after'] = empty($args['link_after']) ? '' : $args['link_after']; 

     /** This filter is documented in wp-includes/post-template.php */ 
     if (isset($args['pages_with_children'][ $page->ID ])) { 
      $output .= $indent . sprintf(
        '<li class="%s"><a href="%s" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">%s%s%s <span class="caret"></span></a>', 
        $css_classes, 
        get_permalink($page->ID), 
        $args['link_before'], 
        apply_filters('the_title', $page->post_title, $page->ID), 
        $args['link_after'] 
       ); 
     } else { 
      $output .= $indent . sprintf(
        '<li class="%s"><a href="%s">%s%s%s</a>', 
        $css_classes, 
        get_permalink($page->ID), 
        $args['link_before'], 
        apply_filters('the_title', $page->post_title, $page->ID), 
        $args['link_after'] 
       ); 
     } 


     if (! empty($args['show_date'])) { 
      if ('modified' == $args['show_date']) { 
       $time = $page->post_modified; 
      } else { 
       $time = $page->post_date; 
      } 

      $date_format = empty($args['date_format']) ? '' : $args['date_format']; 
      $output .= ' ' . mysql2date($date_format, $time); 
     } 
    } 
}