Home IT/WEB wordpress 워드프레스 자식테마(child-theme) 만드는 방법

wordpress 워드프레스 자식테마(child-theme) 만드는 방법

워드프레스 블로그의 장점은 네이버, 티스토리 블로그와는 다르게 자기 입맛에 맞게 커스텀이 가능하다는 점입니다. 워드프레스를 설치하고 나서 레이아웃도 변경하고 기능도 추가해서 일반 홈페이지처럼 활용하기도 합니다. 하지만 테마를 업데이트 하면 수정 내용이 모두 리셋됩니다. 이렇기 때문에 자식 테마를 만들게 되면 부모의 테마의 기능과 디자인을 그대로 상속받아 사용할 수 있고 테마가 업데이트 되더라도 수정한 내용이 그대로 존재하게 됩니다.

워드프레스 자식테마 만드는 방법

inline ad

워드프레스 자식테마에 필요한 사항은 자식테마 디렉토리와 두가지 파일이며 되고 screenshot.png 파일은 테마 리스트에서 썸네일 이미지로 활용되어서 부모의 screenshot.png 파일을 복사해둡니다.

  • 자식테마 디렉토리
  • style.css
  • function.php
  • screenshot.png

워드프레스 자식테마 이름은 자기가 알아보기 쉽게 작성하면 되며 보통 부모테마 이름에 -child 라고 작성합니다. 저는 twentytwenty-child 라고 작성해줬습니다.

style.css

부모의 테마에서 sytle.css 를 복사해서 가져옵니다. 그리고 아래 주석을 제외한 것은 삭제하고 Theme Name 에 자식 테마명을 하나 작성하고 Template 값에는 부모 테마이름을 작성해줍니다. 정확하게 입력을 해야합니다. 이 두 항목을 제외한 것은 그대로 두시거나 삭제해도 상관없습니다.

/*
Theme Name: Twenty Twenty Child Theme
Template: twentytwenty
Version: 1.2
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: market traders
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/
/*
Theme Name: Twenty Twenty Child Theme
Template: twentytwenty
*/

function.php

style.css 파일을 작성하시듯 function.php 를 생성해서 아래 코드를 복사해서 붙여넣습니다. 그럼 이제 워드프레스 자식테마에 필요한 파일은 다 작성되었고 ftp 로 파일을 업로드 해보겠습니다.

<?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' );
?>

워드프레스 자식테마 파일 업로드

워드프레스 자식테마 업로드

워드프레스 자식테마 활성화

워드프레스 알림판에서 테마 디자인 > 테마 메뉴로 들어오면 조금 전에 작성된 자식테마를 확인할 수 있고 활성화 버튼을 클릭하시면 자식테마가 활성화 됩니다. 활성화 하더라도 차이가 없습니다. 스타일 파일을 추가해서 테마 레이아웃을 수정해보겠습니다.

워드프레스 자식테마 활성화
워드프레스 자식테마 활성화

자식테마 커스텀하기 – 스타일 파일, 스크립트 파일 추가

function.php 파일 안에서 스타일 파일이나 javascript 파일들을 import 해서 커스텀 할 수 있습니다.
저는 theme 디렉토리 아래에 assets 폴더를 생성하고 아래에 css, js 디렉토리를 생성했습니다.
css 디렉토리 아래는 laout.css 파일을 생성해두었구요. js 디렉토리 아래에는 bootstrap library 파일을 복사해두었습니다.

function markettraders_scripts 함수 안에 wp_enqueue_style(), wp_enqueue_script() 함수로 style 파일과 js 파일을 임포트 할 수 있습니다. markettraders_scripts 함수 이름은 변경 가능합니다.

/**
 *  페이지에 따른 css. js 추가는 여기서 진행
*/

function markettraders_scripts() {
    // CSS
    wp_enqueue_style('markettraders-style-layout', get_stylesheet_directory_uri() . '/assets/css/layout.css', array(), '0.0.1');
    // JS
    wp_enqueue_script( 'bootstrap-script', get_stylesheet_directory_uri() . '/assets/js/bootstrap.min.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'markettraders_scripts', 100 );

블로그 메인 페이지에 포스트 타이틀을 변경 해보겠습니다. 제목에 해당하는 태그는 <h2> 이고 클래스 이름은 entry-title heading-size-1 입니다. font-size 가 6.4rem 크기인데 5rem 폰트 크기로 변경해보겠습니다.

스타일 수정
스타일 수정 전

layout.css 파일에서 아래와 같이 코드를 추가하고 업로드 했습니다.

@charset "UTF-8";

h2.entry-title {
    font-size: 5rem;
}

폰트 크기가 조금 줄어든 것을 확인할 수 있습니다.

스타일 수정 후
스타일 수정

자식테마 커스텀하기 – 템플릿 파일 수정

만약 <head> 안에 GA 코드나 스크립트 파일을 삽입 혹은 헤더를 편집하기 위해서는 부모의 테마에서 header.php 파일을 자식테마 디렉토리로 복사해옵니다. 그런 다음 GA 코드를 삽입 할 경우 복사해 온 header.php 파일을 수정해서 업로드 합니다. 그러면 자식 테마의 header.php 파일이 오버로드 되어 적용되는 것을 확인하실 있습니다.

지금까지 워드프레스 자식테마(child-theme) 만드는 방법과 자식테마 커스텀 하는 방법에 대해서 간략하게 알아보았습니다. 테마를 커스텀 하지 않고 쓰실 분들은 자식테마를 만들 필요는 없겠지만 커스텀할 경우에는 꼭 자식테마를 생성해서 사용해 보시길 권해드립니다.

RECENT POSTS

After Effects 엥커포인트 중앙으로 이동하는 방법 및 스크립트

After Effects 에서 애니메이션을 하기 위해서는 움직이는 대상의 Anchor Point 에 따라서 크기나 위치, 회전 등의 차이가 있습니다. After Effect 에서는 Layer content 에...

제주도 도로교통상황, 통제상황 및 이번주 제주도 날씨 2023-01-25

제주도로교통상황 한라산 탐방은 현재 전면 통제중이며 제주시와 서귀포시를 잇는 1100도로, 5.16도로 전 구간은 전차량 통제상황, 소형차의 경우 제1산록도로가 통제 상황입니다. 제주교통통제상황: https://www.jjpolice.go.kr/jjpolice/notice/traffic.htm ...

[EPIC GAME] Horizon Chase Turbo 2022.12.18 까지 무료 다운로드

Horizon Chase Turbo 를 2022.12.18일 01:00 까지 EPIC GAME 에서 무료로 다운 받을 수 있습니다. 오락실 자동차와 같은 레이싱 게임입니다. https://store.epicgames.com/ko/p/horizon-chase-turbo https://www.youtube.com/watch?v=5LMugZ300L8 Horizon Chase Turbo Horizon Chase Turbo는...

제주도로교통상황 및 이번주 제주도 날씨 2022-12-17 현재

제주도로교통상황 한라산 탐방은 현재 전명 통제중이며 제주시와 서귀포시를 잇는 1100도로 전 구간은 통제상황입니다. 5.16도로 마방목지~성판악 / 성판악~숲터널 구간은 소형 자량인 경우 체인을 설치해야만 운행 가능합니다. 제주지방기상청은...