워드프레스로 웹 페이지 만들기 - 메뉴 만들기

지금부터 워드프레스에서 제공하는 Accelerate 테마를 가지고 메뉴(내비게이션)를 만들어 보겠습니다.

 

메뉴 만들기에서는 페이지나 카테고리 같은 메뉴들의 전체를 다 관리하는 상위메뉴가 필요합니다. 이것을 내비게이션이라고 하는데 웹사이트의 ‘기준’이 되는 중요한 요소 중 하나입니다. 사용자가 웹사이트의 정보를 쉽게 찾고 접근할 수 있도록 도와주는 가장 중요한 역할을 하게 됩니다.

 

그 상위 관리 메뉴(내비게이션)도 메뉴라고 이름을 붙이기 때문에 조금 이해하기 복잡할 수 있지만 전체적으로 한번 해보면 쉽게 이해할 수 있습니다.

 

'외모 < 메뉴'로 들어갑니다. 메뉴 이름을 'Main'이라고 지정하고 '메뉴 생성' 버튼을 누릅니다. 이것은 전체를 다 관리하는 상위 메뉴입니다.

 

좌측에서 'Home, Contact, Blog, Product, Review, About' 들을 모두 체크하고 '메뉴에 추가' 버튼을 눌러서 메뉴에 추가해 줍니다.

 

이렇게 메뉴에 추가하고 난 다음 글도 추가를 하겠습니다. 글 목록을 전부다 체크한 다음 '메뉴에 추가' 버튼을 눌러서 메뉴에 추가시켜 줍니다.

 

카테고리도 하나 만들어 놓은게 있는데 이것도 체크해서 메뉴에 추가시켜 줍니다.

 

순서는 원하는 위치로 드래그하여 끌어다 놓으면서 조정하면 됩니다.

 

글 같은 경우, 글 하나 하나도 하위 메뉴로 넣을 수 있습니다. 카테고리도 마찬가지로 이렇게 넣을 수 있습니다.

 

글들을 모아놓는 상위 메뉴를 하나 만들어 보겠습니다. 좌측 '사용자정의 링크'로 가서 링크 텍스트에 'Articles' 라고 써주고 '메뉴에 추가' 버튼을 누릅니다. 여기서 링크 텍스트는 상단에 보이는 메뉴 이름입니다.

 

'Articles' 안에 글들을 하위 메뉴로 드래그해서 넣어 보겠습니다.

 

메인 메뉴(내비게이션)는 테마 위치에서 헤드 바로밑의 위치인데, 그 위치에 메인 메뉴를 놓기위해서는 'Primary/Main Menu'를 체크해 주어야 합니다. 이렇게 설정하고 '메뉴 저장'를 누릅니다.

 

지금 관리할 메뉴이름은 'Main'이 되는 것입니다. 사이트에서 새로고침 해보면 이런식으로 Home, About, Product, Review, Blog, Contact, Articles 이렇게 형성된 것을 확인 할 수 있습니다.

 

메뉴 항목 중에 Blog랑 Articles는 이렇게 하위 메뉴가 설정되어 있는 것을 확인할 수 있습니다. 하위 메뉴를 클릭하면 클릭한 메뉴의 사이트로 이동합니다.

메뉴 수정 및 외부 링크 메뉴 추가

지금까지 만들어 놓은 메뉴에 외부 링크를 연결할 수 있는 메뉴를 추가해 보겠습니다. 저는 메인 메뉴에 'Korean Tea'라는 메뉴를 만들어서 이 메뉴를 클릭하면 아마존닷컴에 있는 코리언 상품 페이지로 연결해 보겠습니다.

 

'외모 < 메뉴' 로 들어가면 지금까지 만들어 놓은 메뉴들이 보입니다. 지난시간에는 'Articles'라는 상위 메뉴를 만들기 위해서 '사용자정의 링크'를 사용했었습니다. 이번에는 외부 링크 연결을 위해서 '사용자정의 링크'를 사용해 보겠습니다.

 

'사용자정의 링크'를 클릭해서 펼칩니다. 아마존닷컴의 상품 주소 링크를 복사해서 URL에 갖다 붙이고 링크 텍스트는 'Korean Tea'라고 입력해 주고 '메뉴에 추가' 버튼을 누릅니다.

 

이렇게 해서 메뉴에 추가된 'Korean Tea'를 클릭해 봅니다. 내비게이션 라벨을  변경을 하면 메뉴에 보이는 이름도 같이 변경 됩니다. 이렇게 하고나서 '메뉴에 저장' 버튼을 눌러서 메뉴에 저장해 줍니다.

 

새로고침해서 사이트를 확인해보면, 'Korean Tea at Amazon' 이라는 메뉴가 보이는데 이것을 클릭하면 아마존닷컴의 상품 페이지로 연결됩니다.

 

'Korean Tea at Amazon'이라는 메뉴를 클릭했을때 아마존닷컴의 상품 페이지가 같은 페이지에서 열리는데 이것을 새창을 열어서 상품페이지가 보이도록 해보겠습니다.

 

다시 '외모 < 메뉴'로 와서 상단에 '화면 옵션' 탭을 클릭해서 펼쳐 보게되면 고급 메뉴 속성 보기에 '링크 타겟'이 보이는데 이것을 체크해 줍니다.

 

아래 메뉴 구조로와서 '사용자정의 링크'를 펼쳐서 보게되면 '새 탭에서 링크 열기'라는 박스가 보이는데 이것을 체크표시하고 다시 '메뉴 저장' 버튼을 눌러줍니다.

 

사이트로 돌아와서 새로고침하고 'Korean Tea at Amazon' 이라는 메뉴를 클릭해 보면 새창에서 열리는 것을 확인할 수 있습니다.

지금까지 워드프레스에서 제공하는 Accelerate 테마를 가지고 메뉴(내비게이션)를 만들어 보았습니다.

워드프레스를 알면 어렵다고 생각했던 비즈니스 웹 사이트도 쉽게 만들 수 있습니다.