Please Enable JavaScript!
Gon[ Enable JavaScript ]

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

워드프레스

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

 

환경: WordPress

 

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

 

[목차]

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

2.    메뉴 추가하기

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

 

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

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

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

 

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

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

 

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

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

 

2. 메뉴 추가하기

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

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

 

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

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

 

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

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

 

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

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

 


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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

Posted by 녹두장군

댓글을 달아 주세요