나만의 워드프레스 디자인을 위한 WordPress Child Theme. WordPress Meetup Seoul 2011

1. 나만의 워드프레스 디자인을 위한
WordPress Child Theme
i@hooney.net

2. 소개: hooney

3. 지난 내용
• 서비스형 블로그의 한계
• 설치형 블로그의 아름다움
• 목적에 맞는 프로세스
• 누가 테마를 만들 것인가?

4. 목차
• 워드프레스 테마
• 워드프레스 자식 테마
• 자식 테마 만들기
• 자식 테마 한계
• 나만의 워드프레스 디자인을 위한 Next Step

5. 워드프레스 테마
• 이미 너무 많음
• 새로 만들기 위한 필수 요소
• 테마 구조

6. 너무 많음: 공식 등록된 테마 1,452개
• 워드프레스 사이트에 등록된 것만 1,452개
• 상업용/개인용 포함하면 2,000개를 훨씬 넘을듯.

7. 너무 많음: 다양한 분류로 선택 가능
• 색상, 열(컬럼), 폭(너비), 특성, 주제 등 40여개 분류별로
선택 가능.

8. 새로 만들기 위한 필수 요소
• Contents
• 웹 기술: HTML, CSS, JS
• Wordpress Themplate 구조: tag, file

9. 테마 구조: 기본
• 기본 Template File:
– index.php
– style.css
• 기본 Template Tag:
– loop,
– title, contents, etc
– comments list/ form

10. 테마 구조: 확장

11. 워드프레스 자식 테마
• 개요
• 장점
• 만들기
• 제작 도구
• 사례

12. 개요
• 워드프레스 자식(child) 테마는 부모(parent) 테마의 기능
이나 디자인을 상속받거나, 추가/수정/삭제할 수 있음.

13. 장점
• 테마 제작 효율성 향상
– 먼저 찾고, 필요한 거 추가하는 방식의 플러그인 테마 개발 가능
– 테마 제작 시간 단축으로, 창의적 디자인 시간 확보
• 부모/자식 분리로 테마 관리 쉬움
– 부모/자식 테마의 별도 업데이트 가능
– 자식1, 자식2, 자식3처럼 형제 테마 제작 가능

14. 자식 테마 만들기
• 자식 테마 폴더 제작
• style.css 제작
• function.php 외 템플릿 파일 제작
• 자식 테마 제작 도구: firebug

15. 1. 자식 테마 폴더 제작
• 경로: 워드프레스가 설치된 경로/wp-content/themes
• 폴더명: 내 마음대로! 기왕이면, 영문 닉네임?

16. 2. style.css 제작
• 자식 테마 설명 추가하기
/*
Theme Name: hooney-v6 (자식 테마 이름)
Theme URI: http: //hooney.net/theme/v6 (테마 홈페이지 주소)
Description: 멋쟁이 후니넷 버전6. (자식 테마 설명)
Author: hooney (제작자 이름)
Author URI: http: //hooney.net/ (제작자 홈페이지 주소)
Template: 부모 테마(템플릿) 이름
Version: 0.1.0
*/

17. 2. style.css 제작
/*
Theme Name: hooney-v6 (v5의 자식 테마)
…
Template: hooney-v5
*/
• 부모 테마의 style 상속하기
@import url("../twentyeleven/style.css");
• 나만의 style 추가/변경하기
#site-title a { color: #009900; }

18. 2. style.css 제작
• 부모 테마의 css
#sidebar {
float: left;
background: blue;
}
• 자식 테마의 css
#sidebar {
float: right;
background: green;
}

19. Function.php 외 탬플릿 파일 제작
• 파비콘 추가하기
– function.php를 만들어, 아래의 코드를 추가
function favicon_link() {
echo '<link rel="shortcut icon" type="image/x-icon"
href="/favicon.ico" />' . "n";
}
add_action('wp_head', 'favicon_link');

20. Function.php 외 탬플릿 파일 제작
• 파비콘 변경하기
– function.php를 만들어, 아래의 코드를 추가
if (!function_exists(‘favicon_link')) {
function favicon_link() {
echo '<link rel="shortcut icon" type="image/x-icon"
href="/favicon.ico" />' . "n";
}
}
add_action('wp_head', 'favicon_link');

21. 부모(템플릿용) 테마
• Sandbox
• Carrington
• Wp-framework
• Hybrid
• Thematic
• …

22. 자식 테마 사례: Thematic

23. 자식 테마 단점
• 프레임웍 테마 학습 필요
• 부모 테마의 상속
• 그리고, 완벽한 건 없음.

24. 나만의 워드프레스 테마 Next Step
• Custom Loop
• Custom PostType
• Custom Taxonomies
• Custom Fields

25. 감사합니다.
Q&A
i@hooney.net