워드프레스 자식테마(child theme)만들기
Wordpress 자식테마(child theme)만들기에 도전해봅니다.
일단 Childe Theme(자식 테마)에 대해 알아보겠습니다.
Child Theme(자식테마)은 Style.css 파일을 제외한 모든 파일들을 Parent Theme(부모 테마)으로부터 자동으로 물려 받는 테마를 말합니다
Child Theme(자식테마)를 만드는 이유
이번 코어업데이트 이후 각종 테마들이 업데이트를 단행 했습니다. 테마가 업데이트 되면 노력해서 바꿔놓은 코드, css가 덥어 씌워져 다시 해야됩니다. 어딜고쳤지? 지난번꺼 남겨둘껄 하고 생각합니다
우씨...
하지만 child theme를 만들면 사용하면 이런 걱정에서 해방이 된다고 하네요...
일단 테마를 설치합니다.
글구 자식테마(child theme)폴더를 만듭니다.
Child 테마의 Style.css 파일 만들기
메모장 같은 텍스트 에디터 프로그램을 사용해서 style.css 파일을 만듭니다. 제일 윗 줄부터 아래와 같은 형식으로 주석문을 생성합니다 이 주석문은 워드프레스 해당 테마의 정보로 사용이 됩니다.
/*
Theme Name: Avada Child
Theme URI: http: //mdsolution.net/
Description: Child theme for the Avada theme
Author: Janmori
Author URI: http: //janmaori.tystory.com
Template: Avada
Version: 0.1.0
*/
위의 주석문 중에서 Theme Name과 Template 정보는 반드시 있어야 하고 나머지는 선택사항 입니다.
- Theme Name: 자식 테마의 이름
- Theme URI: 테마를 다운 받을 수 있는 주소나 테마를 설명해 놓은 곳
- Description: 테마에 대한 간략한 설명
- Template: 부모 테마가 설치된 디렉토리 이름, 대소문자 구별함
- Author: 템플릿 제작자 이름
- Author URI: 템플릿 제작자 홈페이지 주소
위의 css 파일을 자식 테마의 디렉토리로 업로드 하게 되면 자식테마가 완성이 됩니다. 하지만 앞에서 말했던 바와 같이 style.css 파일은 부모 테마로부터 물려받지 않기 때문에 child theme을 활성화 시켜보면 제대로 레이아웃이 갖춰져 있지 않게 됩니다. 따라서 부모 테마에서 CSS 정보를 import를 사용해서 부모 테마의 css 파일로 불러와야 합니다.
예를 들면 아래와 같이, 알림판의 ‘Appearance>Editor’로 가서 style.css에서 import를 사용해서 Parent theme의 css 화일을 불러옵니다. 그리고 하단에 수정할 부분을 수정합니다.
/*
Theme Name: Avada Child
Description: Child theme for the Avada
Author: Your name here
Template: Avada
*/
@import url("../Avada/style.css");
여기서 수정합니다. ^^;
다른 파일의 수정방법 알아보기
css 파일은 앞의 방법처럼 수정을 하면 되는데, 만약 header.php 나 index.php 파일과 같은 다른 파일을 수정하고 싶다면, 부모 테마에서 그 파일을 자식테마로 복사해서 수정하면 됩니다.
워드프레스 자식테마(child theme)만들기 마무리!!
워드프레스의 강점 중에 하나인 child theme을 이용한 테마 수정은 이미 널리 알려져있고 실제 많은 블로그에서 자식테마(child theme)를 이용하여 부모테마(parent theme)를 수정, 커스터마이징하고 있습니다 여러분도 현재 테마를 수정하고자 하실 때는 자식테마(child theme)를 이용하시면 부모테마(parent theme)가 업데이트 되어도 자식테마(child theme)에 수정한 것들은 계속 유지보존되기 때문에 걱정없이 수정 및 업데이트를 하실 수 있을겁니다.
단, 그리나 부모 테마의 파일들을 참조하기 때문에 로딩 속도가 약간 느려지는 단점도 있답니다. 참고하세요.
이상 잔머리(네이버 워드프레스카페 아이디: 인생은복불복) 이였습니다. ^^;
