25차 블로터 컨퍼런스 [SNS, 모바일, 빅데이터 시대의 쇼핑몰 마케팅 실전전략 2014
주제:
검색엔진•모바일•SNS 최적화를 위한 워드프레스 기반 쇼핑몰 구축 전략 1. 쇼핑몰 마케팅과 워드프레스
목차:
1. 쇼핑몰 마케팅과 워드프레스
- SEO side
- Social Web side
2. 모바일, 멀티 웹브라우저 대응과 워드프레스
- 워드프레스의 반응형 웹
3. 워드프레스로 쇼핑몰 구축하기
- woocommerce
- jigoshop
- wp-ecommerce
4. 한국형 쇼핑몰 구축에 필요한 플러그인
- 결제플러그인
- 기타플러그인
제가 블로터 컨퍼런스에서 발표한 워드프레스 쇼핑몰 구축 전략입니다. 워드프레스 쇼핑몰을 고민하시는 분들께 우커머스를 활용한 쇼핑몰 구축에 대해 개념을 정리하는데 도움이 될 것 같아 공유 드립니다.
http://www.jasonbskim.com
http://www.facebook.com/jasonbskim
http://www.facebook.com/Jasonbskimcom
25차 블로터 컨퍼런스 [SNS, 모바일, 빅데이터 시대의 쇼핑몰 마케팅 실전전략 2014
주제:
검색엔진•모바일•SNS 최적화를 위한 워드프레스 기반 쇼핑몰 구축 전략 1. 쇼핑몰 마케팅과 워드프레스
목차:
1. 쇼핑몰 마케팅과 워드프레스
- SEO side
- Social Web side
2. 모바일, 멀티 웹브라우저 대응과 워드프레스
- 워드프레스의 반응형 웹
3. 워드프레스로 쇼핑몰 구축하기
- woocommerce
- jigoshop
- wp-ecommerce
4. 한국형 쇼핑몰 구축에 필요한 플러그인
- 결제플러그인
- 기타플러그인
제가 블로터 컨퍼런스에서 발표한 워드프레스 쇼핑몰 구축 전략입니다. 워드프레스 쇼핑몰을 고민하시는 분들께 우커머스를 활용한 쇼핑몰 구축에 대해 개념을 정리하는데 도움이 될 것 같아 공유 드립니다.
http://www.jasonbskim.com
http://www.facebook.com/jasonbskim
http://www.facebook.com/Jasonbskimcom
웹 사이트 벤치마킹은 웹 기획의 기본스킬입니다. 그리고 웹 사이트 벤치마킹은 웹 기획자에게 웹 사이트의 트렌드를 읽을수 있는 눈을 키워줄 뿐만아니라 경쟁 사이트 혹은 유명 사이트의 벤치마킹을 통하여 웹의 문제점과 개선방안에 실질적인 도움을 받을 수 있습니다.
웹 사이트 벤치마킹은 웹의 콘셉이나 우수한 서비스를 발견하는 것이 전부가 아니라 사용자의 사고, 사이트 이용패턴, 이용경험까지 벤치마킹해야합니다
HTML5 이러닝 콘텐츠 저작도구 웹캣(WebCAT)
http://webcat.openplay.kr
Create Your Own Contents!!
기존 플래시(FALSH)로 저작된 이러닝 콘텐츠와 동일한
사용자 경험, 학습몰입도, 심미성 등을 제공하는
OSMD 가능한 HTML5 콘텐츠를 보다 편리하게
저작 가능한 저작 도구
하나의 콘텐츠를 생성하여 PC, Mobile 모두 대응이 가능
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 ]