一般的には記事をカテゴリ別にアーカイブさせる時、リンク付きのカテゴリ一覧をリストで表示させたりしますが、項目が多くなってきたり、スペースが限られている場合はセレクトボックスで表示できると便利ですよね。   今回は使用シーンごとにカテゴリやタクソノミーの項目をセレクトボックスで表示させる方法をまとめていきます。項目は通常投稿のカテゴリやタグの項目をはじめ、カスタム分類のそれぞれのタームも表示させることも可能です。  

1. フォーム内の項目に選択肢として表示

フォームの項目一つとしてカテゴリの項目を選択肢として表示させるパターンです。この場合は「wp dropdown categories」というタグが用意されているのでそれを使用します。引数で色々な条件を指定することができます。

<?php
  $args = array(
      'show_option_none' => '選択してください',　　// 選択なしの項目を設定
      'show_option_all' => '全てのカテゴリ',　　// 全てのカテゴリーを選択できる
      'taxonomy' => 'category',　　// カテゴリやタグなど対象となるタクソノミーを指定
      'value_field' => 'slug',　　// valueに入る値の形式を指定
    );
    wp_dropdown_categories( $args );
?>

 

2. javascriptを併用してアーカイブページへのリンク機能を付与

カテゴリなどのアーカイブがリンク付きで並んだリストの代わりにセレクトボックスを使用するパターンです。選択肢を選んだタイミングでjavascriptのイベントを設定し、選択肢のvalue値に入れたスラッグをURLに追加させてページ遷移させる仕組みです。「get_categories」でカテゴリの情報を取得して、アーカイブのリンクURLはvalueの値に、表示名はoptionの項目名に出力しています。javascriptの「onchange」イベントでURLを変えています。

<?php $categories = get_categories(array('taxonomy' => 'category')); if ( $categories ) : ?>
  <select name="dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
    <option value="" selected="selected">選択してください</option>
      <?php foreach ( $categories as $category ): ?>
        <option value="<?php echo clean_url( get_category_link( $category->term_id ) ); ?>"><?php echo wp_specialchars( $category->name ); ?></option>
      <?php endforeach; ?>
  </select>
<?php endif; ?>

 

---

  いつものリストからセレクトボックスに変えることでいろんなケースに対応できるかと思います。特にスマートフォンなどのモバイルサイトで ユーザビリティを上げるのに効果的ではないでしょうか。   （参考） WordPress Codex テンプレートタグ/wp dropdown categories 【WordPress】カスタム分類の項目一覧を表示させる方法