워드프레스 강좌 / 자식 테마(Child Theme)의 뜻과 만드는 방법, 장단점

자식 테마의 뜻

어떤 테마의 디자인과 기능을 그대로 상속 받는 테마를 자식 테마(Child Theme)라 합니다. 이때 상속해주는 테마를 부모 테마(Parent Theme)라 합니다.

자식 테마 만드는 방법

워드프레스의 기본 테마 중 하나인 Twenty Seventeen의 자식 테마를 만들어보겠습니다.

방법 1

wp-content/themes 폴더에 twentyseventeen-child 폴더를 만듭니다. (폴더 이름은 다른 것으로 해도 상관없습니다.)

twentyseventeen-child 폴더 안에 다음의 내용을 가진 style.css 파일을 만듭니다.

/*
  Theme Name: Twenty Seventeen Child Theme
  Template: twentyseventeen
*/
@import url( "../twentyseventeen/style.css" );
  • Theme Name : 테마의 이름을 값으로 입력합니다. 원하는 이름으로 만드세요.
  • Template : 부모 테마의 폴더 이름을 값으로 입력합니다. 정확히 입력하세요.
  • 마지막 줄에 있는 twentyseventeen은 부모 테마의 폴더 이름입니다.

방법 2

wp-content/themes 폴더에 twentyseventeen-child 폴더를 만듭니다. (폴더 이름은 다른 것으로 해도 상관없습니다.)

twentyseventeen-child 폴더 안에 다음의 내용을 가진 style.css 파일을 만듭니다.

/*
  Theme Name: Twenty Seventeen Child Theme
  Template: twentyseventeen
*/
  • Theme Name : 테마의 이름을 값으로 입력합니다. 원하는 이름으로 만드세요.
  • Template : 부모 테마의 폴더 이름을 값으로 입력합니다. 정확히 입력하세요.

twentyseventeen-child 폴더 안에 다음의 내용을 가진 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' );
?>

테마 활성화

이제 [테마 디자인 - 테마]로 가면 테마가 추가된 것을 확인할 수 있고, 활성화할 수 있습니다.

참고

썸네일

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

테마 정보

style.css에 추가할 수 있는 내용은 더 많습니다.

/*
  Theme Name:     xxxx
  Theme URI:      xxxx
  Description:    xxxx
  Author:         xxxx
  Author URI:     xxxx
  Template:       xxxx
  Version:        xxxx
*/

이 중에서 Theme Name과 Template만 필수이고, 나머지는 옵션입니다.

방법 1과 방법 2

방법 2가 만들기에는 번거롭지만, 방법 1보다 방법 2가 성능면에서 더 좋다고 합니다.

자식 테마 작동 방식

자식 테마에 없는 파일은 부모 테마의 것을 사용합니다.

  • index.php 파일이 필요하다면 자식 테마에서 먼저 찾은 후, 없으면 부모 테마에서 찾습니다.
  • header.php 파일이 필요하다면 자식 테마에서 먼저 찾은 후, 없으면 부모 테마에서 찾습니다.

단, functions.php는 예외입니다. 부모 테마의 functions.php에 자식 테마의 functions.php를 추가합니다.

자식 테마의 수정

스타일 수정

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

템플릿

템플릿을 수정하고 싶다면, 수정하려는 템플릿을 자식 테마의 폴더로 복사한 후 수정합니다.

예를 들어 header.php를 수정하고 싶다면, 부모 테마에 있는 header.php를 자식 테마의 폴더로 복사한 후 수정합니다.

functions.php

자식 테마의 functions.php에 코드를 추가합니다.

부모 테마의 functions.php를 복사해오면 안됩니다. 부모 테마의 functions.php 내용에 자식 테마의 functions.php 내용을 추가하기 때문입니다.

장점

테마를 업데이트하면 기존 내용이 사라지고 새 테마가 설치됩니다. 따라서 부모 테마를 직접 수정했다면, 테마를 업데이트했을 때 수정했던 것이 다 사라집니다.

하지만 자식 테마를 사용하면, 수정은 자식 테마에서 하므로 수정한 내용을 유지할 수 있습니다.

단점

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

따라서 템플릿 파일을 자식 테마에서 수정했다면 부모 테마를 업데이트했을 때 문제가 발생할 수 있습니다. 만약 문제가 발생하지 않더라도 보안 업데이트 등 중요한 변화를 놓칠 수 있습니다.

자식 테마를 사용할까 말까?

스타일을 수정하거나, 부모 테마에 없는 것을 추가하는 경우에는 자식 테마를 사용하는 게 좋습니다.

만약 부모 테마에 있는 템플릿 파일 등 주요 파일을 수정하는 경우라면 자식 테마 사용에 주의를 기울여야 합니다. 테스트 사이트를 만들어서, 부모 테마를 업데이트를 했을 때 문제가 없는지 꼭 확인해야 합니다.

같은 카테고리의 다른 글
워드프레스 강좌 / 자식 테마(Child Theme)의 뜻과 만드는 방법, 장단점

워드프레스 강좌 / 자식 테마(Child Theme)의 뜻과 만드는 방법, 장단점

자식 테마의 뜻 어떤 테마의 디자인과 기능을 그대로 상속 받는 테마를 자식 테마(Child Theme)라 합니다. 이때 상속해주는 테마를 부모 테마(Parent Theme)라 합니다. 자식 테마 만드는 방법 워드프레스의 기본 테마 중 하나인 Twenty Seventeen의 자식 테마를 만들어보겠습니다. 방법 1 wp-content/themes 폴더에 twentyseventeen-child 폴더를 만듭니다. (폴더 이름은 다른 것으로 해도 상관없습니다.) twentyseventeen-child 폴더 안에 다음의 내용을 가진 style.css ...

워드프레스 강좌 / 플러그인 / Advanced Custom Fields / 사용자 정의 필드 만드는 플러그인

워드프레스 강좌 / 플러그인 / Advanced Custom Fields / 사용자 정의 필드 만드는 플러그인

워드프레스의 사용자 정의 필드 기능으로 글이나 페이지에 추가적인 정보를 넣을 수 있습니다. 하지만, 단순한 형태로 되어 있어서 많은 정보를 추가할 때 불편함이 있습니다. 이를 보완해주는 사용자 정의 필드 관련 플러그인이 여럿 있는데, 그 중 널리 사용되는 것이 Advanced Custom Fields입니다. 텍스트, 범위, 체크박스, 라디오 버튼, 파일, 이미지, 달력 등 다양한 형식으로 값을 입력할 수 ...

워드프레스 강좌 / 플러그인 / Pixabay Images / 무료 이미지 사이트 픽사베이 이미지를 바로 글에 넣을 수 있는 플러그인

워드프레스 강좌 / 플러그인 / Pixabay Images / 무료 이미지 사이트 픽사베이 이미지를 바로 글에 넣을 수 있는 플러그인

Pixabay 픽사베이(Pixabay)는 개인은 물론 상업적 용도로도 사용할 수 있는 이미지를 공유하는 사이트입니다.(대부분 CC0 Creative Commons이나, 간혹 상업적 이용이 곤란한 것도 있으니 다운로드 받기 전에 라이센스를 확인하는 것이 좋습니다.) 현재 백만 개가 넘는 사진, 일러스트, 벡터 이미지, 동영상이 있으며, 일정 수준의 품질을 만족해야 공유 가능하므로 좋은 자료가 많습니다. 한글로 번역이 잘 되어 있는 편이어서 한국 ...

워드프레스 강좌 / 멀웨어 제거, 치료하는 방법

워드프레스 강좌 / 멀웨어 제거, 치료하는 방법

워드프레스와 멀웨어 워드프레스를 사용하는 사이트가 많다보니 공격도 많이 당합니다. 멀웨어에 감염되어서 사이트가 느려지거나, 서버 자원을 필요 이상으로 소비하거나, 다른 사이트로 리다이렉트시키는 등의 문제가 발생합니다. 멀웨어에 감염되면 index.php나 wp-config.php 등 주요 파일이 변형됩니다. 그리고 이상한 파일이 여기저기 잔뜩 생성됩니다. 따라서 치료 방법은 단순합니다. 변형된 파일은 문제 없는 파일로 교체하고, 이상한 파일은 삭제하면 됩니다. 문제는 ...

워드프레스 강좌 / 플러그인 / Loco Translate / 번역 파일을 수정하거나 새로 만드는 플러그인

워드프레스 강좌 / 플러그인 / Loco Translate / 번역 파일을 수정하거나 새로 만드는 플러그인

번역 워드프레스, 플러그인, 테마는 번역 파일을 이용해서 각 나라의 언어로 표현될 수 있도록 만들어집니다. 번역 파일은 보통 자동으로 설치되고, 다운로드 받아서 사용할 수도 있습니다. 하지만, 번역 파일이 존재하지 않는 플러그인이나 테마가 있을 수도 있고, 번역 파일이 있어도 번역이 마음에 들지 않을 수도 있습니다. 그럴 땐 직접 번역 파일을 만들거나 수정하여 사용할 수 있습니다. Loco Translate Loco ...

워드프레스 강좌 / 내보내기와 가져오기

워드프레스 강좌 / 내보내기와 가져오기

워드프레스로 만는 A라는 사이트의 콘텐츠를 워드프레스로 만든 B라는 사이트로 옮길 때 사용하는 것이 내보내기와 가져오기입니다. 내보내기 내보내기는 에서 합니다. 사용하는 테마나 플러그인에 따라, 내보내는 콘텐츠가 적을 수도 있고... 많을 수도 있습니다. 내보낼 콘텐츠를 선택한 다음 를 클릭합니다. 다운로드하는 파일은 텍스트만 포함한 XML 파일로, 파일 크기는 그리 크지 않습니다. 가져오기 가져오기는 에서 합니다. ...

워드프레스 강좌 / 플러그인 / GS Logo Slider Lite / 파트너, 고객사 로고 슬라이더 만드는 플러그인

워드프레스 강좌 / 플러그인 / GS Logo Slider Lite / 파트너, 고객사 로고 슬라이더 만드는 플러그인

기업 홈페이지에 가면 파트너 또는 고객사 로고가 가로 방향으로 흘러가는 것을 볼 수 있습니다. 이를 보통 로고 슬라이더라고 합니다. 로고 슬라이더는 직접 코딩하거나 공개된 오픈 소스를 이용하여 만들 수 있는데, 워드프레스라면 플러그인으로 쉽게 구현할 수 있습니다. 플러그인 추가 화면에서 logo slider로 검색하면 상당히 많은 플러그인이 나오는데, 사용법은 비슷합니다. 가장 먼저 나오는 ...

워드프레스 강좌 / 글 / 글 쓰기

워드프레스 강좌 / 글 / 글 쓰기

포스트를 쓰는 건 인터넷 게시판에 글을 쓰는 것과 별반 다르지 않습니다. 제목과 본문을 작성하고 이미지나 파일 등을 첨부한 후 저장하면 됩니다. 하지만 인터넷 게시판에서는 볼 수 없는 설정들이 몇가지 있으니 그 내용들을 중점적으로 보시면 됩니다. 글 쓰기는 에서 합니다. 화면 옵션 새 포스트를 작성하는 화면으로 가면 글을 입력할 수 있는 ...

워드프레스 강좌 / 워드프레스, 테마, 플러그인 업데이트 하는 방법

워드프레스 강좌 / 워드프레스, 테마, 플러그인 업데이트 하는 방법

업데이트 워드프레스는 워드프레스 코어, 플러그인, 테마, 번역 네가지 범주로 업데이트 됩니다. 기능 추가/개선을 위한 업데이트라면 업데이트를 하지 않거나 미룰 수 있지만, 보안 관련 업데이트는 바로바로 해주는 것이 좋습니다. 업데이트는 워드프레스 관리자에서 할 수도 있고, FTP 등을 이용하여 파일 교체 방식으로 할 수도 있습니다. 워드프레스 관리자에서 하는 게 편하므로, 특별한 이유가 없다면 관리자 ...

워드프레스 강좌 / 플러그인 / Table of Contents Plus / 포스트, 페이지에 차례(목차) 만드는 플러그인

워드프레스 강좌 / 플러그인 / Table of Contents Plus / 포스트, 페이지에 차례(목차) 만드는 플러그인

긴 글을 읽을 때 차례(목차)가 있으면 좋습니다. 예를 들어 위키백과는 문서 상단에 목차가 있습니다. 목차가 있으면 문서가 어떤 내용을 담고 있는지 파악하기 쉽고 링크가 걸려 있어 원하는 내용으로 이동하기 편하다는 장점이 있습니다. Table of Contents Plus 목차를 영어로 Table of Contents, 줄여서 TOC라고 합니다. TOC로 검색하면 꽤 많은 플러그인이 나오는데, 가장 사용자가 많은 플러그인이 Table of ...