Question

我使用Wordpress的wp_list_pages在网站上显示网页导航。

有些网页有孩子，所以我需要在这些链接下面有一个下拉菜单。

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="">Products &#038; 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>

我想使用bootstrap来创建导航和下拉菜单。

类似于 - http://www.ttmt.org.uk/nav/

这个html就是这样的。

<ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Inbox</a></li>
            <li><a href="#">Drafts</a></li>
            <li><a href="#">Sent Items</a></li>
        </ul>
    </li>
</ul>

我需要添加一个＆＃39;下拉列表＆＃39;对包含子页面的li和ul进行分类。我还需要在＆＃39; a＆＃39;中添加一个类和一个数据切换属性。标签

当我使用wp_list_pages并且动态创建导航时，如何添加这些clases。

我使用此功能添加＆＃39;下拉＆＃39; li包含子页面

function add_parent_class( $css_class, $page, $depth, $args ){
    if ( ! empty( $args['has_children'] ) )
        $css_class[] = 'dropdown';
    return $css_class;
}
add_filter( 'page_css_class', 'add_parent_class', 10, 4 );

我如何扩展此功能添加我需要的其他类

Answer 1

要实现此功能，我们不能仅使用过滤器。我们将不得不扩展WordPress的Walker类。

我假设您已经调用了wp_list_pages：

$args = array('authors' => '',
    'child_of' => 0,
    'date_format' => get_option( 'date_format' ),
    'depth' => 0,
    'echo' => 1,
    'exclude' => '',
    'include' => '',
    'link_after' => '',
    'link_before' => '',
    'post_type' => 'page',
    'post_status' => 'publish',
    'show_date' => '',
    'sort_column' => 'menu_order, post_title',
    'sort_order' => '',
    'title_li' => __( '' ),
    'walker' => '',
);

echo '<ul class="nav navbar-nav">' . wp_list_pages( $args ) . '</ul>' ;

我们将价值传递给步行者参数。那个参数将成为我们现在要创建的类的对象。在主题的functions.php或site specific plugin

中添加此类

class Wdm_Walker_Page extends Walker_Page {

/**
 * @see Walker::start_lvl()
 * @since 2.1.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param int $depth Depth of page. Used for padding.
 * @param array $args
 */
function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class='dropdown-menu children'>\n";
}

/**
 * @see Walker::start_el()
 * @since 2.1.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param object $page Page data object.
 * @param int $depth Depth of page. Used for padding.
 * @param int $current_page Page ID.
 * @param array $args
 */
function start_el( &$output, $page, $depth = 0, $args = array(), $current_page = 0 ) {
    if ( $depth )
        $indent = str_repeat("\t", $depth);
    else
        $indent = '';

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

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

    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_class = 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 );

    /** This filter is documented in wp-includes/post-template.php */
            if(preg_match('/dropdown/', $css_class) != FALSE){
    $output .= $indent . '<li class="' . $css_class . '"><a data-toggle="dropdown" class="dropdown-toggle" href="' . get_permalink($page->ID) . '">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';
            }
            else{
                $output .= $indent . '<li class="' . $css_class . '"><a href="' . get_permalink($page->ID) . '">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a>';
            }

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

        $output .= " " . mysql2date($date_format, $time);
    }
    }
}

上面的课程会添加你想要的所有课程。

现在，我们需要将此类的对象传递给wp_list_pages。所以它看起来像这样

$args = array(
                    'authors' => '',
                    'child_of' => 0,
                    'date_format' => get_option( 'date_format' ),
                    'depth' => 0,
                    'echo' => 1,
                    'exclude' => '',
                    'include' => '',
                    'link_after' => '',
                    'link_before' => '',
                    'post_type' => 'page',
                    'post_status' => 'publish',
                    'show_date' => '',
                    'sort_column' => 'menu_order, post_title',
                    'sort_order' => '',
                    'title_li' => __( '' ),
                    'walker' => new Wdm_Walker_Page()
                );

echo '<ul class="nav navbar-nav">' . wp_list_pages( $args ) . '</ul>' ;

我希望它有所帮助！您不再需要在过滤器page_css_class上编写代码。：）

Wordpress - 如何在wp_list_page nav中更改类名

1 个答案: