WordPressでカテゴリとタグを使った入れ子メニューを表示する

WordPress でカテゴリとタグを使った入れ子メニューを表示するメモ書き。

以前に、カテゴリとタグで絞り込める検索フォームを作ったのはいいですが、ぶっちゃけドロップダウンメニューって見難いよねってことでコレを改造して入れ子型のメニューリストを作ってみたいと思います。

完成はこんな感じです。

では早速コードから。

functions.php にベタ書きするか、このコードを nestmenu.php みたな別ファイルに切り出して functions.php に include してやる。今回は見通しの良さを考慮して後者を採用。

<?php

function nestmenu( $args ) {

	$nestmenu = '';

	if ( ! isset( $args['exclude'] ) ) {
		$args['exclude'] = '';
	}

	$opt = array(
		'hide_empty'   => true,
		'exclude_tree' => $args['exclude']
	);

	$cat_array = get_categories( $opt );

	$nestmenu  = "<div id='nestmenu'>\n";
	$nestmenu .= "<ul class='nestmenu-category'>\n";

	foreach ( $cat_array as $key => $cat ) {

		$cat_name = $cat->name;
		$cat_num = $cat->count;
		$cat_link = get_category_link( $cat->term_id );
		$tag_array = nestmenu_relation($cat->term_id);

		$nestmenu .= "<li><h2><a href='$cat_link' title='$cat_name'>$cat_name ($cat_num)</a></h2></li>\n";
		$nestmenu .= "<ul class='nestmenu-tag'>\n";

		foreach ( $tag_array as $tags ) {

			foreach ( $tags as $tag ) {

				$tag_link = esc_url( home_url( '/' ) . '?cat=' . $cat->term_id . '&tag=' . $tag['slug'] );
				$nestmenu .= "<li><a href='$tag_link' title='$tag[name]'>$tag[name] ($tag[count])</a></li>";

			}

		}

		$nestmenu .= "</ul>\n";

	}

	$nestmenu .= "</ul>\n";
	$nestmenu .= "</div>\n";

	return $nestmenu;

}
add_shortcode( 'nestmenu', 'nestmenu' );
add_filter( 'widget_text', 'do_shortcode' );

function nestmenu_relation( $term_id = false ) {

	if ( $term_id === false ) {
		return $term_ids;
	}

	$taxonomy = get_terms(
		array(
			'category',
			'post_tag'
		),
		array(
			'hide_empty' => true,
			'include'    => $term_id
		)
	);

	$taxonomy = $taxonomy[0]->taxonomy;

	if ( ! is_null( $taxonomy ) ) {

		$args = array(
			'nopaging'            => 1,
			'ignore_sticky_posts' => 1,
			'order'               => 'ASK',
			'tax_query'           => array( 
				array(
					'taxonomy' => $taxonomy,
					'terms'    => $term_id,
					'field'    => 'id',
					'operator' => 'AND'
				 )
			)
		);

		$my_query = new WP_Query( $args );

		if( $my_query->have_posts() ) {

			if ( $taxonomy === 'category' ) {
				$taxonomy = 'post_tag';
			} else {
				$taxonomy = 'category';
			}

			while ( $my_query->have_posts() ) : $my_query->the_post();

				$term = get_the_terms( get_the_ID(), $taxonomy );

				if ( $term ) {

					foreach ( $term as $value ) {

						if ( ! isset( $term_ids['term'][$value->term_id] ) ) {

							$term_info = array(
								'id'   => $value->term_id,
								'name' => $value->name,
								'slug' => $value->slug,
							);

							$term_ids['term'][$value->term_id] = $term_info;

						}

						$term_ids['term'][$value->term_id]['count'] += 1;

					}

				}

			endwhile;

			wp_reset_query();

		}

		if ( $term_ids['term'] ) {

			$term_ids['term'] = array_merge( $term_ids['term'] );

			foreach ( $term_ids['term'] as $key => $value ) {
				$key_id[$key] = $value['count'];
			}
			array_multisort( $key_id, SORT_DESC, $term_ids['term'] );

		}

	}

	return $term_ids;
}

?>

この入れ子メニューは下記のショートコードで呼び出せるので、テキストウィジェットに貼り付けて表示させます。

[[nestmenu]]

除外したいカテゴリがある場合は下記のように exclude にカテゴリ ID を指定。

[[nestmenu exclude=”1,10,100″]]

こんなイメージで入れ子メニューが表示されます。

1. 全カテゴリの一覧を取得しループ (除外は除く)
2. カテゴリに含まれるタグを取得 (投稿が 1 以上あるもの)
3. アンカータグをつけてリスト表示

css は #nestmenu (全体を囲む div), .nestmenu-category (カテゴリの ul), .nestmenu-tag (タグの ul) 辺りを利用して調整する。

このブログはこんな感じの css でサイドウィジェットに表示しています。

/* nestmenu */
#nestmenu h2 {
	font-size: 14px;
	margin-top: 8px;
	margin-bottom: 8px;
	border-bottom: 1px dotted #dcdcdc;
}

#nestmenu ul {
	list-style: none;
}

#nestmenu .nestmenu-category {
	margin-left: 0;
}

#nestmenu .nestmenu-tag {
	margin-left: 13px;
}

#nestmenu .nestmenu-tag li {
	font-size: 13px;
}

カテゴリ、タグが沢山ある場合は、アコーディオン式のメニューにした方が見やすいかもしれないです。

簡単ですが、カテゴリとタグを使った入れ子メニューの表示はこれで以上です。