有没有一种方法可以将Twitter引导与页面层次结构/wp_list_pages一起使用


Is there a way to use Twitter Bootstrap with the page hierarchy / wp_list_pages

有没有一种方法可以将Twitter引导与页面层次结构/wp_list_pages一起使用?

我试图使用twitter引导程序,但我想使用wp_list_pages而不是wp_nav_menu。

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

感谢您的添加-这给了它一些上下文。

您需要在代码中添加以下内容:

<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 );
        }
    }
}

好消息,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/