워드프레스 차일드테마 (FTP)

이번 포스팅에서는 워드프레스 차일드테마에 대해서 알아보도록 하겠습니다.

 

자식 테마(Child Theme)란?

워드프레스에서 테마는 티스토리의 스킨과 같이 웹 사이트의 외관을 결정하며, 필요에 따라 코드를 통한 수정(커스터마이징)을 합니다.

그리고 테마는 보안, 버그 수정 등의 이유로 지속적인 업데이트를 하는데요.

그런데, 업데이트 되면 기존의 수정했던 내용이 초기화가 되는 문제가 발생합니다.

그러면 처음부터 다시 테마를 수정해야 되는데, 이러한 불편함을 해소할 수 있는 것이 바로 차일드테마입니다.

 

차일드테마는 테마 파일을 수정하고자 할 때 부모 테마(원본 테마, Parent Theme) 대신 수정할 수 있도록 고안된 기능으로, 말 그대로 부모 테마(원본 테마 파일)의 속하여 내용(디자인과 기능)을 그대로 상속 받는 테마를 뜻합니다.

쉽게 정리하자면, 부모 테마의 내용을 그대로 가져와 사용하면서, 내용을 수정하더라도 해당 내용을 안전하게 유지할 수 있게 해주는 기능이라고 보시면 됩니다.

(부모 테마가 아닌 차일드테마로 수정하면, 원본 테마가 업데이트 되더라도 기존에 수정한 부분이 차일드테마 내에 그대로 남아 있기 때문에 해당 내용이 안전하게 유지되는 것입니다.)

 

사실, 테마에 대한 코드를 전혀 건드리지 않는다면 차일드테마는 꼭 필요한 것은 아닙니다. 

하지만 웹사이트를 운영하다 보면 어쩔 수 없이 사용하게 되는 일이 생기기 때문에 처음부터 미리 세팅하는 것을 권장 드립니다.

 

 

 

 

 

차일드테마 만드는 방법

제가 사용하고 있는 Generatepress 테마로 차일드테마를 만들어서 적용해 보겠습니다.

 

Generatepress 사이트에서 제공해주는 차일드테마

차일드 테마는 보통 FTP를 통해서 디렉토리와 파일을 생성하고 소스를 입력하는 등 만드는 방법이 복잡합니다.

그러나 Generatepress테마를 사용하고 있다면, 직접 만들지 않으셔도 됩니다.

공식적으로 차일드테마를 제공하고 있기 때문입니다. 

* 무료 버전, 유료 버전 둘 다 사용 가능합니다.

 

이 링크로 들어가서 표시된 부분을 클릭하면 자식 테마 파일을 다운 받을 수 있습니다.

 

다운 받은 파일을 워드프레스 관리자 페이지 [디자인 > 테마]에서 업로드하여, 활성화 시키면 차일드테마 적용이 완료됩니다.

* “generatepress_child.zip”은 압축을 해제하지 않고 .zip 확장자 상태로 업로드해야 합니다.

 

이렇게 Generatepress에서 제공하는 자식 테마를 설치하게 되면 부모(원본) 테마가 설치 되어 있는 경로(디렉토리)에 자식 테마가 같이 설치되며, 수정하고자 하는 부분이 있을 때는 자식 테마를 수정하여 부모 테마의 파일을 변경하지 않고도 효과를 적용 시킬 수 있고, 설정이 초기화 되는 문제도 방지할 수 있습니다.

 

다운 받은 파일을 보시면 다음 세 개의 파일이 포함되어 있는데요.

– 함수(functions.php).php
– 스타일(style.css).css
– 스크린샷.png

함수 파일(functions.php)에는 후크 등 코드를 추가할 때 사용할 수 있습니다.

스타일시트 파일(style.css)에는 CSS 코드를 추가할 수 있습니다.

스크린샷은 [워드프레스 관리자 페이지 > 디자인 > 테마]에서 표시되는 이미지 입니다. 

 

 

 

 

SSH/FTP로 직접 생성하기

차일드테마를 제공 받지 못하는 경우, 직접 만들어야 하는데요.

차일드테마는 FTP 프로그램과 플러그인을 통해 생성할 수 있습니다.

플러그인을 통한 생성 방법은 SSH/FTP로 생성하는 것 보다 훨씬 간편하지만, 사이트에 부담을 증가 시키기 때문에 FTP를 통해 생성하는 방법만 소개하도록 하겠습니다. 참고로, 저는 FTP 프로그램으로 파일질라(FileZilla)를 사용했습니다.

 

하위(자식) 테마를 사용하기 위해 꼭 필요한 파일이 “스타일시트(stylesheet)”와 “함수 파일(functions file)”입니다.

이 파일이 있어야 자식 테마로 인식됩니다.

 

우선, wp-contents/themes에서 ①”Generatepress(부모 테마명)-child” 디렉토리(폴더)를 생성하고,

생성된 디렉토리(폴더)에 ②해당 소스를 가진 “스타일시트(stylesheet)”와 “함수 파일(functions file)”파일들을 생성하시면 됩니다.

※ 자식 테마 폴더 이름에 “공백”이 포함되면 파일 인식이 안 됩니다.

 

stylesheet.css

/*
Theme Name: generatepress(부모 테마 폴더 이름)Child Theme
Template: generatepress(부모 테마 폴더 이름)
*/

* Theme Name 에는 자식 테마명, Template에는 부모 테마명을 입력 합니다.

※ Template에 부모 테마 폴더 이름이 정확하게 기재되어야 합니다.

 

참고로, style.css에 Theme Name과 Template외에도 내용을 더 추가할 수도 있습니다.

/*
Theme Name: 부모 테마명 Child Theme
Template: 부모 테마 디렉토리 이름
Theme URI: xxxx
Description: xxxx
Author: xxxx
Author URI: xxxx
Version: xxxx
*/

 

 

functions.php

<?php
//
// Recommended way to include parent theme styles.
// (Please see http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme)
//
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
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')
);
}
//
// Your code goes below

 

 

이제 [워드프레스 관리자 페이지 > 디자인 > 테마]로 가보면 차일드테마가 만들어진 것을 볼 수 있습니다.

* 테마 목록에 썸네일이 나오게 하고 싶다면 부모 테마의 screenshot.png를 자식 테마로 복사해 넣으면 됩니다.

 

 

 

만약에 기존 테마에 코드를 적용하여 사용하다가 차일드테마를 추가하는 경우, 기존 테마가 업데이트 되면 수정한 파일이 초기화 되기 때문에 해당 파일을 차일드테마로 백업해 주는 것을 권장드립니다.

* 부모 테마의 functions.php과 차일드테마의 functions.php에 같은 코드가 들어있을 경우, 에러가 날 수 있습니다. 이 경우, 테마 업데이트 전 부모 테마의 functions.php을 백업하고 업데이트 이후 차일드테마를 만들어서 백업하시면 될 것 같습니다.

 

 

 

 

 

차일드테마 다루기

 

차일드테마 구조

차일드테마를 만들 때, 필수 파일인 ‘functions.php’, ‘style.css’ 파일만 만들었기 때문에 파일 편집기에서 다른 파일들을 볼 수 없으실 텐데요.

만약 수정하고 싶은 다른 파일(header.php, footer.php 등)이 있다면 FTP 접속하여 부모 테마에 있는 해당 파일을 그대로 자식 테마(동일한 경로)에 복사해 넣으시면 됩니다.

 

 

 

 

수정 하기

수정하고자 하는 부분이 있을 때, 부모 테마와 동일한 경로에 위치한 차일드테마 파일을 수정하면 부모 테마 파일을 변경하지 않아도 해당 효과를 그대로 적용할 수 있습니다.

그리고 부모 테마가 변경(업데이트)되더라도 수정된 부분이 덮어쓰기 되거나 삭제될 염려 없이 안심하고 테마를 커스터마이징 할 수 있습니다.

 

일반적으로 스타일만 수정할 것이라면 style.css를 통해 하시면 됩니다. (테마에 따라 수정할 곳이 다를 수 있습니다.)

아니면 [워드프레스 관리자 페이지 » 디자인 » 사용자 정의하기 » 추가 CSS]에서 입력하셔도 상관 없습니다.

사용자 정의하기에서 입력하는 것과 테마 스타일시트 파일에 CSS 코드를 입력하는 것은 약간의 차이가 있지만, 분량이 많지 않을 때에는 어느 방법을 사용해도 큰 차이는 없다고 합니다.

 

 

 

 

자식 테마 단점

자식 테마가 단점이 없는 것은 아닙니다.

 

부모 테마의 파일을 자식 테마에서 수정하여 사용하고 있는 경우,

해당 파일의 결함을 발견한 부모 테마 개발자가 이를 수정하여 업데이트를 하게 되면 자식 테마에는 그 내용이 반영되지 않고 어떤 부분이 수정되었는지도 알 수 없습니다.

(예를 들어, 부모 테마에서 자식 테마로 header.php를 복사한 후, 부모 테마의 업데이트로 header.php가 변경되었을 때, 자식 테마는 그 내용이 반영되지 않습니다.)

 

따라서 파일을 자식 테마에서 수정했다면 부모 테마를 업데이트 했을 때 문제가 발생할 수 있습니다.

만약 보안에 치명적이 결함이 있다면 자식 테마를 사용하는 동안은 무방비 상태가 되는 것 입니다.

그래서 부모 테마의 파일을 수정해서 자식 테마에서 사용하는 경우, 본 테마가 업데이트 될 때 마다 해당 파일이 업데이트 되었는지 버전 정보를 확인하셔야 합니다.

 

 

 

읽어주셔서 감사합니다. 

밑에 좋아요 버튼을 눌러주시면 저에게 큰 힘이 되고 콘텐츠의 방향성을 잡는 데에도 도움이 됩니다.

혹시 궁금한 점이나 원하시는 주제가 있으시다면 댓글 남겨주세요.

구글 검색 키워드(첫 페이지 순) : 워드프레스 차일드테마, generatepress 차일드테마