이 워드프레스 블로그는 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로 변경하면 된다.
4-1. 완성 코드
CSS에 코드를 추가한 결과 오른쪽 화면처럼 메뉴 간 간격과 오른쪽 화살표, 밑줄을 넣을 수 있었다.
GP 테마와 오프캔버스를 적용한 경우 위에 첨부한 메모장 파일을 확인하면 된다. 단, 현재 설정한 메뉴 종류와 CSS 상태 등에 따라 클래스 이름과 padding, margin 등의 수치는 달라질 수 있다.
5. 오프 캔버스 최신 글 추가
오프캔버스에 카테고리만 넣는 것이 왠지 허전하다면 최신 글 목록을 추가하는 것도 좋은 방법이다. 이 글에서는 헤드라인과 글 목록만 추가하였는데 대시보드 – 디자인 – Widgets – Off Canvas Panel에서 설정할 수 있다.
추가한 헤드라인과 최신 글 목록은 화면 오른쪽 위의 Settings 버튼을 누르고 진행할 수 있다. 글자 색깔이나 간격, 포스트 숫자 등 원하는 만큼 설정 후 화면 위 Update 버튼을 누르면 오프 캔버스에 적용된다.
최신 글 목록을 적용한 다음 먼저 추가한 카테고리와 글자 크기나 간격 등을 맞추려면 CSS 코드 입력을 활용해야 한다.
5-1. 완성 코드
코드를 추가하고 수정한 끝에 카테고리와 최신 글 목록이 일관성 있게 변경되었다.
.wp-block-latest-posts.wp-block-latest-posts__list li
참고로 위 사진 CSS 창 위쪽 최신 글 목록 클래스 이름에 모바일 미디어 쿼리를 추가했는데 (화면 너비가 768px 이하일 때 적용) 그 이유는 그냥 코드를 설정하면 PC 버전 사이드바에 추가한 위젯 최신 글에도 적용되기 때문이다.
위는 코드가 적힌 메모장 파일인데 모든 수치는 예시인 만큼, 취향에 따라 조정하면 된다. 또한 현재 블로그 CSS 설정 등에 따라 세부 수치가 변경될 수 있는 점도 참고하자.
워드프레스 마스터 가이드
GeneratePress 헤더 오프캔버스 카테고리 설정 방법 안내
GeneratePress 오프 캔버스 사이드바 똑같이 적용하는 방법
워드프레스 스크롤바 기능은 유지하면서 감추는 방법
