child theme 만들기

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on print
Print

wordpress의 child theme 만들기를 간략히 정리해본다.1

이 사이트의 theme인 twenty seventeen을 확장하여 twenty seventeen child theme을 만든다.

1. child theme의 구조 및 동작

child theme은 wordpress의 theme 폴더 아래 위치하며, style.css 파일이 기본으로 필요하다. 확장하고 싶은 화면, 기능들은 하나씩 추가하면 된다. parent 테마의 거의 모든 기능들을 수정/확장할 수 있다.

child theme은 parent theme 위에 overlay 된 구조로 동작한다. wordpress는 먼저 child theme을 로드하고, 거기에 없는 기능이나 스타일은 parent theme에서 가져온다.


2. child theme 만들기

1) 1단계 : 기본 구조 만들기

① child theme directory 만들기

wp-content/themes 디렉토리 아래에 child theme directory를 만든다.

wp-content/themes/twentyseventeen-child

② 그 directory 안에 style.css 파일을 만든다.

③ style.css 파일을 아래와 같이 수정한다.

/*
Theme Name: Twenty Seventeen Child
Theme URL: 테마 URL
Description: 테마에 대한 설명
Author: 저자
Author URL: 저자 URL
Template: twentyseventeen
Version: 1.0.0
Text Domain: twentyseventeen-child
*/ 

위 주석 중 Theme Name과 Template만 필수 요소이며, 나머지는 생략 가능하다. Template: Twenty Seventeen이 아니라 twentyseventeen인 부분에 주의한다.

④ screenshot.png 파일을 child theme 디렉토리에 Copy한다. (생략 가능)

여기까지 만들었다면 admin 화면에서 다음과 같이 확인할 수 있다.

twenty seventeen child theme

위 child theme을 활성화하면 웹사이트가 다음과 같이 변경된 것을 확인할 수 있다.

화면에 문제가 있다.

문제를 해결해보자.


2) 2단계 : Parent의 Style 가져오기

① theme의 directory에 functions.php 파일을 만든다.

② functions.php 파일에 아래 코드를 추가한다.2

<?php
	function twentyseventeen_child_scripts() {
    	wp_enqueue_style( 'parent-style', get_template_directory_uri(). '/style.css' );
	}
	add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_scripts' );
?>

다시 웹사이트를 확인하면 아래와 같이 parent sytle을 가져온 것을 볼 수 있다. 위 코드에서 get_template_directory_uri()는 부모 테마가 있는 경우 부모 테마의 URI를 가져온다. 3


3) 3단계 : CSS 스타일 바꿔보기

twenty seventeen 테마는 기본 가로 폭은 1,000px이고, 사이드바를 사용할 땐 본문 58%, 사이드바 36%로 설정되어 있다고 한다.

전반적인 테마는 만족스럽지만 포스팅 영역이 작다 보니 답답해보이는 문제가 있다.

역시 구글링 해보니 참고문서를 찾을 수 있다. 4

난 CSS, JavaScript에 대해 아는 바 없기 때문에 위 문서의 코드를 무작정 적용해본다. ^__^

① style.css 파일에 아래 코드를 추가한다.

/* Width arrange on PC/Tablet */
@media screen and (min-width: 48em){
  div.wrap, .navigation-top .wrap {max-width: 1200px}
  #content #primary {width: 67%}
  #content #secondary {width:26%}
}

그리고 웹사이트를 다시 Refresh하면 화면의 가로 비율이 달라진 것을 확인할 수 있다.


3) 3단계 : 템플릿 바꿔보기

CSS 파일과 마찬가지로 템플릿 파일도 Parent 템플릿을 같은 위치에 같은 이름으로 만들면 Override할 수 있다.

포스팅에 대한 php 템플릿은 single.php이다.

twenty seventeen 테마는 별도의 위치 (/template-parts)에 template을 따로 정의해두고, single.php, search.php 등에서 get_template_part 함수를 통해 해당 template을 호출해서 사용하고 있다.

single.php에서 일반 포스팅은 wp-content/themes/twentyseventeen/template-parts/post/content.php 템플릿에 정의되어 있다.

필요한 내용을 수정하여 child theme 아래 두면 override된 것을 확인할 수 있다.

① /template-parts/footer/site-info.php를 child 테마로 복사

② site-info.php 파일을 수정해본다.

웹사이트 아래 footer의 기본 문구인 'Proudly powered by WordPress'를 'Copyright 2019. bekseju9n. All rights reserved.'로 바꿔본다.


  1. 참고문서:https://www.hostinger.com/tutorials/how-to-create-wordpress-child-theme
  2. 예전에는 style.css 파일 주석 아래에 @import url("../parentThemeDirectory/style.css"); 를 넣는 방식을 사용했다고 한다.

    이 방법은 현재도 동작하지만 특정 브라우저나 JavaScript 프레임워크와 문제가 발견되었으며, 성능 이슈도 있는 것으로 드러나 새로운 방법을 사용하게 되었다.
    새로운 방법은 여기서 사용된 방법과 같이 child theme의 functions.php파일 안에 'wp_enque_scripts' hook에 add_action 방법으로 parent theme의 style과 script를 wp_enque_style, wp_enque_script하는 것이다.

    참고문서 : https://digwp.com/2016/01/include-styles-child-theme/
  3. https://www.thewordcracker.com/scribblings/whats-the-difference-between-get_stylesheet_directory_uri-and-get_template_directory_uri/
  4. https://www.jh-studio.com/archives/532

3 Responses

    1. I restarted coding recently after 14 years' other jobs. I don't think I can help you with expertise.
      But if any, I would gladly do something I can. So could you leave more details in this blog ?

댓글 남기기

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