CSS 로는 못 하는 일이 있습니다. 요소의 순서를 바꾸거나, 없는 정보를 화면에 꺼내거나, 마크업 구조 자체를 바꿔야 하는 경우입니다. 그때 쓰는 것이 템플릿 오버라이드입니다.
원리는 2회차에서 본 것과 같습니다. 워드프레스는 화면을 그릴 때 자식 테마를 먼저 보므로, 부모의 템플릿 파일과 같은 경로 · 같은 이름의 파일이 자식에 있으면 자식 것이 쓰입니다.
경로를 그대로 옮깁니다
부모 테마의 wp-content/themes/acme/template-parts/content.php 를 고치고 싶다면, 자식 테마의 wp-content/themes/acme-child/template-parts/content.php 로 복사합니다. 중간 폴더 이름까지 정확히 같아야 합니다 — 파일만 루트에 던져 놓으면 워드프레스는 그것을 찾지 않고, 아무 일도 일어나지 않은 것처럼 보입니다.
예외가 하나 있습니다. functions.php 는 복사하지 않습니다. 이 파일만은 자식 것이 부모를 대체하지 않고 둘 다 실행되기 때문에, 복사하면 같은 함수가 두 번 선언되어 사이트가 통째로 멈춥니다.
또 하나, 테마가 자체 로더를 쓰는 경우가 있습니다. 대부분의 테마는 워드프레스 표준 방식으로 조각 파일을 불러오므로 오버라이드가 그대로 동작하지만, 일부 테마는 부모 폴더를 직접 가리키는 자체 함수를 씁니다. 복사했는데 화면이 안 바뀐다면 테마가 그 파일을 어떻게 불러오는지부터 확인합니다.
복사한 파일은 얼어붙습니다
여기가 이 회차의 핵심입니다. 부모 테마가 업데이트되면 그 안의 템플릿도 함께 개선됩니다 — 접근성 속성이 추가되거나, 이미지 태그가 최신 방식으로 바뀌거나, 보안 관련 이스케이프가 보강됩니다. 그런데 우리가 복사해 둔 파일에는 그 개선이 오지 않습니다. 자식 것이 이기기 때문입니다.
즉 오버라이드는 “이 파일의 유지보수를 제가 맡겠습니다” 라고 선언하는 일입니다. 나쁜 일이 아니라 비용이 있는 선택이고, 비용을 알고 하면 관리할 수 있습니다.
관리 방법은 단순합니다. 복사한 파일 맨 위 주석에 부모 테마의 어느 버전에서 복사했는지 적어 둡니다. 업데이트할 때 그 버전과 새 버전의 같은 파일을 비교해, 바뀐 부분이 있으면 우리 파일에도 반영합니다. 이 한 줄이 있느냐 없느냐가 1년 뒤 비교 작업의 난이도를 완전히 다르게 만듭니다.
복사하기 전에 자문할 것
테마가 훅이나 필터를 제공한다면 그쪽이 언제나 낫습니다. 훅으로 붙인 코드는 부모 템플릿이 개선돼도 계속 동작하지만, 복사본은 개선을 받지 못합니다. 가장 좋은 오버라이드는 하지 않은 오버라이드이고, 그다음이 가장 작은 파일 하나를 복사한 것입니다.
이 작업이 실제 프로젝트에서 어떤 순서로 진행되는지는 작업 과정에 공개돼 있고, 복사본이 이미 여러 개 쌓인 사이트의 정리 방법은 개발 워크플로우 아카이브에서 다룹니다.
다음 회차
다음 회차는 CSS 로 돌아옵니다. 규칙을 분명히 썼는데 화면이 안 바뀔 때, 대부분의 원인은 특정도가 아니라 순서입니다 — !important 를 쓰기 전에 확인할 것들을 정리합니다.