カテゴリやタクソノミーの項目をセレクトボックスで表示させる
最終更新日: Update!!
一般的には記事をカテゴリ別にアーカイブさせる時、リンク付きのカテゴリ一覧をリストで表示させたりしますが、項目が多くなってきたり、スペースが限られている場合はセレクトボックスで表示できると便利ですよね。
今回は使用シーンごとにカテゴリやタクソノミーの項目をセレクトボックスで表示させる方法をまとめていきます。項目は通常投稿のカテゴリやタグの項目をはじめ、カスタム分類のそれぞれのタームも表示させることも可能です。
いつものリストからセレクトボックスに変えることでいろんなケースに対応できるかと思います。特にスマートフォンなどのモバイルサイトで ユーザビリティを上げるのに効果的ではないでしょうか。 (参考) WordPress Codex テンプレートタグ/wp dropdown categories 【WordPress】カスタム分類の項目一覧を表示させる方法
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】カスタム分類の項目一覧を表示させる方法
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories