STAGE 12 · Lv.55
차일드 테마 생성과 오버라이드
차일드 테마 구조, functions.php 활용, 템플릿 계층구조, 스타일 오버라이드, 템플릿 파트 커스터마이징을 배웁니다.
차일드 테마(Child Theme)란?
부모 테마를 안전하게 커스터마이징
차일드 테마는 다른 테마(부모 테마)의 기능과 스타일을 상속받으면서, 커스터마이징을 안전하게 추가할 수 있는 WordPress의 핵심 개념입니다. 부모 테마의 코드를 직접 수정하지 않으므로, 부모 테마가 업데이트되어도 커스터마이징이 유지됩니다.
왜 차일드 테마를 사용해야 하는가?
부모 테마를 직접 수정하면 안 되는 이유: 부모 테마가 업데이트되면 수정한 모든 코드가 덮어씌워져 사라집니다. 테마 업데이트에는 보안 패치가 포함되므로 업데이트를 하지 않을 수도 없습니다. 결국 보안과 커스터마이징 사이에서 선택을 강요받게 됩니다.
차일드 테마의 동작 원리:
- 차일드 테마에 파일이 있으면 → 차일드 테마의 파일 사용 (오버라이드)
- 차일드 테마에 파일이 없으면 → 부모 테마의 파일 사용 (상속)
- style.css → 부모 + 차일드 CSS 모두 적용 (캐스케이딩)
- functions.php → 부모 + 차일드 모두 실행 (추가 방식, 차일드가 먼저!)
- 템플릿 파일 (single.php 등) → 차일드 테마 파일이 우선 (완전 교체)
차일드 테마를 사용해야 하는 경우:
- 기존 테마의 디자인을 부분적으로 수정할 때
- 특정 템플릿의 HTML 구조를 변경할 때
- 테마에 새로운 기능(위젯 영역, 메뉴, 커스텀 함수)을 추가할 때
- 테마의 JavaScript나 CSS를 추가/교체할 때
- 클라이언트 프로젝트에서 업데이트 안전성을 보장할 때
차일드 테마가 불필요한 경우:
- 처음부터 직접 만든 커스텀 테마를 사용할 때
- CSS만 약간 변경하는 경우 (커스터마이저의 추가 CSS로 충분)
- 페이지 빌더(Elementor, Bricks)로만 디자인하는 경우
부모 테마
(원본 코드)
(원본 코드)
→
차일드 테마
(커스텀 코드)
(커스텀 코드)
→
WordPress
(병합 실행)
(병합 실행)
→
방문자
(최종 출력)
(최종 출력)
2개
최소 필요 파일 (style.css + functions.php)
상속
부모 테마의 모든 기능 자동 상속
안전
부모 테마 업데이트에도 커스텀 유지
WP-CLI
scaffold 명령으로 자동 생성
차일드 테마 디렉토리 구조
# 차일드 테마 전체 디렉토리 구조
wp-content/themes/
├── flavor/ # 부모 테마 (절대 수정하지 않음!)
│ ├── style.css # 부모 테마 스타일
│ ├── functions.php # 부모 테마 기능
│ ├── header.php # 헤더 템플릿
│ ├── footer.php # 푸터 템플릿
│ ├── sidebar.php # 사이드바 템플릿
│ ├── index.php # 기본 템플릿
│ ├── single.php # 단일 글 템플릿
│ ├── page.php # 페이지 템플릿
│ ├── archive.php # 아카이브 템플릿
│ ├── search.php # 검색 결과 템플릿
│ ├── 404.php # 404 에러 템플릿
│ ├── comments.php # 댓글 템플릿
│ ├── template-parts/ # 템플릿 파트
│ │ ├── content.php
│ │ ├── content-single.php
│ │ └── content-page.php
│ ├── inc/ # PHP 포함 파일
│ ├── js/ # JavaScript 파일
│ └── images/ # 이미지 파일
│
└── flavor-child/ # 차일드 테마 (여기서 커스터마이징!)
├── style.css # (필수) 테마 선언 + 커스텀 CSS
├── functions.php # (필수) 부모 CSS 로드 + 커스텀 기능
├── screenshot.png # (선택) 테마 미리보기 (880x660px 권장)
│
│ # === 오버라이드할 템플릿 파일 (필요한 것만!) ===
├── header.php # (선택) 헤더 오버라이드
├── footer.php # (선택) 푸터 오버라이드
├── single.php # (선택) 단일 글 오버라이드
├── page.php # (선택) 페이지 오버라이드
├── archive.php # (선택) 아카이브 오버라이드
├── 404.php # (선택) 404 오버라이드
│
│ # === 커스텀 페이지 템플릿 ===
├── page-about.php # (선택) "about" 슬러그 페이지 전용
├── page-contact.php # (선택) "contact" 슬러그 페이지 전용
├── template-fullwidth.php # (선택) 커스텀 페이지 템플릿
│
│ # === 템플릿 파트 ===
├── template-parts/ # (선택) 템플릿 파트 오버라이드
│ ├── content-single.php # 단일 글 내용 오버라이드
│ └── related-posts.php # 커스텀 관련 글 파트
│
│ # === 추가 에셋 ===
├── js/ # 커스텀 JavaScript
│ ├── custom.js
│ └── dark-mode.js
├── css/ # 추가 CSS 파일 (선택)
│ └── woocommerce.css
└── images/ # 커스텀 이미지
└── logo.png
🔒
여기까지는 미리보기입니다
차일드 테마 생성과 오버라이드
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.
Google로 3초 만에 시작 →🧵 Threads로 시작무료 공개 강의 둘러보기 (Lv.1~3)무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.