WooCommerce 스토어에 Gutenberg 블록 사용 가이드

WordPress에 Gutenberg 편집기가 도입되면서 WordPress의 정체성이 크게 바뀌었습니다. 미디어를 추가할 수 있는 기능과 다양한 요구 사항을 위한 플러그인을 제공하는 핵심 콘텐츠 관리 시스템에서 이제는 항상 제공하는 유연성에 대한 타협 없이 풍부한 미디어 중심 WYSIWYG 편집기 및 웹 페이지 빌더가 되었습니다. 실제로 Gutenberg가 제공하는 블록은 원하는 방식으로 페이지를 구축할 수 있는 유연성을 높입니다.

구텐베르크가 이전 편집기(TinyMCE 편집기라고도 함)에 비해 제공하는 가장 좋은 점은 코딩 방법을 알 필요가 없거나 WordPress 웹사이트 또는 WooCommerce에 더 많은 기능을 추가하는 방법을 알기 위해 WordPress 구조를 이해할 필요가 없다는 것입니다. 가게. 그러나 이전 WordPress 편집기가 더 편안하다면 WordPress 기여자가 제공하는 Classic Editor로 알려진 이 무료 플러그인을 언제든지 설치할 수 있습니다. 이 플러그인은 Gutenberg를 완전히 비활성화하거나 이전 편집기와 Gutenberg 간에 전환할 수 있는 옵션을 제공합니다. . Gutenberg는 또한 사용자가 Gutenberg 내에서 클래식 편집기 기능을 사용할 수 있도록 Classic Editor 블록을 제공합니다! 사실이라고 하기에는 너무 좋은 것 같나요? 이 게시물 또는 WooCommerce 스토어에 Gutenberg 블록을 사용하는 방법에 대한 가이드를 살펴보겠습니다!

구텐베르크 블록은 모든 WordPress 페이지를 통해 액세스할 수 있습니다. WordPress 내에서 새 페이지를 추가하거나 기존 페이지를 편집할 때 화면의 왼쪽 상단 콘텐츠 영역에 마우스를 가져가면 "+" 기호를 볼 수 있습니다.

Gutenberg가 다양한 용도로 제공하는 다양한 종류의 블록이 있습니다.

블록을 사용하여 다양한 페이지를 만들 수 있지만 WooCommerce 관리자 또는 매장 관리자는 홈 또는 쇼핑 페이지에 가장 집중하고 싶을 것입니다. 따라서 이 튜토리얼의 목적을 위해 판매를 늘리기 위해 설계된 상점의 홈 페이지를 만들어 보겠습니다! 이를 위해 WooCommerce 블록 을 가장 많이 사용할 것입니다. 이 블록은 Automattic의 기능 플러그인의 이전 부분이었고 WooCommerce 버전 3.5에 병합되었습니다.

WooCommerce 차단에는 주로 페이지에 제품을 표시하는 것과 관련된 다양한 기능 또는 '차단'이 포함되어 있어 상점을 구축하는 데 사용할 수 있습니다. 다음은 WooCommerce 블록에서 사용할 수 있는 블록 목록입니다.

• 카테고리별 제품
• 최신 제품
• 특별 상품
• 베스트 셀러 제품
• 세일 제품
• 엄선된 제품
• 최고 평점 제품
• 속성별 제품

홈 페이지 상단에 주요 제품 을 추가하는 것부터 시작해 보겠습니다. 사용자/청중에게 강조하고 싶은 모든 제품이 될 수 있습니다.

"스토어 멤버십"이라는 제품을 추가했습니다. 제품이 추가되는 즉시 해당 이미지, 설명 및 가격이 표시됩니다. 오른쪽 사이드바의 옵션을 사용하여 숨기도록 선택할 수 있습니다. "지금 쇼핑" 버튼도 추가됩니다. 색상, 텍스트 및 그것이 가리키는 URL은 모두 편집 가능한 속성입니다.

오버레이 색상은 다음과 같은 경우 추천 제품으로 선택한 제품 이미지의 색상과 불투명도를 설정할 수 있는 흥미로운 기능입니다.

이 이미지에 CSS 클래스를 추가할 수도 있습니다. 마찬가지로 지금 쇼핑 버튼도 편집할 수 있습니다.

다음으로, 신규 방문자와 재방문 방문자 모두 이 페이지에서 얻을 수 있는 정보를 얻을 수 있도록 상점에 새로 도착한 제품과 베스트셀러를 추가해 보겠습니다.

이를 위해 먼저 Common Blocks 아래에 Heading이라는 블록을 추가합니다.

"New Arrivals"와 같은 적절한 제목이 추가되면 동일한 항목에 대해 해당 블록을 추가할 수 있습니다. 두 가지 목적을 위해 Best Selling Products 및 Newest Products 로 알려진 WooCommerce 블록을 사용할 것입니다. 이 블록은 WooCommerce 블록에서 다시 찾을 수 있습니다. Newest Products 블록을 추가해 보겠습니다.

최신 제품 블록이 WooCommerce 스토어에서 가장 최근에 추가된 제품을 가져오는 것을 볼 수 있습니다. 표시할 행과 열의 수를 설정하고 오른쪽 사이드바의 옵션을 사용하여 카테고리별로 제품을 필터링하여 이 블록에 대해 원하는 만큼 제품을 표시하도록 선택할 수 있습니다.

이러한 방식으로 새로운 제품에 대한 추천 제품 행 뒤에 다른 행을 추가했습니다.

다음으로 비슷한 방식으로 베스트 셀러 제품을 추가해 보겠습니다(제목 블록을 추가한 후).

신규 및 반복 방문자를 위해 이러한 행을 만들었으므로 더 많은 판매를 유도하기 위해 판매 중인 제품을 표시하는 행도 추가해 보겠습니다. WooCommerce 블록 아래의 On Sale 블록을 다시 사용하여 이 작업을 수행합니다(제목 블록을 사용하여 제목을 추가한 후).

요구 사항에 따라 WooCommerce 블록 아래에 더 많은 블록을 추가할 수 있습니다. 이제 모든 제품을 Shop 페이지에 추가해 보겠습니다. 이를 위해 카테고리별 제품 블록을 선택할 수 있습니다.

대부분의 경우 블록의 가장 많이 사용된 범주에서 이러한 모든 블록을 찾을 수도 있지만 이 자습서의 목적을 위해 할당된 범주에서 해당 블록을 선택했습니다. 고객이 해당 섹션의 전체 제품 목록을 볼 수 있도록 모든 제목을 판매 페이지, 베스트 셀러 페이지 등과 같은 해당 페이지에 연결할 수 있습니다.

Shop/Home 페이지에서 Browse Store라는 버튼을 추가할 수 있습니다. 이 버튼은 Shop 페이지로 연결됩니다.

버튼을 추가하려면 레이아웃 요소 블록 중에서 선택해야 합니다.

이 버튼을 Shop 페이지에 연결합니다.

마찬가지로 "베스트 셀러" 블록, "판매 중" 블록 등과 같이 우리가 만든 다른 모든 블록 아래에 버튼을 만들고 이들 모두에 대해 별도의 페이지를 만들고 버튼을 해당 페이지에 연결할 수 있습니다.

별도의 제품 유형(베스트 셀러 또는 세일 제품)에 대해 별도의 페이지를 생성하려면 해당 페이지에 이러한 특정 유형의 제품을 표시하는 단축 코드를 사용할 수 있습니다. 이 게시물에서는 다양한 단축 코드를 사용하여 홈페이지(또는 모든 페이지)에 다양한 카테고리의 제품을 표시하는 방법에 대해 이야기했습니다.

이것이 우리 페이지의 최종 모습입니다.

이제 사용자 정의(프론트 엔드에서 페이지를 미리 볼 때)를 클릭하여 첫 페이지로 만들기만 하면 됩니다. 이것이 Gutenberg를 사용하여 WooCommerce 스토어의 매력적인 첫 페이지를 만드는 것이 얼마나 쉬운지 보여줍니다. 기능을 최대한 활용하기 위해 구텐베르크가 제공하는 다양한 블록을 탐색하고 실험하십시오!