問題 × 解決策

WordPressのカスタムメニューのアクティブのものにcssを設定する

問題

Wordpressのカスタムメニュー(外観 > メニュー)のアクティブのものにcssを設定するには?

解決策

アクティブ時、メニューのliタグにクラス「current-menu-item」、親のliにはクラス「current-menu-parent」または「current-menu-ancestor」が付与されるので、そのクラスに対してcssの設定を行うことで反映できる。

 

WordPressのカスタムメニューのアクティブの判定方法

WordPressのカスタムメニューはアクティブ時、メニューのliタグにクラス「current-menu-item」、親のliにはクラス「current-menu-parent」または「current-menu-ancestor」が付与されます。
そのクラスに対してcssの設定を行うことでアクティブ時の設定を反映することができます。

アクティブ時のcssの設定例

実際に使用する記述例は以下になります。

/* アクティブのメニュー */
li.current-menu-item{
	font-weight: bold;
}
/* アクティブのメニューの親 */
li.current-menu-parent{
	font-weight: bold;
}
/* アクティブのメニューの先祖 */
li.current-menu-ancestor{
	font-weight: bold;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eight + nineteen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧