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>