0%

Programmingプログラミングナレッジ

Posted:2017.09.26

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

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

 

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

 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】