사이트 오프 캔버스(Off-Canvas)는 화면 밖에 숨어 있다가 메뉴 버튼을 클릭하면 나타나는 영역이다. 주로 모바일에서 햄버거바 아이콘(☰)을 클릭했을 때 사이드바 영역이 슬라이딩 방식으로 나타나는 것이 그 예이다.
참고 글
GeneratePress 헤더 오프캔버스 카테고리 설정 방법 안내
앞서 GeneratePress 테마에서 오프 캔버스를 만들고 블로그 카테고리를 설정하는 방법을 알아보았다. 이번 글에서는 오프 캔버스에 카테고리만 추가하는 것이 아니라 사이드바의 모든 요소(검색 돋보기, 공지사항, 최신 글 등)을 똑같이 적용하는 방법을 알아보려고 한다.
* GeneratePress 테마 프리미엄 버전에서 적용될 수 있습니다.
1. 오프 캔버스 만들기
워드프레스 대시보드 디자인 – Layout으로 오면 오프 캔버스 패널 메뉴를 찾을 수 있다.
따로 설정하지 않았다면 Off로 되어 있을 텐데 Mobile only/Desktop only/On(둘 다) 중 원하는 옵션을 활성화하면 된다.
헤더에 카테고리만 설정한 경우 위처럼 나올 텐데 오프 캔버스 옵션을 활성화하면,
햄버거 아이콘을 눌렀을 때 위 사진처럼 캔버스 영역이 잘 나오게 된다.
이후 아래의 상세 옵션을 설정하면 된다.
– Desktop Toggle Label : PC 버전에서만 보이는 옵션으로 햄버거바 아이콘(☰) 오른쪽에 문구 추가
– Style : 오프 캔버스가 나타나는 방식 선택 (Slide / Overlay : 전체 화면 덮기)
– Side : 오프 캔버스가 나타나는 방향 선택 (왼쪽 / 오른쪽)
– Close Button : 오프 캔버스 닫는 버튼을 영역 안/밖 설정
2. 오프캔버스에 사이드바 적용
위젯을 활용해서 사이드바에 다양한 요소(검색 돋보기, 공지사항, 카테고리 등)를 구성했다면 정말 손쉽게 오프 캔버스에 똑같이 설정할 수 있다.
관련 글
워드프레스 위젯 사이드바 설정 방법
대시보드 디자인 – 위젯으로 오면 현재 사이드바에 설정한 목록이 있는데 이제 이 모든 요소를 오프 캔버스 List에 복사하면 된다.
필요한 목록 개별 컨테이너는 하나씩 오프 캔버스 List에 복사 – 붙여 넣기 해도 되지만, 상위 컨테이너를 만들고 진행하는 것을 추천한다.
먼저 사이드바에서 가장 위에 있는 요소(이 글에서는 검색 돋보기)에 마우스 가져가기 – 점 세개(⋮) 옵션 – Add before을 실행하자.
문단(Paragraph)가 생기면 오른쪽 Add block 아이콘 또는 ‘Type / to choose a block’ 칸에 ‘/container’ 입력 후 컨테이너 아이콘을 소환하면 된다.
이후 사이드바의 모든 컨테이너 요소를 방금 만든 컨테이너 안에 마우스 드래드&드롭으로 종속시키면 된다.
이렇게 하면 최상위 컨테이너 하나만 복사하면 나머지 요소가 따라오게 할 수 있어서 좋다. 최상위 컨테이너 클릭 – 점 세개(⋮) 옵션 – Cuplicate 복제를 하면 아래 컨테이너 하나가 새로 생겨난다.
새로 생긴 컨테이너는 그대로 List View 목록 아래쪽에 있는 Off Canvas Panel 안에 드래그&드롭하면 된다.
혹은 조금 전 복제가 아닌, Ctrl + C 복사를 한 경우, Off Canvas Panel에 Paragraph를 추가한 뒤 Ctrl +V 붙여 넣기를 해도 된다.
작업을 완료하면 화면 위의 Update 버튼을 누르면 끝이다.
이후 블로그 화면으로 오면 오프 캔버스에 조금 전 복사한 사이드바 요소가 그대로 나오는 것을 볼 수 있다. 만약 앞서 오프 캔버스에 카테고리 메뉴를 지정했다면 위처럼 나올 텐데 설정을 해제하는 방법도 알아보자.
대시보드 디자인 – Customize – Munus에 오면 현재 오프 캔버스에 설정된 카테고리 메뉴가 있다.
블로그 운영 방향에 따라 카테고리 전체를 삭제하거나 설정 창 아래 Menu Location에서 Off Canvas Menu 박스 체크를 풀어주면 된다. 설정을 마치면 오프 캔버스에는 조금 전 복사한 사이드바 요소만 적용할 수 있다.
관련 글
워드프레스 사이드바 글 제목 줄 바꿈 스타일 조절 방법
GP 마케터 테마 사이드바 카테고리 목록 추가하는 방법
