[추천]우커머스 기본 테마인 Storefront Theme 와 관련 플러그인들

Storefront Theme + woocommerce 3.x 조합으로 쇼핑몰 만들기 을 보시면 상세 사용법이 나옵니다.

우선 무료 플러그인들로 최대한 활용할 수 있는 방법들을 살펴보고 유료 플러그인들을 살펴보겠습니다. 초록색은 Storefront Theme + woocommerce 3.x 조합으로 쇼핑몰 만들기 의 원본을 copy한 부분입니다. 

 

Storefront Theme 

Storefront Theme 는 우커머스에서 제공하는 기본 테마(blank theme)입니다. 온라인 상점을 만들려고 우커머스용 테마를 찾다보면, 매번 테마를 찾는 것도 곤역이고 어렵게 찾은 테마에서 2%부족한 점들을 직면하게 됩니다. 이럴때 이용할 수 있는 것이 Storefront Theme(우커머스에서 제공하는 기본 테마, balnk theme)입니다.

 

무료 플러그인들로 최대한 활용할 수 있는 방법들

Storefront Theme 와 같이 사용할 수 유용한 무료 플러그인들은 워드프레스 관리자페이지에서 [플러그인] > [새로 추가] 에서 검색창에 ‘storefront’ 키워드로 플러그인 검색하여 찾으실 수 있습니다.
 

1) Homepage Control Plugin

개요

우커머스 기본 테마인 Storefront Theme의 홈페이지(상점 첫화면)에 표시되게 할 수 있는 구성 요소들( Homepage Content, 상품 카테고리(Product Categories), 신상품(Recent Products),  주요상품(Featured Products), 인기상품(Popular Products), 판매중인 상품(On Sale Products), 베스트셀러 상품(Best Selling Products))을 홈페이지(상점 첫화면)에 표시되게 할지 말지와 그 순서 변경하는 플러그인입니다. 
  • 버전: 2.0.3
  • 글쓴이: WooThemes
  • 최근 업데이트: 10 개월 전에
  • 요구되는 워드프레스 버전: 3.8.1 또는 이상
  • 호환되는 버전: 4.9.8
  • 활성 설치: 40,000+

설치 및 활성화

워드프레스 관리자페이지에서 [플러그인] -> [새로추가] 하여  Homepage Control 를 검색하여 [설치] 및 [활성화]해줍니다. 

homepage control plugin_설치및활성화

사용법

활성화되면 테마 사용자 정의 부분 (외모(Appearance) > 사용자정의(Customizer)으로 이동하시면 Storefront Theme의 사용자정의부분에 전에는 없던 “Homepage Control”항목이 표시됩니다. ( Storefront Theme외에 다른 테마에서는 “Homepage Control”항목이 보여지 않습니다. )

homepage control plugin_사용자정의

이 화면을 방문하면 가능한 홈페이지 구성 요소가 표시되고, 배열을 마우스 끌어서 이동하여 재구성하거나 개별 구성 요소를 사용 또는 사용 중지 할 수있는 옵션이 표시됩니다.

우커머스 기본 테마인 Storefront Theme의 홈페이지(상점 첫화면)에 표시되게 할 수 있는 구성 요소들은 아래와 같습니다. 

Storefront Homepage Content
Storefront Product Categories
Storefront Recent Products
Storefront Featured Products
Storefront Popular Products
Storefront On Sale Products
Storefront Best Selling Products

아직 다양한 상품을 등록하지 않은 쇼핑몰에서는 차이를 모르실 수 있습니다. 이경우, 아래의 WooCommerce Storefront Homepage Control Plugin 동영상을 살펴보시면 각각의 구성요소들이 무엇을 의미하는지 아실 수 있습니다. 일단은 모두 check하시어 사용하시다가 필요없는 것을 제거하거나 재배치하세요. 

homepage control plugin_사용설정 및 재배치

완료되면 “변경 사항 저장”버튼을 클릭하여 새 구성 요소 주문을 시스템에 적용하십시오.

WooCommerce Storefront Homepage Control Plugin 동영상

 

2) Storefront Header Picker Plugin

개요

이 플러그인을 사용하면 Storefront 테마의 머리글(header)의 레이아웃, 검색창, 장바구니를 변경(숨기기)할 수 있습니다.

이 플러그인은 Storefront 테마 에서만 작동하도록 제작되었습니다 .

  • 버전: 1.0.2
  • 글쓴이: Wooassist
  • 최근 업데이트: 9 개월 전에
  • 요구되는 워드프레스 버전: 3.0.1 또는 이상
  • 호환되는 버전: 4.9.8
  • 활성 설치: 2,000+

설치 및 활성화

Storefront Header Picker plugin

사용법

WordPress 대시 보드(관리자페이지)에서 “외모”으로 이동하여 “사용자 정의”를 클릭하십시오.

‘Heaer(헤더)’섹션을 선택해줍니다. 

Storefront Header Picker Plugin-1

플러그인 설치후에, Header background image 밑에 이전에 없던 Header Layout 이라는 섹션이 생성된 것을 확인할 수 있습니다. . 

Header background image를 사용하는 경우,  Header background image를 기본, 소형(컴팩트) 또는 가운데로 배치중 선택할 수 있습니다. 

헤더에서 파란색 제품 검색 상자를 숨기기 또는 숨기기 취소를 선택할 수 있습니다. 

머리글에 장바구니(미니 카트)를 숨기거나 숨기기 취소를 선택할 수 있습니다. 

Storefront Header Picker Plugin

참고 : 컴팩트 레이아웃에는 검색 창이나 미니 카트 중 하나만 들어갈 수 있습니다.

 

3) Storefront Top Bar : 헤더 위 탑 바를 생성

개요

  • 버전: 1.1.1
  • 글쓴이: Wooassist
  • 최근 업데이트: 9 개월 전에
  • 요구되는 워드프레스 버전: 3.0.1 또는 이상
  • 호환되는 버전: 4.9.8
  • 활성 설치: 5,000+
 이 플러그인은 Storefront 테마 에서만 작동하도록 제작되었습니다 .

이 플러그인은 메인 헤더 상단에 두 개의 위젯 영역을 추가합니다. 위젯 영역을 추가하는 주된 목적은 상단에 탐색 및 주의 사항을 쉽게 추가하는 것이나 예를들면, top bar에 많이 사용하는 소셜링크라든지 알림이라든지 구독신청 등 설치된 모든 위젯을 배치 및 수정하여 풍성하고 자유자재의 컨텐츠를 추가할 수 있습니다. 

 

설치 및 활성화

Storefront Top Bar

Storefront Top Bar 동영상(1:23)

사용법

다른 위젯 영역과 마찬가지로 WordPress 관리자페이지(대시 보드)의 위젯 페이지로 이동하여 위젯을 쉽게 추가 할 수 있습니다.

[외모] -> [위젯]으로 이동하시면  Top Bar 1와 Top Bar 2 위젯이 만들어진 것을 확인할 수 있습니다.  Top Bar 1와 Top Bar 2 위젯에는 파란색 안에 모든 위젯의 설치가 가능하다는데 큰 장점이 있습니다. 

Storefront Top Bar_위젯_1

[외모] -> [사용자 정의] -> [Top Bar]로 이동하시면 

Storefront Top Bar_사용자정의

만들어 놓은 Top Bar 1, Top Bar 2 위젯의 배경색, text 색깔, 링크 색깔을 설정할 수 있으며 Top Bar 1, Top Bar 2 의 위치를 좌측, 중앙, 우측으로 배열할 수 있습니다. 모바일에서 보이게 할지 보이지 않게 할지도 설정할 수 있습니다.  

Storefront Top Bar_사용자정의_상세설정

노트:

  • 상단 막대 위젯 영역은 Storefront의 바닥 글 위젯 영역과 유사하게 작동합니다. 첫 번째 위젯 영역 에만 위젯 이있는 경우 너비가 100 %가되고 두 번째 위젯 영역이 표시되지 않습니다.
  • 맞춤 메뉴 위젯에 대한 스타일링 지원이 추가되었습니다. 모양과 느낌은 기본 메뉴 및 하위 메뉴 스타일과 비슷합니다.
  • 이 플러그인은 Storefront Designer Extension 에서 추가한 헤더 옵션을 지원하지 않습니다

 

4) Title Toggle for Storefront Theme

개요

 : 각 페이지의 타이틀 표시 여부 설정 가능 (편집 메타박스에서 체크)
EX : Shop 페이지에서 ‘Shop’ 타이틀 제거 등
  • 버전: 1.2.4
  • 글쓴이: Wooassist
  • 최근 업데이트: 9 개월 전에
  • 요구되는 워드프레스 버전: 4.0.0 또는 이상
  • 호환되는 버전: 4.9.8
  • 활성 설치: 10,000+

How to use:

 

이 플러그인은 Storefront 테마 에서만 작동하도록 제작되었습니다.

이 플러그인을 사용하면 특정 페이지나 게시물에서 페이지 “제목” 또는 “태그 그리고 코멘트수”을 쉽게 제거 할 수 있습니다. 

기본 사례 시나리오는 “홈페이지”에 대해 설정할 제목을 숨길 수있는 것입니다.

 

사용법

페이지 또는 게시글(post)편집 화면에서 Title 및 Toggle 메타 상자가 나타날 때까지 아래로 스크롤하십시오. ‘제목 숨기기’체크 박스를 선택하고 페이지를 [업데이트]하십시오.

페이지가 업데이트 된 후 페이지를 확인하여 제목이 성공적으로 제거되었는지 확인하십시오.

포스트 메타 (태그 및 코멘트 수)를 제거하는 옵션도 있습니다.

Title Toggle for Storefront_사용법

Title Toggle for Storefront Theme 동영상(2:11)

 

 

5) Storefront Add Slider 

개요

이 플러그인을 사용하면 Meta Slider, Smart Slider 3, Soliloquy, Revolution Slider, LayerSlider shortcode와 같은 slider shortcode(단축키)를 Storefront 테마 Frontpage 및 다른 모든 페이지에 추가 할 수 있습니다.
This plugin lets you add any slider shortcode (Meta Slider, Smart Slider 3, Soliloquy, Revolution Slider, LayerSlider shortcode) to your Storefront theme Frontpage.
  • 버전: 0.4
  • 글쓴이: Atlantis Themes
  • 최근 업데이트: 1 년 전에
  • 요구되는 워드프레스 버전: 3.8 또는 이상
  • 호환되는 버전: 4.4.16
  • PHP 버전 요구사항: 5.2.4 또는 이상
  • 활성 설치: 3,000+

저는 위에서 언급된 슬라이드 플러그인들중 900,000+이상의 활성 설치 플러그인인 Metaslider를 설치하여 test해 보았습니다. 

이미 다른 슬라이드제작용 플러그인을 이용하고 있으시다면 그 슬라이드 플러그인을 사용하시어 shortcode를 구하시면 될 것 같습니다. 저는 nivo slider 플러그인을 이용하고 있었는데 이것도 잘 작동합니다. 

설치 및 활성화

Storefront Add Slider

사용법

Storefront Add Slider 플러그인을 설치 및 활성화하고 [외모] -> [사용자 정의] -> [홈페이지 설정]로 이동하시면 상단에 Slider Shortcode가 추가된 것을 확인하실 수 있습니다. 

Show Frontpage Slider on All Pages 부분을 체크하시면 슬라이드를 모든 페이지에서 보여지게 할 수 있습니다. 

Storefront Add Slider_사용법

 

6) Page Builder by SiteOrigin + SiteOrigin Widgets Bundle

개요

  • 버전: 2.9.5
  • 글쓴이: SiteOrigin
  • 최근 업데이트: 2 일 전에
  • 요구되는 워드프레스 버전: 4.4 또는 이상
  • 호환되는 버전: 4.9.8
  • 활성 설치: 1+ 백만
이 플러그인은 페이지 빌더용 플러그인입니다. 저는 페이지 빌더용 플러그인으로 elementor 플러그인을 사용하고 있습니다. 둘다 활성사용자가 100만명이 넘고 안정적입니다. 어느것을 사용하건 괜찮습니다.  
단, Visual Composer 는 많이 사용되고 있지만 VC는 사이트 속도를 크게 떨어뜨릴 뿐만 아니라 다양한 문제를 야기한다고 하니 VC( Visual Composer  )는 특히 사용하지 않는 것이 좋을 것 같습니다.  

설치 및 활성화

Page Builder by SiteOrigin

 

7) To Top : 화면 아래쪽에서 위로가기 버튼 생성
To Top와 반대로 상단에서 페이지내의 아래쪽의 특정 부분으로 이동하는 것은 아래의 page scroll to id plugin 을 이용하세요. 
 
8) Beomps Korea Postcode Search : 국내 주소 검색 플러그인
 

댓글 남기기

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

%d 블로거가 이것을 좋아합니다: