52
WordPress Theme By 임임임 @ssamture [email protected] http://ssamture.net WordPress Meetup 2012.11.17 (http://kopress.kr)

WordPress Meetup for Theme

Embed Size (px)

DESCRIPTION

한국 워드프레스 사용자 모임이 주최한 워드프레스 미트업에서 테마를 주제로 강의한 PPT 자료입니다.

Citation preview

Page 1: WordPress Meetup for Theme

WordPress Theme

By 임민형 @[email protected]

http://ssamture.net

WordPress Meetup2012.11.17

(http://kopress.kr)

Page 2: WordPress Meetup for Theme

미리보기

워드프레스 테마테마 구조테마 디자인템플릿

Page 3: WordPress Meetup for Theme

워드프레스 테마

Page 4: WordPress Meetup for Theme

워드프레스 테마

워드프레스 사이트의 내용을 그래픽 인터페이스로 생성하기 위한 파일들의 모음기본 소프트웨어 수정 없이 사이트가 표시되는 방식을 수정

Page 5: WordPress Meetup for Theme

워드프레스 테마

wordpress.org/extend/theme

Page 6: WordPress Meetup for Theme

워드프레스 테마

wootehems.com

Page 7: WordPress Meetup for Theme

워드프레스 테마

themetrust.com

Page 8: WordPress Meetup for Theme

워드프레스 테마

www.studiopress.com

Page 9: WordPress Meetup for Theme

워드프레스 테마

www.studiopress.com

Page 10: WordPress Meetup for Theme

워드프레스 테마

themeforest.net

Page 11: WordPress Meetup for Theme

워드프레스 테마

유료테마 구입 전– 지원하고 있는 기능 살펴보기– 미리보기 살펴보기– 구축하고자 하는 컨텐츠와 비교

Page 12: WordPress Meetup for Theme

워드프레스 테마

테마의 커스터마이징차일드 테마 개발테마 개발

Page 13: WordPress Meetup for Theme

워드프레스 테마의 구성

Page 14: WordPress Meetup for Theme

워드프레스 테마의 구성

/wp-content/themes2 개의 템플릿(style.css + index.php)

Page 15: WordPress Meetup for Theme

템플릿

Page 16: WordPress Meetup for Theme

템플릿

PHP 소스 파일사이트 요청자에게 HTML 로 출력워드프레스 코어는 템플릿 파일을 조각처럼 맞춰 사이트 방문자에게 제공

Page 17: WordPress Meetup for Theme

템플릿 계층 구조

Page 18: WordPress Meetup for Theme

템플릿 요청 흐름

카테고리 목록 요청 시

Page 19: WordPress Meetup for Theme

차일드 테마

Page 20: WordPress Meetup for Theme

차일드 테마

원본 테마를 상속필요한 부분만 수정하거나 추가

Page 21: WordPress Meetup for Theme

차일드 테마

차일드 테마가 상속 받을 부모 테마 템플릿 지정

Page 22: WordPress Meetup for Theme

차일드 테마

Page 23: WordPress Meetup for Theme

차일드 테마

Page 24: WordPress Meetup for Theme

차일드 테마

Page 25: WordPress Meetup for Theme

차일드 테마

Page 26: WordPress Meetup for Theme
Page 27: WordPress Meetup for Theme

일반적인 워드프레스 디자인

Page 28: WordPress Meetup for Theme

워드프레스 디자인

header

(nav)

content sidebar

footer

Page 29: WordPress Meetup for Theme

워드프레스 디자인header

content

sidebar

footer

Page 30: WordPress Meetup for Theme

HTML 만들기title

sidebar

content

Comment list

Comment form

Page 31: WordPress Meetup for Theme

템플릿

Page 32: WordPress Meetup for Theme

템플릿 파일 (index.php)

Index.php header.php

sidebar.php

footer.php

Page 33: WordPress Meetup for Theme

템플릿 파일 (single.php)

header.php

sidebar.php

footer.php

single.php

comment.php

Page 34: WordPress Meetup for Theme

index.php 예제

single_cat_title()

the_post_thumbnail()

the_title()

the_exerpt()

the_category(),the_author(), the_date()

Page 35: WordPress Meetup for Theme

Single.php 예제

the_content()

Page 36: WordPress Meetup for Theme

functions.php

테마에서 사용하는 함수들을 위한 파일테마 활성화 시 자동으로 로드썸네일 활성화메뉴 활성화사이드바사용자 정의 배경화면 등

Page 37: WordPress Meetup for Theme

functions.php

register_sidebarregister_nav_menusadd_theme_support( ‘post-thumbnails’ )

Page 38: WordPress Meetup for Theme

404.php

잘못된 요청 시 보여주는 템플릿해당 파일이 없다면 index.php 호출단순하지만 꼭 필요한 템플릿 파일

Page 39: WordPress Meetup for Theme

그 밖의 템플릿 파일

comments.phppage.phpfront-page.phphome.phpsingle.phpcategory.phptag.phparchive.php 등

Page 40: WordPress Meetup for Theme

page 템플릿 활용

특별한 기능을 제공할 때특별한 디자인을 제공 할 때

Page 41: WordPress Meetup for Theme

page 템플릿 활용

템플릿을 위한 PHP 파일 생성 후 상단에 기재Teplate name : 템플릿 명유의 사항WP V 3.4 미만 에서는 테마 상위 폴더에 위치- / 테마 / 템플릿 파일 .php(O)- / 테마 / 서브디렉토리 / 템플릿 파일 .php(x)

Page 42: WordPress Meetup for Theme

page 템플릿 활용

템플릿을 위한 PHP 파일 생성 후 상단에 기재Teplate name : 템플릿 명유의 사항WP V 3.4 미만 에서는 테마 상위 폴더에 위치- / 테마 / 템플릿 파일 .php(O)- / 테마 / 서브디렉토리 / 템플릿 파일 .php(x)

Page 43: WordPress Meetup for Theme

템플릿 태그

Page 44: WordPress Meetup for Theme

일반적인 템플릿 태그

get_headerget_footerget_sidebarget_template_partget_search_formbloginfowp_title

Page 45: WordPress Meetup for Theme

Author 태그

the_author

Page 46: WordPress Meetup for Theme

Category 태그

The_category, The_tags

Page 47: WordPress Meetup for Theme

Comment 태그

Wp_list_commentsComment_form

Page 48: WordPress Meetup for Theme

Content 태그

The_permalinkThe_titleThe_contentThe_excerptThe__post_thumbnail

Page 49: WordPress Meetup for Theme

커스텀 포스트 타입을 위한 템플릿

Page 50: WordPress Meetup for Theme

커스텀 포스트 타입을 위한 템플릿

single-{post_type}.phparhcive-{post_type}.php

single.php single-{post_type}.php

Page 51: WordPress Meetup for Theme

대화 – 질문 - 토론

Page 52: WordPress Meetup for Theme

끝 , 감사합니다 .

한국 워드프레스 사용자 모임 – 임민형 (ssamture)