이 워드프레스 블로그는 GeneratePress 테마를 적용한 다음 위젯으로 사이드바에 카테고리를 추가하였다. 그리고 모바일에서 햄버거(☰) 버튼을 클릭했을 때 오프캔버스를 열고 PC버전 사이드바의 카테고리 요소를 그대로 추가하려고 했는데 서브 카테고리가 보이지 않는 이상한 오류가 있는 것을 발견했다.
먼저 위젯(Widget)으로 사이드바 영역에 카테고리 요소를 적용하면 PC 버전에서는 이렇게 상위/하위 카테고리가 모두 잘 나오는 모습이다.
하지만 오프 캔버스에 카테고리 요소를 넣으면 위처럼 서브 카테고리 목록이 온데간데없이 사라지는 것을 볼 수 있다. (향후 GP 테마 업데이트가 있으면 좋을 것 같다)
GP 테마 포럼 질문 글
Off Canvas sub-menus not displaying & no dropdown arrow
Off Canvas Panel Not Showing Sub-Menus
구글에 관련 내용을 검색하면 (ex : GeneratePress Off Canvas does not show sub category) GP 테마 질문 포럼에서 관련 내용이 나온다. 그런데 내용을 봐도 코드를 추가하는 등 번거로워서 아예 오프 캔버스에서 위젯 요소를 제거하고 카테고리 목록을 새로 구성하였는데 자세히 알아보자.
* GeneratePress 테마 프리미엄 버전에서 적용될 수 있습니다.
1. 오프 캔버스에 메뉴 추가
1. 워드프레스 대시보드 – 디자인 – Customize – Widgets – Off Canvas Panel
2. 워드프레스 대시보드 – 디자인 -Widgets – Off Canvas Panel
먼저 위 둘 중 아무 경로를 통해 오프캔버스 패널에 구성한 요소를 모두 삭제하자. 그럼 화면처럼 빈 도화지만 남을 텐데 다시 Customize – Menus로 온 다음 Creat New Menu 버튼을 클릭해서 오프캔버스 메뉴를 만들면 된다.
다음 화면이 나오면 메뉴 이름(아무 이름 상관없음)과 메뉴 위치(Off Canvas Menu)에 체크 후 ‘Next’ 버튼을 클릭하자.
이후 메뉴 목록 가운데 있는 Add Item 버튼 누르면 오프캔버스에 추가할 수 있는 아이템 목록이 나온다. 커스텀 링크부터 페이지, 특정 글, 특정 카테고리 및 태그 등 원하는 아이템을 추가하면 된다.
다만 서브 카테고리를 구성하면 (왼쪽에 추가한 카테고리 이름을 마우스 왼쪽 클릭 후 드래그) 오프캔버스에는 화살표가 접혀서 나온다. 화살표 사용을 원치 않는 경우 하위 카테고리는 설정하지 않으면 된다.
2. 오프 캔버스 너비 조정
오프캔버스를 모바일 버전만 적용하기로 했다면 Customize 오프캔버스 설정 창 맨 아래 있는 모바일 아이콘 클릭 후 적절히 수정하면 된다.
처음 오프캔버스 설정을 하면 캔버스 너비는 모바일 전체 화면의 약 66.66%이다. 만약 카테고리 이름이 길거나 폰트 사이즈가 크면 자동 줄 바꿈이 되는데 이것을 원치 않으면 캔버스 너비를 넓혀서 해결할 수 있다.
화면 너비 조정을 하려면 오프캔버스의 클래스 이름을 확인해야 한다. Customize 창에서 오프캔버스를 열어둔 상태로 키보드의 F12키 개발자도구를 연 다음, 오프캔버스를 클릭하면 해당 이름을 볼 수 있다.
블로그 개발자도구 검사로 CSS 요소 확인하는 방법
.main-navigation.offside
#generate-slideout-menu
확인한 클래스 이름은 이렇게 둘인데, CSS 입력 창에 아래 코드 중 아무 것이나 하나를 넣으면 된다. (/*~*/ 부분은 메모에 해당하는 주석이고 Padding 값은 생략해도 되는 것 같다)
/* Off Canvas */
.main-navigation.offside {
width: 80%;
padding: 0;
}
#generate-slideout-menu {
width: 80%;
padding: 0;
}
GP 테마 포럼 질문 글
off canvas width and height changes
위의 GP 테마 포럼 글을 참고하면 더 자세한 답변을 볼 수 있다.
3. 오프 캔버스 색깔 설정
Customize 첫 화면 – Colors – 왼쪽 메뉴 중 Off Canvas Panel 화살표를 열면 오프캔버스 글자/배경 색을 지정할 수 있다.
4. 오프 캔버스 글자 설정
먼저 Customize 첫 화면 – Typography로 온 다음 Add Typography 버튼을 클릭하자.
이후 타겟 엘리먼트 영역에서 Off-Canvas Menu Items 항목을 선택하면 설정 옵션이 몇 가지 나올 것이다. 이 중 필요한 옵션을 조정하면 된다.
참고로 오프캔버스의 닫기 버튼 X를 캔버스 영역 안에 넣으려면 Customize 첫 화면 – Layout – Off Canvas Panel로 온 다음 Close Button 메뉴를 Outside → Inside로 변경하면 된다.
완성 코드
CSS에 코드를 추가한 결과 오른쪽 화면처럼 메뉴 간 간격과 오른쪽 화살표, 밑줄을 넣을 수 있었다.
* GP 테마와 오프캔버스를 적용한 경우 위 버튼을 통해 코드가 적힌 메모장 파일 다운로드가 가능합니다. 다만 현재 설정한 메뉴 종류와 CSS 상태 등에 따라 클래스 이름과 padding, margin 등의 수치는 달라질 수 있습니다.
5. 오프 캔버스 최신 글 추가
오프캔버스에 카테고리만 넣는 것이 왠지 허전하다면 최신 글 목록을 추가하는 것도 좋은 방법이다. 이 글에서는 헤드라인과 글 목록만 추가하였는데 대시보드 – 디자인 – Widgets – Off Canvas Panel에서 설정할 수 있다.
추가한 헤드라인과 최신 글 목록은 화면 오른쪽 위의 Settings 버튼을 누르고 진행할 수 있다. 글자 색깔이나 간격, 포스트 숫자 등 원하는 만큼 설정 후 화면 위 Update 버튼을 누르면 오프 캔버스에 적용된다.
최신 글 목록을 적용한 다음 먼저 추가한 카테고리와 글자 크기나 간격 등을 맞추려면 CSS 코드 입력을 활용해야 한다.
완성 코드
코드를 추가하고 수정한 끝에 카테고리와 최신 글 목록이 일관성 있게 변경되었다.
.wp-block-latest-posts.wp-block-latest-posts__list li
참고로 위 사진 CSS 창 위쪽 최신 글 목록 클래스 이름에 모바일 미디어 쿼리를 추가했는데 (화면 너비가 768px 이하일 때 적용) 그 이유는 그냥 코드를 설정하면 PC 버전 사이드바에 추가한 위젯 최신 글에도 적용되기 때문이다.
* 위 다운로드 버튼을 참고하면 코드가 적힌 메모장 파일을 확인할 수 있습니다. 모든 수치는 예시이니 취향에 따라 조정하시면 됩니다. 또한 현재 블로그 CSS 설정 등에 따라 세부 수치가 변경될 수 있는 점도 참고해주세요.
관련 글
GeneratePress 헤더 오프캔버스 카테고리 설정 방법 안내
GeneratePress 오프 캔버스 사이드바 똑같이 적용하는 방법
워드프레스 스크롤바 기능은 유지하면서 감추는 방법
GeneratePress 마케터 테마 선택 이유와 설치 방법
