Acest tutorial a fost trimis de Jessica Thornsby si Alex Booker

Intalnirea online este o afacere mare .

Cel mai popular site de intalniri online se mandreste cu 23,5 milioane de utilizatori si, potrivit cercetarilor de la Badoo.com, milenialele petrec in medie 10 ore in fiecare saptamana pe aplicatii de intalnire. 

Daca aveti o idee excelenta pentru un site de matrimoniale, atunci aveti un public potential imens .

Desi nu exista lipsuri de site-uri web de intalnire pentru care sa aleaga oamenii, un nou venit cu o idee grozava poate inca apuca o bucata imensa a pietei. In 2018, dezvoltatorul web in varsta de 22 de ani, Harry Dry, a lansat un site web de tematica pentru teme Kanye West, unde single-urile lovelorn ar putea cauta un partener – dar numai daca apreciaza „geniul Mr. Kanye West” si, cu siguranta, nu daca sunt un fan al lui Taylor Swift. 

Acest site web Yeezy Dating a atras atentia magazinelor de stiri populare, inclusiv The Guardian, The New York Post, Mashable si Vice. Potrivit creatorului site-ului, atentia presei a vazut doar Yeezy Dating obtine 5.000 de utilizatori in doar cateva zile. 

Asadar, aveti o idee grozava (sau poate doar amuzanta ) pentru o aplicatie de intalnire – in acest tutorial, va voi arata cum sa va aduceti ideea in viata fara sa scrieti niciun cod! 

Pana la sfarsitul acestui articol, veti fi construit un site web in care oamenii se pot inregistra, crea un profil de intalniri, rasfoiti in directorul unui membru al altor persoane singure si veti trimite un mesaj instantaneu oricui le atrage atentia.

In acest tutorial, va voi arata cum sa creati rapid si cu usurinta un site web de intalniri WordPress, unde utilizatorii pot schimba mesaje in timp real.

Ce vom construi

Datarea online se invarte in jurul crearii unui profil si a conectarii cu alti utilizatori, asa ca trebuie sa oferim oamenilor o modalitate de a se inregistra pe site-ul nostru web si de a le gestiona apartenenta. 

Pentru a oferi aceasta functionalitate, vom crea urmatoarele pagini web folosind WordPress, CometChat Go si pluginul gratuit pentru Ultimate Member: 

  • Inregistrare. Aceasta pagina va contine un formular prin care nou-venitii se pot inregistra introducand adresa de e-mail si creand o parola.
  • Vizitatorii. 
  • Autentificare. Aici utilizatorii inregistrati se vor autentifica in contul lor.
  • Directorul membrilor. Trebuie sa oferim vizitatorilor o modalitate de a parcurge toate persoanele care sunt inregistrate pe site-ul nostru. Directorul membrilor va afisa numele, poza de profil si fotografia de coperta pentru fiecare utilizator; daca un vizitator doreste mai multe informatii, atunci poate face clic pe profilul persoanei respective si le poate trimite un mesaj.
  • Profilurile utilizatorilor. Acesta este locul in care utilizatorul isi poate vizualiza si edita profilul, de exemplu, adaugand o biografie, incarcand o fotografie de coperta sau schimbandu-si poza de profil. 
  • Cont. Aceasta pagina va permite utilizatorilor sa efectueze diverse modificari in contul lor, inclusiv actualizarea adresei de e-mail, parola, crearea profilului lor privat sau stergerea profilului lor in intregime.
  • Deconectare. Dupa legatura „Deconectare” a site-ului web, utilizatorul va iesi din cont. 
  • Resetare parola. Acesta va contine un formular prin care utilizatorii isi pot reseta parola.
  • Daca un utilizator uita parola, atunci poate declansa o resetare a parolei folosind acest formular simplu.

Adaugarea functiilor de membru pe site-ul dvs. WordPress

Putem genera rapid si usor toate paginile web de mai sus, folosind pluginul gratuit pentru membrii Ultimate pentru WordPress:

  • Conectati-va la contul dvs. WordPress, daca nu ati facut-o deja. 
  • In meniul din stanga WordPress, navigati la „Pluginuri> Adaugare nou”.
  • In campul „Cauta pluginuri…”, tastati „Ultimate Member”.
  • Cand apare pluginul Ultimate Member, selectati „Instalare acum” urmata de „Activare”.
  • Puteti instala Ultimate Member si multe alte plugin-uri gratuite WordPress in zona „Plugins> Add new”.
  • In meniul stanga WordPress, selectati „Pagini”.
  • Cand vi se solicita, faceti clic pe „Creati pagini”, iar ultimul membru va genera urmatoarele pagini web: profiluri de utilizatori, cont, inregistrare, autentificare, resetare parola, deconectare, director de membri.
  • Faceti clic pe „Salvati modificarile”. 

Adaugati un meniu de navigare

In acest moment, aveti toate paginile necesare pentru a furniza functionalitatea de membru, dar in functie de modul de configurare a site-ului dvs. web, este posibil sa nu poata naviga in prezent intre aceste pagini. 

Pentru a va asigura ca paginile cu membrii Ultimate sunt la indemana, o sa le adaug intr-un meniu care va aparea in partea de sus a site-ului meu web. 

Puteti ajuta vizitatorii sa navigheze pe site-ul dvs. WordPress, adaugand meniuri. 

In timp ce construiesc acest meniu, voi edita, de asemenea, unele dintre etichetele de navigare ale paginilor pentru a reflecta mai bine continutul lor – mai exact, modific „Profilele utilizatorului” in „Profilul meu” si „Contul” la „Setari”.

  • In meniul stanga WordPress, selectati „Aspect> Meniuri”.
  • Selectati „Creati un meniu nou”.
  • Dati-i unui meniu un nume, apoi faceti clic pe „Creare meniu nou”.
  • Faceti clic pentru a extinde sectiunea „Pagini” si selectati toate paginile urmatoare: Resetare parola, Cont, Deconectare, Membri, Inregistrare, Conectare si Utilizator.  
  • Faceti clic pe „Adaugati la meniu” si toate paginile web selectate vor fi adaugate in sectiunea „Structura meniului”. 
  • Elementele dvs. de meniu vor fi afisate in aceeasi ordine ca „Structura meniului”. Puteti schimba locul in care apare un element in meniul dvs., prinzandu-l in „Structura meniului” si apoi aruncandu-l intr-o pozitie noua.
  •  Daca doriti sa schimbati titlul unei pagini, atunci in „Structura meniului” faceti clic pentru a extinde sectiunea corespunzatoare a acelei pagini si apoi modificati „Eticheta de navigare”.
  • Cand sunteti multumit de modul in care este configurat meniul dvs., faceti clic pe „Salvati meniul”. 
  • Pentru a plasa acest meniu pe site-ul dvs. web, faceti clic pe fila „Gestionare locatii”. 
  • Presupunand ca doriti sa apara acest meniu pe intregul site web, deschideti meniul vertical „Top Menu” si selectati meniul pe care tocmai l-ati creat.
  • Faceti clic pe „Salvati modificarile”. 

Personalizarea formularelor Ultimate Members

Ultimate Member genereaza automat formularele de inregistrare, autentificare si editare a profilului. In mod implicit, aceste forumuri sunt destul de rare, asa ca poate doriti sa adaugati cateva campuri suplimentare. 

Intrucat dezvoltam un site de intalnire, este posibil sa adaugati campuri in care utilizatorul isi poate specifica ziua de nastere, locatia geografica si sa ofere informatii despre tipul de partener pe care il cauta. Pentru site-ul meu web, am adaugat doua campuri personalizate in formularul de editare a profilului: unul in care utilizatorul poate scrie o biografie scurta si altul in care poate raspunde la intrebarea „cine este oaspele tau de vis?” 

Puteti adauga o gama larga de campuri personalizate in formularele dvs. de membru final. Creez campuri „Bio” si „Cina oaspete”, care vor aparea cand utilizatorul isi editeaza profilul.

Procesul de creare a campurilor va fi in mare masura acelasi, indiferent de tipul de camp pe care il aveti in minte, astfel incat sa puteti utiliza urmatoarele instructiuni pentru a crea tot felul de forme personalizate:

  • In WordPress, selectati „Membru final> Formulare.”
  • Pentru a edita formularul care apare atunci cand utilizatorul isi actualizeaza profilul, deschideti pagina „Profil implicit” pentru editare.
  • Pentru a crea un camp nou, dati clic pe butonul „+”. Se adauga un element nou, reprezentat de un alt „+”. Retineti ca este necesar sa derulati pentru a gasi acest al doilea „+”.
  • Faceti clic pentru a selecta noua sectiune „+”. Aceasta lanseaza fereastra „Field Manager”.
  • „Field Manager” contine diferite optiuni pe care le puteti utiliza pentru a crea o serie de campuri personalizate. Vreau sa creez un camp de text in care utilizatorul isi poate introduce bio-ul, asa ca optez pentru „Text Box”.
  • In fereastra ulterioara, introduceti un „Titlu” care va fi folosit pe partea din spate ca referinta si nu va aparea nicaieri pe site-ul dvs. web.
  • Dati campului personalizat o „cheie meta”. Aceasta va fi utilizata pentru a gestiona orice informatie pe care utilizatorul o introduce in acest camp si nu va fi vizibila pe site-ul dvs. web. Aceasta cheie trebuie sa fie unica si ar trebui sa fie cu litere mici, cu un subliniere care sa separe cuvintele.
  • Acum puteti atribui o eticheta acestui camp, care va fi vizibil pentru utilizator; Optez pentru „Spune-ne despre tine!” 
  • In campul „Placeholder”, introduceti un text de marcaj; Folosesc „Acesta este bio-ul meu”.
  • Asigurati-va ca „Poate utilizatorul sa editeze acest camp?” caseta de selectare este selectata. 
  • Cand sunteti multumit de informatiile introduse, faceti clic pe „Actualizati”.
  • Clatiti si repetati pentru fiecare camp personalizat pe care doriti sa il adaugati la acest formular. 
  • Cand sunteti multumit de modificarile pe care le-ati facut, nu uitati sa va salvati munca facand clic pe „Actualizare”. 

Acum, cand utilizatorul isi editeaza profilul, va avea acces la doua noi campuri personalizate.

Adaugarea chat-ului live pe site-ul dvs. de intalnire

Cea mai buna modalitate de a va conecta cu un potential partener nou este sa creati o conversatie!

In timp ce utilizatorii dvs. ar putea face o conexiune prin schimbul de mesaje sau chiar e-mailuri, puteti oferi o experienta de utilizator mult mai buna lasandu-le sa comunice in timp real.

Puteti adauga rapid si usor chatul live pe site-ul dvs. de intalniri, folosind pluginul CometChat Go. 

Daca nu ati cumparat deja CometChat Go, va puteti apuca acum licenta, sau ofera o proba gratuita de 7 zile, astfel incat sa puteti vedea exact ce are pluginul de oferit si apoi sa decideti daca este potrivit pentru dvs. 

Daca tocmai ati cumparat CometChat Go, atunci primul pas este sa il incarcati pe site-ul dvs. WordPress:

Trimiterea de mesaje private cu CometChat Go

In acest moment, site-ul dvs. web are deja functii de chat live!

Daca deschideti orice pagina web, atunci veti vedea fereastra pop CometChat Go in coltul din dreapta jos. Oricine viziteaza site-ul dvs. de intalnire poate vedea acum o lista a tuturor celor care sunt online si poate trimite mesaje instantanee oricareia dintre aceste persoane in timp real.

Cu toate acestea, acesta nu este modul in care oamenii tind sa foloseasca site-uri web de intalnire. Majoritatea utilizatorilor dvs. vor dori sa rasfoiasca in directorul membrilor, apoi sa trimita mesaje private catre anumiti utilizatori – este putin probabil sa aleaga o persoana aleatorie dintr-o lista a tuturor celor care se afla online in prezent! 

Pentru a oferi o experienta de utilizator mai buna, voi adauga un „Trimiteti-mi un mesaj!” link la profilul fiecarui utilizator. Ori de cate ori cineva face clic pe acest link, va lansa o sesiune privata de CometChat Go cu acest utilizator specific, ceea ce face usor accesarea cuiva dupa vizualizarea profilului sau.

Puteti trimite oricarui utilizator un mesaj privat, deschizand profilul sau si apasand pe linkul „Trimiteti-mi un mesaj”. 

Pentru a furniza aceasta functionalitate, va trebui sa adaugam ceva cod la pagina „Utilizator” si la sablonul pluginului Ultimate Member – dar va voi oferi codul exact de care aveti nevoie, astfel incat sa il puteti copia / lipi direct in contul dvs. WordPress .

Adaugarea chatului la profilurile de utilizator

In primul rand, trebuie sa adaugam o fereastra CometChat Go andocata la pagina profilului de utilizator:

  • In meniul stanga WordPress, selectati „Pagini”.
  • Deschideti pagina „Utilizator” pentru editare.
  • Copiati si inserati urmatorul text in aceasta pagina:

    [layout cometchat = ‘docked’ width = ‘990’ height = ‘600’]

  • Faceti clic pe „Actualizare”

Editarea sabloanelor pluginului WordPress

De fiecare data cand cineva face clic pe linkul „Trimiteti-mi un mesaj”, CometChat Go trebuie sa identifice profilul pe care il vizioneaza in prezent persoana, apoi sa lanseze o sesiune de chat privat cu acest utilizator.

In aceasta sectiune, vom edita sabloanele Ultimate Member, astfel incat CometChat Go sa poata prelua dinamic ID-ul de utilizator important al profilului: 

  • In meniul din stanga WordPress, selectati „Pluginuri> Editor de pluginuri.”
  • Deschideti meniul derulant „Selectati pluginul pentru a edita” si alegeti „Ultimate Member”.
  • Dati clic pe butonul „Select” insotitor.
  • In meniul din dreapta „Meniu fisiere”, selectati „sabloane”, urmate de „profil.php”.
  • Parcurgeti chiar partea de jos a acestui fisier. In prezent, ar trebui sa arate astfel:

    do_action (“um_profile_content _ {$ nav} _ {$ subnav}”, $ args); ?>

    <div class = “clear”> </div>

    </div>

    <? php}

    }

    do_action (‘um_profile_footer’, $ args); ?>

    </div>

    </div>

  • Copiati / inserati urmatoarea sectiune in aceasta pozitie exacta :

    do_action (“um_profile_content _ {$ nav} _ {$ subnav}”, $ args); ?>

    <div class = “clear”> </div>

    </div>

    // Adaugati urmatoarele ///

    <a href = “javascript: jqcc.cometchat.launch ({uid: ‘<? php echo um_profile_id () ;?> ‘}); “> Trimite-mi un mesaj! </a>       

    <? Php}

    }

    do_action (‘ um_profile_footer ‘, $ args); ?>

    </div>

    </div>

  • Faceti clic pe „Actualizati fisierul”.

Si asta e! Daca navigati la orice profil de utilizator, atunci ar trebui sa prezinte un link „Trimiteti-mi un mesaj”; faceti clic pe acest link si CometChat Go va lansa o noua fereastra de chat privat cu acest utilizator specific. 

Concluzie

In acest tutorial, am construit un site web , datand de la zero , fara a scrie nici un cod. 

Daca ati urmarit de-a lungul, atunci utilizatorii vor putea sa se inregistreze pe site-ul dvs. web, sa creeze un profil de intalnire, sa rasfoiasca in directorul unui membru si sa trimita mesaje instantanee private altor utilizatori in timp real, folosind CometChat Go.  

Acum restul tine de tine! Indiferent daca aveti o idee pentru o caracteristica inovatoare, de ultima ora, care este complet noua in lumea intalnirilor online, sau un truc pentru a rivaliza cu Yeezy Dating; ai pus bazele unui site de intalnire cu succes. Acum este timpul sa iti aducem cu adevarat viziunea la viata si sa faci site-ul tau sa iasa in evidenta de multime.

Daca utilizati acest tutorial pentru a lansa proiectul dvs. de intalniri online, atunci ne-ar placea sa va vedem creatiile! De ce nu Tweet @CometChat si @Makerpad, astfel incat sa va putem impartasi munca.

ARTICOLE SIMILAREDE LA ACELAȘI AUTOR