ドロップダウン形式でカテゴリー一覧を出力

ドロップダウンリストのイラスト

wp_list_categories の関数では、カテゴリーをリスト形式で出力しますが、カテゴリーが多い場合出力が縦に長くなります。

この事象を避ける為に、wp_dropdown_categories という関数を使ってカテゴリーをドロップダウン形式で出力することが可能です。

ドロップダウン形式で出力

wp_dropdown_categories は、ドロップダウン形式でカテゴリーリストを表示または取得してくれる関数です。

PHP

<?php wp_dropdown_categories(); ?>

送信ボタン付きドロップダウンメニュー

デフォルトの記述だけでは出力されたカテゴリーに移動することができないので、HTMLの form タグを使うことで移動することが可能になります。

以下は、箇条書きのリスト内に階層型カテゴリ・ドロップダウンリストを表示して、show_count=1 で各カテゴリの投稿数も表示するドロップダウンメニューです。

PHP

<li id="categories">
 <h2><?php _e('Categories:'); ?></h2>
   <form action="<?php bloginfo('url'); ?>" method="get">
   <?php wp_dropdown_categories('show_count=1&hierarchical=1'); ?>
   <input type="submit" name="submit" value="view" />
   </form>
</li>

JavaScript を用いたドロップダウンメニュー

JavaScriptを併せて使用することで、カテゴリーに移動することが可能です。

PHP

<?php wp_dropdown_categories('show_count=1&show_option_none=カテゴリを選ぶ'); ?>

<script type="text/javascript"><!--
    var dropdown = document.getElementById("cat");
    function onCatChange() {
		if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
			location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
		}
    }
    dropdown.onchange = onCatChange;
--></script>