URLとカテゴリの一致でアクティブ表示する方法



WordPressでWebサイト（ホームページ）やブログを制作している時、タクソノミーでカテゴリ分けして記事などを分類している場合にアーカイブまたはタクソノミーのアーカイブページにカテゴリリストのリンクを載せることがあるかと思います。

タクソノミーのカテゴリリストの出力には「wp_list_categories」を使います。

例えば、

<ul>
  <?php wp_list_categories('title_li=&taxonomy={タクソノミー名}'); ?>
</ul>


こういった記述をしたときのHTMLは

<ul>
  <li class="cat-item cat-item-〇〇">カテゴリ名01</li>
  <li class="cat-item cat-item-〇〇">カテゴリ名02</li>
  <li class="cat-item cat-item-〇〇">カテゴリ名03</li>
  ・
  ・
  ・
</ul>


のように出力されます。

WordPressの管理画面からどんどんカテゴリを追加した時にアクティブ表示に対応しようとすると、よくあるグローバルナビなどのアクティブ表示のJavaScript/jQueryのコードではURLにカテゴリのスラッグが入るので対応することが難しいです。
毎回カテゴリを追加するたびにJSファイルをいじればいいのですが、コードを書く知識のない方やクライアントが自分で追加してとなると大変です。

そこで今回は、タクソノミーでカテゴリを増やしてもアクティブ表示に対応できるコードを考えてみました。

URLとカテゴリの一致でアクティブ表示


jQuery

$(function() {
 
  var url = window.location.pathname;
  var catUrl = url.substring(url.lastIndexOf('/')+1);
 
  $('.cat-item a').each(function() {
    var obj = $(this);
    var link = obj.attr("href");
    var catLink = link.substring(link.lastIndexOf('/')+1);
 
    if( catUrl === catLink ){
      obj.addClass('active');
    }
     
  });
   
});


window.location.pathnameでパスを取得してきて、substringメソッドとlastIndexOfメソッドを使ってURLから最後の部分の文字列を取得してきます。
これで変数catUrlには現在のURLからスラッグ名が入ります。

次にカテゴリアイテムのリンクをeachでリストの数だけ回してあげて、objでは要素を入れ、linkではattrメソッドで要素のリンクを取得、変数catLinkにまた同じようにURLから最後の部分の文字列を取得。

最後にif文で、現在のページURLの最後のスラッグ名とリンクで吐き出されているカテゴリのURLの最後が一致していればマッチした時のobj（要素）のアンカータグにaddClassメソッドでactiveというクラス名を付けてあげる。

あとはCSSでactiveというクラス名が付いた時のスタイルを効かせてあげればいいですね。

パッと思いついたのが上記のJSのコード。
もっとシンプルな書き方があるかもしれないけど、これはこれでいいんじゃないかな。

コードを書く知識のないクライアントが管理画面から自由にカテゴリを追加していってもアクティブ表示に対応してくれるので安心ですね。