워드프레스 - 테마 상속하기 자식테마 만들어쓰기

워드프레스 테마를 마개조(?)해서 사용하다보면 간혹 달갑지 않은 업데이트가 있는데 바로 테마 업데이트입니다.

테마의 보안이나 기타등등을 보완해주는 업데이트이긴 하지만 마냥 달갑지만은 않는것이 그간 테마에 수정을 가했던 사항들이 업데이트를 해줌으로써 수정사항들이 날아가버리기때문이지요. T.T

워드프레스를 막 처음 쓰기 시작했을때는 그런것도 모르고 무턱대로 테마 업데이트를 했다가 수정사항을 날려먹기도하고, 후에 조금 발전(?)되서 테마의 백업(?!)을 해두는 무식한 행위까지 했었드랬죠.

하지만 우리의 구세주이신 워드프레스 개발진들은 그런 사용자들의 고민을 캐치하고 진작에 테마를 좀더 손쉽게 마개조해서 쓸수있는 방편을 마련해 두었습니다.(아득히 먼 워드프레스 2.7버젼부터 지원을 하기시작한 기능이라고합니다.)

그것은 바로 테마 상속!

우리 개발자들이라면 흔히 익숙한 이단어는 정말 말그대로 입니다.

객체지향을 배울당시에는 뭐 이따위 복잡한게 있냐 싶지만 익히고 나서는 만세를 부르고 싶은 바로 그 개념입니다.

정말 말그대로 기존에 존재하는 테마를 부모테마로하여 자식테마를 만들고 대부분의 기능을 부모테마에서 가져다쓰고 일부 기능만 자식테마에 추가 하거나 변경하여 쓰는 방식입니다.

그리고 무엇보다도 기존 테마가 업데이트 되어도 자식테마를 따로 지정해두면 자식테마는 그대로유지된다는 사실!

하지만 여기서 단점도 동시에 존재하는데요.

그것은 바로 부모테마로부터 모든 변경사항을 그대로 받지 못할수도 있다는 사실입니다. 마치 자식은 부모를 닮지만 자식 본연의 특성을 가지듯이 부모를 전혀 닮지않은 부분도 있는것 처럼요.(이것이 위험할수도 있는 이유는 특정 업데이트의 경우 보안을 강화한다거나 할수있는데 이때 이를 반영받지 못할수도 있다는 것입니다.)

예를 들자면 어느 테마의 header.php부분에 제가 마개조를 가해서 쓰고있다고 하죠. 그런데 그 header.php에서 보안결점이 발견되어 그것을 수정한 테마의 업데이트가 이뤄지게 됩니다. 이때 제가 자식테마에 지정해둔 header.php를 무조건 선행해서 먼저 불러오기때문에 최신 보안패치가 된 부모테마의 header.php가 반영되지 못하는 불상사가 생긴다는 것이지요.(그런데 사실 테마의 몸통을 수정해서 쓸정도이면 별개의 테마로 분기를 하거나 하는것이 더 나은 선택일수있다는게 이런부분 때문이라 생각됩니다.)

그래서 보통 이 테마 상속은 css를 통한 약간의 스타일변화나 저처럼 functions.php에 약간의 기능을 추가해서 쓰실 경우에 유용하지만 테마를 엄청난 마개조를 해서 쓰실분에게는 오히려 독이 될수있습니다.(그이유는 style.css와 functions.php파일만 유일하게 부모테마의 기능을 무시하지 않고 추가해서 사용하기때문입니다.)

이점을 유의하셔서 쓰시는데 참고를 하시면 될거같습니다.

자 그럼 본격적으로 테마 상속을 어떻게 해야하는지 방법을 알려드리겠습니다.

방법은 어렵지 않습니다.

워드프레스 테마 폴더 경로에 폴더를 하나 만들어줍니다. 저는 mytheme라는 이름으로 만들겠습니다.

워드프레스 디렉터리/wp-content/themes/mytheme

그러면 제가 만든 자식 테마의 경로는 위와같이 됩니다.

위에 만들어둔 폴더안에 2개의 파일을 만들어 넣을겁니다.

바로

style.css
function.php

요 2파일입니다.

이 style.css 파일만 작성해서 넣어두어도 워드프레스가 자식테마로 인식하지만 functions.php파일을 통해 부모테마의 style.css파일을 추가하게 해줌으로써 부모테마와 같은 겉모양을 갖출수가 있기때문에 functions.php파일도 함께 작성해주셔야 합니다.

아래는 각 파일의 코드들입니다.

style.css

/*
	Theme Name: Twenty Seventeen PBlabEdition
	Template: twentyseventeen
*/

저는 Twenty Seventeen 테마를 부모테마로 사용하기로 결정하고 위와같이 css를 작성하였습니다.

Theme Name – 말그대로 워드프레스 테마 선택에서 보여질 테마의 이름입니다. 테마 폴더명과 달라도 상관없습니다.

Tempalte – 부모테마로 지정될 테마의 이름입니다. 테마의 폴더명을 그대로 적어주면 됩니다. 예를들어 Twenty Seventeen 테마가 아니라 Twenty Fifteen 테마를 부모테마로 지정한다면 twentyfifteen으로 작성해서 넣어주면 됩니다.

functions.php

<?php
	function theme_enqueue_styles() {
		wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css');
		wp_enqueue_style('child-style', get_stylesheet_directory_uri().'/style.css', array('parent-style'));
	}
	add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
?>

내용을 보자면 결국 부모테마의 style.css를 불러와서 자식테마의 style.css에 추가해서 같이 사용하라는 내용입니다.

이렇게해서 자식테마가 완성되었습니다. 이제 functions.php에 원하는 기능을 추가해서 편리하게 테마를 사용하시면 되겠습니다.

부록
사실 위에 style.css는 딱 간편하게 테마 이름과 부모테마 지정만 해준 아주 간단하게만 작성을 했는데 사실 그외에도 몇가지 테마에 대한 설명이나 버젼정보등을 작성해줄수도 있습니다.

/*
Theme Name: Twenty Seventeen PBLabEdition - 테마 이름
Template: twentyseventeen - 부모테마(폴더명)
Theme URI: http://wordpress.org/extend/themes/twentyseventeen - 자식테마의 URI
Author: PBLab - 자식테마 작성자 이름
Author URI: http://pblab.kr - 자식테마 작성자 웹사이트 주소
Description: 워드프레스 Twenty Seventeen의 PBLab 자식테마 입니다. - 자식테마 설명
License: GNU - 라이센스 이름
License URI: http://www.gnu.org - 라이센스 URI
Tags: twentyseventten, child - 자식테마의 태그
Version: 0.1a
이테마는 워드프레스 Twenty Seventeen를 상속한 자식테마 입니다.
그래서 기능은 별다른건 없고 functions.php에 추가적인 기능만 추가해둔 정도입니다.
그외에 주저리 주저리...
*/

위의 functions.php파일을 추가해주는 방법이외에 style.css 파일만으로 부모로 부터 스타일도 완전하게 상속받는 방법도 있습니다만 쓰지 않는 추세입니다.

functions.php파일의 경우 부모와 자식을 합쳐서 테마에 반영시키다보니 그냥 functions.php에 style.css파일을 합쳐서 불러오라는 기술을 해주는게 안정적이라는 판단하에서인지 아래 방법은 권장되는 방법은 아니라고 하네요.

이런게 있구나 하는정도로 참고만 하시면 될것같습니다.

/*
	Theme Name: Twenty Seventeen PBlabEdition
	Template: twentyseventeen
*/
@import url("../twentyseventeen/style.css");

참고한 문서
http://www.usefulparadigm.com/2012/03/09/customizing-wordpress-theme-using-child-theme/
https://wpbox.kr/wordpress-manual/using-child-theme/

※이글은 워드프레스(http://pblab.kr), 티스토리(http://pblab.tistory.com), 네이버 블로그(https://blog.naver.com/kojy258)를 통해서도 보실수 있습니다.