【WordPress】グローバルナビゲーションメニューの現在表示しているページに対応する項目の色を変える。

以下の画像の赤枠のように、現在のページに対応するグローバルメニューの項目の色を変えたい場合のやり方です。

完成図

以下の図のようにホームだったらグローバルメニューのホームの項目の色が変わり、サンプルページだったらサンプルページの項目の色が変わる。

やり方

1．style.cssに以下のコードを記載する。

/* 
* ヘッダーの現在のページのデザインを変える
*/
#navi .current_page_item {
  background-color: rgb(251, 251, 126);
  color: #ff7272;
}

（セレクタに”#navi”を付けないとグローバルメニュー以外にもメニューを表示している場合に、すべてのメニューの現在のページの項目の色が変わってしまう。）

WordPressではデフォルトの処理で、現在のページのメニューの項目にcurrent_page_itemのクラスが付与されるようになっているので、それを利用している。

完成

これでできました。