🌟 블록 테마(Block Theme)란?

🌟 블록 테마(Block Theme)란?

전통적인 테마는 PHP 템플릿 파일(header.php, footer.php)로 구성됩니다.
그러나 블록 테마는 HTML + JSON 파일만으로 테마를 구성하며,
워드프레스 관리자에서 사이트 전체를 블록 기반으로 시각적으로 편집할 수 있습니다.

✅ 코드 없이 레이아웃 변경
✅ 헤더/푸터/페이지 템플릿 자유 편집
✅ 글로벌 스타일 설정 가능

 

---

✅ FSE(Full Site Editing) 핵심 요소

구성요소설명

템플릿(Templates)	페이지, 포스트, 카테고리 별 전체 레이아웃
템플릿 파트(Template Parts)	헤더, 푸터 같은 재사용 가능 섹션
블록 블록 블록(Blocks)	콘텐츠를 구성하는 최소 단위
스타일(Global Styles)	색상, 폰트, 간격 등 사이트 전체 스타일 설정

 

---

🧩 블록 테마 기본 구조

plaintext

복사편집

my-block-theme/ ├── style.css ├── theme.json ├── templates/ │ ├── index.html │ ├── single.html │ └── archive.html ├── parts/ │ ├── header.html │ └── footer.html └── functions.php (필수 아님)

---

🔥 핵심 파일 설명

1. theme.json – 테마의 두뇌

json

복사편집

{ "version": 2, "settings": { "color": { "palette": [ { "slug": "primary", "color": "#0055ff", "name": "Primary Color" } ] }, "typography": { "fontSizes": [ { "slug": "small", "size": "12px", "name": "Small" } ] } }, "styles": { "elements": { "h1": { "typography": { "fontSize": "32px" } } } } }

📌 글로벌 색상, 폰트, 간격, 버튼 스타일 등을 선언

---

2. templates/*.html – 전체 페이지 레이아웃

예: templates/index.html

html

복사편집

<!-- wp:template-part {"slug":"header"} /--> <!-- wp:group --> <!-- wp:post-title /--> <!-- wp:post-content /--> <!-- /wp:group --> <!-- wp:template-part {"slug":"footer"} /-->

👉 레이아웃 전체가 블록으로 정의됩니다.

---

3. parts/*.html – 재사용 가능한 구조

예: parts/header.html

html

복사편집

<!-- wp:group {"tagName":"header"} --> <!-- wp:site-title /--> <!-- wp:navigation /--> <!-- /wp:group -->

📌 헤더, 푸터, 사이드바 등을 별도로 관리

---

⚡ 블록 테마 개발 실전 흐름

1. theme.json 설계 → 기본 스타일 정리
2. parts/ 폴더에 header/footer 작성
3. templates/ 폴더에 페이지 레이아웃 작성
4. 관리자 > "사이트 편집" 기능으로 수정 가능하게 오픈
5. 필요하면 커스텀 블록 등록 (PHP/JSX 기반)

---

🧠 전통 테마 vs 블록 테마 차이

항목고전 테마블록 테마

템플릿 구조	PHP 기반	HTML 블록 기반
스타일 관리	style.css / 커스텀 CSS	theme.json + 블록 스타일
레이아웃 수정	개발자가 직접	관리자에서 블록 편집
글로벌 설정	없음	있음 (색상/폰트/간격)
파일 수	많음(header.php, footer.php 등)	간결(HTML 파일 + JSON)

 

---

💡 고급 블록 테마 전략

전략설명

스타일 프리셋 지원	다크모드, 라이트모드 스타일 분기
템플릿 상속 구조 설계	기본 index.html → archive/single 덮어쓰기
커스텀 블록 개발	플러그인이나 자체 블록 등록
JSON Schema 최적화	theme.json 최적화하여 속도 개선
사이트 편집 허용 범위 제어	특정 블록 편집만 허용 설정

 

---

✅ 블록 테마 개발 체크리스트

항목완료 여부

theme.json 작성 및 글로벌 설정 구성	✅ / ❌
templates/parts 구조 설계 완료	✅ / ❌
사이트 편집 모드(Full Site Editing) 적용 확인	✅ / ❌
기본 블록 조합 테스트	✅ / ❌
커스텀 블록 추가(필요시)	✅ / ❌