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

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

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

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

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

같은 카테고리의 다른 글

워드프레스 강좌 / 위젯 추가하기, 설정하기, 삭제하기

워드프레스 강좌 / 위젯 추가하기, 설정하기, 삭제하기

워드프레스의 위젯 기능을 이용하면, 테마가 제공하는 영역에 메뉴, 최근 글, 배너, 광고 등을 쉽게 추가하고 삭제할 수 있습니다. 위젯을 관리하는 방법은 두 가지입니다. 첫번째는 에서 하는 것입니다. 에서 관리하기 위젯 추가하기 사용할 수 있는 위젯에서 원하는 위젯을 마우스로 드래그하여 위젯 ...

워드프레스 강좌 / 플러그인 / Google XML Sitemaps / 사이트맵 만들어주는 플러그인

워드프레스 강좌 / 플러그인 / Google XML Sitemaps / 사이트맵 만들어주는 플러그인

사이트맵(Sitemap) 사이트맵은 사이트에 있는 콘텐츠의 URL, 업데이트 날짜, 중요도 등을 정리한 XML 파일입니다. Sitemaps.org에서는 사이트맵을 다음과 같이 설명하고 있습니다. Sitemap은 웹마스터가 크롤링에 사용할 수 있는 사이트의 페이지에 대한 정보를 검색 엔진에 알리는 손쉬운 방법입니다. Sitemap의 가장 간단한 형식은 검색 엔진에서 사이트를 보다 지능적으로 크롤링할 수 있도록 각 URL에 대한 추가 메타데이터(마지막 업데이트된 날짜, ...

워드프레스 강좌 / 플러그인 / Rocket Font / 한글 글꼴 웹폰트로 설정하게 해주는 플러그인

워드프레스 강좌 / 플러그인 / Rocket Font / 한글 글꼴 웹폰트로 설정하게 해주는 플러그인

한글 글꼴 워드프레스 테마는 주로 영어권에서 개발합니다. 영어권이 아닌 곳에서 개발을 해도 영어 사용을 기준으로 개발합니다. 그래서 데모 사이트도 대부분 영어로 되어 있습니다. 여기서 문제가 발생합니다. 영어로 되어 있을 때는 아주 보기 좋은데, 한글로 바뀌면 이상해지는 경우가 많습니다. 멋진 디자인과 타이포그래피에 반해서 테마를 구입했는데, 한글을 사용하는 순간 기대했던 결과가 나오지 않는 ...

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

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

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

워드프레스 강좌 / 링크 없는 메뉴 만드는 방법

워드프레스 강좌 / 링크 없는 메뉴 만드는 방법

워드프레스의 메뉴는 링크를 가지고 있습니다. 하지만 계층형으로 만들거나 메뉴 그룹을 만들 때 링크가 없는 메뉴가 필요할 때가 있습니다. 기본 기능으로는 그러한 메뉴를 만들 수 없지만, 약간의 편법을 사용하면 가능합니다. 사용자정의 링크를 만듭니다. URL에는 아무거나 입력해도 상관없습니다. 뭘 쓸지 고민된다면 #을 입력하면 됩니다. URL이 비어 있으면 메뉴가 만들어지지 않으므로 꼭 입력해야 합니다. 메뉴 수정으로 가서 ...

워드프레스 강좌 / 워드프레스 주소, 사이트 주소 변경하기

워드프레스 강좌 / 워드프레스 주소, 사이트 주소 변경하기

워드프레스 주소, 사이트 주소 워드프레스에는 두가지 주소(URL)이 있습니다. 하나는 워드프레스 주소, 또하나는 사이트 주소입니다. 워드프레스 주소는 워드프레스 파일들을 업로드한 주소이고, 사이트 주소는 웹브라우저로 접속할 수 있는 주소입니다. 두 주소는 기본적으로 같습니다. 주소(URL)를 바꾸는 방법은 원하는 주소에 맞게 다시 설치하는 방법과 설정 변경을 통해 바꾸는 방법이 있습니다. 여기서는 설정 변경을 통해 바꾸는 방법을 알아보겠습니다. 주소 ...

워드프레스 강좌 / 플러그인 / UpdraftPlus / 백업, 복원 플러그인

워드프레스 강좌 / 플러그인 / UpdraftPlus / 백업, 복원 플러그인

UpdraftPlus UpdraftPlus는 워드프레스 전체를 백업하고 복원할 수 있는 플러그인입니다. 현재 백업/복원 플러그인 중에서 가장 인기있는 플러그인으로, 대표적인 특징은 다음과 같습니다. 쉽고 빠른 백업/복원 파일과 DB 모두를 백업/복원 구글 드라이브, 드롭 박스, 원드라이브 등 외부 저장소에 백업 가능 주기적으로 자동 백업 가능 백업 를 클릭합니다. 팝업창에서 를 클릭합니다. 잠시 기다리면 백업이 만들어집니다. 백업 파일은 /wp-content/updraft 폴더에 저장됩니다. 외부 ...

워드프레스 강좌 / 우커머스 / 한글 번역 수정하는 방법

워드프레스 강좌 / 우커머스 / 한글 번역 수정하는 방법

우커머스를 설치하면 한글 번역 파일도 같이 설치됩니다. 예전에는 번역률이 낮아서 사용이 어려웠는데, 지금은 많은 분들의 도움으로 번역률이 100%입니다. 하지만, 일부 번역은 마음에 들지 않을 수 있고, 쇼핑몰 특성 상 더 좋은 번역이 있을 수도 있습니다. 그럴 경우 우커머스의 번역을 수정하여 사용할 수 있습니다. Loco Translate 설치 번역 플러그인 Loco Translate를 설치하고 활성화합니다. 기본 사용법 : Loco ...

워드프레스 강좌 / 플러그인 / Contact Form 7 / 폼메일 만드는 플러그인

워드프레스 강좌 / 플러그인 / Contact Form 7 / 폼메일 만드는 플러그인

Contact Form 7 Contact Form 7은 폼메일 플러그인입니다. 정보를 입력할 수 있는 폼을 쉽게 만들 수 있습니다. 스팸 방지 도구인 reCAPTCHA를 사용할 수 있습니다. 스타일을 구하기 쉽고, 많은 테마에서 Contact Form 7을 지원합니다. 설치 에서 Contact Form 7로 검색하여 설치하고 활성화합니다. 폼메일 페이지 만들기 Contact Form 7을 설치하면 기본적으로 하나의 폼이 생성됩니다. 쇼트코드를 복사합니다. 페이지를 만들고, ...

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

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

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