現在閲覧しているページのメニューに色をつける方法。

静的サイトの場合は、JavaScriptを使うのが一般的だけど、WordPressの場合は?

それがまあ、とっても簡単なことだった。

WordPressでは、アクティブページに自動的に ”current_page_item” というclassが付くんだって。

なので、静的サイトのcssで “.active” としていたところを ”.current_page_item” に置換すればOKです。

ちなみに、JavaScriptのコードは、以下になります。

=script.js=

$(function(){
  $('a').each(function(){
    var $href = $(this).attr('href');
      if(location.href.match($href)) {
      $(this).addClass('active');
    } else {
      $(this).removeClass('active');
    }
  });
});

★jQueryを使ってメニューのアクティブを判断する

または、

document.addEventListener('DOMContentLoaded', function() {
    var filename = location.href.match(".+/(.+?)\.[a-z]+([\?#;].*)?$")[1];
    $('a[href*="' + filename + '"]').addClass('active');
  });

★表示されているメニューにActiveクラスを自動的に付与する方法