SSamTure.net

워드프레스

[워드프레스 개발] 차일드 테마 만들기

워드프레스 차일드 테마는 워드프레스 테마를 수정하는 전문적인 방법이다. 워드프레스 차일드 테마는 어떠한 테마가 있을 시 해당 테마를 조금 변형하여 사용 할 경우 유용하다.

how does a cash advance work, vista b payday loans

해당 테마를 수정해도 되나, 차일드 테마를 사용하는 경우는 추후 해당 테마가 업그레이드 될 시 해당 테마를 수정하였다면 추후 또 수정해야하는 문제점이 발생하는데 이 문제점을 워드프레스 차일드 테마를 통하여 해결 할 수 있을 것이다.

또한, 차일드 테마는 부모테마 즉, 수정하여 사용하고자 하는 테마의 스타일 뿐만 아니라 모든 기능을 그대로 상속받아 사용 할 수 있기 때문에 디자인이 새로운 테마를 만들더라도 기능부분을 그대로 상속 받기 때문에 해당 기능을 추가로 개발 할 필요가 없다. 즉, 개발하는 시간이 단축 시킬 수 있을 것이다.

다음 예제를 통하여 차일드 테마 만드는 법에 대해 살펴보자.

1. 차일드 테마 폴더를 생성한다.

image

/워드프레스 설치경로/wp-content/themes

위의 경로에 차일드 테마 폴더를 생성한다.

2. 차일드 테마를 위한 style.css 파일을 생성한다.

/*
Theme Name: 차일드 테마 예제
Theme URI: http://ssamture.net
Author: MinHyeong Lim
Author URI: http://ssamture.net
Description: 차일드 테마 예제입니다.
Template: twentyeleven
Version: 1.0
*/

@import url(../twentyeleven/style.css);

만약 부모 테마의 스타일을 사용하지 않고 새로운 스타일을 적용시키고자 할 경우에는, @import 를 기입하지 않고, 새로운 스타일을 작성해주면 된다. 또한 차일드 테마 style.css 를 생성 할 경우 Template을 지정해주어야 한다. Template은 부모 테마명을 지정해주면 된다. 이 때 부모 테마명은 부모 테마의 디렉토리 명을 그대로 적어주면 된다.

3. 차일드 테마 활성화

image

워드프레스에 로그인 한 후 대시보드에서 Appearance(테마 디자인, 외모) – Themes(테마)를 클릭 한 후 차일드 테마를 활성화한다. 그러면 차일드 테마가 사이트에 적용 될 것이다.

4. 차일드 테마 확인

image

차일드 테마를 활성화 한 후 사이트 메인으로 돌아와서 확인 해보면 차일드 테마가 적용된 모습을 확인 할 수 있다. 이처럼 워드프레스 차일드 테마는 별다른 작업 없이 부모 테마로 지정한 테마 그대로 상속받아 표시 해준다.

5. 헤더 텍스트 스타일 변경

image

이제 스타일을 변경하고자 하는 부분을 변경해보도록 하자. 본 예제에서는 헤더 텍스트 스타일을 변경해보도록 하겠다. 헤더의 CSS 정의를 살펴보아야 하는데 위의 이미지와 같이 크롬의 요소검사와 같은 추가기능을 이용하면 손쉽게 CSS 정의 내용을 확인 할 수 있다.

6. 스타일 시트 파일에 변경하고자 하는 스타일 삽입

image

image

이처럼 간단한 에제를 통하여 기존의 테마를 이용하여 차일드 테마를 만드는 방법에 대해 알아보았다. 만약 기존 테마를 수정하고자 원한다면 차일드 테마를 활용해보도록 하자.

1 Comment

  1. read more here
    2013/09/05 at 18:53 · Reply

    Wow, really cool information’s about the child theme features. Reading this page surly all readers will get good ideas about creating a beautiful child theme in word press. Seeing this page we can understand the hard work you done I this page. Keep more posts to us.

Leave a Reply to read more here Cancel reply

Your email address will not be published. Required fields are marked *