웹사이트 방문자는 메뉴를 통해 원하는 주제의 정보들을 탐색합니다. 그렇기에 메뉴의 유무가 웹사이트의 사용성과 활용성을 좌우합니다. 특히 워드프레스 사이트의 GeneratePress 테마를 사용하는 경우, 테마의 유연한 기능을 활용하여 메뉴의 레이아웃, 글꼴, 색상, 크기 등을 커스터마이징할 수 있습니다.
참고로, GeneratePress 테마의 경우 디테일한 네비게이션 메뉴 디자인을 하려면 GeneratePress 프로 버전이 필요합니다. 이 글에서는 GeneratePress 프로 버전을 사용하여 네비게이션 메뉴를 구성하는 방법에 대해 알아보겠습니다.
GeneratePress 테마 네비게이션 메뉴 바
GeneratePress 테마 네비게이션 메뉴 바를 설정하기 위해서는 카테고리 설정과 페이지에 표시할 메뉴 생성이 우선적으로 필요합니다. 쉽게 하실 수 있을 테지만, 간략히 그 과정을 짚고 넘어가도록 하겠습니다.
1.카테고리 설정
카테고리를 먼저 생성을 해줘야 합니다. 워드프레스 관리자 페이지의 글 > 카테고리 메뉴에 들어가줍니다. 그러면 좌측에는 새 카테고리를 추가할 수 있고, 우측에서는 내 카테고리 목록을 확인할 수가 있습니다.
카테고리가 이미 있는 경우에는, 새 카테고리를 굳이 만들지 않아도 됩니다. 새로 카테고리를 추가하고 싶다면, 위와 같이 카테고리 이름, 슬러그, 설명 등을 입력한 후에 새 카테고리 추가 버튼을 눌러주면 됩니다.
2.메뉴 생성
카테고리가 잘 생성되었다면, 이 카테고리들을 바탕으로 메뉴를 생성할 것입니다. 워프 관리자 페이지의 모양(외모) > 메뉴 탭으로 이동해줍니다.
만약 이미 생성한 메뉴가 없다면, 바로 메뉴 생성이 뜹니다. 다른 메뉴를 만드려면 ‘새 메뉴 만들기’ 를 클릭하고, 메뉴 이름은 메인 메뉴로 입력합니다. 그리고 현재 생성하는 메뉴가 페이지에 표시되고자 한다면, Primary Menu를 체크합니다. 그리고 ‘메뉴 생성’ 버튼을 클릭해줍니다.
메뉴를 만들었다면, 메뉴 추가를 통해 카테고리를 추가해주어야 합니다. 카테고리를 선택합니다.
그 다음, 카테고리에서 모두 보기 탭에서 메뉴로 추가할 카테고리를 선택한 후, 하단의 ‘메뉴 추가’ 버튼을 눌러주면 해당 카테고리가 메뉴에 추가됩니다.
다음과 같이 카테고리로 메뉴가 추가되었습니다. ‘메뉴 저장’ 버튼을 누르면 메뉴 설정은 완료입니다.
GeneratePress 테마 네비게이션 메뉴 바 설정하는 방법
이제 생성한 메뉴를 바탕으로 GeneratePress 테마 네비게이션 메뉴 바를 설정해보겠습니다.
네비게이션의 메뉴 바는 보이시는 이미지와 같이 빨간색 박스 안 각 카테고리 항목을 메뉴로 표시를 해주는 바입니다.
1.레이아웃 구조 설정
먼저 레이아웃을 통해 네비게이션 메뉴 위치와 정렬을 지정하도록 하겠습니다. 관리자 페이지에서 외모 > 사용자 지정(커스터마이징) 탭에 들어갑니다. 그 다음 Layout을 클릭합니다.
Layout에서 Primary Navigation을 선택해줍니다. 여기서 Navigation Location은 Header와의 위치 관계를 설정할 수 있는 항목입니다.
Below Header를 선택하면 메뉴와 헤더의 위치가 다음과 같이 변경됨을 확인할 수 있습니다.
헤더 하단에 네비게이션 메뉴 바가 위치하게 됩니다.
2.메뉴 정렬 조정
다음은 Navigation Alignment를 center로 지정하여서 네비게이션 메뉴가 가운데에 위치하도록 합니다.
추가로 Layout > Header 에서 Header Alignment를 center로 설정합니다.
그러면 위와 같이 가운데로 정렬된 헤더와 네비게이션 메뉴를 보실 수 있습니다.
3.글꼴 설정
글꼴은 사용자가 명확히 인식하고 잘 보일 수 있도록 설정하는 것이 좋습니다. 글꼴은 너무 화려한 디자인보다는 깔끔하고 심플하게 디자인하는 것이 좋습니다.
아까와 마찬가지로 워프 관리자 페이지에서 외모 > 사용자 정의 > Typography 로 이동합니다.
위 화면처럼 Font Manager와 Typography Manager가 있습니다. 여기서 Add Typography 버튼을 통해 새로운 Typography를 생성해야 합니다.
Target Element를 Primary Menu Items로 설정한 뒤, 박스에 나오는 글꼴 항목들에 대한 여러 설정을 해줍니다.
- Font Family: Google Fonts를 포함한 다양한 글꼴 선택
- Font Weight: 100~900까지 글자의 두께 설정
- Font Style: Default, Normal, Italic, Oblique 등 글꼴 스타일 설정
- Font Size: 글자 크기 설정
이와 같이 GeneratePress 프로 버전으로 헤더에 표시되는 GeneratePress 테마 네비게이션 메뉴 바를 구성하고 커스터마이징하는 방법에 대해 알아보았습니다. 물론 무료 버전으로도 메뉴 바를 디자인할 수 있지만, CSS 코드를 이용하여야 하며, CSS 코드에 대한 추가적인 학습과 이해가 필요합니다.
그렇기에 워드프레스 사용에 익숙치 않다면, Generate Premium을 이용하여 더욱 쉽고 간편하게 헤더와 메뉴 디자인을 해보시기를 추천드립니다.