워드프레스 프로그레시브 웹 앱 플러그인 Progressive Web App plugin : WordPress Mobile Pack plugin

개요

휴대폰 도메인인 .mobi 주소를 관리하는 .dotMobi 사에서 개발이 시작된 플러그인으로 무료로 사용 가능합니다.

 

WordPress Mobile Pack 주요기능

( 출처 : 워드프레스를 이용한 모바일웹 개발 )

– 접속환경(Mobile, Desctop등)에 따라 자동으로 환경에 맞는 웹페이지를 보여줌

– 화면 사이즈에 맞게 이미지 리사이징

– Mobile Device에서 미디어 제거

– Mobile version의 WordPress admin panel 제공

 

평가

워드프레스 모바일 플러그인에는 mobile press(활성 사용자수: 4,000+) wp mobile detectorwp mobile pack 등이 있으며 이들 플러그인들은 웹사이트를 접속하는 디바이스를 자동으로 판단해서 모바일 페이지로 연결시키는 플러그인입니다.

기본으로 mobile press는 2개, wp mobile detector는 7개, wp mobile pack은 4개의 테마를 포함하고 있고, 포함된 테마가 아니더라도 PC용 테마를 자동으로 모바일 사이즈에 맞게 줄여서 보여 줍니다. 다만, 첨부된 이미지의 리사이징이 완벽하지 못함이 아쉽습니다.(출처 :  워드프레스 모바일 페이지 추천 플러그인 )

 

PWA 설치 전 요구 사항

  1. 귀하의 WordPress 웹 사이트는 HTTPS 보안이되어 있어야합니다. 즉, 주소 표시 줄에 녹색 자물쇠 표시 (보안 연결에서 생성)

 

설치

기타 플러그인들과 동일한 방법으로 설치합니다. 관리자페이지에서 [플러그인] > [플러그인 추가] 하시어 설치하세요. 부족하신 부분은 아래의 동영상을 참조하세요.

사용법

구성

기본적으로 아래의 6개 파트로 구성되어 있습니다.

wordpress mobile pack_메뉴

 

 

1. 시작하기(Quick Start)

1 단계. 모바일 웹 앱의 모양과 느낌을 맞춤 설정하십시오.사용 가능한 색상 구성 및 글꼴 중에서 선택하고 로고 및 응용 프로그램 아이콘을 추가하여 모바일 웹 응용 프로그램을 사용자 정의하십시오. 기본 테마에는 앱을 잡지 풍미를 줄 수 있도록 하며 화면에 무작위로 표시되는 6 개의 추상 표지가 있습니다. 자신의 표지를 업로드하여 모바일 웹 응용 프로그램을 더욱 개인화 할 수 있습니다.

이 짧은 비디오 자습서 (PRO 버전을 위한 동영상입니다.) 에서 어떻게 완료 되었는지 확인하십시오.

2 단계. 컨텐츠 탭에서 앱(정확히는 모바일 웹 앱, mobile web application)에서 표시할 카테고리와 페이지를 선택합니다. 행을 클릭하여 카테고리 및 페이지를 표시하거나 숨길 수 있고 원하는 위치에서 해당 행을 드래그하여 순서를 변경할 수 있습니다.

3 단계. Settings(설정) 탭의 디스플레이 모드를 설정하여  모바일 독자를 활성화 / 비활성화 할 수 있습니다. 미리보기 모드는 로그인한 당신만이 응용 프로그램을 볼 수 있고 편집할 수 있습니다.

나만의 Google 웹 로그 분석 ID 를 추가하여 모바일 방문자가 애플리케이션과 상호 작용하는 방식에 대한 더 많은 정보를 얻을 수도 있습니다 .

4 단계. 모바일 트래픽 증가무료 Mobile Growth Academy(모바일 성장 아카데미)에 가입 하여 모바일 전략을 개선하고 모바일 트래픽을 증가시키는 방법에 대한 주간 강의를 받으십시오. 처음 10 개의 모바일 성장 레슨 을 마치면 WP Mobile Pack PRO 와 함께 사용할 20 % 할인 인증서가 수여됩니다.( 이 부분은 유료 버전을 사용해달라고 권유하는 부분인데, 테마의 제약도 있고 하므로 유료 버전을 이용하시는 것도 고려하시는 것이 좋습니다. )

5 단계. WP 모바일 팩을 사용자 정의하고 확장 및 기여하는 것은 세계에서 가장 널리 사용되는 CMS의 다양성과 강력한 JavaScript 프레임 워크 (예 : AngularJS / Ionic, ReactJS, VueJS 등)를 결합하여 강력한 프로그레시브 웹 응용 프로그램을 제작할 수있는 좋은 방법입니다. 가장 좋은 방법은 기술 문서 와 GitHub 공용 저장소를 살펴보는 것 입니다. 질문이 있으시거나 WP 모바일 팩을 확장에 기여하고자하신다면, 주저하지 말고 연락주세요.

2. App Themes

맨위에 테마는 무료이고 아래의 테마들은 유료로 가격은 $19 ~ $49 사이입니다.

PRO(유료)는   1 도메인 라이센스 (  1 Domain License  ),  무제한 웹 푸시 알림(  Unlimited Web Push Notifications ),  수익 창출 옵션( Monetization Options ),  지속적인 기능 및 보안 업데이트(  Ongoing Features & Security Updates),  정규 지원 1 년(  1 Year of Regular Support ),  전체 소스 코드 및 문서(  Full Source Code & Documentation) 을 지원합니다.

wordpress mobile pack_app themes

3. Look & Feel

wordpress mobile pack_look_feel_1

Look & Feel 시작하기전 알림

Look & Feel 중 스마트폰에서 PWA가 메인페이지만 나오고 다른 페이지로 이동하지 않는 경우

사용하시는 테마들중에는 첫화면을 [정적인 페이지]로 지정할 수 있는 기능이 있는 테마들이 있습니다. WordPress Mobile Pack plugin 은 카테고리와 페이지를 기준으로 블로그나 페이지를 보여주는데, 메인페이지를 특정 [정적인 페이지]로 이동하게 끔 설정하시면 이 정적인 페이지만 보이고 다른 페이지로 이동이 안됩니다.

관리자 페이지에서 [외모] -> [사용자정의] 로 이동하시어 [정적인 페이지]를 [최근 글]로 변경하셔야 스마트폰에서 PWA 가 제대로 표시됩니다.

wordpress mobile pack_look_feel_3_add home screeen_swjs_1

 

Customize Color Schemes and Fonts

Select Color Scheme

색 구성표는 모바일 웹 응용 프로그램의 다음 섹션에 영향을 미칩니다.

1. 사이드 메뉴 범주, 범주 레이블 텍스트
2. 표지 텍스트
3. 투명 오버레이 (표지, 사이드 메뉴 이미지)
4. 단추 아이콘
5. 단추 배경
6. 범주 레이블 배경 (게시물 세부 정보)
7. 사이드 메뉴 배경
8. 사이드 메뉴 텍스트 및 아이콘
9. 테두리
10. 포스트 및 페이지 배경
11. 코멘트 목록 헤더
12. 본문
13. 링크

 

Select Fonts

폰트는 마음에 드시는 것으로 선택해주세요.

 

Customize Your App’s Logo and Icon

나만의 로고와 아이콘 을 추가 하여 앱을 맞춤 설정할 수도 있습니다 . 로고(App logo)는 모바일 웹 앱의 홈 페이지에 표시되며, 아이콘(App icon)은 독자가 자신의 앱을 홈 화면에 추가 할 때 사용됩니다.

wordpress mobile pack_look_feel_2_Customize Your App's Logo and Icon

투명 배경을 가진 .png 형식으로 로고를 추가하십시오. 이 정보는 앱 표지에 표시됩니다.

아이콘 크기는 정사각형이어야하며 권장 크기는 512×512 픽셀입니다. 앱이 홈 화면에 추가되면 표시됩니다.

업로드 된 이미지의 파일 크기는 1MB를 초과하지 않아야합니다.

 

Add to Home Screen

사용자가 홈 화면에 앱을 추가하라는 메시지를 표시하려면 도메인의 루트에 서비스 작업자를 추가해야합니다.

FTP를 사용하여 ‘wordpress-mobile-pack’플러그인 디렉토리에있는 ‘sw.js’파일을 도메인 ‘/’의 루트로 이동하십시오.(www를 사용하시는 경우, www가 메인 루트입니다.)

파일을 루트로 옮긴 다음 상자를 체크하고 ‘저장’을 클릭하십시오. 자세한 내용은 지원 페이지를 방문 하십시오.

wordpress mobile pack_look_feel_3_add home screeen

 

Customize Your App’s Cover

각 테마에는 앱을 잡지 풍미에 제공하기 위해로드 중 화면에 무작위로 표시되는 6 개의 추상 표지가 있습니다. 자신의 표지를 업로드하여 모바일 웹 응용 프로그램을 더욱 개인화 할 수 있습니다.

wordpress mobile pack_look_feel_4_Customize Your App Cover

 

 

 

 

4. Content

컨텐츠는 카테고리와 페이지를 기준으로 보여지며 활성화/비활성화를 선택하여 보여줄지 말지를 결정하게 됩니다.

모바일 웹 애플리케이션에 표시 할 카테고리를 선택하십시오. 카테고리를 표시 / 숨기고 원하는 위치의 해당 행을 드래그하여 순서를 정렬하려면 아래 행을 클릭하십시오.

저처럼 카테고리가 많은 경우(400개 이상) inactive하는 것보다 보여주고 싶은 카테고리를 상단으로 드래그하여 끌오올려서 배치하는 것이 수월합니다.

wordpress mobile pack_content

모바일 웹 응용 프로그램에 표시 할 페이지를 선택하십시오. 다른 페이지를 편집, 표시 또는 숨길 수 있습니다. 페이지 순서는 워드프레스 관리자페이지의 ‘페이지’관리 패널 에서 설정할 수 있습니다 .

상위 페이지를 비활성화하면 모바일 버전의 하위 페이지도 숨겨집니다.

참고 : 위에 카테고리에서는 드래그하여 순서 변경이 가능하나  ‘페이지’관리 패널 ‘에서 페이지 순서를 변경할 수 있다고 하나 드래그하여 순서를 정렬할 수 없습니다. 다른 플러그인을 설치하여 페이지의 순서를 변경해야 할 것 같습니다. WordPress Mobile pack 으로는 active/inactive만 변경할 수 있습니다.

 

wordpress mobile pack_content_page

5. Settings

Display Mode

Display 모두는 Normal (all mobile visitors), Preview (logged in administrators), Disabled (hidden for all) 가 있습니다.

이용하시는 테마가 반응형 테마이시라면 완성되지 않은 플러그인을 활성화하시면 모바일에서 제대로 보여지지 않아 모바일로 접속하시는 분들이 불편을 겪을 수 있습니다. 이때 필요한 것이 Display Mode 기능입니다.

개발 및 설정하는 동안에는 진척상황을 확인하실때는 켜놓고 비활성화해 놓으시는 것나 Preview (logged in administrators), Disabled (hidden for all) 을 선택하시면 모바일 이용자에게 불편을 주지 않으면서 개발할 수 있습니다.

wp mobile pack_display mode

 

Google Analytics Id

나만의 Google 웹 로그 분석 ID 를 추가하여 모바일 방문자가 애플리케이션과 상호 작용하는 방식에 대한 더 많은 정보를 얻을 수도 있습니다 .

웹 로그 분석 ID(Google Analytics Id) 는 구글 애널리틱스에서 로그인하시어 관리자 페이지로 이동하시어 속성설정을 click하시면 보실 수 있습니다.

wp mobile pack_display mode_구글애널리틱스_관리자_속성설정

 

wp mobile pack_display mode_구글애널리틱스_관리자_속성설정_1

6. PRO

PRO버전에 대해 더 알아보고자 하시는 분은 아래의 동영상을 참조하세요.

appticles.com이 pwacommerce.com 의 모회사 같습니다. appticles.com 은 WordPress Mobile Pack PRO 을 코드캐니언의 envatomarket 에서 $70 에 판매합니다.

1 thought on “워드프레스 프로그레시브 웹 앱 플러그인 Progressive Web App plugin : WordPress Mobile Pack plugin

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.