[워드프레스] 내 계정 액티브 메뉴 오직 CSS로 설정

 

사전 설명

워드프레스 사이트 제작 의뢰를 받아 만들고 있다.

추후 유지보수의 간단함을 위해 PHP, JavaScript 코드를 만지지 않기를 원하고,

오직 CSS로만 구현을 원하신다.

 

여기서 말하는 액티브 메뉴란?

메뉴의 한 아이템이 선택 됐을 때의 상태를 말한다. 위의 그림 처럼 말이다.

 

머리속에 있던 구현 방법

액티브 메뉴는 JavaScript나 Jquery를 사용해야지만 가능하다고 생각했다.

 

CSS로도 되네?

워드프레스에서만 되는지 몰라도 이렇게 사용하니 된다

nav.woocommerce-MyAccount-navigation ul li.is-active {
  color: #1F84FC;
}
nav.woocommerce-MyAccount-navigation ul li.is-active a {
  color: #1F84FC;
}