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

WordPress Meetup 2011

워드프레스를 이용한 모바일웹 개발
임민형
@ssamture
http://ssamture.net
ssamture@gmail.com

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

Overview

• 모바일웹 이란?

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

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

WordPress Meetup 2011 [2]

모바일웹이란?


모바일웹이란?
• 이동 단말기에서 일반 웹에 접속할 수 있는
브라우징 기술
• 이동통신, 홈 네트워크 등에 사용되는 각종
단말기에서 유선
웹사이트에 접속 할 수 있는 기술


모바일웹이란?
• 모바일 웹 사이트란 이러한 기술을 이용해 모바일
단말기에 최적화된 사이트
• 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 제공

WordPress Meetup 2011 [ 10 ]


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



– “WordPress Mobile Pack” 검색



– WORDPRESS/wp-content/plugins 에 다운로드 후
압축 해제



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



– “WordPress Mobile Pack” 검색



– 설치하기



– 설치 완료 후 적용



• 적용



• 설정


홈으로 바로가기 메뉴 추가 여부

• Mobile Theme
메인에 표시할 포스트 갯수

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

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


• 설정(Mobile Switcher)

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



• 위젯
– 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
– 유료버전은 관리자툴 등의 추가 기능 지원


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

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


WPtouch

– 텍스트 정렬

<Left> <Full>


WPtouch


<Calendar Icons>


WPtouch

• Advanced Options

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


WPtouch

• 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 파일을 생성

<header.php>

<footer.php>
– 각각의 파일은 theme API 인 get_header()와
get_footer()에 의해 사용



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

get_header() -> header.php

get_footer() -> footer.php


• 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‟);



• 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

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



• Post Lists



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



• Post Lists – thumbnail 추가



• 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 를 이용


WordPress Meetup 2011

감사합니다!
@ssamture

[ 66 ]

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


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

More Related Content

What's hot

Viewers also liked

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

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