현재 메뉴 항목의 글자색/배경색 바꾸기(워드프레스)

워드프레스에서 현재 활성화된 메뉴 항목의 텍스트 색상이나 배경 색상을 변경하고 싶은 경우가 있을 수 있습니다. 이 경우 먼저 현재 활성화된 메뉴 항목의 요소 검사를 하여 “현재 활성화된 메뉴 항목”에 추가되는 클래스가 무엇인지를 확인하도록 합니다. 몇 가지 테마를 살펴보니 일반적인 메뉴 항목은 current-menu-item 클래스가 지정되고, 페이지 메뉴 항목은 current-page-item 클래스가 지정되네요.

다음과 같은 CSS 코드를 워드프레스 스타일시트(style.css)에 추가하도록 합니다. (워드프레스 스타일시트에 CSS를 추가하는 방법은 여기를 참고하시기 바랍니다.)

.current_page_item a,
.current-menu-item a {
background-color: #FFF; // 원하는 배경색
	color: #1F6684; // 원하는 글자색 
}

마우스를 올려놓을 때의 레이아웃을 바꾸려면

.current_page_item a:hover,
.current-menu-item a:hover {
// CSS 코드
}

식으로 하시면 됩니다.

떠나시기 전에 아무 댓글(Comments)이라도 남겨두세요.
기부를 통해 이 블로그의 운영을 후원하실 수 있습니다.