레스토랑용 맞춤 메뉴 만들기(P2) - 구텐베르크 사용

the previous post에서는 식당 주인이 쉽게 메뉴 요리를 변경할 수 있는 맞춤형 메뉴를 만들었습니다. 그러나 이것은 Elementor 페이지 빌더만 사용하는 웹사이트를 위한 방법입니다. 이 플러그인을 구입하기 위해 돈을 쓰고 싶지 않다면 대신 Gutenberg를 사용할 수 있습니다. 무료이지만 몇 줄의 코드를 사용해야 합니다. 이 기사에서 자세한 지침을 읽어 봅시다.

준비

이 게시물에서는 이전처럼 Restaurant 테마를 사용하는 대신 Gutenberg를 강력하게 지원하는 다른 테마eStar로 전환하여 모양을 보다 유연하게 사용자 지정할 수 있습니다. 이 테마는 완전 무료이므로 사용해 볼 수도 있습니다.

또한 이전 게시물에서와 같이 여전히 WooCommerce를 사용하여 음식을 제품으로 만듭니다.

1단계: 요리 만들기

먼저 part 1과 같이 WooCommerce를 사용하여 요리를 제품으로 만듭니다. 여기에는 여전히 동일한 요리 목록이 있습니다.

2단계: 메뉴 페이지 만들기

일반 페이지를 만드는 것처럼 간단하게 페이지 > 새로 추가로 이동하여 페이지 정보를 입력합니다.

Gutenberg editor을 사용하면 페이지 편집기에서 바로 블록을 만들 수 있습니다. 여기서는 Columns 블록을 선택하고 메뉴 레이아웃을 위해 두 개의 열로 설정했습니다.



열 블록을 선택했습니다.



메뉴 레이아웃에 대해 두 개의 열로 설정합니다.

메뉴 페이지에 요리를 추가하려면 아래와 같이 Hand-picked Products 블록을 추가하도록 선택합니다.



이 블록을 사용하면 1단계에서 만든 "제품"목록에서 모든 요리를 선택할 수 있습니다. 이 블록에서는 아름다운 디스플레이를 위해 한 열에 설정했습니다.



마지막으로 완료를 클릭하여 메뉴를 저장합니다.

이제 다음과 같이 표시된 요리가 있는 메뉴 페이지의 모양을 볼 수 있습니다.



그러나 가장 멋진 모양을 얻으려면 약간의 사용자 정의가 필요하다고 생각합니다. 이렇게 하려면 다음 단계에서와 같이 CSS를 사용해야 합니다.

3단계: CSS로 메뉴 페이지의 모양 맞춤설정

Gutenberg를 사용하고 있으므로 style.css 및 style-editor.css 파일 모두에 다음 CSS 코드를 추가해야 합니다. 구체적으로:

style.css 파일에 코드를 추가하면 프런트엔드에서 표시를 편집하는 데 도움이 됩니다.

style-editor.css 파일에 코드를 추가하면 백엔드(페이지 편집기)에서 표시를 편집하는 데 도움이 됩니다.

.wc-block-handpicked-products .wc-block-grid__product-image,

.wc-block-handpicked-products .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-onsale {

display: none;

}

.wc-block-handpicked-products .wc-block-grid__product {

display: flex;

justify-content: space-between;

}

.wc-block-handpicked-products .wc-block-grid__product .wc-block-grid__product-link {

flex: 1;

text-align: left;

}

.wc-block-handpicked-products .wc-block-grid__product-title {

font-size: 24px;

Color: #fff;

}

.wc-block-handpicked-products .wc-block-grid__products {

background-color: # 000;

border-radius: 25px;

padding: 20px;

}

.handpicked-products__title {

margin-bottom: 10px;

}

그런 다음 메뉴 페이지로 돌아가면 다음과 같이 표시된 요리 목록이 표시됩니다.



다음은 메뉴 페이지 모양의 결과입니다.



이제 요리 목록을 변경하기 위해 식당 주인은 메뉴 페이지 편집기로 이동하여 다음 작업을 따릅니다.

마무리

보시다시피 사용자 정의 메뉴를 만드는 것은 매우 쉽습니다. Gutenberg를 사용하는 경우 아름다운 모양을 얻기 위해 메뉴를 사용자 정의하기 위해 몇 줄의 CSS 코드만 있으면 됩니다. 메뉴를 더욱 생생하고 창의적으로 만들기 위해 다른 구텐베르크 블록을 추가하여 나만의 레이아웃을 만들 수도 있습니다.

Elementor와 Gutenberg를 사용하여 사용자 정의 메뉴를 만드는 방법에 대한 이 두 가지 자습서를 통해 이미 적절한 방법을 선택하셨기를 바랍니다. 다른 아이디어가 있으면 주저하지 말고 아래 의견 섹션에서 공유하십시오.

--- --- ---

Meta Box의 간행물입니다.