ナビゲーションメニューでカレント表示をしたい

こういうやつ↓

メニューをクリックして、ページ遷移すると、現在いるページのナビゲーションメニューの場所が色が変わるやつですね。

実現するためには、まず「メニューのID名を取得」し、それに色を変えるクラス名を付加することが必要と考え、Javascriptでの実装にチャレンジしました…

Javascriptでの実装

document.getElementByIdでID名を取得しようとしたが、ナビゲーションを出力するWordPressのテンプレートタグ、
wp_nav_menu( ) は、パラメーターを入れても

までしかID名をつけられない(もしかしたらあるのかもしれないが、WordPress codexには載っていなかった)のです。
• かその子要素のにIDをつけないとダメだと思ったので、WordPressカスタムメニューに管理画面からclassを付加。
  

  カスタムメニュー（wp_nav_menu）について｜NxWorld

  そして
  getElementById
  ↓
  getElementsByClassNameに変更！
  しかしそこまではconsoleに出力して確認できてOKでも、addEventListenerが”null”と出てしまう…
  調べたところ、addEventListenerは複数のものには対応できないみたい。
  この時点でJavascriptでの実装はあきらめ(早い…)

  JQeryで実装

  cssで.selectedというクラスをつくり、クリックしたらそれを付加して表示を変えようともくろみ。
  ※SCSSで記述↓
  //jsで付加
  .selected{
  background: $skyblue;
  a{
  color:$white;
  }

  の直前に入れたjqeryの記述。
  jQuery(“.topnav_bg”).click(function(){
  jQuery(this).toggleClass(“selected”);
  });
  ※TOPナビゲーションに関するものなので、タグの頭の方に入れていたが、やはりhtml読み込まれないとうまく働かず、終了タグ直前に変更

  ↑クリックごとに.selectedを付加したり削除したり、というコード。
  jQeryもjavascriptファイルに記述しても問題ないことを発見(笑)
  うまく働いているようだったが、実際クリックするとページ遷移が起こるので、付加したクラスがはずれちゃう…
  ここでも壁につきあたりました。
  それを乗り越える時間は残されていなかった。

  結局WordPressのシステムにより救われる

  あーもう時間ないのにどうしよーと頭を抱えていたときに、このページを発見。

  ナビゲーションをカレント表示する方法まとめ【jQueryとかWordPress】

  えっ…WordPressはデフォルトで、カレントページ(現在のページ)のnavの

• に「current-menu-item」と入ると！まじか〜、今までの苦労は〜〜！！

  という分で、.selectedを以下のクラスに変更
  ↓SCSSで記述
  current-menu-item{
  background: $skyblue;
  a{
  color:$white;
  }
  }
  カレント表示されるようになりました(*^^*)