[WordPress]サイドバーに設置したカスタム分類のターム一覧を、プルダウンっぽくセレクトメニューにする

[WordPress]サイドバーに設置したカスタム分類のターム一覧を、プルダウンっぽくセレクトメニューにする

サイドバー等にカスタム分類(タクソノミー)のターム一覧を設置し、かつそのターム一覧をセレクトメニュー(ドロップダウンメニュー・プルダウンメニュー)にする一例です。

※「カスタム分類(タクソノミー)」だといちいち長いので以下を省略して「タクソノミー」と記述します。

やりたいこと

  • サイドバーにとあるタクソノミーのターム一覧を設置したい
  • そのターム一覧をドロップダウンのようなセレクトメニューにしたい
  • 親タームと子タームを並べ、それぞれデザインを変えたい
  • ボタンクリックで遷移ではなく、通常のリンクのように遷移したい
  • セレクトメニューにカレント処理(ハイライト)をつけたい

挙動のサンプルはこちらより。やりたいことが非常にシンプルなので特にこれといって追記することもありません。

なお、サンプルではメニューの開閉アニメーションにjQueryを使用しています。開閉が不要でしたらスルーしてcssを改変していただければと思います。

実装

wp_list_categoriesのパラメータにtaxonomyのスラッグを指定するものがあるので、wp_list_categoriesを使って実装します。

ちなみにwp_list_categoriesの第三パラメータにはhierarchicalがあるため、タクソノミーが親子関係を持っていると、親>子の順にデフォルトで表示してくれます。前回のような苦労がないので楽ちんですね! get_the_termsもっとなんとかしてくれ

sidebar.php(なければサイドバーに該当する部分)に記述

<h2>food</h2>
    <ul id="selectClient_List">
      <li>
        <?php if(is_tax('food')): ?>
          <span><?php $taxonomy = $wp_query->get_queried_object();
          echo esc_html($taxonomy -> name); ?></span>
        <?php else : ?>
          <span>foodを選択</span>
        <?php endif; ?>
        <div>
          <ul>
          <?php
          wp_list_categories('taxonomy=food&orderby=term_order&title_li='); ?>
          </ul>
        </div>
      </li>
    </ul>

サンプルのtaxonomy名は[food]としています。

条件分岐is_taxで、タクソノミーが選択される前と遷移後等はセレクトメニューに「foodを選択」と表示させ、タームが選択されたあと(カレント)は選択されたターム名がトップに表示されるようになっています。要は[food]のアーカイブページに来たら、選択されたターム名が出るようになるということです。
文章だとわかりづらいので、サンプルを御覧ください→カレント処理サンプル

wp_list_categoriesのパラメータは適宜変更してください。

orderbyの引数はタームの並び替えプラグインを有効にするのに使用していますので、不要な場合は削除してください。タームの並び替え云々については前回の記事に詳しく書きましたので、興味がありましたらそちらもどうぞ。

cssに記述

#termlist{
  cursor: pointer;
}
#termlist li{
  list-style: none;
}
#termlist li span{
  display: block;
  padding: 3px;
  border: 1px solid #ccc;
  background: #fff url(arrow.png) no-repeat 96% 50%;
}
#termlist li span.active{
  display: block;
  border-bottom: none;
  background: #666 url(arrow_on.png) no-repeat 96% 50%;
  color: #fff;
}
#termlist li div{
  display: none;
  overflow: auto;
  padding: 0;
  height: 300px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  background: #fff;
}
#termlist li div ul{
  font-weight: bold;
}
#termlist li div ul li a{
  display: block;
  padding: 4px;
  background: #eee;
}
#termlist li div ul li ul.children{
  margin-bottom: 2px;
  padding: 0;
  font-weight: normal;
}
#termlist li div ul li ul.children li a{
  border-top: 1px solid #ccc;
  background: #fff;
}
#termlist li div ul li.current-cat a{
    color: #ff0000;
}

細かいとこを適当に変えてください。カレント処理のカラーリングがわかりやすいように真っ赤になっているのでこのままだとちょっと強烈です。

ちなみに、wp_list_categoriesを使用すると自動的にカレント処理.current-catをつけてくれるので、こちらで何かすることはありません。

jQueryファイルに記述

$("#termlist span").on("click", function() {
      $(this).next().slideToggle();
      $(this).toggleClass("active");
    });

開閉アニメーションにjQueryを使用しますので、jQueryと一緒に読み込むファイルのどこかに追記してください。

チラシの裏

これを実装するとき、最初はwp_dropdown_categoriesをタクソノミーでできないかなーと考えていましたが、 模索しているうちに色々ありまして、紆余曲折を経てwp_list_categoriesに落ち着きました。

無理やり実装するより、この方法でうまくいかないなら、何か違う方法で見せられないか? を考えていくのは大事だなーとしみじみ思いました。簡単なんじゃないかと思うことが意外とできなかったり難しいんじゃないかと思うことが意外と簡単だったり、Wordpressは深いですね…。

  • このエントリーをはてなブックマークに追加
  1. Home
  2. WordPress
  3. [Wordpress]サイドバーに設置したカスタム分類のターム一覧を、プルダウンっぽくセレクトメニューにする

PAGETOP