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

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

@ssamturehttp://ssamture.net

[email protected]

PowerPoint template by Lester Chan http://lesterchan.net/

WordPress Meetup 2011

http://ssamture.net/

Overview

• 모바일웹 이란 ?

• 사용자를 위한 워드프레스 모바일웹

• 개발자를 위한 워드프레스 모바일웹

WordPress Meetup 2011 [ 2 ]

모바일웹이란 ?

[ 3 ] WordPress Meetup 2011


• 이동 단말기에서 일반 웹에 접속할 수 있는 브라우징 기술

• 이동통신 , 홈 네트워크 등에 사용되는 각종 단말기에서 유선 웹사이트에 접속 할 수 있는 기술



• 모바일 웹 사이트란 이러한 기술을 이용해 모바일 단말기에 최적화된 사이트

• PC 와 달리 모바일 단말기의 해상도가 낮아 최적화 되지 않으면 제대로된 서비스 이용이 어려움



• 스마트폰 사용자 2 천만명 돌파• 스마트폰을 통한 인터넷 사용률 증가


< 스마트폰 사용시 인터넷 접속 경로 >

< 출처 : 한국인터넷진흥원 -2011 년 상반기 스마트폰 이용실태조사 >< 출처 : 한국인터넷진흥원 -2011 년 상반기 스마트폰 이용실태조사 >

< 스마트폰 사용시 인터넷 이용시간 >

사용자를 위한 워드프레스 모바일웹


사용자를 위한 워드프레스 모바일웹

• WordPress Mobile Pack• WPtouch• WordPress Mobile Edition• MobilePress• WordPress APP


WordPress Mobile Pack


• 소개– 휴대폰 도메인인 .mobi 주소를 관리하는 .dotMobi

사에서 개발이 시작됨– 무료로 사용 가능



• 주요기능– 접속환경 (Mobile, Desctop 등 ) 에 따라 자동으로 환경에

맞는 웹페이지를 보여줌– 화면 사이즈에 맞게 이미지 리사이징– Mobile Device 에서 미디어 제거– Mobile version 의 WordPress admin panel 제공



• 설치 ( < Version 2.7 )– http://wordpress.org/extend/plugins/



• 설치 ( < Version 2.7 )– “WordPress Mobile Pack” 검색



• 설치 ( < Version 2.7 )– WORDPRESS/wp-content/plugins 에 다운로드 후 압축

해제



• 설치 ( >= Version 2.7 )– Admin panel -> Plugins -> Add New



• 설치 ( >= Version 2.7 )– “WordPress Mobile Pack” 검색



• 설치 ( >= Version 2.7 )– 설치하기



• 설치 ( >= Version 2.7 )– 설치 완료 후 적용



• 적용



• 설정



• Mobile Theme홈으로 바로가기 메뉴 추가 여부

메인에 표시할 포스트 갯수

포스트 표시 방식- 제목만- 첫번째 포스트는 제목과 내용일부 , 그 이외에는 제목만- 모든 포스트의 제목과 내용일부

이미지를 스크린 사이즈에 맞게 사이즈 조절



• 설정 (Mobile Switcher)

Disabled : 모바일 기기로 접속 해도 기존 그대로 보여준다 .dBrowser detection : HTTP headers 를 통하여 모바일 접속여부를 확인 후 해당 기기에 맞게 보여줌 .dBOTH(browser detection and domain mapping): HTTP headers 를 통하여 모바일 접속여부를 확인 후 해당 기기에 맞게 보여주거나 , 도메인에 따라 보여줌



• 위젯– Mobile Switcher Link– Mobile Barcode– Mobile Ads– Mpexo



• Mobile Switcher Link



• Mobile Barcode



• Analytics



• Mobile Admin panel

WPtouch


• 소개– BraveNewCode Inc. 에서 개발– WordPress 의 플러그인을 통해서 사용할 수 있는

무료버전– 개발자의 웹사이트 (www.bravenewcode.com) 에서 받을

수 있는 유료버전 -> Wptouch Pro– 유료버전은 관리자툴 등의 추가 기능 지원

http://www.bravenewcode.com/

WPtouch


• 소개– WebKit 기반 브라우저 지원하고 터치스크린 환경의

모바일 디바이스를 위한 인터페이스를 지원– Ex) 아이폰 , 안드로이드 , 블랙베리 등– WebKit 기반이 아닌 브라우저에서는 지원하지 않음– WordPress Mobile Pack( 이하 :WMP) 과 같이 사용하여 ,

Wptouch 는 터치스크린에 대한 UI 을 WMP 는 그 이외의 UI 를 제공하도록 사용가능 .

WPtouch


• 설치– WordPress Mobile Pack ( 기타 플러그인들 ) 과 동일한 방법

WPtouch


• Wptouch 테마– 터치스크린에 최적화된 테마 제공– iOS 스타일로 구성– 상단 타이틀바와 페이지 탭

메뉴에 아이콘을 삽입할 수 있음

WPtouch


• Wptouch 테마– 상단에는 드롭 - 다운 메뉴를 두어

사용자가 쉽게 사이트의 태그 및 카테고리를 탐색 할 수 있음

WPtouch


• Wptouch 테마– Post 리스트는 기본적으로 날짜아이콘 , 제목 ,

메타데이터로 표시– 날짜아이콘에는 해당 post 의 comment 수를 보여줌– 리스트의 확장을 통해 미리보기가 가능함

WPtouch


• Wptouch 테마– 상세 페이지에서는 해당 링크를

메일을 통해 공유하거나 트위터 , 페이스북에 공유하는 버튼이 제공

– 북마크사이트에 북마크를 할 수 있는 버튼 제공

– Comment 의 확인과 등록

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

WPtouch


• General Settings

WPtouch


• General Settings– 특정 카테고리나 태그는 제외

WPtouch


• General Settings– 텍스트 정렬

<Left> <Full>

WPtouch

[ 38 ]

• General Settings

<Calendar Icons>



WPtouch

[ 39 ]

• Advanced Options

- 화면의 줌인 / 아웃 허용 여부- 카테고리 또는 태그 탭 메뉴의 추가 여부- 검색 창 추가 여부- 로그인 탭 메뉴 추가 여부- 댓글의 허용여부 등의 설정- 일부 기능은 해당 플러그인이 활성화 되어 있어야 함 .


WPtouch

[ 40 ]

• Style & Color Options

WPtouch


• Default & Custom Icon Pool– 사용자 정의 아이콘 관리– 등록 및 제거

WPtouch


• Logo / Home Screen Icon & Default Menu Items

그 외


• WordPress Mobile Edition• MobilePress• WordPress Mobile APP

– iOS, Android, BlackBerry, Windows Phone 7, Nokia, WebOS

개발자를 위한 워드프레스 모바일웹


모바일웹 개발 가이드


• 모바일웹 테마 개발 준비– WP_ROOT/wp-content/themes/ 사용자테마디렉토리– style.css 생성– 테마 정보 주석 삽입



• 임의의 내용으로 index.php 생성 후 테마 확인



• Headers and Footers– header.php 와 footer.php 파일을 생성

– 각각의 파일은 theme API 인 get_header() 와 get_footer() 에 의해 사용

<header.php>

<footer.php>



• Theme API 를 이용하여 index.php 에서 include

get_header() -> header.php

get_footer() -> footer.php



• header 에 hook(“wp_head”) 삽입

Function Refrence / wp_head- </head> 전에 삽입- 사이트의 styles, scripts 그리고 meta tags- Plugin 에서 “ wp_head” hook tag 를 사용하고 있다면 이 부분에 적용- do_action(‘wp_head’);

- 사전적 정의 : ( 갈 ) 고리 , 걸이 ; ( 낚싯바늘로 ) 낚다 등- S/W 관점 : 각종 프로그램에서 발생하는 기능호출 , 메시지 , 이벤트 등을

중간에서 바꾸거나 가로채는 기술- 워드프레스에서 hook 은 action 과 filter



• footer 에 hook(“wp_footer”) 삽입

Function Refrence / wp_footer- </body> 전에 삽입- JavaScript files- Plugin 에서 “ wp_footer” hook tag 를 사용하고 있다면 이 부분에 적용- do_action(‘wp_footer’);



• 테마 stylesheet 를 문서에 적용



• Post Lists– 모든 요청은 별도의 파일이 없는 한 index.php 을 통해

콘텐츠 제공– 요청 콘텐츠의 종류에 따라 계층 구조의 파일을 통해

콘텐츠 제공– 예를 들어 , 특정 카테고리의 게시물을 보는 사용자가

있다면 “ category.php” 파일을 통해 콘텐츠를 제공하며 , 해당 파일이 존재하지 않으면 “ archive.php” 파일을 통해 콘텐츠를 제공



• Post Lists

< 워드프레스 테마 주요파일 요청 구조 >



[ 54 ]

• Post Lists


[ 55 ]

• Post Lists – thumbnail 추가– functions.php 파일 생성– functions.php -> 사용자 정의 함수 정의



[ 56 ]

• Post Lists – thumbnail 추가



[ 57 ]

• Pagenavition 추가




• Post and Page Detail– Post 상세페이지를 위한 single.php 생성



• Post and Page Detail– page 상세페이지를 위한 page.php 생성



• Comments– single.php 에서 comments_template() 삽입– comments.php 파일 생성



• Menu and Navigation– functions.php 에서 메뉴 활성화– 원하는 위치에 theme API 를 통해 메뉴 표시



• Using WordPress Hooks and Filters– PC 와 모바일 환경에 따라 맞는 웹페이지 표현– 플러그인을 이용– /wp-content/plugins 에 적절한 폴더와 파일을 생성

(ex) /wp-content/plugins/meetup /wp-content/plugins/meetup/meetup.php

– 플러그인 정보 삽입



• Theme Selection– Plugin API 인 add_filter 를 이용



• Theme Selection



• Content 다듬기– 사용자가 콘텐츠를 꾸미거나 ,

플러그인에 의해서 추가된 불필요한 태그 제거

– 이미지 리사이즈– Plugin API 인 filter 를 이용

감사합니다 !@ssamture

[ 66 ]


참고문헌


• 임민형 – WordCamp 2010 Seoul ( 워드프레스 플러그인과 보안 )• 임민형 - http://ssamture.net• http://wordpress.org• 한국인터넷진흥원 – 2011 년 상반기 스마트폰이용실태조사• James Pearce - Professional Mobile Web Development with WordPress, Joomla!, and Drupal

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

Technology