wordpress カテゴリーをアコーディオン化

通常のカテゴリーでもよかったんですが、

今のスキンだと子カテゴリーも親カテゴリーと同様に見えるためものすごく見づらい。

修正するならいっそのこと親階層を開閉できるようにしたらいいんじゃない？

という考えでカテゴリーのアコーディオン化をすることにしました。

jqueryを使ってメニューの開閉します。

サンプルはこのブログのカテゴリーを参考にしてください。

方法はスマートフォンサイト制作ブログさんのを参考にさせていただきました。ありがとうございます。

①wp-includes/category-template.php

親カテゴリーはAリンクをつけないように修正

レイアウトを考慮し、投稿数の表示位置を変更。

828行目付近（//20120901 syoryo ****部分内が変更箇所）

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

//20120901 syoryo add start
$show_count_flg = true;
if($has_children == 1){
$link .= "<p><span>$cat_name";
if ( !empty($show_count) && $show_count_flg )
$link .= ' (' . intval($category->count) . ')';
$show_count_flg = false;
$link .= "</span></p>";
}else{
//20120901 syoryo add end
$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 .= '>';
//20120901 syoryo modify start
$link .= $cat_name ;
if ( !empty($show_count) && $show_count_flg )
$link .= ' (' . intval($category->count) . ')';
$show_count_flg = false;
$link .= $cat_name . '</a>';
//20120901 syoryo modify end
//20120901 syoryo add start
}
//20120901 syoryo add end
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 .= '&gt;';

                    if ( empty($feed_image) )
                            $link .= $name;
                    else
                            $link .= &quot;&lt;img src='$feed_image'$alt$title&quot; . ' /&gt;';

                    $link .= '&lt;/a&gt;';

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

            //20120901 syoryo modify start
            //if ( !empty($show_count) )
            if ( !empty($show_count) &amp;&amp; $show_count_flg )
                    $link .= ' (' . intval($category-&gt;count) . ')';
            //20120901 syoryo modify start
            if ( 'list' == $args['style'] ) {
                    $output .= &quot;t&lt;li&quot;;
                    $class = 'cat-item cat-item-' . $category-&gt;term_id;
                    if ( !empty($current_category) ) {
                            $_current_category = get_term( $current_category, $category-&gt;taxonomy );
                            if ( $category-&gt;term_id == $current_category )
                                    $class .=  ' current-cat';
                            elseif ( $category-&gt;term_id == $_current_category-&gt;parent )
                                    $class .=  ' current-cat-parent';
                    }
                    $output .=  ' class=&quot;' . $class . '&quot;';
                    $output .= &quot;&gt;$linkn&quot;;
            } else {
                    $output .= &quot;t$link&lt;br /&gt;n&quot;;
            }
    }

②wp-includes/default-widgets.php

最上階層の＜ul>がここに記載されている。
<ul>だと誤作動の可能性が高いため、id及びclassを付与

478行目付近（//20120901 syoryo ****部分内が変更箇所）

<php
} else {
//20120901 syoryo modify
?>
<?php //<ul> ?>
<ul class="accordion" id="accordion">
<?php
//20120901 syoryo modify
$cat_args['title_li'] = '';
wp_list_categories(apply_filters('widget_categories_args', $cat_args));
?>

③JavaScriptの追加（表示するところならどこでも良い？）
私はスキンのheader.phpに記載しました。

<script type="text/javascript">
//20120901 syoryo add start
$(function(){

    $(&quot;.accordion p&quot;).click(function(){
            $(this).next(&quot;ul&quot;).slideToggle();
            $(this).children(&quot;span&quot;).toggleClass(&quot;open&quot;);
    });


})
//20110901 syoryo add end
</script>

④CSSの追加（表示するところならどこでも良い？）

これは各サイトによって変わってくると思うので適宜変更願います。

/20120901 syoryo add start/
ul.accordion a {display:block; padding:10px; background-position:95% center; background-repeat:no-repeat; text-decoration:none; color:#FFF;}
ul.accordion {padding 0px; border-bottom:0px;}
ul.accordion#accordion li {padding:0px 0;; border-bottom:0px;}
ul.accordion#accordion p {margin:0px;}
ul.accordion span {display:block; padding:10px; background-position:95% center; background-repeat:no-repeat; color:#FFF;}
/* 折り畳み部分を隠す /
ul.accordion ul {display:none;}
/ 背景 /
ul.accordion > li {background: -moz-linear-gradient(top, #666, #000); background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));}
ul.accordion > li > p {background: -moz-linear-gradient(top, #666, #000); background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));}
ul.accordion > li > ul > li {background:#888; border-bottom:1px solid #444;}
ul.accordion > li > ul > li > p {background:#888;}
ul.accordion > li > ul > li > ul > li {background:#FFF; border-bottom:1px dotted #888;}
ul.accordion > li > ul > li > ul > li:last-child {border:none;}
ul.accordion > li > p span {background-image:url(img/a_close.png);}
ul.accordion > li > p span.open {background-image:url(img/a_open.png);}
ul.accordion > li > a {background-image:url(img/a_link.png);}
ul.accordion > li > ul > li > p span {background-image:url(img/b_close.png);}
ul.accordion > li > ul > li > p span.open {background-image:url(img/b_open.png);}
ul.accordion > li > ul > li > a {background-image:url(img/b_link.png);}
ul.accordion > li > ul > li > ul > li a {background-image:url(img/c_link.png); color:#333;}
/20120901 syoryo add end*/

実際にやってみて親カテゴリーの判断がどこにやっているのか、最上層の<ul>

がどこに記載しているのかでものすごく時間がかかりました。
（array_rで値確認したり、表示位置を探したりなど……）
まさか<ul>がウィジェットに記載されているとは思いませんでした……
これで半日つぶれるとは思いませんでした。
とりあえず参考になればと思います。