본문 바로가기

돈 벌기/블로그 마케팅

WP 워드프레스에서 자식테마 장점과 만드는 방법

워드프레스 자식테마 만드는 방법



워드프레스에는 수많은 테마들이 있습니다. 그런데 잘된 테말들일수록 업데이트가 자주 되죠..그런데 만약 자기가 테마를 수정하고 쓰고 있었다면? 어떻게 될까? 업데이트 버튼을 생각없이 누르는 순간 수정해 놓은 부분이 모두 날아가 버립니다. 


이뿐 아니라 수정한 곳을 가끔 잊어버리는 때가 있습니다. 그럼 그걸 다시 찾느라 진땀을 빼는 경우가 있는데요.. 이럴때 자식테마를 만들어 관리하면 자신이 고친 부분만 따로 파일로 관리하게 되므로 수정이 굉장히 용이해집니다.


물론, 원본 테마는 업데이트가 별도로 되게하고, 내가 수정한 부분은 그대로 적용되는 거죠.. 한마디로 원본 테마는 코어역할을 하고, 내가 고친부분은 include 되어 작동되는 그런 시스템입니다.


프로그램을 아신다면 클래스 에서 '상속'의 개념과 같은 스타일시트 상속의 개념이라고 이해하면 되겠습니다.


그럼 간단하게 차일드 테마 만드는 방법을 살펴보겠습니다.



1.워드프레스가 깔려있는 서버에 FTP 접속을 해서 wp-content > themes 폴더에 다음의 폴더를 만들어 줍니다.


  본인이 수정하고자 하는 원본 테마 폴더의 이름에 '원본폴더명'+ Child 라는 이름의 폴더를 만듭니다.

  Child라고 해도 되고, 다른 이름으로 줘도 됩니다. Child라고 주는 것은 수정테마라는 것을 

  식별하기 쉽게 하기 위해서입니다.



2.이렇게 만들어진 폴더에 다음의 파일 2개를 만들어 줍니다.


style.css 만들기


원본 테마의 정의를 모두 상속하고, 여기에 자신이 수정할 코드를 재정의 해 줍니다. 먼저 빈 메모장을 열어 다음의 코드를 입력합니다



첫번째라인: 

Theme Name 은 워드프레스 > appearance > Themes에 나타날 테마 이름이 됩니다. 굳이 원본테마명 + '- child' 형태의 이름이 아니라도 됩니다.


두번째라인: 

Them URI는 원본 style.css에 있는 걸 그대로 복사해서 넣으면 됩니다.


세번째라인: 

Template: 내용에는 원본 테마의 폴더명을 똑같이 써 줍니다. 이때 폴더명과 테마명이 조금 다를 수도 있는데, 서버의 Themes 폴더에 들어가 있는 테마의 폴더명을 똑같이 써줍니다.


위와 같이 입력한 다음 style.css 라는 파일명으로 새로 만든 Child 테마 폴더안에 저장합니다. 제 부모 테마로부터 stylesheet 상속 선언을 했으니 이 css파일에 수정할 코드를 입력하면 차일드 테마가 먼저 적용되면서 홈페이지에 반영되니다. 만약 스타일 재정의가 먹지 않을때는 !important 선언을 코드에 넣어주면 우선 적용됩니다.



② functions.php 파일 만들기


빈문서를 하나 열고 다음의 코드를 수정없이 그대로 입력한 다음 functions.php 로 child 테마 폴더 안에 저장합니다. 예전에는 style.css 안네 @import 라는 명령을 이용해 부모 style을 상속하는 코드를 넣어주었는데, 요즘은 아래의 Function을 통해서 부모 상속을 정의해 주는 것이 좀더 나은 방식입니다.


 

앞으로 부모 테마에서 수정해주고자 하는 파일이 있다면, child 테마에 복사해서 가져온 다음 수정할 부분만 코딩해서 수정해주면 자시게마의 파일이 우선 적용되게 됩니다. 


이제 워드프레스 관리자 모드에서 테마 설정 화면으로 들어가 보면 자신이 만든 000-child라는 이름의 테마가 보이게 됩니다. 선택해서 적용하면 앞으로 자식테마가 적용된 홈페이지를 만들게 됩니다.



※유의할 점


만약 FTP로 직접 서버에 자식테마폴더를 upload 한 경우 자식테마가 테마선택 페이지에 나타나지 않는다면 새로고침을 합니다. 새로고침해도 보이지 않을 경우 자식테마 폴더를 .zip으로 압축해서 테마관리자 화면에서 Add New로 서버에 직접 올려줍니다. 그런다음 Activate 하면 테마관리자 화면에서 바로 나타남...


이때 유의할점은 서버에 child 테마 폴더가 아직 남아있다면 삭제해줍니다. style.css 에서 세번째 줄 Template: 부모테마 폴더이름 입력시 대소문자를 구분해주어야 합니다. 만약 대소문자 구별해주지 않으면 에러가 발생합니다.


이상으로 차일드테마 만드는 방법을 알아보았습니다.