워드프레스 메뉴에 사용자 정의 CSS 클래스 추가 방법

워드프레스 메뉴 항목에 사용자 정의 CSS 클래스를 추가하여 특정 메뉴 아이템에 대한 스타일을 지정할 수 있습니다. 워드프레스에서 메뉴 항목에 커스텀 CSS 클래스를 추가하는 방법에 대해 간단히 살펴보겠습니다.

워드프레스 메뉴에 사용자 정의 CSS 클래스 추가 방법

메뉴에 CSS 클래스를 입력하려면 먼저 외모 > 메뉴로 이동합니다. 상단의 "화면 옵션"을 클릭합니다.

숨겨져 있던 화면 구성요소 화면이 표시됩니다. 

고급 메뉴 속성 보이기 아래의 CSS 클래스를 체크합니다.

이제 메뉴 항목을 클릭하면 CSS 클래스를 추가할 수 있는 필드가 표시됩니다.

CSS 클래스 필드에 사용자 정의 CSS 클래스를 지정할 수 있습니다.

매우 간단한 과정인데요. 이 과정을 움직이는 이미지를 통해 확인할 수 있습니다. 아래 이미지는 GeneratePress 테마의 설명서에서 인용한 것입니다.

화면 옵션에서 CSS 클래스 필드 옵션 활성화.

특정 메뉴 항목에 CSS 클래스 입력하기.

마치며

이상으로 워드프레스에서 특정 메뉴 항목에 사용자 정의 CSS 클래스(CSS Class)를 지정하는 방법에 대해 살펴보았습니다.

이외에도 화면 옵션에서 메뉴와 관련하여 링크 대상, 타이틀 속성, 링크 광계(XFN), 설명 등의 필드도 표시/미표시할 수 있는 옵션이 제공됩니다.

참고

https://avada.tistory.com/2467

워드프레스 퀵뷰, 퀵바, 퀵메뉴 플러그인/HTML 코드