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

워드프레스 정보를 제공하는 블로그 Avada 2021. 12. 9. 10:37 • 댓글:

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

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

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

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

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

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

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

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

워드프레스 메뉴에 사용자 정의 CSS 클래스 지정하기

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

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

화면 옵션에서 CSS 클래스 필드 옵션 활성화.
특정 메뉴 항목에 CSS 클래스 입력하기.

마치며

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

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

참고

https://avada.tistory.com/2467

 

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

워드프레스에서 왼쪽 또는 오른쪽 사이드바에 고정된 메뉴나 퀵뷰를 표시하고 싶은 경우 플러그인을 사용하거나 간단한 HTML 코드로 구현이 가능합니다. 이 글에서는 퀵뷰/퀵메뉴를 만들 수 있

avada.tistory.com