كيفية إنشاء موقع ويب ديناميكي للمواعيد باستخدام 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 demo اليوم. تذكر أن العرض التوضيحي لا يمكن أن يعمل على النحو المنشود إذا كانت بعض الامتدادات المميزة مفقودة. قد ترغب في الحصول عليها أولاً.

بمجرد اكتمال تثبيت النموذج التجريبي ، تكون جاهزًا لإنشاء موقع ويب ديناميكي للموعد.

بناء موقع مخصص للمواعيد

داخل كل موقع ويب لجدولة المواعيد والأحداث ، هناك أنواع منشورات مخصصة لمقدمي الخدمات والخدمات ، وأساسيات حجز المواعيد الآلي ، وتكامل التقويم ، ونموذج الحجز. هذه عناصر أساسية ، لكن لك الحرية في تمديد القائمة كيفما تشاء.

الآن ، دعنا نستخدم ملحقات JetEngine و JetAppointment بشكل جيد.

إنشاء أنواع المنشورات المخصصة

لماذا تحتاج إلى إنشاء CPT؟ سوف يساعدونك في تنظيم منشورات الموقع - خدمات للخدمات ومقدمي الخدمات. بعد ذلك ، يمكن ربط هذه المنشورات بسهولة للسماح لمستخدمي الموقع بحجز خدمة معينة من أولئك الذين يقدمونها.

اتبع JetEngine> أنواع المنشورات> إضافة مسار جديد في لوحة إدارة WordPress لإنشاء CPT. تذكر أنك بحاجة إلى نوعين من المنشورات - أحدهما لمقدمي الخدمات والآخر للخدمات. نظرًا لأننا نبني موقعًا رياضيًا ، فسيتم تسمية أنواع المنشورات باسم المدربين والتدريبات وفقًا لذلك.

أضف حقول التعريف الضرورية إلى كلا نوعي المنشور. بالنسبة لمدربي CPT ، يمكن أن تكون هذه:

• صورة فوتوغرافية؛
• سيرة ذاتية قصيرة
• خبرة في العمل؛
• الإنجازات.
• صالة عرض؛
• جهات الاتصال.

بالنسبة لـ Workouts CPT ، يمكن أن تكون حقول التعريف كما يلي:

• صالة عرض؛
• وصف؛
• السعة القصوى؛
• معدات؛
• الفوائد الصحية.

نصيحة سريعة : يتمتع JetEngine بميزة مسرد مفيدة. يتيح لك إنشاء مجموعة من حقول التعريف واستخدامها كخيارات لأنواع المنشورات المخصصة.

بعد ذلك ، أضف العديد من المنشورات إلى أنواع المنشورات التي تم إنشاؤها حديثًا حسب الضرورة. للقيام بذلك ، مرر الماوس فوق اسم CPT في لوحة إدارة WordPress ثم اضغط على " إضافة جديد ".

بمجرد الانتهاء من ذلك ، يمكنك المتابعة لتكوين المكون الإضافي JetAppointment.

إعداد JetAppointment

ليس من الصعب تعيين المكون الإضافي لحجز المواعيد بواسطة Crocoblock. كل ما عليك فعله هو تشغيل معالج الإعداد وإكمال خطوات التثبيت الأربع.

انتقل إلى المواعيد> الإعداد في لوحة الإدارة. سيتم نقلك إلى صفحة إعدادات JetPlugins ، وبالتحديد إلى علامة التبويب إعداد JetAppointment. انقر فوق الزر المسمى بالمثل لتشغيل المعالج.

• الخطوة 1 . تحتاج إلى اختيار أنواع منشورات الخدمات والمقدمين في تحديدات القائمة المنسدلة المقابلة. لا تنسَ تمكين إضافة موفري التبديل ؛ وإلا فلن يظهر الحقل. انقر فوق " التالي ".

• الخطوة الثانية . هنا ، يمكنك رؤية أعمدة جدول قاعدة البيانات المطلوبة. استمر في التثبيت إذا كنت لا ترغب في إضافة المزيد من الأعمدة. سنضيف الهاتف والتعليقات.

• الخطوة 3 . هذه الخطوة مخصصة لتكوين الخدمة والتفاصيل الخاصة بمزود الخدمة مثل المدة ، والوقت الاحتياطي ، وأيام العطلة ، وساعات العمل ، وما إلى ذلك.

• الخطوة 4 . أخيرًا ، يمكنك دمج WooCommerce وإنشاء نموذجين لحجز المواعيد. تتضمن الخيارات المتاحة "JetEngine Forms" و "JetFormBuilder". الأول مخصص لـ Elementor ، والثاني مخصص لـ Gutenberg.

اضغط على زر "إنهاء" لإنهاء الإعداد.

قبل أن تقوم بتحرير نماذج حجز المواعيد ، تحتاج إلى الربط بين منشورات مقدمي الخدمات والخدمات. افتح منشور الموفر وابحث عن علامة التبويب " الخدمات ذات الصلة " في الشريط الجانبي الأيسر. اكتب ثلاثة أحرف في منطقة النص هذه واختر الخدمة الضرورية بمجرد أن يقترحها النظام.

كرر الإجراء عدة مرات حيث توجد مشاركات موفر مخصصة. بمجرد الانتهاء ، تكون جاهزًا للعب مع النماذج.

JetFormBuilder وإضافة شكل إلى الصفحات

ما يميز منتجات Crocoblock هو أن بعضها مجاني بالفعل. خذ JetFormBuilder. إنه مكون إضافي لبناء نماذج WordPress يسمح لمطوري المواقع ببناء نماذج ديناميكية في محرر صفحة Gutenberg. يمكنك تنزيل البرنامج المساعد وتنشيطه واستخدامه على الفور.

انتقل إلى JetFormBuilder> Forms . سيكون النموذجان اللذان تم إنشاؤهما هناك. سيتعين علينا تعديلها لأننا أضفنا عمودين إلى جدول قاعدة البيانات أثناء إعداد الموعد. الآن ، نحتاج إلى إضافة حقول التعريف الضرورية إلى النموذج وإجراءات ما بعد الإرسال.

انقر لتحرير نموذج حجز الصفحة الثابتة وإضافة حقول التعريف المفقودة عن طريق سحب وإسقاط كتل جوتنبرج المقابلة. سنحتاج إلى اثنين - حقل نصي وحقل نصي - لإضافة حقلي الهاتف والتعليق.

بعد ذلك ، تحتاج إلى إدخال هذه الحقول في إجراءات إرسال الإرسال. للقيام بذلك ، اضغط على علامة التبويب JetForm ، وقم بالتمرير لأسفل إلى قسم إجراءات إرسال الإرسال ، وانقر فوق رمز القلم الرصاص أسفل اسم الإجراء. سترى نافذة تحرير ما بعد إرسال الإجراء ، حيث من المفترض أن تحدد حقول النموذج التي تنتمي إليها.

بالإضافة إلى ذلك ، يمكنك إعداد تكامل WooCommerce هنا ، بشرط أن تكون قد قمت بتمكينه في الخطوة 4. بمجرد الانتهاء ، انقر فوق الزر " تحديث ".

نصيحة سريعة . لا تتردد في إضافة العديد من إجراءات ما بعد الإرسال مرة واحدة ولكن تأكد من أن شروطها لا تتعارض مع بعضها البعض. في هذه الحالة ، سيفشل إرسال النموذج.

بمجرد الانتهاء من تخصيص نموذج حجز الصفحة الثابتة ، قم بتحديثه وإضافته إلى صفحة موقع الويب. لقد أنشأنا صفحة مخصصة لجميع التدريبات ، والتي تعرض قائمة JetEngine الديناميكية. سيبدو نموذج الحجز جميلًا تحت الشبكة.

افتح الصفحة حيث ترغب في وضع النموذج ، وابحث عن كتلة JetForm في الشريط الجانبي الأيسر ، واسحبها وأفلتها في المنطقة المطلوبة ، ثم اختر النموذج الذي قمت بتحريره للتو في القائمة المنسدلة اختيار النموذج على الشريط الجانبي الأيمن .

قم بتحديث الصفحة وشاهد كيف تبدو على الواجهة الأمامية.

الآن ، القراء الأكثر انتباهاً هم مثل ، "كيف يتم تصميم النموذج؟". هذا لأننا طرحنا مكونًا إضافيًا آخر في المزيج. استمر في القراءة لمعرفة أيهما.

ارجع إلى لوحة معلومات WordPress وافتح مسار المواعيد> المواعيد . إليكم الأمر - جميع المواعيد ضيقة. يمكنك عرض وتحرير وحذف وتصفيتها وتغيير حالتها هنا.

كما ترى ، فإن وظيفة حجز المواعيد تعمل. ومع ذلك ، هناك المزيد من الأشياء التي يمكنك القيام بها لجعل موقع جدولة المواعيد أكثر ديناميكية.