자식 테마란 무엇인가?
자식 테마(Child Theme)은 말 그대로 부모 테마(Parent Theme)을 상속받은 테마를 이야기 합니다. 부모 테마는 우리가 테마라고 부르는 바로 그 테마 원본 화일을 이야기합니다. 이해하기 쉽게 표현하면 자식 테마는 부모 테마를 상속받고 추가적인 설정 및 세팅 값을 가지고 있는 테마를 말합니다.
자식 테마가 중요한 이유는 테마의 수정과 업데이트에 있습니다. 만약 자식 테마를 사용하지 않고 원본 테마인 부모 테마의 설정과 내용을 수정한다면 테마의 업데이트 될 때 한 순간에 자신이 작업했던 모든 변경 내용이 날라가게 됩니다.
테마를 설치해서 사용할 때 설치시 초기 설정와 모든 세팅값을 100% 그래도 사용한다면 굳이 자식 테마를 사용할 필요가 없겠지만 그런 경우는 거의 없습니다. 일반적으로는 테마 콘텐츠의 위치를 변경한다든지 이미지를 변경한다든지 여러가지 스타일 값을 변경해서 사용합니다. 그렇다고 부모 테마에 직접 수정을 하는 것은 바람직하지 않습니다. 그래서 자식 테마가 필요한 것입니다.
한 가지 더 알고 있어야 할 내용은 자식 테마 만으로는 테마가 동작하지 않는다는 것입니다. 부모 테마를 기본으로 가지고 있어야 기능이 작동합니다.
자식 테마는 어디에서 제공받는가?
그렇다면 자식 테마는 어디에서 제공받아서 사용해야 하는가? 하는 생각을 하게 됩니다. 테마를 설치한다고 해서 모든 테마가 자식 테마를 제공하는 것은 아닙니다. 물론 유료 테마는 많은 경우 테마 제작사에서 자식 테마를 함께 제공하는 경우가 많지만 그렇다고 100% 자식 테마를 제공하는 것은 아닙니다.
- 자식 테마를 제공하는 유료 테마 The7 -
만약, 테마 제작사가 자식 테마를 제공하고 있지 않다면 워드프레스 공식 사이트에서 자식 테마 만드는 방법을 참고해서 제작할 수 있습니다.
자식 테마 구조 쉽고 빠르게 이해하는 방법
자식 테마(Child Theme)을 만드는 방법은 무척 간단합니다. 몇 개의 조건만 충족되면 자식 테마로서 기능이 작동합니다. 일단 테마 폴더에 자식 테마 폴더를 만들고 그 폴더 안에 style.css 화일이 있으면 됩니다. 그리고 style.css 화일 안에서 부모 테마가 누구인지를 설정해주면 됩니다.
그럼 하나하나 살펴보도록 하겠습니다. 먼저 자신의 워드프레스가 설치된 경로에 들어갑니다. 호스팅을 받고 있다면 호스팅 서버에 들어가야 할 것이고, 로컬 PC라면 PC에 워드프레스가 설치된 경로로 들어갑니다.
워드프레스가 설치된 폴더에서 디렉토리 구조를 보면 테마는 /wp-content/themes 의 디렉토리 경로에 위치하게 됩니다. 즉, 각각의 테마 화일은 모두 themes 디렉토리 아래에 폴더 형태로 구성되어 있습니다. 저의 경우 서버 내에 현재 총 4개의 테마가 설치되어 있는 것을 확인할 수 있습니다.
자식 테마가 되는 조건은 세 가지라고 언급하였습니다. 다시 한 번 확인하면, 자식 테마의 조건은 아래와 같습니다.
자식 테마의 조건
첫째, 자식 테마의 폴더 위치
둘째, 자식 테마 폴더 내에 style.css 화일 포함 여부
세째, style.css 내에 부모 테마에 대한 import 설정
자식 테마 디렉토리 만들기
이제 우리가 학습하고 있는 twentyfourteen 테마에 대한 자식 테마를 만들고 사이트에 적용하는 방법을 알아보도록 하겠습니다
먼저 themes 폴더 아래에 twentyfourteen-child 라는 폴더를 생성합니다. FTP 프로그램에서 themes 폴더에서 마우스 우클릭을 해서 디렉토리 만들기를 클릭합니다.
생성할 디렉토리 이름에 twentyfourteen-child 를 입력하고 확인 버튼을 클릭합니다.
아래와 같이 twentyfourteen-child 라는 자식 테마 폴더가 생성된 것을 확인할 수 있습니다.
자식 테마에 사용할 style.css 화일 제작 및 서버에 배치
이제 twentyfourteeen-child 폴더 안에 style.css 화일을 만들 것입니다. 먼저 로컬에서 서브라임 텍스트로 style.css 화일을 만들고나서 FTP 프로그램을 통해서 서버로 업로드해서 테스트 할 것입니다.
서브라임 텍스트 편집기를 열어서 아래와 같이 코드를 작성합니다. 주석 안에는 테마의 이름과 설명, 그리고 테마를 만든 테마 제작자를 명기합니다. Theme Name은 Twenty Fourteen Child 라고 작성하고, Author는 Shuman으로 작성하였습니다. 나머지도 아래와 같이 작성합니다.
아래쪽 소스 코드 상에 import 부분은 자식 테마의 부모가 누구인지를 연결하는 부분입니다. 프로그래밍에서 이렇게 상속을 할 때는 import 구문을 자주 사용합니다. 즉, 부모의 스타일 시트 전체를 상속받아서 사용한다는 의미입니다.
이제 로컬에서 저장한 화일을 서버의 twentyfourteen-child 폴더 안으로 FTP 프로그램을 활용해서 업로드합니다. 업로드가 완료되고 나면 아래와 같이 자식테마 디렉토리안에 style.css 화일이 보일 것입니다.
그리고 부모 테마 폴더에 가서 screenshot.png 화일을 로컬로 내려 받은 뒤에 다시 자식 폴더에 업로드 합니다. 이 화일은 워드프레스 관리자 화면에서 테마 화면에 들어갔을 때 자식 테마를 나타내는 대표이미지로 사용될 것입니다.
최종적으로 자식테마 폴더인 twentyfourteen-child 디렉토리 안에는 아래와 같이 2개의 화일을 배치하였습니다.
외모에서 테마 설정하기
이제 관리자 화면에서 현재 테마를 자식 테마로 변경하겠습니다. 먼저 왼쪽 사이드바 메뉴에서 외모 > 테마 메뉴를 클릭합니다.
왼쪽 맨 처음에 활성화 되어있는 Twenty Fourteen 테마가 현재 적용된 테마입니다. 그 아래에 보면 조금전 우리가 만든 Twenty Fourteen Child 테마가 있습니다.
Twenty Fourteen Child 테마 위에 마우스를 올리면 활성화 버튼이 나타납니다. 활성화 버튼을 클릭합니다.
새로운 테마를 적용했습니다. 라는 메시지가 뜨고 자식 테마가 현재의 테마로 활성화 되었습니다.
이제 제대로 사이트가 열리는지 확인해 보도록 하겠습니다. 일부 메뉴의 권한 관리 내역을 제외하고는 정상적으로 원본 부모 테마에 만들어 놓았던 사이트가 그래도 열리는 것을 확인할 수 있습니다. 단지 자식 테마 폴더와 스타일 시트만 추가했는데도 이렇게 쉽게 부모 테마의 내역을 상속받아서 새로운 테마로 작업이 가능한 것입니다.
자식 테마에만 나눔 명조 폰트 적용하기
새로 만든 자식 테마에 스타일을 적용하고 제대로 동작하는지 확인하겠습니다. 구글 나눔 명조체를 적용하겠습니다. CSS 스타일 편집기에서 아래와 같이 구글 폰트를 적용하고 스타일시트 저장 버튼을 클릭합니다.
사용자 화면에 들어가보면 사이트 전체에 명조체가 적용된 것을 확인할 수 있습니다. 이렇게 자식 테마에서 수정을 하면서 워드프레스 사이트를 만들어 나가면 됩니다.
'워드프레스 > 워드프레스 테마' 카테고리의 다른 글
| 자식 테마 생성 Wizard 툴, One-Click Child Theme Plugin (0) | 2015.12.16 |
|---|---|
| 테마 수정의 좋은 방법과 Custom CSS (0) | 2015.12.11 |
| 워드프레스 테마 구조 이해하기 (0) | 2015.12.10 |