워드프레스테마 Archives

워드프레스 자식테마에 필요한 사항은 자식테마 디렉토리와 두가지 파일이며 되고 screenshot.png 파일은 테마 리스트에서 썸네일 이미지로 활용되어서 부모의 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) 만드는 방법과 자식테마 커스텀 하는 방법에 대해서 간략하게 알아보았습니다. 테마를 커스텀 하지 않고 쓰실 분들은 자식테마를 만들 필요는 없겠지만 커스텀할 경우에는 꼭 자식테마를 생성해서 사용해 보시길 권해드립니다.