워드프레스 멀티라인 메뉴 만들기

기본적으로 워드프레스에서 메뉴는 1라인입니다.

멀티라인이 필요할때가 있는데 멀티라인을 만들어 보겠습니다.

저는 아바다 테마를 사용하는데 아바다테마의 메뉴를 예시로들어 만들어 보도록 하겠습니다.

바꾸기전 메뉴

바꾼후 메뉴

워드프레스 관리자 메뉴 -> 외모 -> 테마편집기 -> css로 들어갑니다.

메뉴의 text의 속성을 설정한 클래스(main_menu_heigh)를 만듭니다.

아래를 style.css에 추가하고  파일 업데이트를 클릭하여 저장합니다.

.main_menu_height {

line-height: 1.5;

}

* line-height는 간단하게 설명드리면 열과 열사이의 간격을 뜻합니다. 일반적으로 1.2나 1.5를 많이 사용합니다.

* main_menu_heigh 클래스에 폰트속성등을 다양하게 설정한다면 글자크기가 틀린 2라인 메뉴등 여러가지로 구성할수있습니다.

이제 클래스는 만들었고 메뉴를 변경해보도록하겠습니다.

워드프레스 관리자메뉴 -> 외모 -> 메뉴에 들어갑니다.

바꾸고싶은 메뉴에 새로 만든 클래스를 적용시켜 주면 됩니다.

WHO WE ARE메뉴와 CONTATC 메뉴를 아래 그림을 참조해서 변경합니다.

WHO WE AR  -> <p class="main_menu_height "> WHO WE ARE<br>  2 line menu</p>

CONTACT  -> <p class="main_menu_height "> CONTACT<br>  2 line menu</p>

메뉴 저장을 클릭하여 저장합니다.

이제 홈페이지를 보시면 아래처럼 메뉴가 변경되어있을것 입니다.

* 제가 한 방법으로는 정렬이 먹히지 않았습니다. 임시적인 해결방법은 공백(&nbsp;)을 메뉴명에 넣어서 문자열수를 맞추면 조절이 가능합니다.