21
천 영 민 (082net) 한국 워드프레스 사용자 모임 워드프레스 테마의 구조

Word camp seoul-2012-track2-2

  • Upload
    082net

  • View
    8.405

  • Download
    1

Embed Size (px)

DESCRIPTION

워드프레스 테마의 구조

Citation preview

천 영 민 (082net)

한국 워드프레스 사용자 모임

워드프레스 테마의 구조

Ⅰ 워드프레스의 출력 과정

Ⅱ 템플릿 파일 찾아가기

Ⅲ The Loop & Condition

Ⅳ 버디프레스 테마 적용

Ⅴ 워드프레스 테마 Hooks

목 차

요 청 분 석 출 력

CUSTOM QUERY

REQUEST URI

APP, API CALL

Singular

Others Query Based

Home

Archive

Static Page

Index

Optional

워드프레스의 출력 과정

Plugin – Actions and Filters

요청된 페이지의 형식 (Conditional Tags) wp-includes/query.php

HOME is_home()

is_front_page()

home.php, front-page.php

SINGULAR

ARCHIVE

is_single()

is_page()

is_attachment()

is_category()

is_date(), is_year(), is_month(), is_day(), is_time()

is_tag()

is_tax()

is_post_type_archive()

is_author()

OTHERS is_search(), is_robots(), is_404()

is_comments_popup()

is_feed() is_comment_feed()

is_trackback()

http://codex.wordpress.org/Conditional_Tags

워드프레스 템플릿 파일 wp-content/themes/twentyeleven/

BASIC style.css, index.php

comments.php

footer.php

header.php

sidebar.php

STATIC PAGE

OPTIONAL

page.php, page-my-custom.php(커스텀 템플릿)

header-{name}.php (sidebar, footer)

category-{slug}.php category-{ID}.php

tag-{slug}.php tag-{ID}.php

taxonomy-{taxonomy}-{tax_slug}.php

single-{post_type}.php

image.php, jpeg.php, image_jpeg.php

QUERY BASED archive.php, date.php, author.php, search.php,

404.php, home.php, front-page.php, paged.php,

single.php, attachment.php, comments-popup.php,

category.php, tag.php, taxonomy.php

http://codex.wordpress.org/Theme_Development#Basic_Templates

http://codex.wordpress.org/Template_Hierarchy

wp-includes/theme.php

워드프레스 루프 (The Loop) wp-includes/query.php wp-content/themes/twentyeleven/index.php

locate_template() 와 get_template_part()

템플릿 파일을 포함시키는 기본 함수

locate_template을 이용해서 자동으로 지정된 파일을 찾아 반복적으로 포함시킴

예) get_template_part( „content‟, „post‟);

functions.php (테마의 기능적인 면을 이해)

functions.php

BuddyPress Templates

http://wordpress.org/extend/plugins/bp-template-pack/

BuddyPress Template Pack을 이용하면 손쉽게 기존에 사용중인 테마에 BuddyPress를 적용할 수 있다. BuddyPress가 업그레이드 되었을 경우 혹은 자싞의 테마에 좀 더 쉽게 적용하는 TIP.

현재 테마에 BuddyPress 템플릿을 적용한 뒤에는 style.css 의 “Tags:” 부분에 buddypress를 추가 해 두는것을 잊지 말자.

bp-default 에서 필요한 파일(폴더)들 모두 복사

/wp-content/plugins/buddypress/bp-themes/bp-default

bp-default 기본 구조, 현재 테마 구조 비교 및 수정

/themes/twentyeleven/page.php

/themes/{current_theme}/activity/index.php

복사한 폴더(파일) 중에서 get_header() 를 포함하고 있는 모든 파일들을 찾아 수정 함.

bp-default CSS 스타일을 현재 테마에 적용.

4. Navigation,

6. Buddypress

두 부분의 CSS를 현재 테마에 추가

WordPress Hooks for theme templates

wp_head(), wp_footer() – wp-includes/default-filters.php

워드프레스 테마를 처음 제작할 때 주의할 점은 워드프레스 테마에 기본적으로 꼭 들어가야 하는 부분이 바로 wp_head(), wp_footer() 이다.

갂혹 header 부분의 title 부에 wp_title()을 사용하지 않고 직접 제작한 함수를 사용할 경우 Custom Query를 포함한 플러그인들과 문제를 일으킬 수 있으니 되도록 wp_title() 을 이용하도록 하자.

wp_footer() – wp-includes/admin-bar.php

Custom theme hooks

워드프레스 테마 프레임웍, 플러그인들 중에는 자싞들 만의 custom hook을 이용하기도 함.

BuddyPress > bp-default > activity > index.php

Custom hook을 쓰지않고 sidebar(widgets)를 확장해서 웎하는곳에 컨텐츠를 넣기도 함.

Themes > twentyeleven > sidebar-footer.php

워드프레스 테마에 대한 이해, 그 첫걸음은…

워드프레스의 테마를 가장 쉽고 빠르게 이해하고 응용하고 싶다면 기본으로 포함되어 있는 테

마 Twenty Ten 과 Twenty Eleven을 살펴보고 이해하는것

이 최선이다.

그 처음으로서 개인적으로 추천하는 것은 각 테마의 Child 테마를 만들어 하나 하나 수정해 보

고 실험 해 보는 것이다.

한국 워드프레스 사용자 모임 http://kopress.kr/

고맙습니다!