워드프레스

워드프레스 자식테마(Child theme)가 중요한 이유와 자식테마 생성하는 방법

이슈트래블 2020. 12. 3. 12:49

워드프레스를 설치하고 테마를 설치했다면, 다음 차례는 사용하는 테마의 자식테마, Child Theme 이라는 것을 만들어서 사용해야 합니다. 유료 테마를 사용하던 무료 테마를 사용하던 자식테마를 만들어서 사용하는 것은 매우 중요 합니다.

예를 들어 설치한 테마의 CSS에 여러 스타일을 추가하고, Functions.php에 여러가지 기능을 추가했다고 가정 했을 때, 테마가 업데이트 되게 되면 지금 까지 작업했던 내용들이 모두 없어지고 새로운 업데이트된 내용들이 덮어 씌워지게 됩니다. 만약 백업을 해 놓았다고 해도 다시 작성을 해야 하는 불편함이 생기게 되죠

 

이런 불편함을 없애기 위해서 사용하는 방법으로 자식테마를 사용해야 하는 것입니다. 필수라고 할 수 있죠.

 

요즘 판매되는 유료테마들 중에는 자식테마가 포함되어 있는 경우가 많습니다. 하지만, 무료 테마나 자식테마가 없는 테마를 사용하신다면 자식테마를 직접 만들어서 사용해야 합니다. 이전 포스팅에서 말씀드렸지만, 단순히 한번 사용할 목적으로 플러그인을 사용하는 것은 워드프레스 속도면에서 봤을때 좋은 방법이 아닙니다. 하지만 직접 제작이나 수정이 불가능 하다면 어쩔수 없이 플러그인을 사용해야 하겠지만요

 

 

워드프레스 로그인 화면 로고 변경 하기

워드프레스를 정상적으로 설치 했다면, 이제 내 사이트의 URL에 /wp-admin 또는 /wp-login.php 를 추가하여 나의 Wordpress 사이트에 로그인 할 수 있습니다.Wordrpess 로그인 페이지는 웹사이트에 로그인 하

issue-travel.tistory.com

 

워드프레스로 만든 사이트의 속도가 느리다면, 워드프레스 속도개선 책자를 이용해서 직접 해보시는 방법도 있습니다.

 

 

워드프레스 속도개선 직접 하실 수 있는 정리된 노하우를 드립니다. | 20000원부터 시작 가능한 총

17개 총 작업 개수 완료한 총 평점 5점인 bitnami의 IT·프로그래밍, 기타, 기타 서비스를 7개의 리뷰와 함께 확인해 보세요. IT·프로그래밍, 기타, 기타 제공 등 20000원부터 시작 가능한 서비스

kmong.com

 

Child Theme - 자식테마 만들어서 사용하기

자식 테마를 만들려면 FTP를 사용하여 자식테마를 만들고 업로드 하고 해당 자식테마를 활성화 하면 됩니다.

 

자식 테마를 만드는 방법 입니다.

1. 자식 테마의 폴더를 생성해 줍니다. 예를 들어 기본 테마인 twentyfifteen을 사용하고 있다고 가정 했을 때

twentyfifteen-child 이런식으로 구분하기 쉽게 적어 주시는 것을 추천 합니다.

 

2. Style.css 파일 생성해야 합니다. 위에서 만들어준 자식테마의 폴더안에 style.css 파일을 생성하고 아래 내용을 적어 줍니다.

 

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

중요한 부분은 Theme Name 과 Template 입니다.

Template 부분에 부모테마의 이름이 틀리다면 정상적으로 작동하지 않습니다. 우리는 twentyfifteen의 테마의 자식테마를 만들어서 수정하고 사용할 것이므로 Template 부분에 twentyfifteen이라고 정확히 적어 주어야 합니다.

 

주석이 ( */ )끝나는 부분 이후에 앞으로 수정할 CSS를 추가해서 사용할 수 있습니다.

 

3. Functions.php 를 생성하고 style.css를 읽어 올수 있도록 설정해 주어야 합니다.

스타일 시트를 대기열에 추가하는 방법으로 공식 워드프레스에서 추천하는 방법 입니다.

 

wp_enqueue_scripts 로 작업을 추가하고 자식테마의 Function.php에서 wp_enqueue_scripts()를 사용하는 것을 권장하고 있습니다.

위 에서 생성한 자식테마의 폴더안에 funtions.php를 생성해 줍니다.

자식 테마의 functions.php의 첫 줄에 PHP태그를 열어기만 하면 됩니다. <?php 파일의 끝 부분에 ?> 를 이용하여 닫아주지 않아도 됩니다. 꼭 기억 하세요

 

<?PHP
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'parenthandle' ), 
        wp_get_theme()->get('Version') // this only works if you have Version in the style header
    );
}

4. 마지막으로 스크린샷 이미지가 필요합니다. 

관리자에 로그인해서 외모로 이동하면 테마들의 특징을 나타내는 이미지들이 보입니다. 이 이미지가 스크린샷 입니다.

원하시는 이미지를 만들어놓은 자식테마의 폴더에 넣어 주기만 하면 됩니다. 파일이름을 screenshot.png 로 저장해 주시면 됩니다.

 

5. 만들어 놓은 자식테마에는 이제

style.css

functions.php

screenshot.php

이렇게 세개의 파일들이 있습니다.

자식 테마의 폴더를 부모테마인 twentyfifteen이 있는 동일한 경로에 업로드 해 줍니다.

업로드가 완료 되었다면, 

 

관리자 > 외모로 이동해서 업로드 되어 있는 자식테마를 활성화 해 주면 됩니다.

 

 

플러그인을 사용해서 자식테마를 생성하는 방법

관리자 > 플러그인 > 새로 추가 에서 child theme를 입력해서 검색하면 수 많은 플러그인 들이 나옵니다.

제가 알려드리는 플러그인 보다 더 좋은 플러그인들이 있을수도 있지만, 플러그인의 내용을 미리 잘 살펴 보시고 결정하시는 것을 추천 드립니다.

 

 

 

Child Theme Configurator

When using the Customizer is not enough - Create a child theme from your installed themes and customize styles, templates, functions and more.

wordpress.org

가장 많이 사용하고 오래 된 플러그인 중 하나 입니다. 플러그인들이 거의 영어 이지만 번역으로라도 잠깐 시간을 내서 읽어 보시고 사용하세요 사용하기 어려우시면 삭제하고 다른 플러그인을 사용해도 되지만요~

 

 

 

Child Theme Generator

Child Theme Generator is a WordPress plugin, useful to generate a child themes.

wordpress.org

이 플러그인도 사용하기 간편하게 되어 있습니다. 저는 플러그인으로 자식테마를 생성해야 하는 경우 위의 두개의 플러그인을 주로 사용하고 있습니다.

 

워드프레스를 설치하고 나만의 디자인과 기능 수정작업을 한 내용들이 사라지지 않게 꼭 자식테마를 만들어서 사용하시기 바랍니다.