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