워드프레스 기본개념 및 가이드

17,165 views

Published on

하자센터 허브팀에서 워드프레스 사용법을 강의한 자료(2012-11-29). 워드프레스의 배경, 개념, 기능, 실습, 제약, 참고로 구성. 개발자가 아닌 분들을 대상.

Published in: Technology
0 Comments
31 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
17,165
On SlideShare
0
From Embeds
0
Number of Embeds
1,140
Actions
Shares
0
Downloads
1
Comments
0
Likes
31
Embeds 0
No embeds

No notes for slide

워드프레스 기본개념 및 가이드

  1. 1. KAIST Social Academy 2012-11-29 To 하자센터 From 김평화워드프레스 가이드워드프레스의 기본 개념과 사례들, 그리고 간단한 사용 방법을나누고자 합니다.  영문/한글 혼용  개발자를 위한 사항 배제  CCL BY-NC-SA
  2. 2. Contents Background Case Studies Features & Functions Practice Constraints References 2
  3. 3. • Background• WordPress?• Philosophy• History• Why WordPress? 3
  4. 4. Background• WordPress? – 설치형 블로그 기반의 컨텐츠 관리 시스템(CMS) – 오픈 소스 소프트웨어 – 우수한 확장성 ⇒ 테마, 플러그인, 템플릿• Philosophy – ‘Clean, Lean, and Mean’ ⇒ 코어 시스템 vs. 확장 – ‘Working out-of-the-box’ ⇒ 기술적 지식이 거의 없는 사람을 위한 4
  5. 5. Background• History of WordPress – 2001, Originated from weblog software called b2/cafelog – 2003, The first released by Matt Mullenweg – 2004, Released official and stable version (1.0) and became popular ⇒ “MovableType” changed to get license fee – 2010, Market share of 55.5% in the CMS market ⇒ by W3Techs – 2011, Over 14.7% top 1 million websites and manages 22% of all new websites ⇒ by Alexa Internet – Now 2012, Version 3.5.2 released – 10년 이상의 기간 동안 세계의 유수한 개발자 수 천명의 작품 ⇒ 테마와 플러그인 개발자까지 합친다면, 수 만명의 개발자가 참여 – 블로그(Weblog)로 시작하였지만, 현재는 컨텐츠 관리 시스템(CMS) 중에 1위 – 국내에서는 최근 워드프레스의 가치가 인정되고 있음 5
  6. 6. BackgroundWhy WordPress? 1. 누구나 쉽게, 무료로 사용이 가능하다. ⇒ 오픈 소스 (GPL v2) – Free Software vs. Open Source Software ⇒ 과거에는 서비스형 블로그만이 무료로 사용할 수 있는 컨텐츠 관리 시스템이었음 – 서비스형 블로그 vs. 설치형 블로그 – 무료 설치형 CMS로 발전 ⇒ 코딩이 없이, 메뉴 선택 방법으로 설치와 셋팅이 가능 6
  7. 7. BackgroundWhy WordPress? 2. 무수한 테마와 플러그인이 존재하고, 개발 커뮤니티가 활발하다. ⇒ 높은 확장성과 사용성 ⇒ 대부분의 상상할 수 있는 기능들이 이미 개발되어 있음 – 커스터마이즈의 문제 ⇒ 공식 사이트에 등록된 플러그인만 2만개가 넘으며, 테마는 사실상 셀 수 없음 – 좋은 테마와 플러그인을 찾을 수 있는 안목이 중요 - Types of Themes • Blog • Gallery • Portfolio - Types of Plugins • Magazine • Core Functionality • Business • User Role Management • e-Commerce • BBS and Forum • Social Plugin Connection • eCommerce Support • Backup • Optimize • SEO 7
  8. 8. BackgroundWhy WordPress? 3. 각종 소셜 플러그인들이 고립된 섬(내 사이트)에 다리를 놓아준다. ⇒ 대부분의 SNS는 소셜 플러그인을 가지고 있음 – 페이스북 : 로그인, 코멘트, 라이크 박스, 라이크버튼 등 – 트위터 : 로그인, 트윗 버튼 등 – 핀터레스트 : 핀잇 버튼 등 – 구글+ : 로그인, +1 버튼 등 ⇒ 사용자 친구관계(Social)를 그대로 워드프레스 사이트에서 활용 가능 8
  9. 9. BackgroundWhy WordPress? 4. 각종 클라우드 서비스가 트래픽을 대신 감당해준다. ⇒ 다양한 클라우드 서비스 – 이미지 : 피카사, 플리커 등 – 비디오 : 유트브, 비메오 등 – 문서 : 슬라이드쉐어 등 – 파일 : 구글 드라이브, 드랍박스 등 ⇒ 트래픽을 대신 감당해준다는 것은 트래픽으로 발생하는 비용이 무료가 된다는 의미 – 컨텐츠 생산자(워드프레스)  망사업자  컨텐츠 소비자(사용자) 9
  10. 10. • Case Studies• Types of Themes• Other Considerations 10
  11. 11. Case Studies • Types of Themes – Basis : Blog, Gallery, Portfolio, .. – Application : Magazine, Business, e-Commerce, ..more • Other Considerations – Free vs. Premium – Responsive – OnePage – Simple, Minimal 11
  12. 12. Case StudiesTypes of Themes• Basis : Blog Themes – Basic format ⇒ Header, Content, Sider, Footer, ect.  Showcase http://www.criaturacreativa.com/blog/ http://www.bike4life.kr/ 12
  13. 13. Case StudiesTypes of Themes• Basis : Gallery Themes – Content Views ⇒ Images or videos list (Grid, Masonry, etc.)  Showcase http://bestwebgallery.com/ http://cssremix.com/ 13
  14. 14. Case StudiesTypes of Themes• Basis : Portfolio Themes – Content Views ⇒ Blog with work gallery (Grid, Masonry, etc)  Showcase http://crowdfavorite.com/portfolio/ http://mattbrett.com/work/ 14
  15. 15. Case StudiesTypes of Themes• Application : Magazine Themes – Magazine style main screen – Customized posting blogs  Showcase http://www.kineda.com/ http://www.heroyalmajesty.ca/ 15
  16. 16. Case StudiesTypes of Themes• Application : Business Themes – Main screen for introducing products and brand – Most of customized pages and one blog  Showcase http://www.wolverineworldwide.com/ http://www.peer1.com/ 16
  17. 17. Case StudiesTypes of Themes• Application : eCommerce Themes – Main screen for introducing products and brand – Customized posting blogs with payment  Showcase http://www.converse.com/ http://www.uniqlo.com/us/ 17
  18. 18. Case StudiesOther Considerations• Free vs. Premium • Responsive – 무료 테마는 기능이 제한적이고 많은 – 다양한 스크린 크기에 능동적으로 반 버그를 포함 응하여 최적의 화면 제공 – 유료 테마는 가격 이상의 기능과 가 – N스크린에 대비 가능 치를 지님 (보통 $10~60) 18
  19. 19. Case StudiesOther Considerations• OnePage • Simple, Minimal – 한 페이지에 사이트의 모든 기능이 – 기능이나 형태를 단순 및 간소화 나열되는 형태 ex) 메타데이터(태그,저자 등)를 없앰 – 단순히 디자인을 심플하게 하는 경우 도 있음 19
  20. 20. • Features & Functions 20
  21. 21. Features & Functions 홈페이지와 대시보드(Dashboard) 테마(Theme)와 플러그인(Plugin) 메뉴(Menu)와 위젯(Widget) 페이지(Page)와 글(Post) 카테고리(Category)와 태그(Tag) 사용자(User) 관리 댓글(Comment) 관리 미디어(Media) 관리 21
  22. 22. Features & Functions• 홈페이지와 대시보드(Dashboard) – 사용자 영역인 홈페이지와 관리자 영역인 대시보드로 분리 – 로그인을 하면 관리바(Adminbar)가 생김 22
  23. 23. Features & Functions• 테마(Theme)와 플러그인(Plugin) – 외모(Appearance)의 하위 메뉴인 테마는 사이트의 외관 뿐 아니라, 모든 기능을 담당 – 플러그인은 특정 기능을 사이트에 추가하는 역할 – 테마와 플러그인 모두 온라인 상에서 검색이 가능하고 클릭만으로 설치됨 23
  24. 24. Features & Functions• 메뉴(Menu)와 위젯(Widget) – 메뉴 : 사용자 마음대로 메뉴를 지정 ⇒ 드래그 앤 드랍 방식으로 직관적인 설정 – 위젯 : 테마가 지원하는 구역마다 특수한 기능을 하는 위젯을 배치 ⇒ Sidebar 영역, Footer 영역 등에 미리 지정된 위젯을 드래그 앤 드랍 방식으로 배치 24
  25. 25. Features & Functions• 페이지(Page)와 글(Post) – 페이지(Page) : 사이트를 구성하는 하나 하나의 페이지 ⇒ 페이지끼리 계층구조를 가짐 ⇒ 페이지 템플릿(Page Template) 기능으로 기 지정된 형식을 재사용 – 글(Post) : 편집자에 의해 작성되는 기사(Article)에 해당 ⇒ 글은 카테고리에 소속되고, 카테고리가 계층구조를 지님 ⇒ 글 형식(Post Format) 기능으로 기 지정된 형식을 재사용 < Page > < Post > Subject Home Math Science Subject Types About Member Contact Add Sub Body 25
  26. 26. Features & Functions• 카테고리(Category)와 태그(Tag) – 글(Post)을 분류하기 위한 수단 – 카테고리 : 하나의 글은 복수개의 카테고리에 소속될 수 있으며, 계층 구조를 지님 – 태그 : 하나의 글은 복수개의 태그를 지닐 수 있으며, 글을 나타내는 자유 형식의 키워 드를 사용 Subject Math Science Subject Types Add Sub Body Leaning Elementary Human 26
  27. 27. Features & Functions• 사용자(User) 관리 – 사용자의 가입 및 관리 기능 제공 – 사용자 권한 구분 : 관리자 / 편집자 / 글쓴이 / 후원자 / 구독자 ⇒ 컨텐츠 관리를 위하여 “편집 권한” 기능만 제공 ⇒ 대부분의 커뮤니티 지향 시스템은 구독자의 권한이 분리된다는 점과 상이 – 플러그인으로 해결 가능 27
  28. 28. Features & Functions• 댓글(Comment) 관리 – 계층적인(대화형) 댓글 시스템 제공 – 댓글 중재(Comment Moderation) 기능 제공 ⇒ 사이트 전체에 반영된 댓글을 한눈에 볼 수 있고, 이를 관리함 28
  29. 29. Features & Functions• 미디어(Media) 관리 – 라이브러리 : 이미지, 비디오 뿐만 아니라 모든 종류의 파일을 보관 ⇒ 각 미디어의 정보를 수정하고, URL을 얻어올 수 있음 ⇒ 특히, 이미지에 특화되어 있음 – 글 작성 중에 업로드한 미디어도 라이브러리에 통합됨 ⇒ 미디어 메뉴에서 업로드한 것과 글 작성 중 업로드한 것의 차이는 글 내부의 “갤러리”로 배속 되는지의 여부 29
  30. 30. • Practice 30
  31. 31. Practice• 실전 연습 1 – 글 작성하기 ⇒ 글 – Add New → 제목 – 고유주소 – 글쓰기 - 버튼들 – 보여주기/HTML – 화면 옵션(토론, 글쓴 이, Revisions, Categories, Tags) – 공개하기 – 이미지가 있는 글 작성하기 ⇒ 글 – Add New → 제목 – 글쓰기 – 업로드/넣기(Faster Insert) – 업로드(3종류) – 보기(링크, 정 렬, 크기) – 본문 삽입 – 특성 이미지(Use as featured image) – 이미지 고치기 – 공개하기 – 영상 임배드(Embed)가 있는 글 작성하기 ⇒ 글 – Add New → 제목 – 글쓰기 – 비메오 영상 주소 붙여넣기 (또는 HTML 소스 붙여넣기) – 특 성 이미지 설정 – 공개하기 – 카테고리 관리하기 ⇒ 글 – Categories → 이름 – 슬러그 – 상위 – 설명 – 새 분류 추가하기 31
  32. 32. Practice• 실전 연습 2 – 페이지 만들기 ⇒ 페이지 – Add New → 글 작성과 동일 – 페이지 속성(상위, 템플릿) – 공개하기 – 메뉴 관리하기 ⇒ 외모 – Menus → +(새 메뉴) – 메뉴에 넣을 수 있는 아이탬(Page, Categories, 사용자정의 링크) – 이름 및 계층 순서 – 메뉴 저장 - 테마 위치 – 저장하기 – 위젯 관리하기 ⇒ 외모 – 위젯 → 사용할 수 있는 위젯(검색, 글목록, 분류, 텍스트 등) – 테마의 위젯 위치(Blog Sidebar, Portfolio Sidebar, Page Sidebar, Home Widget, Footer Widget 등) 32
  33. 33. • Constraints 33
  34. 34. Constraints – English Culture Based ⇒ 영어 ⇒ 글 작성 및 컨텐츠 관리하는 방법의 차이 – Publish Process ⇒ 다양한 테마나 플러그인도 문화적으로 다른 형태를 지님 – Blog & CMS Based Contents ⇒ 컨텐츠 관리엔 강하지만, 사용자 관리에는 약함 Users – 기본 기능에는 커뮤니티를 위한 기능이 전무함 – 소셜 플러그인으로 커뮤니티를 위한 기본 기능이 제공 되지만, 전문 커뮤니티 시스템으로써는 부족 ⇒ 이를 극복하기 위하여 많은 노력이 요구됨 Extendability – Forum, BuddyPress – Coding Skill Required ⇒ 사소한 디자인을 위해서 – CSS, Javascript ⇒ 문화적으로 다른 형태를 한국화 하기 위해서 – Localization ⇒ 무료 버전이기 때문에 … 34
  35. 35. • References• Docs & Books• Reference Sites• Resource Sites 35
  36. 36. References• Docs & Books – Theodoros Polychniatis and others. (2010). WordPress: Software Architecture. Utrecht University. – Hal Stern, David Damstra, Brad Williams. (2010). Professional WordPress Design and Development. Wiley Publishing.• Reference Sites – Wikipedia “WordPress” : http://en.wikipedia.org/wiki/Wordpress – WordPress Official : http://wordpress.org/ – Best WordPress Sites ⇒ http://ndesign-studio.com/blog/best-wordpress-sites ⇒ http://resources.savedelete.com/20-best-and-awesome-wordpress-resources.html• Resource Sites – Official, Themes(free), Plugins, Showcases, Docs, Forum : http://wordpress.org/ – Themes : http://themeforest.net/ – Themes(free), Plugins, Guide, Tips : http://wplift.com/ – Themes(free), Plugins, Tutorial, Tips : http://wp.tutsplus.com/ – Themes, Tips, Tutorial, Services : http://www.wpdesigner.com/ – Themes, Plugins, Tutorial, Docs, Forum : http://themehybrid.com/ – Themes(free) : http://www.freewpthemes.net/ 36

×