[워드프레스] 29. 템플릿파트 : 헤더·푸터를 블록으로 편집하는 법

워드프레스 해부 29편 - 헤더·푸터를 블록으로 편집하는 법

작성자

카테고리:

* 이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

(워드프레스 해부 ㉙) 템플릿파트

블록 테마에서 헤더와 푸터는 여러 페이지가 공유하는 조각이라 따로 관리한다. 이게 템플릿 파트(template part)다. 사이트 편집기에서 블록으로 편집하거나, 블록 마크업(23편)을 직접 넣어 바꾼다.

실제로 나는 이 사이트 홈을 리스트에서 카드 그리드로 바꿀 때 홈 템플릿(15편)을, 상단 제목·메뉴를 손볼 땐 헤더 템플릿 파트를 편집했다. 템플릿과 템플릿 파트를 조합해 페이지 골격을 짠다.

직접 해보기

<!-- 템플릿에서 헤더 파트를 불러오는 블록 -->
<!-- wp:template-part {"slug":"header","theme":"twentytwentyfive"} /-->

<!-- 헤더 파트 안: 사이트 제목 + 내비게이션 -->
<!-- wp:site-title /-->
<!-- wp:navigation /-->

편집 방법은 두 가지. 외모 → 편집기 → 패턴 → 템플릿 파트에서 눈으로 편집하거나, REST의 /wp/v2/template-parts로 코드 편집. 둘 다 같은 데이터를 건드린다.

✅ 확인 — 사이트 편집기에서 헤더를 한 번이라도 수정하면, 그 헤더가 테마 파일이 아니라 DB(wp_template_part)에 사용자 버전으로 저장된다. 소스가 ‘theme’에서 ‘custom’으로 바뀌는 게 그 신호다.

실무 팁 — 블록 테마에서 헤더·푸터를 고쳤는데 안 바뀌면, 대개 DB에 저장된 사용자 커스터마이즈가 테마 파일보다 우선하기 때문이다. 사이트 편집기 편집분은 wp_template_part 포스트로 DB에 저장되고, ‘커스터마이즈 지우기’로 테마 기본값으로 되돌릴 수 있다.

parts 폴더와 template-part 블록

블록 테마에서 헤더·푸터는 테마의 parts/ 폴더에 header.html·footer.html로 들어간다. 그리고 각 템플릿(예: single.html)에서 이 조각을 불러올 땐 블록 한 줄이면 된다.

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

  ... 본문 템플릿 ...

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

slug가 parts/ 폴더의 파일명과 이어진다. 여러 템플릿이 이 한 줄로 같은 헤더를 공유하니, 헤더를 한 번 고치면 전 페이지에 반영된다. 클래식 테마에서 get_header()가 하던 일을 블록 방식으로 하는 셈이다.

테마 파일 vs DB — 누가 이기나

여기서 많이들 헷갈린다. 사이트 편집기에서 헤더를 고치면, 그 수정본은 테마 파일이 아니라 데이터베이스(wp_template_part 테이블)에 저장된다. 그리고 그 순간부터 DB의 사용자 편집본이 테마 원본 파일보다 우선한다. 덕분에 테마를 업데이트해도 내가 편집한 헤더는 안 사라진다. 반대로, 테마 파일의 header.html을 코드로 고쳤는데 화면이 그대로라면 십중팔구 DB에 예전 편집본이 남아 그걸 보여주고 있는 것이다.

원래 테마 상태로 되돌리기

편집이 꼬였거나 테마 원본으로 리셋하고 싶을 때가 있다. 사이트 편집기에서 해당 템플릿 파트를 열고 옵션 메뉴의 ‘커스터마이징 지우기(Clear customizations)’를 누르면, DB에 저장된 편집본이 삭제되고 테마 파일 원본으로 돌아간다. 코드로 테마를 관리하는 사람에겐 이게 사실상 리셋 버튼이다. 나도 헤더를 실험하다 꼬이면 이걸로 원점으로 돌린 뒤 다시 시작한다.

클래식 테마와 비교하면

클래식 테마블록 테마
조각 형식PHP 파일 (header.php)HTML 파일 (parts/header.html)
불러오기get_header() / get_template_part()template-part 블록
편집코드로만사이트 편집기 + 코드
편집본 저장파일에 직접DB(wp_template_part)

방식은 이렇게 다르지만 목적은 똑같다 — 여러 페이지가 쓰는 공통 조각을 한 곳에서 관리하는 것. 블록 테마는 여기에 ‘코드를 몰라도 편집’ 기능을 얹었을 뿐이다. 관련해서 스타일의 중심은 theme.json, 안전한 커스터마이징은 자식 테마 편에서 이어진다.

템플릿 파트와 ‘동기화 패턴’은 다르다

비슷해 보여 섞이는 개념이 하나 있다. 헤더·푸터 같은 템플릿 파트는 ‘사이트의 뼈대 조각’이라 사이트 편집기의 파트 목록에서 관리한다. 반면 본문 안에서 여러 글에 똑같이 넣고 싶은 덩어리(예: 안내 배너)는 동기화 패턴(옛 재사용 블록)으로 만든다. 하나를 고치면 넣은 곳이 전부 바뀌는 건 같지만, 파트는 ‘레이아웃 구조’, 패턴은 ‘콘텐츠 조각’이라는 자리 차이가 있다.

정리하면 헤더·푸터·사이드바처럼 모든 페이지의 틀이면 템플릿 파트, 본문에 반복해서 꽂는 내용 덩어리면 동기화 패턴이다. 이 구분만 잡으면 ‘이건 어디서 관리하지?’ 하고 헤매지 않는다.

직접 편집을 봤으니, 다음은 부모 테마를 안전하게 커스터마이징하는 자식 테마다.

자주 묻는 질문 (FAQ)

헤더·푸터를 코드 없이 편집할 수 있나요?

블록 테마라면 사이트 편집기에서 헤더·푸터 템플릿 파트를 블록으로 직접 편집할 수 있습니다.

템플릿 파트는 어디에 저장되나요?

테마의 parts 폴더(HTML), 편집 후에는 DB(wp_template_part)에 저장됩니다.

코멘트

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다