자식 테마(Child Theme)를 만드는 이유와 방법

워드프레스 자식 테마 메인 테마에서 파생 된 테마다. 예를 들어 지금 내 워드프레스 블로그는 Pen Theme 를 사용하고 있는데 이에 파생 된 커스터 마이징 Theme 를 만드는 것이다. 말 그대로 부모가 있는 자식 테마를 만드는 것.

이번 포스팅 에선 워드프레스 자식 테마를 사용하는 이유와 만드는 방법에 대해 다뤄보고자 한다.

콘텐츠

워드프레스 자식 테마 사용 이유

워드프레스에서 자식 테마(Child Theme)를 사용하는 것은 매우 유용한 방법이다. 그 이유는 자식 테마는 기존의 부모 테마(Parent Theme)를 기반으로 하면서, 사용자가 특정 부분 만을 변경하거나 추가할 수 있게 해줍니다. 이 방법은 원본 테마를 직접 수정하지 않고도 사용자 지정을 할 수 있어, 테마 업데이트 시 변경한 부분이 유지된다.

이 부분이 포인트 인데, 이를 반대로 말하면 우리가 테마 파일 편집 을 통해 워드프레스에 자체적인 기능을 구현해 둔다 하더라도 업데이트 시 덮어져 사라질 수 있다는 점이다.

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

자식 테마를 만드는 기본적인 단계는 다음과 같다.

(* 참고: 작업은 RaiDrive 기준으로 설명)

1. 새 디렉토리 생성

먼저 FTP 를 통해 WordPress 에 연결 한 후 워드프레스의 www/wp-content/themes 디렉토리 안에 새 폴더를 생성, 폴더 이름은 자식 테마의 이름으로 정한다. 나의 경우 Pen Theme 의 자식 테마라는 의미로 pen-child 라 지었다.

참고로 해당 폴더 내엔 지금까지 설치한 테마들이 들어있다.

2. style.css 파일 생성

자식 테마 폴더 안에 style.css 파일을 생성. 이 파일의 주석 부분에는 테마 이름, 템플릿(부모 테마의 디렉토리 이름), 그리고 선택적으로 테마 세부 정보를 기입.

/*
Theme Name: pen-child
Template: pen
Description: Pen 테마의 자식 테마
*/

3. functions.php 파일 생성

선택적으로 functions.php 파일을 만들어 자식 테마의 기능을 추가하거나 변경할 수 있다. 이 파일은 부모 테마의 functions.php 파일과는 달리, 부모 테마의 파일을 대체하는 것이 아니라 추가되는 형태로 동작한다. (즉, 부모 테마의 functions.php 도 그대로 읽고 이 파일도 읽는다.)

4. 부모 테마 스타일 시트 임포트

style.css 파일 또는 functions.php 파일에서 부모 테마의 스타일 시트를 임포트 해야 한다. 이는 보통 wp_enqueue_style() 함수를 사용하여 수행된다.

나의 경우 다음과 같이 소스를 작성 했다.

<?php
	function wptalk_enqueue_styles() {
		$parent_style = 'parent-style';
		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 ),
			wp_get_theme()->get('Version')
		);	
	}
    add_action('wp_enqueue_scripts', 'wptalk_enqueue_styles');
>

여기서 간략하게 설명하면 순서는 다음과 같은데

function wptalk_enqueue_styles 을 생성
wp_enqueue_style 들로 css 파일들을 가져와 사용

get_template_directory_uri : 부모의 uri
get_stylesheet_directory_uri : 자식테마의 uri
add_action 으로 1번으로 생성했던 스크립트 사용