Cum să creați un site web dinamic pentru întâlniri cu OceanWP și Crocoblock

Doriți să construiți un site web dinamic de rezervare de întâlniri? Pentru cei care cred că este greu de implementat, există vești bune – nu este. În zilele noastre, nu aveți nevoie de dezvoltatori, programatori și designeri. Ai nevoie doar de instrumentele potrivite.

În acest articol, veți afla ce face un site bun pentru întâlniri. Vă vom ghida prin întreaga rutină de creare a site-ului și vă vom oferi instrumentele pe care le-am folosit. În cele din urmă, vă veți da seama cum să creați un sistem de rezervare folosind doar OceanWP și mai multe plugin-uri Crocoblock.

Ce face ca OceanWP și Crocoblock să fie grozavi împreună

• Construirea vizuală a site-ului . Deoarece Gutenberg este un editor de blocuri vizuale, dezvoltatorii de site-uri web pot economisi timp comutând înainte și înapoi între panoul de administrare și front-end. Va fi suficient să creați o structură de pagină în editor și să vă asigurați că versiunea front-end arată la fel.
• Mai puține pluginuri externe . Uitați de pluginuri separate pentru tipurile de postări personalizate, formulare, gestionarea rezervărilor, câmpuri personalizate etc. Pentru a activa funcționalitatea de programare, veți avea nevoie doar de două pluginuri Crocoblock.
• Fara intermediari . Înseamnă că dezvoltatorii nu trebuie să se bazeze pe designeri. Puteți lua un șablon demonstrativ de la OceanWP, puteți modifica aspectul după cum doriți și îi puteți adăuga funcționalitate dinamică Crocoblock.

Site-ul de programare 101

Ce este un site de rezervare de programare?

Site-urile web de programare sunt platforme de furnizare de servicii unde este posibil să rezervați un anumit interval orar. Adesea, aceste site-uri web oferă servicii cu plată pe oră.

Cum arată site-urile de programare?

Acestea pot fi site-uri web de cărți de vizită de o pagină, unde este posibil să rezervați un anumit serviciu de la un singur furnizor. Pe de altă parte, site-urile web de programare pot găzdui mai mulți furnizori. În acest caz, site-ul are pagini și cataloage unice dedicate Furnizorului și Serviciului.

Este dificil să creezi un site web de programare?

Nu mai. În zilele noastre, puteți construi un site web dinamic de la zero folosind instrumentele potrivite - un generator de pagini pe care îl preferați, un furnizor de teme, un plugin de conținut dinamic și nucleul de rezervare a programelor.

Care sunt principalele elemente ale site-ului de programare?

Acestea ar fi o temă, tipuri de postări personalizate, un motor de rezervare de întâlniri, formulare de rezervare, pagini de furnizor, pagini de servicii, pagini de catalog și listări.

Pot adăuga mai mulți furnizori pe același site web?

De ce nu? Mai mulți profesioniști pot oferi un singur serviciu. Asigurați-vă că atribuiți un furnizor serviciului pentru a evita confuzia în etapa de completare a formularului de rezervare.

Site-ul pentru programare: Pregătiri de bază

Am decis să omitem pregătirile din stadiul inițial, cum ar fi obținerea unui nume de domeniu și alegerea unui furnizor de găzduire. În schimb, ne vom concentra pe esență. Pentru cei care doresc să aprofundeze în detalii, există un videoclip super informativ de Ferdy Korpershoek.

Obțineți pluginuri Crocoblock

Crocoblock și-a prezentat prețurile actualizate în urmă cu șase luni. Ce îl face cool? Este planul de abonament personalizat . Acum, pentru a crea un site web de programare funcțional, nu va trebui să cheltuiți mult. Accesați pagina de prețuri Crocoblock, deschideți fila JetPlugins și adăugați pluginurile necesare în coș.

Veți avea nevoie de JetEngine – un plugin de conținut dinamic care permite crearea de tipuri de postări personalizate – și JetAppointment – un plugin WordPress de rezervare a serviciului.

Un astfel de pachet personalizat vă va costa 45 USD/an pentru un site web și 93 USD/an pentru site-uri web nelimitate. În plus, veți primi actualizări de pluginuri și asistență de calitate pentru un an întreg. Încărcați aceste plugin-uri în tabloul de bord WordPress și pregătiți-le pentru lucrări ulterioare.

Instalați tema OceanWP și alegeți un șablon de site

Există două moduri de a instala tema de bază – cea tradițională și modul Crocoblock.

Instalarea temei OceanWP în mod tradițional

Accesați Aspect > Teme din panoul de administrare WordPress și apăsați „ Adăugați nou ”. Puteți folosi bara de căutare pentru a localiza tema. Odată găsit, instalați OceanWP și activează-l.

Instalarea temei OceanWP în modul Crocoblock

Utilizați expertul de instalare Crocoblock. Poate fi descărcat din contul Crocoblock și apoi folosit pentru a instala OceanWP.

Pentru a alege un șablon demonstrativ, accesați Panoul tematic > Instalați demonstrații și alegeți-l pe cel de care aveți nevoie. Vom folosi șablonul demonstrativ Gym astăzi. Amintiți-vă că o demonstrație nu poate funcționa așa cum este prevăzut dacă lipsesc unele dintre extensiile premium. Poate doriți să le obțineți mai întâi.

De îndată ce instalarea șablonului demonstrativ este finalizată, sunteți gata să construiți un site web dinamic pentru întâlniri.

Crearea unui site web personalizat pentru întâlniri

În interiorul fiecărui site web de programare pentru întâlniri și evenimente, există tipuri de postări personalizate pentru Furnizori și Servicii , nucleu de rezervare automată a programelor, integrare în calendar și un formular de rezervare. Acestea sunt elemente esențiale, dar aveți libertatea de a extinde lista după cum doriți.

Acum, să folosim pluginurile JetEngine și JetAppointment.

Crearea tipurilor de postări personalizate

De ce trebuie să creați un CPT? Ele vă vor ajuta să organizați postările pe site - servicii către servicii, furnizori către furnizori. Ulterior, aceste postări pot fi ușor interconectate pentru a permite utilizatorilor site-ului web să rezerve un anumit serviciu de la cei care îl furnizează.

Urmați JetEngine > Tipuri de postări > Adăugați o cale nouă în panoul de administrare WordPress pentru a crea un CPT. Amintiți-vă că aveți nevoie de două tipuri de postări – unul pentru Furnizori și unul pentru Servicii. Deoarece construim un site web Gym, tipurile de postări vor fi denumite Trainers and Workouts în consecință.

Adăugați meta-câmpurile necesare la ambele tipuri de postări. Pentru formatorii CPT , acestea ar putea fi:

• fotografie;
• biografie scurtă;
• experiență de muncă;
• realizări;
• Galerie;
• contacte.

Pentru antrenamentele CPT , meta-câmpurile pot fi după cum urmează:

• Galerie;
• Descriere;
• capacitate maximă;
• echipamente;
• beneficii pentru sănătate.

Sfat rapid : JetEngine are o caracteristică utilă Glosar . Vă permite să creați un set de meta câmpuri și să le utilizați ca opțiuni pentru Tipuri de postări personalizate.

Apoi, adăugați cât mai multe postări la tipurile de postări nou create, cât este necesar. Pentru a face acest lucru, treceți cu mouse-ul peste numele CPT din panoul de administrare WordPress și apoi apăsați „ Adăugați nou ”.

Odată terminat, puteți continua să configurați pluginul JetAppointment.

Configurarea JetAppointment

Nu este atât de dificil să setați pluginul de rezervare de întâlniri de către Crocoblock. Tot ce trebuie să faceți este să rulați Setup Wizard și să finalizați patru pași de instalare.

Accesați Programări > Configurare în panoul de administrare. Veți fi direcționat la pagina Setări JetPlugins , și anume la fila Configurare a JetAppointment. Faceți clic pe butonul cu nume similar pentru a rula Expertul.

• Pasul 1 . Trebuie să alegeți tipurile de postări de Servicii și Furnizori din selecțiile derulante corespunzătoare. Nu uitați să activați comutatorul Adăugați furnizori ; în caz contrar, câmpul nu va apărea. Faceți clic pe „ Următorul ”.

• Pasul 2 . Aici, puteți vedea coloanele necesare din tabelul bazei de date. Continuați instalarea dacă nu aveți chef să adăugați mai multe coloane. Vom adăuga Telefon și Comentarii.

• Pasul 3 . Acest pas este dedicat configurării detaliilor specifice ale serviciului și furnizorului, cum ar fi durata, durata tamponului, zilele libere, programul de lucru etc. Pentru o prezentare detaliată a pașilor, consultați acest tutorial video.

• Pasul 4 . În cele din urmă, puteți integra WooCommerce și puteți crea două formulare de rezervare. Opțiunile disponibile includ „Formulare JetEngine” și „JetFormBuilder”. Primul este destinat lui Elementor, iar al doilea este pentru Gutenberg.

Apăsați butonul „Finish” pentru a finaliza configurarea.

Înainte de a edita formularele de rezervare a programelor, trebuie să interrelați postările Furnizorilor și Serviciilor. Deschideți postarea unui furnizor și găsiți fila Servicii conexe în bara laterală din stânga. Introduceți trei caractere în acea zonă de text și alegeți serviciul necesar odată ce sistemul îl sugerează.

Repetați procedura de câte ori există postări dedicate Furnizorului. Odată terminat, sunteți gata să vă jucați cu formularele.

JetFormBuilder și adăugarea de formulare la pagini

Ceea ce este excelent la produsele Crocoblock este că unele sunt de fapt gratuite. Luați JetFormBuilder. Este un plugin WordPress de creare de formulare care le permite dezvoltatorilor de site-uri să creeze formulare dinamice în editorul de pagini Gutenberg. Puteți descărca pluginul, îl puteți activa și utiliza imediat.

Accesați JetFormBuilder > Formulare . Cele două forme generate vor fi acolo. Va trebui să le edităm, deoarece am adăugat două coloane la tabelul DB în timpul configurării programării. Acum, trebuie să adăugăm meta-câmpurile necesare la formular și acțiunile de post-trimitere.

Faceți clic pentru a edita formularul de rezervare a paginii statice și adăugați meta-câmpurile lipsă prin glisare și plasare blocurile Gutenberg corespunzătoare. Vom avea nevoie de două – un câmp de text și un câmp de zonă de text – pentru a adăuga câmpurile Telefon și Comentariu.

Apoi, trebuie să introduceți aceste câmpuri în Acțiunile de trimitere postați. Pentru a face acest lucru, apăsați fila JetForm , derulați în jos la secțiunea Post Submit Actions și faceți clic pe pictograma creion de sub numele acțiunii. Veți vedea o fereastră de editare Post Submit Action, în care ar trebui să selectați câmpurile de formular unde le aparțin.

În plus, puteți configura integrarea WooCommerce aici, cu condiția să fi activat-o la Pasul 4. După ce ați terminat, faceți clic pe butonul „ Actualizare ”.

Sfat rapid . Simțiți-vă liber să adăugați mai multe acțiuni de post-trimitere simultan, dar asigurați-vă că condițiile acestora nu se contrazic. În acest caz, trimiterea formularului va eșua.

După ce ați terminat de personalizat formularul de rezervare a paginii statice, actualizați-l și adăugați-l pe pagina site-ului web. Am creat o pagină dedicată Toate antrenamentele , care arată o listă dinamică JetEngine. Un formular de rezervare va arăta minunat sub grilă.

Deschideți pagina în care doriți să plasați formularul, găsiți blocul JetForm în bara laterală din stânga, trageți și plasați-l în zona dorită, apoi alegeți formularul pe care tocmai l-ați editat în meniul derulant Alegeți formularul din bara laterală din dreapta .

Actualizați pagina și vedeți cum arată pe front-end.

Acum, cei mai atenți cititori sunt de genul „Cum se face că formularul este stilat?”. Asta pentru că am adăugat un alt plugin în amestec. Continuați să citiți pentru a afla care.

Reveniți la tabloul de bord WordPress și deschideți calea Programări > Programări . Iată-l – toate întâlnirile sunt strânse. Le puteți vizualiza, edita, șterge, filtra și modifica starea lor aici.

După cum puteți vedea, funcționalitatea de rezervare a programelor este activă. Cu toate acestea, există mai multe lucruri pe care le puteți face pentru a face site-ul web de programare și mai dinamic.