【WordPress】jsでサイドバーにあるアーカイブリストのカレント表示を実装

WordPress2016年11月4日

WordPressというよりはjsのテクニックになりますが、サイトバーのアーカイブリストをjsでカレント表示する方法をご紹介いたします。

サンプルコード

(function () {

$(function(){
    var $pathName = location.pathname;
    $("任意のセレクタ ul li a").each(function(){
        var $href = $(this).attr("href");
        if ($pathName.indexOf($href) != -1) {
            $(this).parent().addClass("current");
        }
    });
});

})(jQuery);

※jQueryを読み込んでいる場合のスクリプトとなります

解説

location.pathNameで閲覧しているページのルートパスを取得し、変数$pathNameに格納します。
さらに、任意のセレクタ内にあるアーカイブリストのaタグをeachで回し、変数$hrefに$(this)で取得した各hrefの値を格納します。これをif文で「$pathNameの値が$hrefに含まれている場合、条件にマッチするaタグの親要素（つまりli）にclass="current"を付与する」という処理を行っています。

現在見ているページが「/2016/10/」を含んでいれば、<a href="/2016/10/">の親要素である<li>にclass="current"が付与されます。
月のアーカイブが2ページ以上にまたがっても、文字列が含まれているかどうかで判断しているため、2ページ目以降も条件にマッチしclassが付与されることになります。

まとめ

Web屋の芝生DIYのサイドバーでもアーカイブリストを表示していますが、出力ソースにカスタマイズを加えています。そのためphpでの対応が難しかったため、jsでサクッと対応しました。
WordPressの機能で対応が難しい場合や、静的サイトでの実装にお役立てください。

また、以下の記事にてグローバルナビをjsでカレント表示する方法をご紹介しています。合わせてご参考にしていただければ幸いです。

jsでグローバルナビのカレント表示自動化を実装

この記事を読んでいる方にオススメの記事

「WordPress」の他の記事を読む

匿名希望さん

2020年6月25日

if ($pathName.indexOf($href) != -1) {

ではなく

if ($href.indexOf($pathName) != -1) {

ではないでしょうか

匿名希望さん

2020年6月25日

先ほどのコメント間違えていました。
すみません。

admin さん

2020年7月21日

＞匿名希望さん

コメントいただきありがとうございます。
返信が遅れ申し訳ございませんでした。
本記事はご参考になりましたでしょうか？
引き続き当サイトをどうぞよろしくお願いいたします。

この記事にコメントする

※承認制のため、即時には反映されません。