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