앞 글에서 메뉴에 카테고리를 추가해서 블로그 사이드바에 적용하는 방법을 확인하였다. 이번에는 생성한 메뉴 카테고리 아이템을 블로그 헤더와 오프캔버스에 적용하는 방법을 알아보자.
관련 글
워드프레스 사이드바 카테고리 설정 방법 안내
* 일부 기능은 제너레이트 프레스 프리미엄 테마에서 적용될 수 있습니다.
1. 헤더 설정 방법
설정을 하려면 먼저 워드프레스 대시보드 – 디자인(Appearance) – 사용자 정의하기(Customize) 화면을 열고 메뉴(Menu)로 이동하면 된다.
앞서 만든 (대시보드 디자인 – 메뉴)에서 메뉴 이름이나(Catgory) ‘모든 위치 보기’를 클릭하면 카테고리 적용 위치를 지정할 수 있다.
메뉴 이름을 클릭하고 Primary, Secondary, Off Canvas Menu 중 원하는 옵션을 체크하면 된다. 체크하는 메뉴에 ‘Catgory’라는 카테고리 메뉴를 적용할 수 있다.
모든 위치 보기로 들어와도 선택 옵션이 같고 방법도 비슷하다. 선택을 마치면 다시 뒤로 이동하자.
헤더 오른쪽은 Primary Menu이고, 그 위의 회색 바탕이 Secondary Menu이다. 글쓰 크기나 아이템 간격, 위치 정렬 등을 하려면 추가 설정을 할 수 있다.
사용자 정의하기 창 처음으로 돌아온 뒤 레이아웃을 클릭하자.
레이아웃에서 Primary, Seconday Navigation 각 메뉴로 접속하면 자세한 설정이 가능하다.
설정 옵션은 모바일 메뉴 브레이크 포인트나 네이게이션 위치, 너비, 간격, 드롭다운 스타일 등 다양한데 직접 만지면서 진행하는 것이 좋다.
아이템 글자와 스타일을 수정하려면 사용자 정의 창 첫 메뉴에서 각각 색깔과 타이포그래피로 이동하면 된다.
2. 오프캔버스 설정 방법
조금 전 메뉴 – 메뉴 위치 지정에서 Primary, Secondary Menu를 지정했는데 마찬가지로 Off Canvas Menu를 지정해야 블로그에 적용된다.
이후 사용자 정의하기 – 레이아웃 – 오프 캔버스 패널을 열면 옵션 설정이 가능하다.
– 오프 캔버스 패널 : 모바일/데스크탑 Only, 둘 다 On/Off
– 데스크탑 토글 라벨 : 기본 햄버거바(≡) 옆에 문자(라벨) 추가
– 스타일 : 슬라이드(옆에서 밀면서 나옴), 오버레이(화면 전체 덮음) 중 선택
– 슬라이드 : 왼쪽, 오른쪽 선택
– 닫기 버튼 : 오프 캔버스 닫기 버튼을 영역 안과 밖 어느 쪽에 둘 지 선택
– 메뉴 아이템 높이 : 카테고리 아이템 사이의 간격(높이) 설정
설정할 때 창 맨 아래를 보면 데스크탑, 태블릿 PC, 모바일 아이콘을 클릭하면 기기별 화면을 참고할 수 있다.
그리고 햄버거바 아이콘도 Primary Menu 영역에 있어서 위치 조정이 필요한 경우 레이아웃 – Primary Navigation에서 조정하면 된다.
설정을 마치면 창 위쪽의 공개(Publish) 버튼을 클릭하면 블로그 적용을 마칠 수 있다.
관련 글
워드프레스 스크롤바 기능은 유지하면서 감추는 방법
