자식 테마 다루기

워드프레스의 자식 테마(Child Theme) 기능은 부모 테마의 UI와 기능 등 모든 것을 마치 자식이 부모로부터 재산을 상속받듯 상속받아 사용하는 기능입니다. 이 자식 테마를 사용하면 다음과 같은 장점이 있습니다.

  • 부모 테마를 직접 변경하지 않고도 테마 파일 수정이 가능
  • 부모 테마가 업데이트되면 자식 테마에도 반영됨

따라서 특정 워드프레스 테마를 쓰면서 약간의 수정이나 변경이 필요한 경우에 이 자식 테마 기능을 쓰면 부모 테마를 건드리지 않고도 안전하게 얼마든지 테마 커스터마이징이 가능하기 때문에 편리한 기능이며 테마 커스터마이징 시에 권장되는 방식이기도 합니다.

자식 테마 만들기: 매뉴얼 방식

자식 테마를 만드는 일반적인 방식은 워드프레스의 테마 디렉터리(/wp-content/themes) 아래에 자식 테마 디렉터리를 하나 임의로 만들고 그 속에 다음과 같이 style.css 파일을 하나 추가하는 방식입니다.

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

이 때 “Theme Name” 값으로 자식 테마명을 하나 지정하고 “Template” 값에서 부모테마명을 지정해 주면 됩니다.

자식 테마 만들기: 자동 생성기

위 방식이 별로 어려운 일은 아니지만, 아무래도 좀 번거로운 것은 사실입니다. 그래서 워드프레스 플러그인들 중에는 이 자식 테마 만들기를 좀 더 쉽게 도와주는 플러그인들이 많이 나와 있습니다.

그 중 하나, Child Themify 라는 플러그인을 한번 사용해 보죠.

이 플러그인을 설치하면 워드프레스 대시보드의 “외모” 메뉴 아래에 “Create Child Theme” 메뉴가 다음과 같이 추가됩니다.


여기서 상속 받을 부모 테마를 선택할 수 있으며, 저는 Twenty Seventeen 테마를 한번 상속받아 보기로 하겠습니다.


자식 테마 이름을 임의로 지정하고 “Create Child Theme” 버튼을 누릅니다.


자식 테마가 완성되었다는 메시지가 나옵니다.


이제 “테마” 메뉴로 가보면 새 자식 테마가 만들어진 것을 확인할 수 있습니다.


테마를 활성화 시키면 됩니다. 이후 테마 사용은 기존과 동일한 방식으로 하면 됩니다.

이와 유사하게 자식 테마를 만들어 주는 기능을 갖춘 플러그인으로는 다음과 같은 것들이 있습니다.

테마 수정하기

자식 테마라고 해서 뭐 특별하게 다른 건 없습니다. 자식 테마는, 쉽게 말하자면, ‘부모 테마 + 알파(?)’ 라고 생각하면 됩니다. 즉 부모 테마의 모든 것(UI와 기능)을 그대로 받아 쓰되 필요한 부분만 변경하거나 추가해서 쓰는 방식이죠.


테마를 수정할 일이 있으면 대시보드의 “테마 편집기” 메뉴에서 자유롭게 수정하면 됩니다. 테마 편집기로 테마를 수정하는 방식은 일반적으로 권장하는 방식은 아니지만, 자식 테마의 경우 부모 테마 파일은 건드리지 않고 자식 테마만 건드리기 때문에 안전하게 사용할 수 있습니다.

부모 테마 파일 상속받아 수정하기

필요에 따라서는 부모 테마의 특정 파일을 건드려야 하는 경우도 있습니다. 이럴 경우는 부모 테마 파일이 위치한 디렉터리로 가서 수정하려고 하는 테마 파일만 복사하여 자식 테마 디렉터리로 붙여 넣으면 됩니다.

자식 테마와 부모 테마에 동일한 이름의 파일이 있을 경우 자식 테마의 파일이 우선하기 때문입니다.

예를 들어, 테마의 헤더(header) 부분에 무언가 수정이 필요하다고 해 보죠. 이 경우 워드프레스의 테마 디렉터리 내 부모 테마 디렉터리(이 글에서는 /wp-content/themes/twentyseventeen)로 가서 header.php 파일을 복사하여 자식 테마 디렉터리에 붙여 넣습니다.

그런 다음 다시 대시보드의 “테마 편집기” 메뉴로 돌아와 보면 테마 헤더 파일을 직접 수정할 수 있게끔 파일이 열릴 것입니다.


다른 파일들도 마찬가지입니다.

이렇게 자식 테마를 사용하면 부모 테마를 건드리지 않으면서도 자유롭게 테마를 수정하거나 커스터마이징할 수 있기 때문에 꼭 사용해 보시길 권해 드립니다. 🙂

0 thoughts on “자식 테마 다루기”