플러그인 없이 WordPress 헤더 만들기
헤더는 방문자가 모두 보는 웹사이트의 유일한 영역이지만, 테마는 대개 옵션 아홉 개가 있는 설정 화면 뒤에 숨겨 둡니다. Canvas에서 헤더는 편집기에서 블록으로 만드는 레코드이므로, 이 가이드는 체크박스를 둘러보는 투어가 아니라 직접 만들어 가는 과정입니다.
1단계: Canvas에서 헤더란 무엇인가
헤더는 페이지처럼 WordPress 관리자 화면에 목록으로 표시되고 같은 블록 편집기에서 편집되는 레코드입니다. 이 한 가지 결정 덕분에 헤더 플러그인을 사이트에서 제거할 수 있습니다.
다른 테마는 헤더를 다른 곳에서 만듭니다. Blocksy와 Astra는 모두 헤더 빌더를 커스터마이저에 두는데, 커스터마이저는 사이트 옆에 있는 설정 패널로 페이지를 작성하는 편집기와는 별도입니다. Blocksy 비교에서 두 방식을 나란히 살펴볼 수 있습니다.
중첩 구조
헤더 레코드에는 Header Root가 담깁니다. 루트에는 Header Container가 있으며, 이는 헤더를 박스형으로 할지, 전체 너비로 할지, 또는 한 브레이크포인트에서는 박스형이고 다른 곳에서는 전체 너비인지를 결정합니다. 컨테이너에는 Header Zones가 들어 있으며, 영역은 헤더 행의 한 칸입니다. 로고는 한 영역에, 내비게이션은 다음 영역에, 검색 아이콘과 장바구니는 마지막 영역에 넣습니다.
헤더 계열에는 총 22개의 블록이 있으며, 일반적인 사이트에서는 그중 4~5개를 사용하게 됩니다. 나머지는 쇼핑몰 검색, 언어 링크, 또는 모서리에 넣는 영업시간 블록이 필요할 때를 위해 준비되어 있습니다.
이것은 별도의 편집기가 아닙니다. WordPress에서 페이지를 편집한다면 헤더도 편집할 수 있으며, 실행 취소, 블록 설정, 키보드 단축키가 동일하게 적용됩니다.
2단계: 헤더 레코드 만들기
Canvas 메뉴에서 헤더 목록을 열고 새 레코드를 추가하세요. 솔직하게 말하면 시작점은 두 가지입니다.
패턴으로 시작하기
헤더 패턴을 삽입하면 일반 블록이 알맞게 배치되어 나오며, 다시 배열하거나 이름을 바꾸거나 삭제할 수 있습니다. 헤더는 제품 내에서 가장 큰 패턴 카테고리로, 전체 183개 패턴 중에서 원하는 모양과 가까운 것이 보통 있습니다. 첫 빌드에서 가장 빠르고 권장하는 방법입니다.
데모로 시작하기
88개 데모 웹사이트 중 하나를 가져왔다면, 그 헤더는 이미 사이트에 레코드로 있습니다. 열어서 수정하거나 복제해 복사본에서 실험해 보세요. 작동 중인 헤더를 수정하면 빈 캔버스보다 구조를 더 빠르게 익힐 수 있습니다.
레코드에 용도를 알 수 있는 이름을 지정하세요(예: 메인 헤더 또는 랜딩 페이지 헤더). 한 달 안에 이런 레코드가 세 개 생길 수 있으며, 이름만이 이들을 구별하는 수단입니다.
단계 3: 구역 배치하기
영역이 레이아웃을 담당하므로 정렬 클래스와 씨름할 일이 거의 없습니다.
- 영역을 가장자리에 붙이세요. 왼쪽 영역에는 로고, 가운데 영역에는 메뉴, 오른쪽 영역에는 액션을 배치하는 구성이 대부분의 사이트가 결국 택하는 방식입니다.
- 함께 속하는 요소끼리 묶으세요. 검색 아이콘, 장바구니, 버튼이 한 영역에 있으면 하나의 그룹으로 간격을 맞춰 클러스터로 유지됩니다.
- 브레이크포인트별로 순서를 바꿀 수 있습니다. 데스크톱에서 세 번째에 있는 영역을 휴대폰에서는 첫 번째에 둘 수 있으며, 별도의 헤더 레코드가 필요하지 않습니다.
- 영역을 기기 등급별로 제한하세요. 공간이 없는 기기에서는 영역을 건너뛰도록 설정하면, 나중에 CSS로 숨길 필요가 없습니다.
- 나만의 스타일시트에서 영역을 제어하려면 영역에 고유 클래스를 추가하세요.
데스크톱 배치를 먼저 만들고, 콘텐츠 요소가 모두 들어갈 때까지 건드리지 마세요. 실제 콘텐츠가 행에 들어가 있으면 레이아웃 결정이 훨씬 쉬워집니다.
4단계: 부품 추가
이제 영역을 채워 보세요. 각 영역은 하나의 블록이며, 각 블록에는 해당 블록이 지원하는 옵션을 담은 설정 패널이 있습니다.
- Header Logo. 로고를 고정 상태와 다크 상태용 파일로 각각 지정할 수 있습니다. 어두운 사진 위에 투명 헤더를 두어도 별도의 우회 방법이 필요하지 않습니다.
- Header Navigation. 드롭다운과 메가 메뉴 패널이 포함된 기본 메뉴입니다. WordPress 메뉴를 출력하므로, 메뉴 자체는 평소와 같은 위치에서 관리합니다.
- 헤더 검색. 필드를 여는 아이콘이나 항상 열려 있는 필드 중 디자인에 어울리는 쪽을 선택하면 됩니다.
- Header Button. 일반적인 크기, 스타일, 링크 설정을 갖춘 행동 유도 버튼입니다. 하나면 설득력이 있지만, 세 개면 방해만 됩니다.
- Header Cart. 상품 개수와 드롭다운 요약을 보여주는 WooCommerce 장바구니로, 쇼핑몰에 적합합니다.
- Header Icon Link, Header Social and Header Info. 전화번호, 소셜 프로필 목록, 간단한 연락처 정보, 주소 또는 영업시간.
목록만으로 부족할 때 쓰는 메가 메뉴
메가 메뉴는 자체 레코드이며 블록으로 구성되고 메가 메뉴 블록으로 렌더링됩니다. 그래서 메뉴 항목을 열면 열 단위 패널이 전체 너비로 펼쳐지며 이미지와 버튼이 표시됩니다. Mega Menu Column은 패널을 그리드 안에 배치합니다. 카테고리에 실제로 구조가 있을 때 사용하고, 작은 사이트를 복잡해 보이게 하려고 사용하지는 마세요.
5단계: 고정, 투명 및 레이아웃 프리셋
동작은 프리셋에서 가져옵니다. 프리셋은 레이아웃 설정을 묶어 놓은 것으로, 한 번의 클릭으로 적용한 뒤 조정할 수 있습니다. 원하는 동작을 선택하고, 이후 원하는 항목은 자유롭게 변경하세요.
- 투명. 배경이 없어 헤더 뒤에 있는 요소가 그대로 비칩니다. 워드마크가 잘 보이도록 어두운 또는 밝은 로고 버전과 함께 사용하세요.
- 반투명. 반투명 배경은 뒤의 이미지를 보이게 하면서 텍스트도 읽기 쉽게 유지합니다. 복잡한 사진이 배경일 때는 보통 더 안전한 선택입니다.
- 플로팅, 반투명 플로팅 또는 작은 플로팅: 헤더가 페이지 안에 여백을 두고 놓여 창 가장자리와 떨어져 있는 방식입니다.
- 전체 너비 고정. 뷰포트 전체 너비로 표시되고 페이지를 스크롤해도 상단에 고정됩니다.
- 위로 스크롤할 때 고정됩니다. 방문자가 아래로 스크롤하면 상단에서 사라지고, 위로 스크롤하면 다시 나타나 긴 페이지의 공간을 돌려줍니다.
그 뒤에 있는 사이트 전체 설정
헤더 옵션은 테마 옵션에서 가장 큰 섹션으로, 전체 533개 필드 중 94개를 차지합니다. 단일 레코드가 맡으면 안 되는 설정들을 담고 있으며, 기본 헤더, 고정 동작, 높이, 간격, 모바일 브레이크포인트가 여기에 해당합니다. 데모를 가져오면 모든 항목이 채워지며, 필요한 항목만 바꾸면 됩니다.
6단계: 휴대폰 헤더
대부분의 트래픽이 휴대폰에서 들어오니, 다른 무엇보다 먼저 이것부터 확인하세요. 다행히 좋은 소식은 이것이 같은 레코드라는 점입니다.
- 처음부터 다시 만들 필요 없이 순서만 바꾸세요. 로고는 가운데로 옮기고, 토글은 왼쪽에, 전화 버튼은 오른쪽에 두세요. 모두 영역 순서 지정만으로 가능합니다.
- 맞지 않는 것은 빼세요. 연락처 정보나 소셜 줄은 큰 화면에서만 보이도록 제한하세요. 휴대폰에 억지로 욱여넣으면 아무에게도 도움이 되지 않습니다.
- 터치 영역은 크게 유지하세요. 메뉴 토글과 전화 아이콘은 걸으면서 사람들이 누르는 두 가지 요소입니다.
- 브레이크포인트를 신중하게 설정하세요. 메뉴가 접히는 너비는 설정할 수 있으므로, 메뉴가 길면 짧은 메뉴보다 더 일찍 접힐 수 있습니다.
- 모바일 메뉴에는 사이드 패널을 고려해 보세요. 사이드 패널은 가장자리에서 밀려 들어오는 레코드로, 실제 메뉴, 검색 필드, 버튼을 담을 공간이 있습니다.
게시하기 전에 편집기에서 확인하세요. Canvas는 방문자에게 헤더를 렌더링하는 것과 같은 코드로 편집 캔버스에서 헤더를 렌더링하므로, 휴대폰 레이아웃은 작업하는 동안 직접 확인할 수 있습니다.
7단계: 사이트 전체 또는 페이지별로 지정
레코드는 무언가가 가리키기 전까지 아무 동작도 하지 않습니다. 두 가지 수준이 있으며, 헤더와 푸터 같은 모든 레이아웃 요소에서 같은 방식으로 작동합니다.
사이트 전체 기본값
테마 옵션에서 기본 헤더를 설정하면 모든 페이지가 이를 사용합니다. 상단 바, 페이지 제목 디자인, 푸터도 같은 방식으로 설정하세요. 이 설정 덕분에 새 페이지를 발행하는 순간부터 올바르게 보입니다.
페이지별 재정의
어떤 페이지든 자체 설정에서 이 항목들을 개별적으로 재정의할 수 있습니다. 캠페인 랜딩 페이지에는 투명 헤더를 적용하고 상단 바를 없앨 수 있으며, 연락처 페이지는 기본 헤더를 그대로 유지합니다. 이를 위해 아무것도 복제할 필요가 없고, 나중에 기억해 둘 필요도 없습니다. 재정의 설정이 해당 페이지에 직접 저장되기 때문입니다.
상단 바
상단 바는 자체 블록을 갖춘 독립된 항목입니다. 전화번호, 영업시간, 언어 전환기, 공지 등을 담을 수 있습니다. Header Topbar 블록은 상단 바를 헤더 행 위에 배치합니다. 별도의 항목이므로 휴일 안내 메시지는 헤더를 전혀 열지 않고도 사이트 전체에서 바꿀 수 있습니다.
출처
이 가이드에서 Canvas 자체가 아닌 내용을 설명하는 경우, 해당 내용을 다루는 공식 페이지는 다음과 같습니다.
- 외모 메뉴 화면wordpress.org · WordPress 메뉴를 만들고 테마가 제공하는 위치에 지정하는 곳
- 성공 기준 2.5.8 이해하기: 대상 크기(최소)w3.org · 터치 대상의 최소 크기를 24 × 24 CSS 픽셀로 해야 하는 이유
다음 단계
헤더가 더 넓은 문제를 좌우하는 이유를 다루는 가이드 두 편과 헤더 빌더 자체를 소개합니다.
추가 헤더가 모바일에도 필요한가요?
보통 그럴 필요는 없습니다. 하나의 Canvas 헤더 레코드가 휴대폰에 맞게 스스로 조정되기 때문입니다. 영역은 브레이크포인트별로 순서가 바뀌고, 각 영역을 기기 등급별로 제한할 수 있습니다. 따라서 하나의 레코드로 휴대폰에서 로고를 가운데 정렬하고, 연락처 정보를 숨기고, 메뉴를 토글 뒤에 둘 수 있습니다. 레이아웃을 고치려는 목적이 아니라 실제로 다른 디자인을 원할 때만 두 번째 레코드를 만드세요.
한 페이지에 다른 헤더를 설정할 수 있나요?
네, 모든 Canvas 페이지가 자체 헤더를 가질 수 있습니다. 헤더, 상단 바, 페이지 제목, 푸터 모두 사이트 전체 기본값과 페이지별 재정의 설정을 가지므로, 캠페인 랜딩 페이지에는 사진 위에 투명한 헤더를 적용하고 다른 모든 페이지에는 기본 헤더를 유지할 수 있습니다.
이것은 위젯 영역인가요, 아니면 메뉴인가요?
Canvas 헤더는 둘 중 어느 것도 아닙니다. 페이지와 똑같이 블록 편집기에서 편집하는 레코드이며, 그 안의 로고, 내비게이션, 검색, 장바구니, 버튼은 각각 고유한 설정 패널을 가진 블록입니다. WordPress 메뉴는 여전히 WordPress 메뉴이며, Header Navigation 블록이 이를 렌더링합니다.
라이선스가 만료되면 내 헤더는 어떻게 되나요?
사이트는 오늘과 똑같이 계속 렌더링됩니다. 중지되는 것은 서비스입니다. 갱신하기 전까지 업데이트, 데모 가져오기, AI, 프리미엄 블록 편집이 멈추며, 라이선스 확인이 저희 서버에 연결되지 못하면 14일의 유예 기간이 적용됩니다.
Canvas로 다음 웹사이트를 만들어 보세요
초보자, 프리랜서, 에이전시 모두 같은 블록과 같은 데모를 사용할 수 있습니다. 사이트 하나부터 시작해 같은 라이선스로 필요한 만큼 얼마든지 만들 수 있습니다.