芝生やDIY等のライフハックやWeb制作情報を発信するメディア

メニューを開く

【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でカレント表示する方法をご紹介しています。合わせてご参考にしていただければ幸いです。

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

「WordPress」の他の記事を読む

この記事にコメントする

必須
必須
本文必須

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

ページの先頭に戻る