워드프레스 테마 시작하기

43
워워워워워 워워 워워워워 [email protected]

Upload: hooney-jo

Post on 10-Jun-2015

7.926 views

Category:

Design


2 download

DESCRIPTION

이 프리젠테이션은 워드프레스 캠프 서울 2010에서 발표한 자료입니다.

TRANSCRIPT

Page 1: 워드프레스 테마 시작하기

워드프레스 테마 시작하기

[email protected]

Page 2: 워드프레스 테마 시작하기

소개 : hooney

Page 3: 워드프레스 테마 시작하기

서비스형 블로그의 한계

• 제약 : 구조 , 디자인 , 기능

• 의존 : 서비스 제공 업체

Page 4: 워드프레스 테마 시작하기

설치형 블로그의 아름다움

• 내 마음대로 만드는 나만의 터전

Page 5: 워드프레스 테마 시작하기

워드프레스 테마 기행

• 서비스형 블로그 ( 웹 사이트 )

• 설치형 블로그

• 무료 ( 유료 ) 테마

• 나만의 테마

Page 6: 워드프레스 테마 시작하기

나만의 테마 기행

• 기본 ( 무료 ) 테마를 이용한 블로그 운영

• 컨텐츠 , 이용자 증가

• 인덱싱 , 리스팅 등 기능 필요

• 기능 , 디자인 하나씩 추가

• 나만의 테마 완성

Page 7: 워드프레스 테마 시작하기

워드프레스 테마 구성요소

• 콘텐츠 , 디자인

• 클라이언트 / 프론트엔드 웹 기술– HTML, CSS, JS

• 워드프레스 템플릿 파일 , 태그 , 루프

Page 8: 워드프레스 테마 시작하기

콘텐츠 먼저 ? 디자인 먼저 ?

Page 9: 워드프레스 테마 시작하기

목적에 맞는 프로세스 선택

Page 10: 워드프레스 테마 시작하기

워드 프레스 기본 테마

Page 11: 워드프레스 테마 시작하기

워드프레스 무료 테마

Page 12: 워드프레스 테마 시작하기

워드프레스 유료 테마

Page 13: 워드프레스 테마 시작하기

영감을 주는 사이트

Page 14: 워드프레스 테마 시작하기

WSJ magazine

Page 15: 워드프레스 테마 시작하기

The New York Times Blogs

Page 16: 워드프레스 테마 시작하기

영국 수상 공식 사이트

Page 17: 워드프레스 테마 시작하기

vancouver convention centre.

Page 18: 워드프레스 테마 시작하기

클라이언트 웹 기술

• 구조 , 표현 , 동작 분리– 구조 : HTML

– 표현 : CSS

– 동작 : JS + DOM

• 프레임워크

• 모듈 베이스 디자인

Page 19: 워드프레스 테마 시작하기

Kubrick

Page 20: 워드프레스 테마 시작하기

Twenty Ten

Page 21: 워드프레스 테마 시작하기

테마 프레임워크

Page 22: 워드프레스 테마 시작하기

CSS

• HTML 을 꾸미는 역할– 레이아웃

– 박스모델

– 타이포그라피

– 컬러

– 배경 ( 이미지 )

Page 23: 워드프레스 테마 시작하기

CSS Zen Garden

Page 24: 워드프레스 테마 시작하기

CSS Zen Garden

Page 25: 워드프레스 테마 시작하기

CSS Zen Garden

Page 26: 워드프레스 테마 시작하기

CSS Zen Garden

Page 27: 워드프레스 테마 시작하기

CSS Zen Garden

Page 28: 워드프레스 테마 시작하기

JavaScript

• 동작 , 움직임을 부여하는 역할– 2 단 네비게이션 , 탭 네비게이션

– 사용자 인터렉션

– Ajax

• JS 라이브러리– JQuery

Page 29: 워드프레스 테마 시작하기

http://jquery.com

Page 30: 워드프레스 테마 시작하기

jquery api

Page 31: 워드프레스 테마 시작하기

워드 프레스 템플릿 파일

Page 32: 워드프레스 테마 시작하기

워드프레스 템플릿 태그

Page 33: 워드프레스 테마 시작하기

워드프레스 루프

Page 34: 워드프레스 테마 시작하기
Page 35: 워드프레스 테마 시작하기

header.php

home.php sidebar.php

search.php

Page 36: 워드프레스 테마 시작하기

category.php sidebar.php

Page 37: 워드프레스 테마 시작하기

최글 글 목록 : 제목 + 내용요약 + 기타 ..

Page 38: 워드프레스 테마 시작하기

<?php while ( have_posts() ) : the_post(); ?>

<?php the_post_thumbnail(); ?>

<?php the_title(); ?>

<?php the_content(); ?>

<?php comments_number(); ?>

<?php the_category(','); ?>

<?php the_author(); ?>

<?php endwhile; } else { ?>

sidebar.php

Page 39: 워드프레스 테마 시작하기

single.php

Page 40: 워드프레스 테마 시작하기

comments.php

comments list

comments form

댓글 템플릿 파일 : 댓글 목록 + 댓글 입력양식

Page 41: 워드프레스 테마 시작하기

어떤 테마를 만들 것인가 ?

Page 42: 워드프레스 테마 시작하기

누가 어떻게 테마를 만들 것인가 ?

Page 43: 워드프레스 테마 시작하기

감사합니다 .

Q&A

[email protected]