워드프레스(WordPress) 드롭 다운 메뉴 설정하기

드롭 다운 메뉴는 마우스를 가져가면 자동으로 하위 메뉴가 뜨는 형태의 구조를 말합니다. 클릭을 하지 않아도 되기 때문에 대부분의 사이트에서 사용하는 메뉴 기능입니다. 대부분 워드프레스 사용자는 무료/유료로 제공하는 테마를 이용해서 사이트 디자인을 합니다. 그래서 설치한 테마에 드롭 다운이 되는지 확인해야 합니다. 만약 안된다면 javascript 로 구현하거나 플러그인을 이용해야 합니다. 대부분 사이트는 지원하기 때문에 굳이 안되는 테마에 작업할 필요는 없겠죠.

 

 

[목차] 1.    테마 설치하지 않고 디자인 확인하기 2.    메뉴 추가하기 3.    테마 디자인 마법사에서 드롭다운 메뉴 추가

 

1. 테마 설치하지 않고 디자인 확인하기

 

▼ 워드프레스 관리자 페이지로 가서 왼쪽 사이드에 테마 디자인 > 테마를 선택합니다.

 

▼ 선택한 테마를 설치하기 전이지만 디자인을 웹 페이지에서 확인이 가능합니다. 

 

▼ 오른쪽 테마 디자인 화면에는 대부분 드롭 다운 메뉴를 제공합니다. 

 

2. 메뉴 추가하기

 

▼ 1번에서 마음에 드는 테마를 골랐다면 설치하고 발행합니다. 다시 관리자 페이지의 테마 디자인으로 가서 메뉴를 선택합니다. 

 

▼ 기본 테마에 메뉴가 하나도 없는 경우 새로 생성해야 합니다. 메뉴 이름을 넣고 메뉴 생성 버튼을 클릭합니다. 

 

▼ 왼쪽 "메뉴 아이템" 추가 목록에서 오른쪽 화면으로 메뉴를 추가합니다. "페이지", "글", "사용자 정의 링크", "카테고리" 에 있는 항목에서 하나를 선택하고 메뉴에 추가 버튼을 클릭하면 오른쪽 화면에 추가할 수 있습니다. 

 

▼ 드롭 다운 메뉴가 만들어 지는지 확인할 것이기 때문에 추가한 메뉴는 상위 메뉴 밑에 서브 아이템으로 들어가야 합니다. 그림처럼 메뉴를 마우스 클릭한 상태에서 이동하면 한 단계 들어간 형태를 만들 수 있습니다. 그리고 아래 위치 표시 옵션의 기본 네비게이션을 체크해야 테마가 설정한 위치에 생성한 메뉴가 나타납니다. 

 

▼ 메뉴 수정이 끝났다면 홈페이지로 가서 상단 메뉴에 마우스를 가져가 보세요. 그림처럼 서브 아이템 메뉴가 드롭다운 형태로 나타납니다. 

 

3. 테마 디자인 마법사에서 드롭다운 메뉴 추가

 

▼ 1번에서 마음에 드는 테마를 골랐다면 설치하고 발행합니다. 다시 테마 디자인 마법사를 실행하면 그림과 같은 테마를 수정할 수 있는 메뉴 목록이 나타납니다. 드롭 다운 메뉴 추가를 위해서 메뉴 를 클릭합니다. 

 

▼ 메뉴 에는 관리자 페이지에서 생성한 Menu1 이 있습니다. 수정을 위해 Menu 1 을 클릭합니다. 

 

▼ Menu 1 에서 아래에 아이템 추가 버튼을 눌러 오른쪽에 메뉴 추가 화면을 띄웁니다. 관리자 페이지에서 했던 것처럼 여러 항목 중에서 메뉴를 하나 추가합니다. 테스트를 위해 기존에 추가했던 글 "안녕하세요" 를 선택했습니다.  

 

▼ 결과는 다음과 같습니다. 왼쪽에 추가한 메뉴를 그대로 화면에 반영했습니다. 관리자 페이지에서 메뉴를 추가하는 것보다 테마 마법사에서 작업하는 것이 편할 수 있습니다. 사용자가 수정한 디자인을 화면에서 실시간으로 확인이 가능하기 때문입니다.