Word press child theme

5,445 views

Published on

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

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,445
On SlideShare
0
From Embeds
0
Number of Embeds
2,563
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Word press child theme

  1. 1. 나만의 워드프레스 디자인을 위한 WordPress Child Theme i@hooney.net
  2. 2. 소개: hooney
  3. 3. 지난 내용• 서비스형 블로그의 한계• 설치형 블로그의 아름다움• 목적에 맞는 프로세스• 누가 테마를 만들 것인가?
  4. 4. 목차• 워드프레스 테마• 워드프레스 자식 테마• 자식 테마 만들기• 자식 테마 한계• 나만의 워드프레스 디자인을 위한 Next Step
  5. 5. 워드프레스 테마• 이미 너무 많음• 새로 만들기 위한 필수 요소• 테마 구조
  6. 6. 너무 많음: 공식 등록된 테마 1,452개• 워드프레스 사이트에 등록된 것만 1,452개• 상업용/개인용 포함하면 2,000개를 훨씬 넘을듯.
  7. 7. 너무 많음: 다양한 분류로 선택 가능• 색상, 열(컬럼), 폭(너비), 특성, 주제 등 40여개 분류별로 선택 가능.
  8. 8. 새로 만들기 위한 필수 요소• Contents• 웹 기술: HTML, CSS, JS• Wordpress Themplate 구조: tag, file
  9. 9. 테마 구조: 기본• 기본 Template File: – index.php – style.css• 기본 Template Tag: – loop, – title, contents, etc – comments list/ form
  10. 10. 테마 구조: 확장
  11. 11. 워드프레스 자식 테마• 개요• 장점• 만들기• 제작 도구• 사례
  12. 12. 개요• 워드프레스 자식(child) 테마는 부모(parent) 테마의 기능 이나 디자인을 상속받거나, 추가/수정/삭제할 수 있음.
  13. 13. 장점• 테마 제작 효율성 향상 – 먼저 찾고, 필요한 거 추가하는 방식의 플러그인 테마 개발 가능 – 테마 제작 시간 단축으로, 창의적 디자인 시간 확보• 부모/자식 분리로 테마 관리 쉬움 – 부모/자식 테마의 별도 업데이트 가능 – 자식1, 자식2, 자식3처럼 형제 테마 제작 가능
  14. 14. 자식 테마 만들기• 자식 테마 폴더 제작• style.css 제작• function.php 외 템플릿 파일 제작• 자식 테마 제작 도구: firebug
  15. 15. 1. 자식 테마 폴더 제작• 경로: 워드프레스가 설치된 경로/wp-content/themes• 폴더명: 내 마음대로! 기왕이면, 영문 닉네임?
  16. 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. 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. 18. 2. style.css 제작 • 부모 테마의 css #sidebar { float: left; background: blue; } • 자식 테마의 css #sidebar { float: right; background: green; }
  19. 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. 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. 21. 부모(템플릿용) 테마• Sandbox• Carrington• Wp-framework• Hybrid• Thematic• …
  22. 22. 자식 테마 사례: Thematic
  23. 23. 자식 테마 단점• 프레임웍 테마 학습 필요• 부모 테마의 상속• 그리고, 완벽한 건 없음.
  24. 24. 나만의 워드프레스 테마 Next Step• Custom Loop• Custom PostType• Custom Taxonomies• Custom Fields
  25. 25. 감사합니다. Q&Ai@hooney.net

×