워드프레스에서 원클릭으로 차일드 테마 만들기

[워드프레스] 원클릭으로 간편하게 차일드 테마 만들기

들어가며

워드프레스 테마 파일을 수정할 경우 반드시 차일드 테마(하위테마, 자식테마)를 만들어서 작업해야 추후 업데이트 시에 문제가 발생하지 않습니다. 만약 차일드 테마를 만들지 않고 작업을 할 경우 나중에 테마가 업데이트가 되면 수정 사항이 사라지게 됩니다.

차일드 테마를 만드는 방법은 WordPress Codex 문서에 자세히 나와 있습니다. 자세한 내용은 이 글을 참고할 수 있습니다. 참고로 기존의 많은 글에서는 스타일시트를 @import 방식으로 포함하는 방법을 설명하고 있지만, 이 보다는 Codex 문서와 나와 있는 enqueue 방식을 사용하는 것이 좋습니다.

원클릭으로 차일드 테마를 만드는 One-Click Child Theme 플러그인

하지만 워드프레스나 컴퓨터에 익숙하지 않은 분들 중에는 차일드 테마를 만드는 것에 부담을 느끼는 것을 종종 보아왔습니다. FTP를 통해 차일드 테마(하위 테마)를 만드는 것이 익숙하지 않은 경우 플러그인을 사용하여 간단하게 차일드 테마를 만들 수 있습니다.

워드프레스에서 원클릭으로 차일드 테마 만들기

워드프레스 알림판에서 플러그인 > 플러그인 추가하기에서 One-Click Child Theme을 검색한 후에 이 플러그인을 선택하여 설치하고 활성화해주도록 합니다.

One-Click Child Theme 플러그인을 활성화했다면 외모 > Child Theme으로 이동합니다. 그러면 Create a Child Theme 페이지가 표시됩니다.

차일드 테마 만들기 화면

Create a Child Theme 페이지에서는 현재 활성화된 테마의 차일드 테마(하위 테마)를 만들 수 있습니다. 위와 비슷하게 알맞게 정보를 입력하고 “Create Child“를 클릭하면 차일드 테마가 생성되면서 활성화됩니다. 외모 > 테마로 이동하면 방금 만든 차일드 테마가 활성화된 것을 볼 수 있습니다.

차일드 테마 활성화됨

테스트로 인기 테마 중 하나인 BE 테마의 차일드 테마를 만들어 보았습니다. 위의 그림처럼 정상적으로 BeTheme Child Theme이 만들어졌습니다.

이제 외모 > Child Theme을 클릭하여 스크린샷을 다른 이미지로 대체할 수 있습니다. 정상적으로 차일드 체마가 만들어졌다면 One-Click Child Theme 플러그인일 비활성화해도 됩니다. 플러그인이 많아서 좋을 것은 없으니까 불필요한 플러그인은 비활성화하거나 삭제하는 것이 좋습니다.

플러그인을 사용하지 않고 차일드 테마 만들기

참고로 One-Click Child Theme 플러그인을 사용하여 차일드 테마를 만들면 WordPress Codex 문서에서 권장하는 방식으로 차일드 테마가 만들어집니다. 플러그인을 사용하지 않고 직접 FTP에서 차일드 테마를 만들려고 하는 경우 /wp-content/themes/ 아래에 차일드 테마 폴더를 하나 만들고(예: betheme-child-theme) 다음과 비슷한 형식으로 함수 파일과 스타일시트 파일을 만들어서 올리면 됩니다. (아래 파일 내용은 One-Click Child Theme 플러그인을 사용하여 만든 차일드 테마의 내용을 그대로 복사한 것입니다.)

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
//

style.css 파일

/*
Theme Name:     BeTheme Child Theme
Description:    Be 테마의 차일드 테마
Author:         Word
Template:       betheme

(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/

위에서 주의할 점은 Template에 부모 테마(상위 테마)의 폴더 이름(예시에서는 betheme)을 그대로 입력해야 합니다.



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.