WordPress Astra 자식 테마 만들기

WordPress Astra 자식 테마 만들기WordPress Astra & Child Theme

by

이번 포스팅은 “WordPress Astra 자식 테마 만들기”로 저번 포스팅 <WordPress 사이트 설정 및 Astra 테마 설치하기>에 이어서 자식 테마를 만들어서 활용하는 방법을 알아보겠습니다.

WordPress로 웹사이트를 직접 만들어 운영하다 보면 오리지널 테마 파일의 코드를 직접적으로 수정하게 됩니다. 그렇게 수정하다 보면 오리지널 테마의 소스가 망가지는 경우가 많거나 테마 업그레이드로 인해 어렵게 추가로 작업해 두었던 소스가 한순간 물거품처럼 사라질 수 있습니다.
이런 경우를 방지하기 위해 자식 테마(Child Theme)를 만들어 사용하는 것을 추천드립니다. 자식 테마의 소스 코드를 수정하더라도 오리지널 테마에는 영향이 가지 않기 때문입니다.

< 준비물 >

Astra Theme 다운로드
Elementor Page Builder 플러그인 다운로드



자식 테마(Child Theme)란?

자식 테마란 오리지널 테마를 그대로 둔 상태에서 자식 테마를 설정하고 변경하고 싶은 부분만 자식 테마에서 부분적으로 수정하여 사용할 수 있습니다. 자식 테마를 사용할 경우 장점으로는 부모 테마(오리지널 테마)가 업그레이드되더라도 자식 테마에서 수정한 소스는 그대로 사용이 가능하다는 점입니다.

단점으로는 부모 테마의 기능이 업그레이드되었을 경우 자식 테마에서 수정한 부분으로 인해 부모 테마의 기능을 사용하지 못할 수 있습니다. 하지만 테마를 부분적으로 수정하여 사용을 원할 경우 반드시 추천드리고 싶습니다.

자식 테마를 만드는 방법은 플러그인을 활용하면 간단합니다.

Child Theme Configurator 플러그인 설치하기

자식 테마를 만드는데 여러 플러그인이 있지만 이 글에서는 Child Theme Configurator 플러그인을 활용하는 방법을 알아보도록 하겠습니다.

  1. 관리자 메뉴에서 “플러그인 > 새로 추가” 버튼을 클릭합니다.
  2. 우측 검색창에 “Child Theme“를 입력합니다.
  3. “Child Theme Configurator” 플러그인에 “지금 설치” 버튼을 클릭합니다.
Child-Theme-Configurator-플러그인-설치하기

플러그인 설치가 완료되면 “활성화” 버튼을 클릭합니다.

Child-Theme-Configurator-활성화

이로서 자식 테마를 만들 플러그인 설치가 완료되었습니다.

자식 테마(Child Theme) 만들기

앞서 자식 테마 생성 플러그인을 활용하여 자식 테마를 만들어 보겠습니다.

  1. 먼저 관리자 페이지 좌측 메뉴 중에 “도구 > Child Themes” 버튼을 클릭합니다.
  2. 2번 항목에서 선택 박스에서 자식 테마를 만들 부모 테마를 선택합니다. 여기서는 “Astra” 테마를 선택합니다.
  3. 부모 테마 선택이 끝났다면 “Analyze” 버튼을 클릭합니다. 자식 테마 생성이 진행됩니다.
Child-Theme-Configurator-자식테마설정

자식 테마 생성 과정이 완료되면 하단에 “Configure Child Theme” 버튼이 나오면, 버튼을 클릭합니다.
이로서 자식 테마 생성이 완료되었습니다.

Child-Theme-Configurator-자식테마적용

자식 테마(Child Theme) 활성화하기

자식 테마 생성이 완료되었다면 관리자 메뉴 “외모 > 테마“에서 추가된 자식 테마를 확인할 수 있습니다.

  1. 추가된 자식 테마에 마우스 오버합니다.
  2. “활성화” 버튼을 클릭합니다.
Child-Theme-Configurator-활성화

아래처럼 자식 테마가 활성화되어 있음을 확인되었다면 자식 테마 적용 과정이 모두 완료되었습니다.

Child-Theme-Configurator-자식테마만들기완료



직접 업로드하여 자식 테마 만들기

직접 업로드하여 자식 테마를 만들기 위해서는 기본적인 기술로  HTML, CSS, FTP 프로그램은 사용할 줄 알아야 합니다.
자식 테마로 필요한 파일은 style.css, functions.php, screenshot.jpg 이 3개의 파일입니다.
그럼 직접 업로드하여 자식 테마를 만드는 과정을 설명드리겠습니다.

1. style.css 파일 업로드하기

FTP로 호스팅에 접속 후 “wp-content/themes/“ 폴더에 자식 테마에서 가장 필수적인 파일인 style.css을 아래 코드를 저장 후 업로드합니다. 

/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/
Description: Astra is fast, fully customizable &amp; beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront.
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,blog
Version: 1.1.0
Updated: 2019-09-06 15:48:01

*/

위 항목 중에 “Theme Name: “ 이 부분에는 설치되어 있는 부모 테마가 존재하여야 됩니다. 여기서는 “Astra” 테마를 부모 테마로 설정하였습니다.
이 상태로 업로드한 후 사이트를 확인해 보시면 CSS가 전혀 작동하지 않고 있다는 걸 아실 겁니다. 부모 테마의 CSS가 적용되지 않고 지금 업로드한 style.css파일을 업로드하고 있기 때문에 아무 스타일이 적용되지 않습니다.

2. functions.php 파일 업로드하기

다음으로는 부모 테마와 자식 테마 간의 상속 성을 부여해 주어야 합니다. 
아래 코드를 functions.php 파일에 저장 후 자식 테마 폴더에 업로드하면 부모 테마의 스타일 및 모든 기능을 상속받아 올 수 있습니다.

<?php	
function wptalk_enqueue_styles() {	
    $parent_style = 'parent-style';	
    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 ),	   
     wp_get_theme()->get('Version')	 
   );	
}	
add_action( 'wp_enqueue_scripts', 'wptalk_enqueue_styles' );
?>

3. screenshot.jpg 파일 업로드하기

“screenshot.jpg” 파일은 부모 테마에서 복사해서 자식 테마 폴더에 붙여 넣기 하면 됩니다.

4. 자식 테마 활성화하기

관리자 메뉴 “외모 > 테마“에서 새로 만든 자식 테마를 활성화하면 모든 과정이 끝납니다.

자식 테마 동작 원리

자식 테마를 만들 때 꼭 필요한 파일은 style.css와 functions.php 파일입니다. 이 두 개의 파일이 있어야 자식 테마로 인식합니다. Screenshot.jpg 파일은 “외모 > 테마”에서 보이는 썸네일 이미지입니다.

자식 테마 원리로는 style.css와 functions.php는 부모 테마의 style.css와 functions.php를 먼저 실행한 후 자식 테마의 파일을 실행합니다. 또한 부모 테마에 존재하는 파일을 복사해서 자식 테마에 복사해서 사용할 경우 자식 테마에 있는 파일을 우선 실행하게 됩니다.



관련글

Leave a Comment