OceanWP 및 Crocoblock으로 동적 약속 웹사이트를 만드는 방법

역동적인 약속 예약 웹사이트를 구축하고 싶으십니까? 배포가 어렵다고 생각하는 사람들에게 희소식이 있습니다. 하지만 그렇지 않습니다. 요즘에는 개발자, 코더, 디자이너가 필요하지 않습니다. 올바른 도구만 있으면 됩니다.

이 기사에서는 좋은 약속 웹사이트가 무엇인지 알아볼 것입니다. 전체 사이트 생성 루틴을 안내하고 사용한 도구를 나눠드립니다. 결국 OceanWP와 여러 Crocoblock 플러그인을 사용하여 예약 시스템을 만드는 방법을 알아낼 것입니다.

OceanWP와 Crocoblock을 함께 사용하면 좋은 점

• 시각적 사이트 구축 . Gutenberg는 시각적 블록 편집기이므로 웹 사이트 개발자는 관리자 패널과 프런트 엔드 간에 전환하는 시간을 절약할 수 있습니다. 편집기에서 페이지 구조를 만들고 프런트 엔드 버전이 동일하게 보이도록 하는 것으로 충분합니다.
• 적은 수의 외부 플러그인 . 사용자 정의 게시물 유형, 양식, 예약 관리, 사용자 정의 필드 등에 대한 별도의 플러그인은 잊어버리십시오. 약속 기능을 시작하고 실행하려면 두 개의 Crocoblock 플러그인만 필요합니다.
• 중개인이 없습니다 . 즉, 개발자가 디자이너에게 의존할 필요가 없습니다. OceanWP에서 데모 템플릿을 가져와 원하는 대로 레이아웃을 재작업하고 Crocoblock 동적 기능을 추가할 수 있습니다.

약속 웹사이트 101

약속 예약 웹 사이트는 무엇입니까?

약속 웹사이트는 특정 시간대를 예약할 수 있는 서비스 제공 플랫폼입니다. 종종 이러한 웹사이트는 시간당 지불 서비스를 제공합니다.

약속 웹사이트는 어떻게 생겼습니까?

단일 공급자로부터 특정 서비스를 예약할 수 있는 한 페이지짜리 명함 웹사이트가 될 수 있습니다. 반면에 약속 웹사이트는 여러 제공자를 수용할 수 있습니다. 이 경우 웹 사이트에는 전용 공급자 및 서비스 단일 페이지와 카탈로그가 있습니다.

약속 웹 사이트를 만드는 것이 어렵습니까?

더 이상은 아닙니다. 요즘에는 선호하는 페이지 빌더, 테마 제공자, 일부 동적 콘텐츠 플러그인 및 약속 예약 코어와 같은 올바른 도구를 사용하여 처음부터 동적 웹사이트를 구축할 수 있습니다.

주요 약속 웹사이트 요소는 무엇입니까?

테마, 사용자 정의 게시물 유형, 약속 예약 엔진, 예약 양식, 공급자 페이지, 서비스 페이지, 카탈로그 페이지 및 목록이 있습니다.

동일한 웹사이트에 여러 공급자를 추가할 수 있습니까?

왜 안 돼? 여러 전문가가 하나의 서비스를 제공할 수 있습니다. 예약 양식 작성 단계에서 혼동을 피하기 위해 서비스 제공자를 지정하십시오.

약속 웹사이트: 기본 준비

우리는 도메인 이름을 얻고 호스팅 공급자를 선택하는 것과 같은 초기 단계의 준비를 생략하기로 결정했습니다. 대신 본질에 집중할 것입니다. 자세한 내용을 알고 싶은 사람들을 위해 Ferdy Korpershoek의 매우 유익한 비디오가 있습니다.

Crocoblock 플러그인 받기

Crocoblock은 6개월 전에 업데이트된 가격을 도입했습니다. 멋진 이유는 무엇입니까? 커스텀 구독 플랜입니다. 이제 실행 가능한 약속 웹사이트를 만들기 위해 많은 비용을 들일 필요가 없습니다. Crocoblock 가격 책정 페이지로 이동하여 JetPlugins 탭을 펼치고 필요한 플러그인을 장바구니에 추가하십시오.

JetEngine 이 필요합니다 – 사용자 정의 게시물 유형을 생성할 수 있는 동적 콘텐츠 플러그인 – 및 JetAppointment – 서비스 예약 WordPress 플러그인.

이러한 맞춤형 패키지는 웹사이트 하나에 대해 연간 $45, 무제한 웹사이트에 대해 연간 $93의 비용이 듭니다. 또한 1년 동안 플러그인 업데이트 및 품질 지원을 받을 수 있습니다. 이 플러그인을 WordPress 대시보드에 업로드하고 추가 작업을 위해 준비하세요.

OceanWP 테마 설치 및 웹사이트 템플릿 선택

핵심 테마를 설치하는 방법에는 전통적인 방법과 Crocoblock 방법의 두 가지가 있습니다.

OceanWP 테마를 전통적인 방식으로 설치

WordPress 관리자 패널에서 모양 > 테마 로 이동하고 " 새로 추가 "를 누릅니다. 검색 창을 사용하여 테마를 찾을 수 있습니다. 찾으면 OceanWP를 설치하고 활성화하십시오.

Crocoblock 방식으로 OceanWP 테마 설치

Crocoblock 설치 마법사를 사용하십시오. Crocoblock 계정에서 다운로드한 다음 OceanWP를 설치하는 데 사용할 수 있습니다.

데모 템플릿을 선택하려면 테마 패널 > 데모 설치 로 이동하여 필요한 템플릿을 선택하십시오. 오늘은 체육관 데모 템플릿을 사용할 것입니다. 프리미엄 확장 기능 중 일부가 누락된 경우 데모가 의도한 대로 작동하지 않는다는 점을 기억하십시오. 그것들을 먼저 받고 싶을 수도 있습니다.

데모 템플릿 설치가 완료되면 동적 약속 웹사이트를 구축할 준비가 된 것입니다.

맞춤형 약속 웹사이트 구축

모든 약속 및 이벤트 예약 웹사이트에는 제공자 및 서비스 에 대한 맞춤형 게시물 유형, 자동화된 약속 예약 코어, 캘린더 통합 및 예약 양식이 있습니다. 이것들은 필수 요소이지만 원하는 대로 목록을 확장할 수 있습니다.

이제 JetEngine 및 JetAppointment 플러그인을 잘 사용하도록 하겠습니다.

사용자 정의 게시물 유형 생성

왜 CPT를 만들어야 합니까? 그들은 당신이 웹사이트 게시물을 구성하는 데 도움을 줄 것입니다. 서비스는 서비스, 제공자는 제공자입니다. 그 후, 이러한 게시물은 웹사이트 사용자가 제공하는 특정 서비스를 예약할 수 있도록 쉽게 상호 연관될 수 있습니다.

WordPress 관리자 패널에서 JetEngine > 게시물 유형 > 새 경로 추가 를 따라 CPT를 생성합니다. 두 가지 게시물 유형이 필요하다는 것을 기억하십시오. 하나는 제공자용이고 다른 하나는 서비스용입니다. 우리는 체육관 웹사이트를 구축하고 있으므로 게시물 유형은 그에 따라 Trainers 및 Workouts 로 이름이 지정됩니다.

두 게시물 유형에 필요한 메타 필드를 추가합니다. Trainers CPT 의 경우 다음이 될 수 있습니다.

• 사진;
• 짧은 약력;
• 직장 경험;
• 업적;
• 갤러리;
• 콘택트 렌즈.

운동 CPT 의 경우 메타 필드는 다음과 같을 수 있습니다.

• 갤러리;
• 설명;
• 최대 용량;
• 장비;
• 건강 혜택.

빠른 팁 : JetEngine에는 유용한 용어집 기능 이 있습니다. 이를 통해 메타 필드 세트를 생성하고 이를 사용자 정의 게시물 유형에 대한 옵션으로 사용할 수 있습니다.

그런 다음 새로 생성된 게시물 유형에 필요한 만큼 게시물을 추가합니다. 그렇게 하려면 WordPress 관리자 패널에서 CPT 이름 위로 마우스를 이동한 다음 " 새로 추가 "를 누르십시오.

완료되면 JetAppointment 플러그인 구성을 진행할 수 있습니다.

JetAppointment 설정

Crocoblock에서 약속 예약 플러그인을 설정하는 것은 그리 어렵지 않습니다. 설치 마법사를 실행하고 네 가지 설치 단계를 완료하기만 하면 됩니다.

관리자 패널에서 약속 > 설정 으로 이동합니다. JetPlugins 설정 페이지, 즉 JetAppointment의 설정 탭으로 이동합니다. 마법사를 실행하려면 비슷한 이름의 버튼을 클릭하십시오.

• 1단계 . 해당 드롭다운 선택 항목에서 서비스 및 제공자 게시물 유형을 선택해야 합니다. 공급자 추가 토글을 활성화하는 것을 잊지 마십시오. 그렇지 않으면 필드가 나타나지 않습니다. " 다음 "을 클릭합니다.

• 2단계 . 여기에서 필요한 데이터베이스 테이블 열을 볼 수 있습니다. 열을 더 추가하고 싶지 않다면 설치를 계속하십시오. 전화 및 댓글을 추가하겠습니다.

• 3단계 . 이 단계는 기간, 버퍼 시간, 휴무일, 근무 시간 등과 같은 서비스 및 공급자별 세부 정보를 구성하는 데 전념합니다. 자세한 단계 개요는 이 비디오 자습서를 확인하십시오.

• 4단계 . 마지막으로 WooCommerce 를 통합하고 두 가지 약속 예약 양식을 만들 수 있습니다. 사용 가능한 옵션에는 "JetEngine Forms" 및 "JetFormBuilder"가 있습니다. 첫 번째는 Elementor를 위한 것이고 두 번째는 Gutenberg를 위한 것입니다.

"마침" 버튼을 눌러 설정을 마칩니다.

약속 예약 양식을 편집하기 전에 제공자와 서비스 게시물을 상호 연관시켜야 합니다. 제공자의 게시물을 열고 왼쪽 사이드바에서 관련 서비스 탭을 찾으십시오. 해당 텍스트 영역에 3자를 입력하고 시스템이 제안하면 필요한 서비스를 선택하십시오.

전용 Provider 게시물이 있는 만큼 절차를 반복합니다. 완료되면 양식을 가지고 놀 준비가 된 것입니다.

JetFormBuilder 및 페이지에 양식 추가

Crocoblock 제품의 뛰어난 점은 일부가 실제로 무료라는 것입니다. JetFormBuilder를 가져오세요. 사이트 개발자가 Gutenberg 페이지 편집기에서 동적 양식을 작성할 수 있도록 하는 WordPress 양식 작성 플러그인입니다. 플러그인을 다운로드하여 활성화하고 바로 사용할 수 있습니다.

JetFormBuilder > 양식 으로 이동합니다. 두 개의 생성된 양식이 있을 것입니다. 약속 설정 중에 DB 테이블에 두 개의 열을 추가했기 때문에 편집해야 합니다. 이제 필요한 메타 필드를 양식 및 사후 제출 작업에 추가해야 합니다.

클릭하여 정적 페이지 예약 양식 을 편집하고 해당 Gutenberg 블록을 끌어다 놓아 누락된 메타 필드를 추가하십시오. 전화 및 설명 필드를 추가하려면 두 개의 텍스트 필드 와 텍스트 영역 필드 가 필요합니다.

다음으로 이 필드를 Post Submit Actions에 입력해야 합니다. 그렇게 하려면 JetForm 탭을 누르고 Post Submit Actions 섹션으로 스크롤한 다음 작업 이름 아래에 있는 연필 아이콘을 클릭합니다. 당신은 그들이 속한 양식 필드를 선택해야 하는 Post Submit Action 편집 창을 보게 될 것입니다.

그 외에도 4단계에서 활성화했다면 여기에서 WooCommerce 통합을 설정할 수 있습니다. 완료되면 " 업데이트 " 버튼을 클릭하십시오.

빠른 팁 . 여러 게시물 제출 작업을 한 번에 추가할 수 있지만 조건이 서로 모순되지 않도록 하십시오. 이 경우 양식 제출이 실패합니다.

정적 페이지 예약 양식 사용자 정의가 완료되면 업데이트하고 웹 사이트 페이지에 추가하십시오. 동적 JetEngine 목록을 보여주는 전용 모든 운동 페이지를 만들었습니다. 예약 양식은 그리드 아래에서 멋지게 보일 것입니다.

양식을 배치할 페이지를 열고 왼쪽 사이드바에서 JetForm 블록을 찾아 원하는 영역으로 끌어다 놓은 다음 오른쪽 사이드바의 양식 선택 드롭다운에서 방금 편집한 양식을 선택합니다. .

페이지를 업데이트하고 프런트 엔드에서 어떻게 보이는지 확인하십시오.

자, 가장 주의를 기울이는 독자는 "어떻게 양식이 양식화되었나요?"와 같습니다. 그것은 우리가 다른 플러그인을 믹스에 넣었기 때문입니다. 계속해서 읽어보세요.

WordPress 대시보드로 돌아가서 약속 > 약속 경로를 엽니다. 모든 약속이 꽉 차 있습니다. 여기에서 보고, 편집, 삭제, 필터링 및 상태를 변경할 수 있습니다.

보시다시피 약속 예약 기능이 실행 중입니다. 그러나 약속 예약 웹 사이트를 더욱 동적으로 만들기 위해 할 수 있는 일이 더 있습니다.