워드프레스 강좌 / 자식 테마(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가 변경되었을 때, 자식 테마에는 그 내용이 반영되지 않습니다.

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

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

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

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

같은 카테고리의 다른 글
워드프레스 강좌 / 플러그인 / WP Login Timeout Settings / 세션 타임 변경 플러그인

워드프레스 강좌 / 플러그인 / WP Login Timeout Settings / 세션 타임 변경 플러그인

워드프레스에 로그인하면 2일 동안 로그인 상태가 유지됩니다.(웹브라우저를 닫으면 로그아웃 됩니다.) 로그인할 때 에 체크하면 14일 동안 로그인 상태가 유지됩니다.(웹브라우저를 닫아도 로그아웃되지 않습니다.) 로그인 상태를 유지하는 기간이 짧거나 길게 느껴진다면 변경할 수 있습니다. 테마의 functions.php를 수정하는 방법도 있지만, 플러그인을 사용하는 게 편합니다. WP Login Timeout Settings를 설치하고 활성화합니다. 기간 변경의 필요가 없어서인지 사용자가 ...

워드프레스 강좌 / Shortcode로 애드센스 광고 본문에 삽입하는 방법

워드프레스로 만든 사이트에 애드센스 광고를 다는 방법은 여러 가지입니다. 사이드바에 넣고 싶다면 위젯 설정에서 사용자 정의 HTML을 이용하면 됩니다. 본문 상단이나 하단에 넣고 싶다면 플러그인을 사용하는 게 편합니다. 만약 본문 중간 원하는 위치에 광고를 넣고 싶다면 어떻게 할까요? 그 때는 쇼트코드(Shortcode)를 이용하는 게 편합니다. 테마의 functions.php에 다음 코드를 추가합니다. 애드센스 광고 ...

워드프레스 강좌 / 플러그인 / Crayon Syntax Highlighter / 코드 문법 하이라이트 플러그인

워드프레스 강좌 / 플러그인 / Crayon Syntax Highlighter / 코드 문법 하이라이트 플러그인

Crayon Syntax Highlighter 프로그래밍을 주제로 하는 블로그나 사이트라면 수많은 코드를 글에 포함하게 됩니다. 코드는 <pre> 태그나 <code> 태그를 이용하여 고정폭 글꼴로 나타낼 수도 있으나, 단색으로 나타내므로 읽는게 불편합니다. 워드프레스에는 이런 불편을 해소해주는 Syntax Highlighter 플러그인이 많습니다. 그 중 사용하기 편하고 다양한 기능을 가진 플러그인이 Crayon Syntax Highlighter입니다. Crayon Syntax Highlighter는 꽤 오랫동안 업데이트가 되지 않고 있어서 ...

워드프레스 강좌 / 플러그인 / Ad Inserter / 애드센스 광고 쉽게 삽입할 수 있게 해주는 플러그인

워드프레스 강좌 / 플러그인 / Ad Inserter / 애드센스 광고 쉽게 삽입할 수 있게 해주는 플러그인

Ad Inserter 워드프레스로 만든 사이트 또는 블로그에 애드센스 광고를 넣는 방법은 여러 가지입니다. 그 중 Ad Inserter 플러그인으로 광고를 삽입하는 방법을 소개합니다. Ad Inserter는 광고를 삽입하게 해주는 플러그인으로, 애드센스 광고를 본문 위, 본문 중간 등에 쉽게 넣을 수 있게 해줍니다. 설치 WordPress.ORG에서 공유되는 플러그인이므로 워드프레스 관리자에서 바로 설치할 수 있습니다. 본문에 애드센스 광고 넣기 본문 상단 설정은 ...

워드프레스 강좌 / 설정 / 개인정보 / 개인정보처리방침 만들기

워드프레스 강좌 / 설정 / 개인정보 / 개인정보처리방침 만들기

개인정보 설정 개인정보는 GDPR로 인해 워드프레스 4.9.6에 추가된 설정입니다. 유럽연합의 일반 데이터보호 규칙(General Data Protection Regulation (GDPR))이 5월 25일부터 발효됩니다. GDPR은 회사 및 사이트 소유자에게 개인 데이터를 어떻게 수집, 이용, 공유하는지에 관해 투명하게 할 것을 요구하고 있습니다. 또한 개인으로 하여금 자신의 개인 데이터가 어떻게 수집, 이용, 공유되는지에 관해 더 많은 접근 및 선택을 부여하고 ...

워드프레스 강좌 / 플러그인 / WP Maintenance Mode / 공사중, 유지보수모드 플러그인

워드프레스 강좌 / 플러그인 / WP Maintenance Mode / 공사중, 유지보수모드 플러그인

공사중/유지보수 모드 사이트 업데이트나 유지보수를 위해서 사이트 접속을 막아놓아야 하는 경우가 있습니다. 그런 경우 방문자에게는 접속 불가 안내와 다시 접속 가능한 시간을 안내하는 페이지를 띄워놓고, 관리자는 작업을 합니다. 이를 Maintenance Mode라고 하는데, 워드프레스로 만든 사이트라면 이러한 기능을 플러그인으로 쉽게 구현할 수 있습니다. WP Maintenance Mode 에서 maintenance로 검색하면 많은 플러그인을 찾을 수 있습니다. 이 중에서 ...

워드프레스 강좌 / 플러그인 / Awesome Support / 일대일 상담 플러그인

워드프레스 강좌 / 플러그인 / Awesome Support / 일대일 상담 플러그인

쇼핑몰 등 인터넷 서비스를 하면 문의가 많이 들어옵니다. 그 문의들이 공개되지 않게 하는 방법 중의 하나는 비밀글입니다. 하지만 글 제목 등 글의 일부가 노출된다는 단점이 있습니다. 그래서 일대일 상담 게시판을 많이 사용합니다. 워드프레스에서 일대일 상담 게시판을 만드는 방법은 여러 가지가 있고, KBoard로 만드는 방법을 소개한 적이 있습니다. 이번에 소개해드릴 것은 외국형인 ...

워드프레스 강좌 / 메뉴 만들고 배치하기

워드프레스 강좌 / 메뉴 만들고 배치하기

워드프레스는 페이지, 글, 카테고리, 태그, 사용자 정의 링크 등으로 메뉴를 만들 수 있습니다. 그리고 그 메뉴는 테마가 제공하는 위치에 배치를 합니다. 하나의 메뉴를 여러 곳에 배치할 수도 있고, 위젯에 추가하는 것도 가능합니다. 메뉴 생성과 관리는 에서 합니다. 화면 옵션 메뉴에 추가할 수 있는 아이템은 여러 가지가 있습니다. 그리고 테마나 플러그인으로 ...

워드프레스 강좌 / 사용자 정의 필드 입력하고 출력하기

워드프레스 강좌 / 사용자 정의 필드 입력하고 출력하기

사용자 정의 필드 사용자 정의 필드를 이용하여 글에 추가적인 정보를 입력하고 출력할 수 있습니다. 그 정보를 글 본문에 직접 입력할 수도 있지만, DB에 저장하면 출력하는 것 이외에도 여러 가지로 활용 가능하다는 장점이 있습니다. 사용자 정의 필드 입력하기 사용자 정의 필드는 글 쓰는 화면에서 입력합니다. 사용자 정의 필드를 입력하는 폼이 보이지 않는다면, 화면 옵션에서 ...

워드프레스 강좌 / 플러그인 / List Category Posts / 다양하게 글 목록 출력시켜주는 플러그인

워드프레스 강좌 / 플러그인 / List Category Posts / 다양하게 글 목록 출력시켜주는 플러그인

워드프레스 기본 위젯에 최근 글 위젯이 있습니다. 최신 글 목록을 보여주는 위젯으로 제목 또는 제목과 날짜를 출력해줍니다. 워낙 단순한 기능의 위젯이라 불편한 점이 좀 있습니다. 요약글을 보여주지도 못하고, 썸네일을 출력할 수도 없습니다. 글쓴이를 보여주거나 특정 카테고리의 글만 출력하지도 못합니다. 이를 해결해주는 플러그인 중의 하나가 List category posts입니다. 원하는 카테고리의 글을 원하는 양식으로 ...