まえがき

サイドバー等に表示するカテゴリアーカイブリストは「wp_list_categories()」で表示すると思います。
そしてカテゴリアーカイブリストをドロップダウン形式で表示したい場合は「wp_dropdown_categories()」を使用します。
しかし、いいのか悪いのか
「wp_dropdown_categories()」は「select」タグごと出力してしまいます。

「select」タグごと表示するという事は「option」タグを自由に追加できないという事です。例えば「option」タグの最初に「ALL」とかを入れたい時等に対応できません。

因みによくわからないのが、月別アーカイブリストを表示する「wp_get_archives()」は「format」引数に「option」を指定すると「option」タグのみ出力することができます。
「wp_dropdown_categories()」にも同じ機能を付けて欲しいところですね笑

今回はその辺の問題をクリアするために「wp_dropdown_categories()」タグとは別の方法で、カテゴリアーカイブリストをドロップダウン形式で表示する手法を紹介します。

特に最近はスマホサイトの需要が高まりましたのでカテゴリアーカイブリストをドロップダウン形式で表示しなければならないシチュエーションも増えてくると思います。
そんな時に役立つかなと思います。

カテゴリアーカイブリストのドロップダウンで「option」タグを自由にカスタマイズするためのタグ

基本はカテゴリ毎の記事一覧を表示する方法の応用です！

カテゴリ毎の記事一覧を表示する方法[WordPress]

スマホサイトではドロップダウンで項目を選択した瞬間にページ遷移する形をとると思うので、そういう動作をするコードを例として出します。

<select onChange='document.location.href=this.options[this.selectedIndex].value;'> 
  <option value="">カテゴリを選択</option> 
  <option value="/site1">サイト1</option> 
  <option value="/site2">サイト2</option> 
  <option value="/blog">All</option> 
<?php
$categories = get_categories();
foreach($categories as $category) :
?>
<option value='<?php echo get_category_link( $category->term_id ); ?>'><?php echo $category->cat_name; ?>(<?php echo $category->count; ?>)</option>
<?php endforeach; ?>
</select>

コードを見れば意味は何となくわかると思います。
ループで「option」タグを出力するのですね。

因みに、第一階層の親カテゴリのみ出力したい場合はこのようなコードになります。

<select onChange='document.location.href=this.options[this.selectedIndex].value;'> 
  <option value="">カテゴリを選択</option> 
  <option value="/site1">サイト1</option> 
  <option value="/site2">サイト2</option> 
  <option value="/blog">All</option> 
<?php
$categories = get_categories('parent=0');
foreach($categories as $category) :
?>
<option value='<?php echo get_category_link( $category->term_id ); ?>'><?php echo $category->cat_name; ?>(<?php echo $category->count; ?>)</option>
<?php endforeach; ?>
</select>

「get_categories(‘parent=0’)」という感じで引数を指定してあげることで一番上の親カテゴリのみにソートできます。

まとめ

一番の理想は「wp_dropdown_categories()」の引数とかで指定すると「option」タグのみの出力になるとかにしてくれたほうが分かりやすくでいいと思うのですが、そうできない理由がなにかあるのでしょう。

まぁここで紹介したコードで全然対応できるので問題はないでしょう。