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