Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

워드프레스를 이용한 모바일웹 개발

10,962 views

Published on

WordPress Meetup 2011

Published in: Technology
  • Be the first to comment

워드프레스를 이용한 모바일웹 개발

  1. 1. WordPress Meetup 2011 워드프레스를 이용한 모바일웹 개발 임민형 @ssamture http://ssamture.net ssamture@gmail.comPowerPoint template by Lester Chan http://lesterchan.net/
  2. 2. Overview• 모바일웹 이란?• 사용자를 위한 워드프레스 모바일웹• 개발자를 위한 워드프레스 모바일웹WordPress Meetup 2011 [2]
  3. 3. 모바일웹이란?WordPress Meetup 2011 [3]
  4. 4. 모바일웹이란?• 이동 단말기에서 일반 웹에 접속할 수 있는 브라우징 기술• 이동통신, 홈 네트워크 등에 사용되는 각종 단말기에서 유선 웹사이트에 접속 할 수 있는 기술WordPress Meetup 2011 [4]
  5. 5. 모바일웹이란?• 모바일 웹 사이트란 이러한 기술을 이용해 모바일 단말기에 최적화된 사이트• PC와 달리 모바일 단말기의 해상도가 낮아 최적화 되지 않으면 제대로된 서비스 이용이 어려움WordPress Meetup 2011 [5]
  6. 6. 모바일웹이란?• 스마트폰 사용자 2천만명 돌파• 스마트폰을 통한 인터넷 사용률 증가 <스마트폰 사용시 인터넷 이용시간> <스마트폰 사용시 인터넷 접속 경로> <출처:한국인터넷진흥원-2011년 상반기 스마트폰 이용실태조사> <출처:한국인터넷진흥원-2011년 상반기 스마트폰 이용실태조사>WordPress Meetup 2011 [6]
  7. 7. 사용자를 위한 워드프레스 모바일웹WordPress Meetup 2011 [7]
  8. 8. 사용자를 위한 워드프레스 모바일웹• WordPress Mobile Pack• WPtouch• WordPress Mobile Edition• MobilePress• WordPress APPWordPress Meetup 2011 [8]
  9. 9. WordPress Mobile Pack• 소개 – 휴대폰 도메인인 .mobi 주소를 관리하는 .dotMobi 사에서 개발이 시작됨 – 무료로 사용 가능WordPress Meetup 2011 [9]
  10. 10. WordPress Mobile Pack• 주요기능 – 접속환경(Mobile, Desctop등)에 따라 자동으로 환경에 맞는 웹페이지를 보여줌 – 화면 사이즈에 맞게 이미지 리사이징 – Mobile Device에서 미디어 제거 – Mobile version의 WordPress admin panel 제공WordPress Meetup 2011 [ 10 ]
  11. 11. WordPress Mobile Pack• 설치( < Version 2.7 ) – http://wordpress.org/extend/plugins/WordPress Meetup 2011 [ 11 ]
  12. 12. WordPress Mobile Pack• 설치( < Version 2.7 ) – “WordPress Mobile Pack” 검색WordPress Meetup 2011 [ 12 ]
  13. 13. WordPress Mobile Pack• 설치( < Version 2.7 ) – WORDPRESS/wp-content/plugins 에 다운로드 후 압축 해제WordPress Meetup 2011 [ 13 ]
  14. 14. WordPress Mobile Pack• 설치( >= Version 2.7 ) – Admin panel -> Plugins -> Add NewWordPress Meetup 2011 [ 14 ]
  15. 15. WordPress Mobile Pack• 설치( >= Version 2.7 ) – “WordPress Mobile Pack” 검색WordPress Meetup 2011 [ 15 ]
  16. 16. WordPress Mobile Pack• 설치( >= Version 2.7 ) – 설치하기WordPress Meetup 2011 [ 16 ]
  17. 17. WordPress Mobile Pack• 설치( >= Version 2.7 ) – 설치 완료 후 적용WordPress Meetup 2011 [ 17 ]
  18. 18. WordPress Mobile Pack• 적용WordPress Meetup 2011 [ 18 ]
  19. 19. WordPress Mobile Pack• 설정WordPress Meetup 2011 [ 19 ]
  20. 20. WordPress Mobile Pack 홈으로 바로가기 메뉴 추가 여부 • Mobile Theme 메인에 표시할 포스트 갯수포스트 표시 방식-제목만-첫번째 포스트는 제목과 내용일부, 그 이외에는 제목만-모든 포스트의 제목과 내용일부이미지를 스크린 사이즈에 맞게 사이즈 조절 WordPress Meetup 2011 [ 20 ]
  21. 21. WordPress Mobile Pack• 설정(Mobile Switcher)BOTH(browser detection and domain mapping): HTTP 접속여부를 확인 후 해당Browser detection : HTTP headers 를 통하여 모바일 headers 를 통하여 모바일Disabled : 모바일 기기로 접속 해도 기존 그대로 보여준다.d기기에 맞게확인 후 해당 기기에 맞게 보여주거나, 도메인에 따라 보여줌접속여부를 보여줌.dWordPress Meetup 2011 [ 21 ]
  22. 22. WordPress Mobile Pack• 위젯 – Mobile Switcher Link – Mobile Barcode – Mobile Ads – MpexoWordPress Meetup 2011 [ 22 ]
  23. 23. WordPress Mobile Pack• Mobile Switcher LinkWordPress Meetup 2011 [ 23 ]
  24. 24. WordPress Mobile Pack• Mobile BarcodeWordPress Meetup 2011 [ 24 ]
  25. 25. WordPress Mobile Pack• AnalyticsWordPress Meetup 2011 [ 25 ]
  26. 26. WordPress Mobile Pack• Mobile Admin panelWordPress Meetup 2011 [ 26 ]
  27. 27. WPtouch• 소개 – BraveNewCode Inc. 에서 개발 – WordPress 의 플러그인을 통해서 사용할 수 있는 무료버전 – 개발자의 웹사이트(www.bravenewcode.com)에서 받을 수 있는 유료버전 -> Wptouch Pro – 유료버전은 관리자툴 등의 추가 기능 지원WordPress Meetup 2011 [ 27 ]
  28. 28. WPtouch• 소개 – WebKit 기반 브라우저 지원하고 터치스크린 환경의 모바일 디바이스를 위한 인터페이스를 지원 – Ex)아이폰, 안드로이드, 블랙베리 등 – WebKit 기반이 아닌 브라우저에서는 지원하지 않음 – WordPress Mobile Pack(이하:WMP) 과 같이 사용하여, Wptouch는 터치스크린에 대한 UI을 WMP는 그 이외의 UI를 제공하도록 사용가능.WordPress Meetup 2011 [ 28 ]
  29. 29. WPtouch• 설치 – WordPress Mobile Pack (기타 플러그인들)과 동일한 방법WordPress Meetup 2011 [ 29 ]
  30. 30. WPtouch• Wptouch 테마 – 터치스크린에 최적화된 테마 제공 – iOS 스타일로 구성 – 상단 타이틀바와 페이지 탭 메뉴에 아이콘을 삽입할 수 있음WordPress Meetup 2011 [ 30 ]
  31. 31. WPtouch• Wptouch 테마 – 상단에는 드롭-다운 메뉴를 두어 사용자가 쉽게 사이트의 태그 및 카테고리를 탐색 할 수 있음WordPress Meetup 2011 [ 31 ]
  32. 32. WPtouch• Wptouch 테마 – Post 리스트는 기본적으로 날짜아이콘, 제목, 메타데이터로 표시 – 날짜아이콘에는 해당 post의 comment 수를 보여줌 – 리스트의 확장을 통해 미리보기가 가능함WordPress Meetup 2011 [ 32 ]
  33. 33. WPtouch• Wptouch 테마 – 상세 페이지에서는 해당 링크를 메일을 통해 공유하거나 트위터, 페이스북에 공유하는 버튼이 제공 – 북마크사이트에 북마크를 할 수 있는 버튼 제공 – Comment의 확인과 등록WordPress Meetup 2011 [ 33 ]
  34. 34. WPtouch• 설정 – General Settings – Advanced Options – Push Notification Options – Style & Color Options – Default & Custom Icon Pool – Logo Icon // Menu Items & Pages Icons – Adsense, Stats & Custom copeWordPress Meetup 2011 [ 34 ]
  35. 35. WPtouch• General SettingsWordPress Meetup 2011 [ 35 ]
  36. 36. WPtouch• General Settings – 특정 카테고리나 태그는 제외WordPress Meetup 2011 [ 36 ]
  37. 37. WPtouch• General Settings – 텍스트 정렬 <Left> <Full>WordPress Meetup 2011 [ 37 ]
  38. 38. WPtouch• General Settings <Calendar Icons>WordPress Meetup 2011 [ 38 ]
  39. 39. WPtouch• Advanced Options - 화면의 줌인/아웃 허용 여부 - 카테고리 또는 태그 탭 메뉴의 추가 여부 - 검색 창 추가 여부 - 로그인 탭 메뉴 추가 여부 - 댓글의 허용여부 등의 설정 - 일부 기능은 해당 플러그인이 활성화 되어 있어야 함.WordPress Meetup 2011 [ 39 ]
  40. 40. WPtouch• Style & Color OptionsWordPress Meetup 2011 [ 40 ]
  41. 41. WPtouch• Default & Custom Icon Pool – 사용자 정의 아이콘 관리 – 등록 및 제거WordPress Meetup 2011 [ 41 ]
  42. 42. WPtouch• Logo / Home Screen Icon & Default Menu ItemsWordPress Meetup 2011 [ 42 ]
  43. 43. 그외• WordPress Mobile Edition• MobilePress• WordPress Mobile APP – iOS, Android, BlackBerry, Windows Phone 7, Nokia, WebOSWordPress Meetup 2011 [ 43 ]
  44. 44. 개발자를 위한 워드프레스 모바일웹WordPress Meetup 2011 [ 44 ]
  45. 45. 모바일웹 개발 가이드• 모바일웹 테마 개발 준비 – WP_ROOT/wp-content/themes/사용자테마디렉토리 – style.css 생성 – 테마 정보 주석 삽입WordPress Meetup 2011 [ 45 ]
  46. 46. 모바일웹 개발 가이드• 임의의 내용으로 index.php 생성 후 테마 확인WordPress Meetup 2011 [ 46 ]
  47. 47. 모바일웹 개발 가이드• Headers and Footers – header.php 와 footer.php 파일을 생성 <header.php> <footer.php> – 각각의 파일은 theme API 인 get_header()와 get_footer()에 의해 사용WordPress Meetup 2011 [ 47 ]
  48. 48. 모바일웹 개발 가이드• Theme API를 이용하여 index.php에서 include get_header() -> header.php get_footer() -> footer.phpWordPress Meetup 2011 [ 48 ]
  49. 49. 모바일웹 개발 가이드 • header 에 hook(“wp_head”) 삽입- 사전적 정의 : (갈)고리, 걸이; (낚싯바늘로) 낚다 등- S/W 관점 : 각종 프로그램에서 발생하는 기능호출, 메시지, 이벤트 등을 중간에서바꾸거나 가로채는 기술-워드프레스에서 hook은 action 과 filterFunction Refrence / wp_head-</head> 전에 삽입-사이트의 styles, scripts 그리고 meta tags-Plugin에서 “wp_head” hook tag를 사용하고 있다면 이 부분에 적용-do_action(„wp_head‟); WordPress Meetup 2011 [ 49 ]
  50. 50. 모바일웹 개발 가이드 • footer 에 hook(“wp_footer”) 삽입Function Refrence / wp_footer-</body> 전에 삽입-JavaScript files-Plugin에서 “wp_footer” hook tag를 사용하고 있다면 이 부분에 적용-do_action(„wp_footer‟); WordPress Meetup 2011 [ 50 ]
  51. 51. 모바일웹 개발 가이드• 테마 stylesheet를 문서에 적용WordPress Meetup 2011 [ 51 ]
  52. 52. 모바일웹 개발 가이드• Post Lists – 모든 요청은 별도의 파일이 없는 한 index.php을 통해 콘텐츠 제공 – 요청 콘텐츠의 종류에 따라 계층 구조의 파일을 통해 콘텐츠 제공 – 예를 들어, 특정 카테고리의 게시물을 보는 사용자가 있다면 “category.php” 파일을 통해 콘텐츠를 제공하며, 해당 파일이 존재하지 않으면 “archive.php” 파일을 통해 콘텐츠를 제공WordPress Meetup 2011 [ 52 ]
  53. 53. 모바일웹 개발 가이드• Post Lists <워드프레스 테마 주요파일 요청 구조>WordPress Meetup 2011 [ 53 ]
  54. 54. 모바일웹 개발 가이드• Post ListsWordPress Meetup 2011 [ 54 ]
  55. 55. 모바일웹 개발 가이드• Post Lists – thumbnail 추가 – functions.php 파일 생성 – functions.php -> 사용자 정의 함수 정의WordPress Meetup 2011 [ 55 ]
  56. 56. 모바일웹 개발 가이드• Post Lists – thumbnail 추가WordPress Meetup 2011 [ 56 ]
  57. 57. 모바일웹 개발 가이드• Pagenavition 추가WordPress Meetup 2011 [ 57 ]
  58. 58. 모바일웹 개발 가이드• Post and Page Detail – Post 상세페이지를 위한 single.php 생성WordPress Meetup 2011 [ 58 ]
  59. 59. 모바일웹 개발 가이드• Post and Page Detail – page 상세페이지를 위한 page.php 생성WordPress Meetup 2011 [ 59 ]
  60. 60. 모바일웹 개발 가이드• Comments – single.php 에서 comments_template() 삽입 – comments.php 파일 생성WordPress Meetup 2011 [ 60 ]
  61. 61. 모바일웹 개발 가이드• Menu and Navigation – functions.php에서 메뉴 활성화 – 원하는 위치에 theme API를 통해 메뉴 표시WordPress Meetup 2011 [ 61 ]
  62. 62. 모바일웹 개발 가이드• Using WordPress Hooks and Filters – PC와 모바일 환경에 따라 맞는 웹페이지 표현 – 플러그인을 이용 – /wp-content/plugins 에 적절한 폴더와 파일을 생성 (ex) /wp-content/plugins/meetup /wp-content/plugins/meetup/meetup.php – 플러그인 정보 삽입WordPress Meetup 2011 [ 62 ]
  63. 63. 모바일웹 개발 가이드• Theme Selection – Plugin API 인 add_filter를 이용WordPress Meetup 2011 [ 63 ]
  64. 64. 모바일웹 개발 가이드• Theme SelectionWordPress Meetup 2011 [ 64 ]
  65. 65. 모바일웹 개발 가이드• Content 다듬기 – 사용자가 콘텐츠를 꾸미거나, 플러그인에 의해서 추가된 불필요한 태그 제거 – 이미지 리사이즈 – Plugin API인 filter 를 이용WordPress Meetup 2011 [ 65 ]
  66. 66. WordPress Meetup 2011 감사합니다! @ssamture [ 66 ]
  67. 67. 참고문헌• 임민형 – WordCamp 2010 Seoul (워드프레스 플러그인과 보안)• 임민형 - http://ssamture.net• http://wordpress.org• 한국인터넷진흥원 – 2011년 상반기 스마트폰이용실태조사• James Pearce - Professional Mobile Web Development with WordPress, Joomla!, and DrupalWordPress Meetup 2011 [ 67 ]

×