วิธีสร้างเว็บไซต์นัดหมายแบบไดนามิกด้วย 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 และเปิดใช้งาน

การติดตั้งธีม OceanWP ด้วยวิธี Crocoblock

ใช้ตัวช่วยสร้างการติดตั้ง Crocoblock สามารถดาวน์โหลดได้จากบัญชี Crocoblock แล้วใช้ในการติดตั้ง OceanWP

ในการเลือกเทมเพลตการสาธิต ให้ไปที่ แผงธีม > ติดตั้งการสาธิต แล้วเลือกเทมเพลตที่คุณต้องการ เราจะใช้เทมเพลตสาธิต Gym วันนี้ โปรดจำไว้ว่าการสาธิตไม่สามารถทำงานได้ตามที่ตั้งใจไว้หากไม่มีส่วนขยายพรีเมียมบางตัว คุณอาจต้องการรับพวกเขาก่อน

ทันทีที่การติดตั้งเทมเพลตการสาธิตเสร็จสิ้น คุณก็พร้อมที่จะสร้างเว็บไซต์การนัดหมายแบบไดนามิก

การสร้างเว็บไซต์นัดหมายแบบกำหนดเอง

ภายในทุกเว็บไซต์การนัดหมายและการจัดกำหนดการกิจกรรม มีประเภทโพสต์ที่กำหนดเองสำหรับ ผู้ให้บริการ และ บริการ แกนการจองการนัดหมายอัตโนมัติ การรวมปฏิทิน และแบบฟอร์มการจอง สิ่งเหล่านี้เป็นองค์ประกอบที่สำคัญ แต่คุณมีอิสระที่จะขยายรายการตามที่คุณต้องการ

ตอนนี้ มาปรับใช้ปลั๊กอิน JetEngine และ JetAppointment ให้เป็นประโยชน์

การสร้างประเภทโพสต์ที่กำหนดเอง

ทำไมคุณต้องสร้าง CPT? พวกเขาจะช่วยคุณจัดระเบียบโพสต์ของเว็บไซต์ – บริการกับบริการ ผู้ให้บริการกับผู้ให้บริการ หลังจากนั้น โพสต์เหล่านี้สามารถเชื่อมโยงกันได้อย่างง่ายดายเพื่อให้ผู้ใช้เว็บไซต์จองบริการเฉพาะจากผู้ให้บริการดังกล่าว

ทำตาม JetEngine > ประเภทโพสต์ > เพิ่มเส้นทางใหม่ ในแผงการดูแลระบบ WordPress เพื่อสร้าง CPT จำไว้ว่าคุณต้องมีโพสต์สองประเภท – ประเภทหนึ่งสำหรับผู้ให้บริการและอีกประเภทหนึ่งสำหรับบริการ เนื่องจากเรากำลังสร้างเว็บไซต์ Gym ประเภทโพสต์จึงจะตั้งชื่อว่า Trainers และ Workouts ตามลำดับ

เพิ่มฟิลด์เมตาที่จำเป็นให้กับโพสต์ทั้งสองประเภท สำหรับ Trainers CPT สิ่งเหล่านี้อาจเป็น:

• รูปถ่าย;
• ชีวประวัติสั้น;
• ประสบการณ์การทำงาน;
• ความสำเร็จ;
• แกลเลอรี่;
• รายชื่อผู้ติดต่อ

สำหรับ Workouts CPT ฟิลด์เมตาอาจเป็นดังนี้:

• แกลเลอรี่;
• คำอธิบาย;
• ความจุสูงสุด
• อุปกรณ์;
• ประโยชน์ต่อสุขภาพ

เคล็ดลับด่วน : JetEngine มี คุณลักษณะอภิธานศัพท์ ที่มีประโยชน์ ช่วยให้คุณสร้างชุดของฟิลด์เมตาและใช้เป็นตัวเลือกสำหรับประเภทโพสต์ที่กำหนดเอง

ถัดไป เพิ่มโพสต์ในประเภทโพสต์ที่สร้างขึ้นใหม่เท่าที่จำเป็น ในการดำเนินการดังกล่าว ให้วางเมาส์เหนือชื่อ CPT ในแผงการดูแลระบบ WordPress แล้วกด “ เพิ่มใหม่ ”

เมื่อเสร็จแล้ว คุณสามารถดำเนินการกำหนดค่าปลั๊กอิน JetAppointment

ตั้งค่า JetAppointment

ไม่ยากเลยที่จะตั้งค่าปลั๊กอินการนัดหมายโดย Crocoblock สิ่งที่คุณต้องทำคือเรียกใช้วิซาร์ดการตั้งค่าและทำตามขั้นตอนการติดตั้งสี่ขั้นตอนให้เสร็จสิ้น

ไปที่ การนัดหมาย > ตั้งค่า ในแผงการดูแลระบบ คุณจะถูกนำไปที่หน้า การตั้งค่า JetPlugins ซึ่งก็คือแท็บการ ตั้งค่า ของ JetAppointment คลิกที่ปุ่มที่มีชื่อคล้ายกันเพื่อเรียกใช้ตัวช่วยสร้าง

• ขั้นตอนที่ 1 . คุณต้องเลือกประเภทโพสต์ของบริการและผู้ให้บริการในรายการแบบเลื่อนลงที่เกี่ยวข้อง อย่าลืมเปิดใช้งานการสลับ เพิ่มผู้ให้บริการ มิฉะนั้น ฟิลด์จะไม่ปรากฏ คลิก " ถัดไป "

• ขั้นตอนที่ 2 . ที่นี่ คุณสามารถดูคอลัมน์ตารางฐานข้อมูลที่จำเป็น ทำการติดตั้งต่อไปหากคุณไม่ต้องการเพิ่มคอลัมน์ เราจะเพิ่มโทรศัพท์และความคิดเห็น

• ขั้นตอนที่ 3 ขั้นตอนนี้มีไว้สำหรับการกำหนดค่าบริการและรายละเอียดเฉพาะของผู้ให้บริการ เช่น ระยะเวลา เวลาพัก วันหยุด ชั่วโมงทำงาน ฯลฯ สำหรับภาพรวมขั้นตอนโดยละเอียด โปรดดูวิดีโอแนะนำนี้

• ขั้นตอนที่ 4 สุดท้าย คุณสามารถรวม WooCommerce และสร้างแบบฟอร์มการจองการนัดหมายได้สองแบบ ตัวเลือกที่มี ได้แก่ “JetEngine Forms” และ “JetFormBuilder” อันแรกมีไว้สำหรับ Elementor และอันที่สองสำหรับ Gutenberg

กดปุ่ม "เสร็จสิ้น" เพื่อสิ้นสุดการตั้งค่า

ก่อนที่คุณจะแก้ไขแบบฟอร์มการจองการนัดหมาย คุณต้องเชื่อมโยงโพสต์ของผู้ให้บริการและการบริการ เปิดโพสต์ของผู้ให้บริการและค้นหาแท็บ บริการที่เกี่ยวข้อง ในแถบด้านข้างทางซ้าย พิมพ์อักขระสามตัวลงในพื้นที่ข้อความนั้นและเลือกบริการที่จำเป็นเมื่อระบบแนะนำ

ทำซ้ำขั้นตอนหลายๆ ครั้งตามที่มีโพสต์ของผู้ให้บริการโดยเฉพาะ เมื่อเสร็จแล้วคุณก็พร้อมที่จะเล่นกับแบบฟอร์ม

JetFormBuilder และแบบฟอร์มเพิ่มเติมในหน้า

สิ่งที่ยอดเยี่ยมเกี่ยวกับผลิตภัณฑ์ Crocoblock ก็คือบางผลิตภัณฑ์ฟรีจริงๆ ใช้ JetFormBuilder เป็นปลั๊กอินสร้างแบบฟอร์ม WordPress ที่ช่วยให้นักพัฒนาเว็บไซต์สามารถสร้างแบบฟอร์มแบบไดนามิกในตัวแก้ไขหน้า Gutenberg คุณสามารถดาวน์โหลดปลั๊กอิน เปิดใช้งาน และใช้งานได้ทันที

ไปที่ JetFormBuilder > Forms แบบฟอร์มที่สร้างขึ้นทั้งสองจะอยู่ที่นั่น เราจะต้องแก้ไขเนื่องจากเราได้เพิ่มสองคอลัมน์ในตารางฐานข้อมูลระหว่างการตั้งค่าการนัดหมาย ตอนนี้ เราต้องเพิ่มฟิลด์เมตาที่จำเป็นให้กับฟอร์มและการดำเนินการหลังการส่ง

คลิกเพื่อแก้ไข แบบฟอร์มการจองเพจแบบคง ที่และเพิ่มฟิลด์เมตาที่ขาดหายไปโดยลากและวางบล็อก Gutenberg ที่เกี่ยวข้อง เราต้องการสองฟิลด์ – ฟิลด์ข้อความ และ ฟิลด์ Textarea – เพื่อเพิ่มฟิลด์โทรศัพท์และความคิดเห็น

ถัดไป คุณต้องป้อนข้อมูลเหล่านี้ลงในการดำเนินการหลังการส่ง ในการดำเนินการดังกล่าว ให้กดแท็บ JetForm เลื่อนลงไปที่ส่วน " โพสต์การดำเนินการส่ง " แล้วคลิกไอคอนดินสอด้านล่างชื่อการดำเนินการ คุณจะเห็นหน้าต่างแก้ไขการดำเนินการโพสต์ส่ง ซึ่งคุณควรเลือกฟิลด์ของฟอร์มที่มันอยู่

นอกจากนั้น คุณสามารถตั้งค่าการรวม WooCommerce ได้ที่นี่ โดยคุณต้องเปิดใช้งานในขั้นตอนที่ 4 เมื่อเสร็จแล้ว ให้คลิกปุ่ม “ อัปเดต ”

เคล็ดลับด่วน . อย่าลังเลที่จะเพิ่มการดำเนินการโพสต์ส่งหลายรายการพร้อมกัน แต่ตรวจสอบให้แน่ใจว่าเงื่อนไขไม่ขัดแย้งกัน ในกรณีดังกล่าว การส่งแบบฟอร์มจะล้มเหลว

เมื่อคุณปรับแต่งแบบฟอร์มการจองหน้าคงที่เสร็จแล้ว ให้อัปเดตและเพิ่มลงในหน้าเว็บไซต์ เราได้สร้างหน้า All Workouts โดยเฉพาะ ซึ่งแสดงรายการ JetEngine แบบไดนามิก แบบฟอร์มการจองจะดูสวยงามภายใต้ตาราง

เปิดหน้าที่คุณต้องการวางแบบฟอร์ม ค้นหาบล็อก JetForm ในแถบด้านข้างซ้าย ลากและวางไปยังพื้นที่ที่ต้องการ จากนั้นเลือกแบบฟอร์มที่คุณเพิ่งแก้ไขในรายการดรอปดาวน์ เลือกแบบฟอร์ม ที่แถบด้านข้างขวา .

อัปเดตหน้าและดูว่าหน้าตาเป็นอย่างไรที่ส่วนหน้า

ตอนนี้ผู้อ่านที่ใส่ใจมากที่สุดคือ "ทำไมแบบฟอร์มนี้ถึงมีสไตล์" นั่นเป็นเพราะเราได้ใส่ปลั๊กอินอื่นลงในมิกซ์ อ่านต่อไปเพื่อหาว่า

กลับไปที่แดชบอร์ด WordPress และเปิดเส้นทาง การนัดหมาย > การนัดหมาย มีแล้ว – การนัดหมายทั้งหมดแน่นแฟ้น คุณสามารถดู แก้ไข ลบ กรอง และเปลี่ยนสถานะได้ที่นี่

อย่างที่คุณเห็น ฟังก์ชันการจองการนัดหมายเริ่มทำงานแล้ว อย่างไรก็ตาม มีหลายสิ่งที่คุณสามารถทำได้เพื่อทำให้เว็บไซต์การกำหนดเวลานัดหมายมีไดนามิกมากขึ้น