웹 개발/워드프레스

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

KISCH 2024. 9. 13. 10:29
반응형

 

워드프레스 자식테마를 만들어야 하는 이유와 방법을 쉽게 설명드리겠습니다. 

 

 

목차

     

     

    1. 자식테마란?

     

    자식테마 사용 이유

    무료 테마든 유료 테마든 수정을 할 경우가 있습니다. 하지만 테마가 업데이트 되면 기존 테마에 덮어 씌우기 때문에 수정한 부분이 날아가 버릴 수 있습니다.

    자식테마를 만들어서 원하는 수정을 하게되면 원본(부모) 테마가 업데이트 되더라도 수정한 부분은 자식테마에 남아 있기 때문에 내용을 유지할 수 있습니다.

     

    작동방식 

    자식테마를 만들 때 꼭 필요한 파일은 style.css와 functions.php 로 이 파일들이 있어야 자식테마로 인식합니다. 부모테마의 style.css와 functions.php 를 실행한 후 자식테마의 style.css와 functions.php 파일이 실행됩니다.

     

     

     

     

    2. 자식테마 만드는 방법

     

    1) 신규 디렉토리 생성

     "wp-content/theme" 폴더에 새로운 폴더를 생성합니다. theme폴더 안에 부모 테마 폴더와 자식 테마 폴더 2개가 위치합니다. 부모 폴더가 "Astra"라면 자식 폴더 이름은 "Astra-child"로 명명합니다. 이름이 꼭 이럴 필요는 없지만 보통 이렇게 합니다.

     

    2) "style.css" 파일 생성

    부모 테마의 style.css 위치를 확인합니다. 자식 테마 폴더의 똑같은 위치에 style.css 파일을 생성합니다. style.css에 들어갈 내용은 아래와 같습니다. Theme Name과 Template은 필수 입니다. 

     

    /*
        Theme Name: Astra-child
        Template: astra 		// 부모 테마 폴더 이름
        Theme URI: xxx
        Description: xxx
        Author: xxx
        Author URI: xxx
        Version: xxx
    */

     

    3) "functions.php" 파일 생성

    자식 테마 폴더에 "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' );
    ?>

     

    4) "screenshot.png" 파일 복사

     "screenshot.png" 파일은 관리자 대시보드에서 해당 테마를 소개할 때 필요한 파일입니다. 부모 테마의 "screenshot.png" 파일를 복사해 자식 테마의 폴더에 붙여넣기 합니다.

     

    5) 테마 활성화

    이제 "테마 디자인 - 테마" 메뉴로 가면 테마가 추가된 것을 보실 수 있습니다. 활성화 시켜 주세요. 

     

     

    3. 자식 테마 수정

     

    스타일 수정

    스타일만 수정할 것이라면 style.css에 수정할 코드를 넣어주세요. (테마에 따라 다를 수 있음)

     

    템플릿 수정

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

     

    functions.php

    자식테마의 functions.php를 수정합니다. 부모 테마의 functions.php를 복사해 오시면 안되고 자식 테마에 추가하시기 바랍니다.

    반응형