워드프레스 설치할 때 테마를 차일드테마로 변경해야 하는 이유

워드프레스를 이용해서 홈페이지 또는 블로그를 계획하고 있다면

워드프레스를 설치하자 마자 바로 차일드테마로 변경해야 합니다.

 

테마가 자동업데이트인 경우는

내가 메인테마를 꾸미고 설정을 했다고 해도 갑자기 테마가 초기화되는 경우도 있습니다.

 

근래에는 업데이트를 여부를 테마메뉴에서 아래와 같이 표시되는 것 같습니다.

(지금 업데이트의 링크를 누르면 테마 초기화됨)

 

그렇기에 parent 테마를 child 테마로 우선적으로 변경하고 테마 사용자 변경 작업을 진행하라는 것입니다.

 

직접 수동 변경과 플러그인을 이용한 변경 2가지 방법이 있는데

 

1) 직접 수동 변경 

 

먼저 SSH 나 텔넷을 이용하는 경우 부터 보자면

테마 물리적 설치 위치는 아래와 같습니다.

/var/www/html/wp-content/themes

여기 ls 명령어를 쳐보면 현재 자신이 설치되어 있는 테마이름이 폴더이름으로 보입니다.

예를 들어 astra 라고 한다면

여기서 해당테마의 child 디렉토리를 생성해 주어야 합니다.

일반적으로 이름은 테마-child 입니다.

 

그러므로 지금의 경우는 parent테마이름이 astra 이므로 child테마이름은

astra-child 가 되겠죠

mkdir astra-child

생성해 준 후에 해당 디렉토리를 ls 실행해 보면

이렇게 밑에 하나 디렉토리가 생겼네요

여기서 안에 들어가서 보면 아무것도 없겠죠?

여기다 3개만 만들어 줍니다. 3개의 파일은 모두 새로 신규 생성해 주어야합니다.

또는 parent 에 있는 파일들을 카피하고 해당내용은 모두 지워줘도 됩니다. (screenshot.jpg 이미지 파일은 그대로 사용)

1) style.css

2) functions.php

3) screenshot.jpg (선택이지만 ,필수 추천)

 

우선 child 테마를 사용하는 원리를 이해해야 합니다.

 

워드프레스는 자식테마에 없는 파일은 기본 테마 폴더에서 찾는다

 

테마가 로딩되어 해당 사이트를 오픈하고 열려고 할 때, 

우선은 child 테마가 있으면 child 테마 안에 있는 내용을 우선으로 읽습니다.

그리고 해당 내용이 없으면 모두 parent 테마에 가서 나머지를 모두 읽습니다.

그래봐야 2개파일이 대부분이죠 (style.css, functions.php)

 

그렇기 때문에 워드프레스 설치하고, 테마 설치하고, 사용자 정의로 막 여러가지 수정하고 꾸밀 때,

미리 child 테마로 분리해서 거기서 작업하라는 의미입니다.

 

여기까지도 이렇게 말해도 무슨 뜻인지 모를 수도 있어요 ^^

걱정마시고요

 

우선 2가지 파일의 조건이 있습니다. (이 조건이 부합되야지 워드프레스에서 이게 child 테마구나를 이해합니다.)

사실 아래처럼 style.css 를 추가해주면 끝납니다.  테마메뉴가서 새로고침 누르면 child 테마가 바로 보입니다.

/*
Theme Name: astra-child
Version: 1.0
Description: A child theme of astra
Author: 자신의 워드프레스 어드민 ID
Template: astra
*/


@import url("../astra/style.css");

그런데 이것도 author나 이런 요소들이 스펠링이 모두 맞아야지 인식이 되더라구요

child 테마는 디렉토리 이름도 - (하이픈,마이너스표시)를 이용했듯이 여기서도 정확하게 이름을

astra-child라고 명시해야하고 author이름도 자신의 워드프레스 로그인아이디가 필요해 보이기도 합니다.

 

이렇게 하면 테마 메뉴에 가면 child테마가 보입니다.

 

그럼 선택하고 활성화 해주면 됩니다.

 

그런데 위의 방법은 트래픽이 폭주하면 사용자 딜레이 현상이 발생한다고 하니

 

외부 스타일시트에서 CSS @import를 사용하면 웹 페이지 로드 중에 추가적인 딜레이(지연 현상)가 발생할 수 있어 이 방법은 권장되지 않습니다.

 

import 방식보다는 아래 방식을 추천드려요

 

파일 내용은 아래와 같이 해주어도 됩니다. style내용과 functions 내용을 추가해 주는 거죠

1) style.css

/*
Theme Name: astra-child
Version: 1.0
Description: A child theme of astra
Author: 자신의 워드프레스 어드민 ID
Template: astra
*/

2) functions.php

<?php

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'astra' for the astra theme.

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

이제 완성이 되었고 이렇게 chile 테마로 갈아타면 이제부터 소스 수정 부분은 여기 child 테마의 위치에 있는

위의 2개의 파일에서 내용을 수정, 추가, 삭제해 주면 됩니다.

 

css 관련된 추가사항은 chile테마의 디렉토리의 style.css에서 수정해 주고

php 관련된 추가사항은 chilㅇ테마의 디렉토리의 functions.php에서 수정해 줍니다.

 

다음 좀 더 쉬운 childe테마 변경플러그인을 이용해 보겠습니다.

가장 유명한 것은 1) 첫번째 플러그인인데 제가 사용해 볼때는 유명한 테마는 잘 실행이 되는 유명하지 않은 테마는 작동하지 않아서 저는 2번째것으로 생성을 해보았습니다.

1) Child Theme Configurator

해당 플러그인의 사용방법은 어렵지 않아요. 

 

2) Child Themify

이것도 해당 플러그인의 사용방법은 어렵지 않아요. 

 

이것들은 2가지 모두 메뉴에서 버튼 클릭으로 생성하지만 실제 터미널에 들어가보면 해당 위치에

맨 처음에 수동으로 생성할 때의 위치에 해당 파일들(style.css functions.php)을 생성해 놓는다는 것을 

확인해 볼 수 있습니다.

 

이렇게 자식 테마를 사용하면 부모 테마를 건드리지 않으면서도 자유롭게 테마를 수정하거나 커스터마이징할 수 있습니다.

 

이제는 워드프레스 사용자 설정할 일만 남았습니다.

 

 

마지막으로 예를 들자면 내가 적용한 테마에서 header.php 에서 헤더를 내가 직접 수정(개발)하고 싶으면

 

parent 테마 디렉토리에서

/var/www/html/wp-content/themes/astra/header.php

에서 header.php를 복사해사 아래의 astra-child에 넣어주면 됩니다.

 

/var/www/html/wp-content/themes/astra-child/header.php

그리고 복사한 그 위치(child테마)에서 해당 파일을 열어서

(ftp를 사용하거나, ssh에서 vi 편집기를 사용하거나 등등)

코드 수정을 하시면 됩니다.

 

여기서부터 워드프레스 자가(?) 셀프 개조가 시작되겠습니다.  (코딩 할줄 아시면)