GeneratePress에서 상단바 사용을 설정하면 특정 카테고리나 페이지, 개별 글을 지정할 수 있다. 아래는 기본 메뉴 추가부터 모바일 햄버거바를 위한 가짜 메뉴 만드는 방법을 정리하였다.

1. 기본 메뉴 추가

대시보드 – Posts – Categories로 오면 블로그 카테고리를 새로 만들 수 있는데 샘플 테마 카테고리가 설정되어 있다면 삭제해도 된다.

새 카테고리는 왼쪽 창 위부터 카테고리 Name과 Slug(도메인 뒤 url 주소), Parent 상위 옵션을 설정하면 된다.

대시보드 – Appearance – Customize – Menus – Primary

이제 상단바를 설정해야 하는데 먼저 불필요한 기존 샘플 테마 카테고리를 삭제한 다음 ‘+Add Items’ 버튼을 눌러보자.

이후 카테고리 탭을 열고 필요한 메뉴를 선택하면 화면 왼쪽에 나타난다. 카테고리 순서 변경이나 상위, 하위 관계는 아이콘을 마우스로 잡고 움직여서 원하는 위치에 드롭하면 된다.

또한 카테고리 말고도 페이지나 포스트, 태그 등 다른 메뉴도 해당 탭을 열고 같은 방식으로 추가할 수 있다.

추가한 아이콘을 클릭하면 이름도 수정할 수 있다.

2. 가짜 메뉴 추가

GeneratePress 상단바에 카테고리 등의 메뉴를 설정하면 모바일에서는 햄버거바(☰)로 나온다. 아이콘 클릭 후 메뉴 영역이 화면 전체 세로폭을 차지하는 오프캔버스를 만드는 방법도 있지만, 이 블로그에서는 현재 위처럼 심플한 드롭다운 방식을 채택하였다.

그런데 상위 메뉴 클릭 시 하위 페이지가 열리기 전에 상위 메뉴 페이지로 이동하는 문제가 있다. (정확히 화살표를 클릭하면 하위 메뉴가 열리지만, 이걸 구분하는 모바일 방문자는 거의 없을 것 같다)

이럴 때는 이름만 있고 실제 페이지 연결이 되지 않은 가짜 메뉴(카테고리)를 만들면 된다. 우선 Add Items 버튼 클릭 후 맨 위의 Custom Links 창에 URL 란에 #과 원하는 이름을 넣은 뒤 Add to Menu를 하자.

이후 원하는 서브 카테고리나 특정 페이지 글을 하위 포지션에 넣으면 된다. 발행 버튼을 누르고 실제 모바일로 블로그에 접속해 보면 상위 카테고리(#)를 눌렀을 때 다른 곳에 이동하지 않고 하위 메뉴만 열리는 것을 볼 수 있다.

여담으로 이 블로그에는 지금의 Info 테마로 변경하기 전에 사이드바 카테고리 메뉴를 거의 그대로 상단바에 넣어서 사용했다. 하지만 메뉴가 많고 복잡해 보여서 가짜 메뉴를 만든 뒤 하위에 Index 페이지를 연결했는데 결과적으로 미니멀해지고 탐색 기능도 강화되서 만족한다.

워드프레스 마스터 가이드