메뉴 네비게이션 구성하기

카테고리와 페이지 생성(http://makebct.net/648?cat=12)에서 만들어진 카테고리와 페이지들을 웹사이트의 메뉴로 구성해 보겠습니다.

BC TOWN의 전용테마는 이렇게 만들어놓은 카테고리와 페이지들을 쉽게 메뉴로 등록하여 구성하고 저장하는 것 만으로 쉽게 메뉴 네비게이션으로 만들고 수정 할 수 있습니다.

 

 

(1) 메인메뉴 생성하기

[외모] – [Menus] 메뉴를 선택합니다.

아직 어떤 메뉴도 만들지 않은 상태이기 때문에 새로운 메뉴그룹을 만들겠습니다. 이 메뉴 그룹을 이 웹사이트의 Main 네비게이션으로 사용할 것입니다.

0203_img01

이름을 ‘gnb’로 만들겠습니다.

메뉴를 생성하면 ‘gnb’라는 이름으로 오른쪽에 메뉴 구성창과 왼쪽의 메뉴구성요소 창들이 활성화 된 것을 확인할 수 있습니다.

왼쪽의 구성 요소는 다음과 같은 역할을 합니다.

 

  • 0203_img02페이지
  • 만들어 놓은 페이지들 목록입니다. 최근에 만든 페이지 목록과 ‘모두보기’탭을 클릭하면 만들어져 있는 모든 페이지 목록을 볼 수 있습니다.
  • 링크
    특정 URL을 직접 입력하여 메뉴를 만듭니다.
  • 카테고리
    카테고리 목록입니다. 가장 많이 사용한 분류와 ‘모두보기’탭을 클릭하면 생성되있는 모든 카테고리 목록을 볼 수 있습니다.

 

 

 

 

 

(2) 메뉴 등록하기

최상위 메뉴는 ’홈’, ‘PAGE’, ‘NEWS’, ’Guestbook’, ‘Sitemap’, ‘Tag’로 구성하겠습니다.

 

웹사이트의 첫페이지(Home)으로 가는 ‘홈’을 추가하겠습니다.

[Pages] – [모두보기]를 클릭합니다.
이 메뉴는 BC TOWN™ 테마에 기본으로 만들어져 있습니다. 이 메뉴를 추가하면 메뉴바에 아이콘으로 만들어진 메뉴가 자동으로 등록됩니다. ’홈’에 체크하고 [메뉴에 추가] 버튼을 클릭하면 오른쪽에 메뉴가 추가됩니다.

0203_img03 

 

같은 방법으로 다른 메뉴도 추가합니다.

PAGE’라는 메뉴를 최상위 메뉴로 만들기 위해 ‘NEO BEAUTY 테마를 소개합니다’라는 페이지를 추가합니다.

‘PAGE’라는 메뉴를 클릭하면 하위메뉴인 ‘NEO BEAUTY 테마를 소개합니다’으로 가도록 하기위해 추가된 ‘NEO BEAUTY 테마를 소개합니다’라는 메뉴의 이름을 ‘PAGE’라고 바꾸어 줍니다. 메뉴상자의 제목 오른쪽 끝 화살표를 클릭하면 상세 설정항목을 열어 이름을 바꿀 수 있습니다. 

0203_img04

 

 

‘PAGE’의 하위메뉴에 ‘‘NEO BEAUTY 테마를 소개합니다’페이지의 메뉴가 보여야 하기 때문에 한번 더 추가해 줍니다.

등록된 ‘‘NEO BEAUTY 테마를 소개합니다’ 메뉴상자를 드래그하여 위에서 만든 ’‘PAGE’메뉴의 하위로 위치시킵니다.

0203_img05

 

 

이와 같은 방법으로 모든 메뉴를 구성합니다. 아래 그림은 계획했던 사이트맵에 따라 모두 구성한 상태입니다.

0203_img06

 

이렇게 구성한 메뉴를 웹사이트 상단의 Main 네비게이션으로 사용하기 위해 ‘테마위치’를 설정해 줘야 합니다.

위 그림과 같이 하단의 [메뉴 설정]-[테마위치] 설정에서 ’Primary Menu’를 선택하면 웹사이트 상단의 메인메뉴로 등록됩니다.

 

 

위와 같은 방법으로 웹사이트 하단에 출력시킬 Footer 네비게이션도 만들 수 있습니다.

[테마위치] 설정에서 [Secondary Menu] 설정을 선택하고 저장하면 웹사이트 하단 메뉴로 등록됩니다. 

0203_img07

 

 

블로그코디 디자인 팀장입니다.
No comments
Write CommentLIST
WRITE COMMENT

위로이동