Ownedmedia ウェブ制作に役立つコンテンツを発信中!

WordPress 2017.09.26

カテゴリやタクソノミーの項目をセレクトボックスで表示させる

Tags: ,,
最終更新日:Update

一般的には記事をカテゴリ別にアーカイブさせる時、リンク付きのカテゴリ一覧をリストで表示させたりしますが、項目が多くなってきたり、スペースが限られている場合はセレクトボックスで表示できると便利ですよね。

 

今回は使用シーンごとにカテゴリやタクソノミーの項目をセレクトボックスで表示させる方法をまとめていきます。項目は通常投稿のカテゴリやタグの項目をはじめ、カスタム分類のそれぞれのタームも表示させることも可能です。

 

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】カスタム分類の項目一覧を表示させる方法

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?