wp_list_categories这个函数的输出很单调基本都是如下的格式：

<ul>
<li class="cat-item">
<a href="#">abc</a>
<ul class="chileren">
<li class="cat-item">def</li>
</ul>
</li>
</ul>

这样的格式输出，很不利于CSS控制，以及JS效果，很多时候，我们都希望稍微做下改变，哪怕就像下面这样也可以：

<ul>
<li class="cat-item first-menu">
<a href="#">abc</a>
<ul class="chileren">
<li class="cat-item second-menu">def</li>
</ul>
</li>
</ul>

这样以来我们就很容易区分这些不同层级的li了。

其实要实现上面那样的格式，我们可以自己在主题里面写function,代码如下：

class hxjq_Walker_Category extends Walker {
?? ?var $tree_type = 'category';
?? ?public $db_fields = array ('parent' => 'parent', 'id' => 'term_id');
?? ?function start_lvl( &$output, $depth = 0, $args = array() ) {
?? ??? ?if ( 'list' != $args['style'] )
?? ??? ??? ?return;

?? ??? ?$indent = str_repeat("t", $depth);
?? ??? ?$output .= "$indent<ol class='children'>n";
?? ?}
?? ?function end_lvl( &$output, $depth = 0, $args = array() ) {
?? ??? ?if ( 'list' != $args['style'] )
?? ??? ??? ?return;

?? ??? ?$indent = str_repeat("t", $depth);
?? ??? ?$output .= "$indent</ol>n";
?? ?}
?? ?function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
?? ??? ?extract($args);

?? ??? ?$cat_name = esc_attr( $category->name );
?? ??? ?$cat_name = apply_filters( 'list_cats', $cat_name, $category );
?? ??? ?$link = '<a href="' . esc_url( get_term_link($category) ) . '" ';
?? ??? ?if ( $use_desc_for_title == 0 || empty($category->description) )
?? ??? ??? ?$link .= 'title="' . esc_attr( sprintf(__( 'View all posts filed under %s' ), $cat_name) ) . '"';
?? ??? ?else
?? ??? ??? ?$link .= 'title="' . esc_attr( strip_tags( apply_filters( 'category_description', $category->description, $category ) ) ) . '"';
?? ??? ?$link .= '>';
?? ??? ?$link .= $cat_name . '</a>';

?? ??? ?if ( !empty($feed_image) || !empty($feed) ) {
?? ??? ??? ?$link .= ' ';

?? ??? ??? ?if ( empty($feed_image) )
?? ??? ??? ??? ?$link .= '(';

?? ??? ??? ?$link .= '<a href="' . esc_url( get_term_feed_link( $category->term_id, $category->taxonomy, $feed_type ) ) . '"';

?? ??? ??? ?if ( empty($feed) ) {
?? ??? ??? ??? ?$alt = ' alt="' . sprintf(__( 'Feed for all posts filed under %s' ), $cat_name ) . '"';
?? ??? ??? ?} else {
?? ??? ??? ??? ?$title = ' title="' . $feed . '"';
?? ??? ??? ??? ?$alt = ' alt="' . $feed . '"';
?? ??? ??? ??? ?$name = $feed;
?? ??? ??? ??? ?$link .= $title;
?? ??? ??? ?}

?? ??? ??? ?$link .= '>';

?? ??? ??? ?if ( empty($feed_image) )
?? ??? ??? ??? ?$link .= $name;
?? ??? ??? ?else
?? ??? ??? ??? ?$link .= "<img src='$feed_image'$alt$title" . ' />';

?? ??? ??? ?$link .= '</a>';

?? ??? ??? ?if ( empty($feed_image) )
?? ??? ??? ??? ?$link .= ')';
?? ??? ?}

?? ??? ?if ( !empty($show_count) )
?? ??? ??? ?$link .= ' (' . intval($category->count) . ')';

?? ??? ?if ( 'list' == $args['style'] ) {
?? ??? ??? ?$output .= "t<li";
?? ?? if($category->parent==3){
?? ??? ??? ?$class = 'cat-item parent-menu';
?? ??? ??? ?}
?? ??? ??? ?else{
?? ??? ??? ?$class = 'cat-item son-menu';?? ?
?? ??? ??? ?}
?? ??? ??? ?if ( !empty($current_category) ) {
?? ??? ??? ??? ?$_current_category = get_term( $current_category, $category->taxonomy );
?? ??? ??? ??? ?if ( $category->term_id == $current_category )
?? ??? ??? ??? ??? ?$class .=? ' current-cat';
?? ??? ??? ??? ?elseif ( $category->term_id == $_current_category->parent )
?? ??? ??? ??? ??? ?$class .=? ' current-cat-parent';
?? ??? ??? ?}
?? ??? ??? ?$output .=? '';
?? ??? ??? ?$output .= ">$linkn";
?? ??? ?} else {
?? ??? ??? ?$output .= "t$link<br />n";
?? ??? ?}
?? ?}
?? ?function end_el( &$output, $page, $depth = 0, $args = array() ) {
?? ??? ?if ( 'list' != $args['style'] )
?? ??? ??? ?return;

?? ??? ?$output .= "</li>n";
?? ?}

}

红色部分是关键！

其实到这里并没有完，当然至于是不是真完了，欢迎大家测试，在wp_list_categories这个函数的定义里面，有一句话，$output .= walk_category_tree( $categories, $depth, $r );

所以，我们得在我们的主题里面重写这个函数，把这句话改成：$output .= hxjq_walk_category_tree( $categories, $depth, $r ) 就可以了！

然后在主题页面，用我们自定义的这个函数，就完成了！