워드프레스 테마 수정하기 Child Theme

안전하게 테마 꾸미기

테마를 꾸미는 것에 있어 ‘안전하게’ 라는 말이 좀 어색한 표현이지만, 우리가 설정했던 많은 것들이 한순간에 날라가는 경우가 있고, 잘못된 수정으로 테마가 작동하지 않거나 내부 코드가 꼬여버려서 오류가 나는 경우가 적지 않다.

한순간에 날라 간다고?

문서 작성을 예로 들어보자. 실컷 수~수십 페이지의 긴 보고서를 회사 pc로 작성했다. 어느날, 회사 컴퓨터가 고장이 났고, 수리하고 하드웨어를 업그레이드 했지만 모든 데이터는 다 날라갔다. 보고서를 제출해야하는데, 내 노트북에는 보고서 양식파일 만이 있을 뿐이다.

이런 경우가 흔치는 않겠지만, 아주 없는 일은 아닐 것이다. 처음부터 다시 보고서를 작성해야하는 경우가 있을법이다.. 이 일을 겪고 난 후 난 보고서를 작성하고 수정할때 백업본을 만들어 이메일 혹은 클라우드에 저장하기 시작했다. 회사pc가 고장 나도, 자료는 백업해 두어서 안전하게 사용할 수 있다.

예가 적절할 지 모르겠지만 워드프레스 에서는 흔히(?) 일어나는 일이다.

이러한 것을 예방하는 작업이 워드프레스에서는 child theme 을 만드는 것이다. 우리가 사용하고 있는 워드프레스 테마는 테마 개발자에 의해 가끔씩 업데이트 된다. 기능이 추가되기도 하고, 보안문제 등 수정이 필요한 경우 업그레이드 되는데 이때 우리가 직접 수정했던 파일들이 모두 다 없어진다. !! 워드프레스 내에서 수정한 것 말고 functions.php 파일, style.css 파일 우커머스 커스텀 php, css 파일 등 모든 것이 리셋되는 끔찍한 일이 벌어진다. 이를 막기 위해 우리는 child theme 이라는 테마를 만들고 그 곳에서 수정본을 저장하는 것이다. 그림으로 표현하면 다음과 같다.

‘Gomc Theme’ 이라는 테마를 사용한다면 ‘Gomc Theme-child’ 라는 child theme 을 만드는 것이고, 그 안에는

위와 같은 파일들이 들어갈 것이다. functions.php 와 style.css 파일은 둘다 녹색으로 표시 되어있는데, 그 이유는 child theme에서 추가된 것들과 parent theme 즉 여기선 ‘Gomc theme’ 에 있는 functions.php 파일과 style.css 내용이 합쳐져서 워드프레스는 읽어 들인다. 그 외 나머지 파일(header.php, footer.php 등)들은 우리가 만든 child theme 안에 파일들만 읽어 들인다. 즉, 원래 테마가 아무리 수정되어도 child theme 에서 수정한 파일들은 우리가 아니면 수정 혹은 삭제 되지 않는다.

child theme 의 단점도 있다. child theme 의 파일을 읽고 parent theme 파일을 읽기 때문에 느려진다는 거고 그렇기 때문에 단순 CSS 파일들만 수정하는 분들이라면, 워드프레스에서 알림판 > 테마 디자인 > 사용자 정의하기 > 추가 CSS 항목을 통해 수정하는 것을 추천한다.

child theme 만들기

서론이 너무 길었다. 어느정도 child theme 의 필요성을 인지했길 바라며 가이드를 시작한다.

폴더, functions.php, style.css 파일 만들기

곰씨에서 사용되는 테마의 이름은 WP Bootstrap Starter로 이 것을 기준으로 설명하겠다.

  • 폴더 만들기

내 컴퓨터 아무 곳에나 폴더를 하나 만들고 이름을 ‘WP Bootstrap Starter-child’ 로 만든다. (‘테마이름-child’) 내컴퓨터가 아니고 바로 워드프레스 사이트에 올리고 싶은 분이면 wp-content/themes/ 에 폴더를 만들면 된다.

  • style.css 만들기

이제 폴더 안으로 이동한다. 새 파일 만들기를 누르고 style.css 라고 입력하자.

그다음 style.css 파일을 열고 parent theme 과 연동 될 수 있도록 설정하는 코드를 넣어준다.

/*
Theme Name: WP Bootstrap Starter Child
Author: Gomc
Template: wp-bootstrap-starter
Version: 3.3.2
*/

Theme Name: 워드프레스 상에서 보여질 테마 이름
Author: 작성자
Template: 원래 parent theme 이름 **가장 중요한 부분이다**
Version: 표시될 버전 이름

Template 을 제외한 나머지는 사용자 마음데로 작성해도 된다. 하지만 Template 항목은 원래 parent theme 이름을 정확히 써줘야한다는 것을 잊지말자.!

  • functions.php 만들기

우리가 style.css 를 만들었던 것 처럼 똑같이 functions.php 파일을 만들어주고 열도록 하자

<?php
//* 곰씨- 코드 시작부분
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

위의 파일을 복사 하고 저장한다. add_action 부터 시작한 저 코드는 style.css 파일을 내가 수정한 style.css 와 함께 parent theme 에 있는 css 파일을 불러들인다는 뜻이다. 이 설정이 되있지 않다면, 상당히 많은 css 를 수정해야하므로 일단 불러들이는 것을 추천한다.

초기 설정은 끝났다. 이제 내컴퓨터에서 작성한 분들은 폴더 채 zip 파일로 압축하고 워드프레스 알림판 > 테마디자인 > 테마 를 눌러보자

그 다음 새로 추가 버튼을 눌러 zip 파일을 올려준다. ftp 로 설정한 분들이라면 위의 화면처럼 child theme 이 보일것이다 활성화 시켜준다.

모든 설정이 끝났다. 앞으로 functions.php 파일 style.css 파일 수정이 있는 경우엔 ftp 혹은 Siteground 의 파일매니저를 통해 수정하면 된다.

-끝-

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다