如何使用 OceanWP 和 Crocoblock 創建動態約會網站

您是否正在尋找建立一個動態的預約網站？ 對於那些認為很難部署的人來說，這是個好消息——事實並非如此。 如今，您不需要開發人員、編碼人員和設計師。 您只需要正確的工具。

在本文中，您將了解什麼是好的約會網站。 我們將帶您完成整個站點創建程序並分發我們使用過的工具。 最後，您將了解如何僅使用 OceanWP 和幾個 Crocoblock 插件來創建預訂系統。

是什麼讓 OceanWP 和 Crocoblock 一起偉大

• 視覺網站建設。 由於 Gutenberg 是一個可視化的塊編輯器，網站開發人員可以節省在管理面板和前端之間來回切換的時間。 在編輯器中創建頁面結構並確保前端版本看起來相同就足夠了。
• 更少的外部插件。 忘記用於自定義帖子類型、表單、預訂管理、自定義字段等的單獨插件。要啟動並運行約會功能，您只需要兩個 Crocoblock 插件。
• 沒有中間人。 這意味著開發人員不必依賴設計人員。 您可以使用 OceanWP 的演示模板，根據需要修改其佈局，並為其添加 Crocoblock 動態功能。

預約網站101

什麼是預約網站？

約會網站是提供服務的平台，可以在其中預訂特定時間段。 通常，這些網站提供按小時付費的服務。

約會網站是什麼樣的？

它們可以是單頁名片網站，可以從單一提供商處預訂特定服務。 另一方面，預約網站可以容納多個提供者。 在這種情況下，該網站有​​專門的提供商和服務單頁和目錄。

創建預約網站難嗎？

不再。 如今，您可以使用正確的工具從頭開始構建動態網站——您喜歡的頁面構建器、主題提供者、一些動態內容插件和預約核心。

約會網站的主要元素是什麼？

這些將是主題、自定義帖子類型、約會預訂引擎、預訂表格、提供商頁面、服務頁面、目錄頁面和列表。

我可以將多個提供商添加到同一個網站嗎？

為什麼不？ 幾位專業人員可以提供一項服務。 確保為該服務指定一個供應商，以避免在填寫預訂表格時出現混淆。

預約網站：基本準備

我們決定省略獲取域名和選擇託管服務提供商等早期準備工作。 相反，我們將專注於本質。 對於那些想要深入了解細節的人，Ferdy Korpershoek 提供了一段內容豐富的視頻。

獲取 Crocoblock 插件

Crocoblock 六個月前推出了最新定價。 是什麼讓它很酷？ 這是自定義訂閱計劃。 現在，要創建一個可行的約會網站，您不必花費太多。 轉到 Crocoblock 定價頁面，展開JetPlugins選項卡，然後將必要的插件添加到購物車。

你需要JetEngine – 一個動態內容插件，允許創建自定義帖子類型 – 和JetAppointment – 服務預訂 WordPress 插件。

這樣的定制套餐將花費您 45 美元/年的一個網站和 93 美元/年的無限網站。 此外，您將獲得一整年的插件更新和質量支持。 將這些插件上傳到 WordPress 儀表板，讓它們為進一步工作做好準備。

安裝 OceanWP 主題並選擇網站模板

安裝核心主題有兩種方式——傳統方式和 Crocoblock 方式。

以傳統方式安裝 OceanWP 主題

轉到 WordPress 管理面板中的外觀 > 主題，然後按“添加新”。 您可以使用搜索欄來定位主題。 找到後，安裝 OceanWP 並激活它。

以 Crocoblock 方式安裝 OceanWP 主題

使用 Crocoblock 安裝嚮導。 它可以從 Crocoblock 帳戶下載，然後用於安裝 OceanWP。

要選擇演示模板，請轉到主題面板 > 安裝演示並選擇您需要的模板。 今天我們將使用Gym演示模板。 請記住，如果缺少某些高級擴展，演示將無法按預期工作。 你可能想先得到它們。

演示模板安裝完成後，您就可以構建動態約會網站了。

構建自定義約會網站

在每個約會和活動安排網站中，都有針對提供商和服務的自定義帖子類型、自動約會預訂核心、日曆集成和預訂表格。 這些是基本要素，但您可以隨意擴展列表。

現在，讓我們好好利用 JetEngine 和 JetAppointment 插件。

自定義帖子類型創建

為什麼需要創建 CPT？ 他們將幫助您組織網站帖子——服務對服務，供應商對供應商。 之後，這些帖子可以很容易地相互關聯，讓網站用戶從提供服務的人那裡預訂特定服務。

按照 WordPress 管理面板中的JetEngine > Post Types > Add New路徑來創建 CPT。 請記住，您需要兩種帖子類型——一種用於提供者，一種用於服務。 由於我們正在構建一個 Gym 網站，因此帖子類型將相應地命名為Trainers和Workouts 。

將必要的元字段添加到兩種帖子類型。 對於培訓師 CPT ，這些可能是：

• 照片;
• 簡短的簡歷；
• 工作經驗;
• 成就；
• 畫廊;
• 聯繫人。

對於Workouts CPT ，元字段可以如下所示：

• 畫廊;
• 描述;
• 最大容量;
• 設備;
• 對健康的益處。

快速提示：JetEngine 有一個有用的詞彙表功能。 它允許您創建一組元字段並將它們用作自定義帖子類型的選項。

接下來，根據需要將盡可能多的帖子添加到新創建的帖子類型中。 為此，請將鼠標懸停在 WordPress 管理面板中的 CPT 名稱上，然後按“添加新”。

完成後，您可以繼續配置 JetAppointment 插件。

JetAppointment 設置

通過 Crocoblock 設置預約插件並不難。 您所要做的就是運行安裝嚮導並完成四個安裝步驟。

轉到管理面板中的約會 > 設置。 您將被帶到JetPlugins 設置頁面，即 JetAppointment 的設置選項卡。 單擊名稱相似的按鈕以運行嚮導。

• 步驟 1 。 您需要在相應的下拉選擇中選擇服務和提供者帖子類型。 不要忘記啟用添加提供者切換； 否則，該字段將不會出現。 點擊“下一步”。

• 步驟 2 。 在這裡，您可以看到所需的數據庫表列。 如果您不想添加更多列，請繼續安裝。 我們將添加電話和評論。

• 步驟 3 。 此步驟專門用於配置服務和提供商特定的詳細信息，例如持續時間、緩衝時間、休息日、工作時間等。有關詳細的步驟概述，請查看此視頻教程。

• 第 4 步。 最後，您可以集成WooCommerce並創建兩個預約表格。 可用選項包括“JetEngine Forms”和“JetFormBuilder”。 第一個用於 Elementor，第二個用於 Gutenberg。

按“完成”按鈕完成設置。

在編輯預約表格之前，您需要將提供者和服務帖子相互關聯。 打開提供商的帖子並在左側邊欄中找到相關服務選項卡。 在該文本區域中鍵入三個字符，並在系統建議後選擇必要的服務。

重複該過程的次數與有專門的提供者帖子一樣多。 完成後，您就可以使用這些表格了。

JetFormBuilder 和表單添加到頁面

Crocoblock 產品的優點是有些產品實際上是免費的。 以 JetFormBuilder 為例。 這是一個 WordPress 表單構建插件，允許站點開發人員在 Gutenberg 頁面編輯器中構建動態表單。 您可以下載插件、激活它並立即使用它。

轉到JetFormBuilder > 表單。 這兩個生成的表格將在那裡。 我們必須編輯它們，因為我們在約會設置期間向 DB 表添加了兩列。 現在，我們需要將必要的元字段添加到表單和提交後操作。

單擊以編輯靜態頁面預訂表格並通過拖放相應的 Gutenberg 塊來添加缺少的元字段。 我們需要兩個——一個文本字段和一個文本區域字段——來添加電話和評論字段。

接下來，您需要將這些字段輸入到 Post Submit Actions 中。 為此，請按JetForm選項卡，向下滾動到Post Submit Actions部分，然後單擊操作名稱下方的鉛筆圖標。 您將看到一個 Post Submit Action 編輯窗口，您應該在其中選擇它們所屬的表單字段。

除此之外，您可以在此處設置 WooCommerce 集成，前提是您已在第 4 步啟用它。完成後，單擊“更新”按鈕。

快速提示。 隨意一次添加多個 Post Submit Actions，但要確保它們的條件不會相互矛盾。 在這種情況下，表單提交將失敗。

完成自定義靜態頁面預訂表單後，對其進行更新並將其添加到網站頁面。 我們創建了一個專用的所有鍛煉頁面，其中顯示了一個動態的 JetEngine 列表。 預訂表格在網格下看起來很可愛。

打開您要放置表單的頁面，在左側邊欄中找到JetForm塊，將其拖放到所需區域，然後在右側邊欄的“選擇表單”下拉菜單中選擇您剛剛編輯的表單.

更新頁面並查看它在前端的外觀。

現在，最細心的讀者會說，“表格怎麼樣式化了？”。 那是因為我們在其中加入了另一個插件。 繼續閱讀以找出哪個。

返回 WordPress 儀表板並打開約會 > 約會路徑。 你有它 - 所有的約會都坐得緊緊的。 您可以在此處查看、編輯、刪除它們、過濾和更改它們的狀態。

如您所見，預約功能已啟動並正在運行。 但是，您可以做更多的事情來使預約安排網站更加動態。