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

i@hooney.net

소개 : 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

감사합니다 .

Q&A

i@hooney.net