[Theme] 자식 테마 (Child Theme) 만들기

 

 

자식 테마란
자식 테마는 부모 테마를 상속 받은 테마로 주로 아래의 경우에 사용 합니다.
  • 부모 테마를 수정하고 싶지만 원본(부모 테마)은 건드리지 않은채 수정하고 싶은 경우에 사용 합니다.
  • 부모 테마를 직접 수정할 경우, 부모 테마가 업그레이드 되면 자신이 수정한 것이 삭제되어 버릴 수 있습니다. 이런 위험성을 방지하기 위해서 자식 테마를 사용 합니다.
  • 자신이 수정한 파일만 따로 관리하고 싶은 경우에 사용 합니다.
부모 테마에는 많은 파일이 있는데 이를 직접 수정하면 어떤 파일을 수정 하였는데 확인하기가 어렵습니다. 자식 테마를 사용하면 수정하려는 내용만 따로 관리할 수 있어 편리 합니다.
자식 테마 만들기 – 서버 작업
자식 테마를 만드는 방법은 의외로 간단 합니다. 자! 이제 모든 수정은 자식 테마를 만들어서 해 봅시다.
WordPress에서 Theme를 저장하고 있는 폴더는 wp-content/themes/ 폴더 입니다. 여기에 있는 twentyseventeen 테마의 지식 테마를 만들어 보겠습니다.

#— 작업은 wp-content/themes/ 폴더에서 시작 합니다.
mkdir  twentyseventeen_child                                 #— 자식 테마용 폴더 생성
chown  nginx:nginx  twentyseventeen_child                 #— 자식 테마의 폴더의 사용자와 그룹을 지정
 
cd  twentyseventeen_child
vi  style.css                                                    #— 아래 내용으로 style.css 파일을 생성
/*
Theme Name: Twenty Seventeen Child                      #— 자식 테마 이름
Template: twentyseventeen                                   #— 부모 테마 이름
Version: 1.0.0                                                 #— 자식 테마 버전
*/
 
chown  nginx:nginx  style.css                               #— style.css 파일의 사용자와 그룹을 지정
 
vi  functions.php                                             #— 아래의 내용으로 functions.php 파일을 생성
<?php
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’));
}
 
add_action(‘wp_enqueue_scripts’, ‘theme_enqueue_styles’);
?>
 
chown  nginx:nginx  functions.php                         #— functions.php 파일의 사용자와 그룹을 지정
 
cp  ../twentyseventeen/screenshot.png  .                 #— 부모 테마에 있는 screenshot.png 파일을 복사
chown  nginx:nginx  screenshot.png                       #— screenshot.png 파일의 사용자와 그룹을 지정
 

 

자식 테마 만들기 – WordPress 관리자 화면에서 작업
관리자 화면에서 “외모” 메뉴를 선택 합니다.
새로 추가한 “Twenty Seventeen Child” 테마에 있는 “활성화” 버튼을 선택하면 새로 작성한 자식 테마가 적용이 됩니다
자식 테마 활용 방법
자식 테마를 사용하는 가장 기본적인 방법을 알려 드립니다.
  • functions.php : 자식 테마에서만 동작하는 기능을 정의 합니다.
  • 임의의 파일 : 부모 테마에 있는 파일과 동일한 파일명으로 파일을 작성하면 자식 테마에 있는 파일이 먼저 적용 됩니다.
위에서 작성한 자식 테마의 style.css 파일로 잠깐 설명을 하면 다음과 같습니다.
자식 테마에 style.css 파일이 있으니 부모 테마의 style.css 파일 대신에 자식 테마의 style.css 파일이 사용 됩니다. 그러면 화면이 깨어지지 않게 하기 위해서는 부모 테마의 style.css 파일의 내용을 자식 테마의 style.css 파일에 모두 복사를 하여야 하는데 그러면 파일이 지저분해 집니다.
그래서 functions.php 파일을 사용하여 부모 테마의 style.css 파일을 불러 오도록 설정을 하였습니다. 그러면 자식 테마의 style.css 파일에는 수정하거나 추가하는 내용만 입력하면 되니 파일이 깔끔해 집니다.
Trouble Shooting
혹시 자식 테마를 적용하니 화면이 표시되지 않나요 ?
그러면 functions.php 파일의 내용을 확인 하세요. 철자를 잘못 입력 하였다면 오류가 발생하여 WordPress가 정상 동작하지 않아 화면이 표시되지 않을 수 있습니다.
웹 서버로 Nginx를 사용하였다면 아래 명령어로 오류 로그를 확인할 수 있습니다.

tail  -f  /var/log/nginx/eerror.log
 

2017.10.16 ~ 2017.10.18, ver 0.02

 

 

0 답글

댓글을 남겨주세요

토론에 참여하고 싶으세요?
마음껏 기여하세요!

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다