워드프레스 테마 시작하기

8,488 views
8,370 views

Published on

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

Published in: Design

워드프레스 테마 시작하기

  1. 1. 워드프레스 테마 시작하기<br />i@hooney.net<br />
  2. 2. 소개: hooney<br />
  3. 3. 서비스형 블로그의 한계<br />제약: 구조, 디자인, 기능<br />의존: 서비스 제공 업체<br />
  4. 4. 설치형 블로그의 아름다움<br />내 마음대로 만드는 나만의 터전<br />
  5. 5. 워드프레스 테마 기행<br />서비스형 블로그(웹 사이트)<br />설치형 블로그<br />무료(유료) 테마<br />나만의 테마<br />
  6. 6. 나만의 테마 기행<br />기본(무료) 테마를 이용한 블로그 운영<br />컨텐츠, 이용자 증가<br />인덱싱, 리스팅 등 기능필요<br />기능, 디자인 하나씩 추가<br />나만의 테마 완성<br />
  7. 7. 워드프레스 테마 구성요소<br />콘텐츠, 디자인<br />클라이언트/프론트엔드 웹 기술<br />HTML, CSS, JS<br />워드프레스 템플릿 파일, 태그, 루프<br />
  8. 8. 콘텐츠 먼저? 디자인 먼저?<br />
  9. 9. 목적에 맞는 프로세스 선택<br />
  10. 10. 워드 프레스 기본 테마<br />
  11. 11. 워드프레스 무료 테마<br />
  12. 12. 워드프레스 유료 테마<br />
  13. 13. 영감을 주는 사이트<br />
  14. 14. WSJ magazine<br />
  15. 15. The New York Times Blogs<br />
  16. 16. 영국 수상 공식 사이트<br />
  17. 17. vancouver convention centre.<br />
  18. 18. 클라이언트 웹 기술<br />구조, 표현, 동작 분리<br />구조: HTML<br />표현: CSS<br />동작: JS + DOM<br />프레임워크<br />모듈 베이스 디자인<br />
  19. 19. Kubrick<br />
  20. 20. Twenty Ten<br />
  21. 21. 테마 프레임워크<br />
  22. 22. CSS<br />HTML을 꾸미는 역할<br />레이아웃<br />박스모델<br />타이포그라피<br />컬러<br />배경(이미지)<br />
  23. 23. CSS Zen Garden<br />
  24. 24. CSS Zen Garden<br />
  25. 25. CSS Zen Garden<br />
  26. 26. CSS Zen Garden<br />
  27. 27. CSS Zen Garden<br />
  28. 28. JavaScript<br />동작, 움직임을 부여하는 역할<br />2단 네비게이션, 탭 네비게이션<br />사용자 인터렉션<br />Ajax<br />JS 라이브러리<br />JQuery<br />
  29. 29. http://jquery.com<br />
  30. 30. jquery api<br />
  31. 31. 워드 프레스 템플릿 파일<br />
  32. 32. 워드프레스 템플릿 태그<br />
  33. 33. 워드프레스 루프<br />
  34. 34.
  35. 35. header.php<br />search.php<br />home.php<br />sidebar.php<br />
  36. 36. category.php<br />sidebar.php<br />
  37. 37. 최글 글 목록: 제목 + 내용요약 + 기타..<br />
  38. 38. <?php while ( have_posts() ) : the_post(); ?><br />sidebar.php<br /><?php the_author(); ?><br /><?php the_post_thumbnail(); ?><br /><?php the_title(); ?><br /><?php the_content(); ?><br /><?php the_category(','); ?><br /><?php comments_number(); ?><br /><?php endwhile; } else { ?><br />
  39. 39. single.php<br />
  40. 40. comments.php<br />comments list<br />comments form<br />댓글 템플릿 파일: 댓글 목록 + 댓글 입력양식<br />
  41. 41. 어떤 테마를 만들 것인가?<br />
  42. 42. 누가 어떻게 테마를 만들 것인가?<br />
  43. 43. 감사합니다.Q&A<br />i@hooney.net<br />

×