Cum să creați o fereastră modală pop-up pentru autentificarea WordPress (Pas cu Pas)

Adăugarea unui modal de autentificare WordPress pe site-ul dvs. poate face procesul de conectare mai fluid pentru utilizatorii dvs. Permite vizitatorilor să se autentifice fără a părăsi pagina curentă, ceea ce le îmbunătățește experiența generală.

Am văzut mai multe site-uri web de succes care folosesc această funcție pentru a menține utilizatorii implicați și pentru a îmbunătăți interacțiunea pe site. Este o modalitate simplă, dar eficientă de a eficientiza procesul de autentificare.

În acest articol, vă vom ghida prin pașii pentru a crea o fereastră modală de autentificare WordPress.

De ce să creați un popup modal de autentificare WordPress?

Ar trebui să creezi un modal popup de autentificare, deoarece face autentificarea mai rapidă și mai fluidă pentru utilizatorii tăi, fără a-i trimite pe o pagină separată.

Pe majoritatea site-urilor web, atunci când cineva face clic pe linkul de autentificare, este redirecționat către pagina de autentificare WordPress implicită sau către o pagină de autentificare personalizată. După autentificare, este redirecționat din nou.

Acest mers înainte și înapoi poate părea lent și poate întrerupe experiența utilizatorului. Un popup modal de autentificare rezolvă această problemă. Deschide formularul de autentificare într-o fereastră mică pe aceeași pagină.

Utilizatorii se pot autentifica instantaneu, iar dvs. îi puteți redirecționa oriunde doriți după autentificare. Procesul pare mai rapid și mai profesional, ceea ce poate îmbunătăți experiența utilizatorului și chiar crește conversiile.

Având în vedere acest lucru, îți vom arăta cum să creezi cu ușurință un modal popup de autentificare în WordPress, folosind atât un plugin gratuit, cât și instrumente premium. Poți sări la metoda care funcționează cel mai bine pentru tine:

Gata? Să începem!

Metoda 1: Crearea unui popup de autentificare modal folosind Login/Signup Popup

Pentru prima metodă, vom folosi pluginul Login/Signup Popup, un plugin gratuit care permite utilizatorilor dvs. să se autentifice sau să se înregistreze cu ușurință pe site-ul dvs.

Mai întâi, va trebui să instalați și să activați pluginul Login/Signup Popup. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.

După activare, puteți accesa Login/Signup Popup » Setări din panoul de administrare WordPress.

Sub setările „Generale”, puteți activa înregistrarea, puteți conecta automat utilizatorii după ce se înregistrează și puteți gestiona resetarea parolei.

Pe lângă aceasta, pluginul vă permite, de asemenea, să selectați rolul utilizatorului WordPress care va fi atribuit utilizatorilor nou înregistrați. Implicit, va fi atribuit rolul de „Subscriber”.

Dacă derulați în jos, veți vedea mai multe setări. De exemplu, puteți adăuga o adresă URL de redirecționare atunci când un utilizator se autentifică sau se înregistrează.

Nu uitați să faceți clic pe butonul „Salvare” dacă ați făcut modificări.

Apoi, puteți comuta la fila „Style” și puteți edita fereastra modală de autentificare/înregistrare. Pluginul vă permite să modificați poziția ferestrei pop-up, lățimea, înălțimea, culoarea de fundal, culoarea textului și multe altele.

După aceea, puteți personaliza și câmpurile formularului din modalul pop-up.

Pur și simplu accesați Login/Signup Popup » Fields din tabloul de bord WordPress. Aici, puteți activa diferite câmpuri de formular, puteți edita etichetele acestora, le puteți face câmpuri obligatorii și multe altele.

Pe lângă acestea, există și o opțiune de a adăuga mai multe câmpuri la fereastra pop-up de autentificare/înregistrare.

Pur și simplu faceți clic pe butonul „+ Adăugare câmp” din partea de sus și selectați câmpuri suplimentare de formular pentru a le adăuga la fereastra modală de conectare.

După ce ați personalizat câmpurile formularului, puteți acum să adăugați fereastra pop-up de autentificare modală pe site-ul dvs. web. Pluginul oferă diferite modalități de a adăuga fereastra pop-up pe site-ul dvs.

Adaugă modalul popup de autentificare la meniuri

Mai întâi, puteți accesa Aspect » Meniuri din tabloul de bord WordPress.

După aceea, puteți vedea elementele de meniu „Popup Autentificare/Înregistrare”. Pur și simplu selectați elementele pe care doriți să le afișați și faceți clic pe butonul „Adăugare la meniu”.

Pentru mai multe detalii, consultați ghidul nostru despre cum să adăugați un meniu de navigare în WordPress.

Adaugă modalul popup de autentificare ca linkuri ancoră

Apoi, puteți adăuga #login sau #register la sfârșitul URL-ului site-ului dvs. și puteți plasa fereastra modală de autentificare ca un link intern.

De exemplu, pentru a crea un link de autentificare, ați folosi HTML-ul de genul acesta:

<a href="https://www.myawesomesite.com/#login">Login</a>

Pentru a face acest lucru, puteți edita o postare sau o pagină.

Odată ce sunteți în editorul de conținut, veți dori să faceți clic pe cele 3 puncte și să selectați opțiunea „Edit as HTML”.

După aceea, puteți adăuga linkul intern la textul de ancorare pentru autentificare.

Puteți afla mai multe urmând ghidul nostru despre cum să adăugați linkuri de ancorare în WordPress.

Utilizați Shortcode-uri pentru a Adăuga un Modal Popup de Autentificare

O altă modalitate de a adăuga fereastra pop-up de autentificare/înregistrare este prin utilizarea shortcodurilor.

Puteți pur și simplu introduce shortcode-ul [xoo_el_action] oriunde pe site-ul dvs. pentru a crea un link/buton pentru a deschide fereastra modală.

De exemplu, puteți accesa Aspect » Widget-uri și puteți adăuga un bloc „Shortcode” pentru a afișa popup-ul de autentificare în bara laterală a site-ului dvs. web.

Când ați terminat, pur și simplu faceți clic pe butonul „Actualizare”.

Acum, puteți vizita site-ul dvs. web pentru a vedea fereastra modală de autentificare în acțiune.

Metoda 2: Creați o fereastră modală de autentificare folosind WPForms & OptinMonster

Această metodă este excelentă pentru cei care doresc mai mult control asupra designului și comportamentului ferestrei pop-up de autentificare.

Utilizarea combinată a WPForms și OptinMonster vă oferă opțiuni puternice de design, reguli avansate de afișare (cum ar fi afișarea ferestrei pop-up după ce un utilizator face clic pe un link specific) și o mai bună integrare cu serviciile de marketing prin e-mail.

WPForms este cel mai bun plugin pentru formulare de contact WordPress, iar dvs. veți avea nevoie cel puțin de planul lor Pro pentru a accesa addon-ul „Înregistrare Utilizator”.

OptinMonster este cel mai bun plugin de pop-up WordPress de pe piață. Vă ajută să convertiți vizitatorii site-ului web în abonați și clienți. La WPBeginner, l-am folosit de mai multe ori pentru a crea pop-up-uri interactive și am avut o experiență excelentă. Pentru mai multe detalii, consultați recenzia noastră completă despre OptinMonster.

Rețineți că veți avea nevoie cel puțin de planul Plus pentru a accesa funcția MonsterLinks a instrumentului pe care o prezentăm în acest articol.

Utilizarea WPForms pentru a crea un formular de autentificare pentru utilizatori

Mai întâi, să instalăm și să activăm pluginul WPForms. Pentru mai multe detalii, puteți consulta ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, va trebui să accesați WPForms » Setări din tabloul de bord WordPress și să introduceți licența.

Puteți găsi cheia în zona contului dvs. WPForms.

Apoi, să mergem la WPForms » Addons pentru a instala și activa „User Registration Addon”.

După activarea add-on-ului, veți dori să accesați WPForms » Adăugare Nou și să creați un nou formular.

Pe ecranul următor, va trebui mai întâi să denumiți formularul.

Apoi, veți alege un șablon de formular preconstruit din galeria de șabloane. Puteți folosi bara de căutare pentru a găsi cu ușurință șablonul „Formular de autentificare utilizator”.

Odată ce l-ați găsit, puteți face clic pe butonul „Utilizați șablonul”.

Acest șablon de formular de conectare are câmpuri pentru e-mail și parolă care vor funcționa similar cu formularul de conectare implicit WordPress.

Puteți trage și plasa orice câmpuri suplimentare din partea stângă a ecranului, după cum este necesar.

În continuare, puteți face clic pe câmpul „Parolă”, iar acesta va afișa opțiunile câmpului în partea stângă.

Puteți adăuga codul de mai jos în caseta de descriere a câmpului „Parolă” pentru a afișa opțiuni precum „uitat parola” și „înregistrare utilizator”.

Can't remember your password? <a href="{url_lost_password}">Click here</a>. Don't have an account? <a href="{url_register}">Register here</a>.

După aceea, trebuie să faceți clic pe butonul „Salvare” pentru a salva modificările și sunteți gata să publicați formularul.

Pentru a începe, puteți pur și simplu să faceți clic pe butonul „Embed”.

Se va deschide o fereastră pop-up cu opțiuni pentru a adăuga formularul dvs. de autentificare.

Continuați și selectați opțiunea „utilizați un shortcode”. Acesta va apărea ca un link în fereastră, nu ca un buton.

Ar trebui să vedeți acum un cod de încorporare pentru formularul dvs.

Aici, veți dori să copiați shortcode-ul și să îl salvați pentru a-l utiliza mai târziu.

Utilizarea OptinMonster pentru a crea un modal pop-up

În acest moment, formularul dvs. de autentificare este gata. Următorul pas este să creați fereastra modală folosind OptinMonster.

Mai întâi, va trebui să vizitați site-ul web OptinMonster și să vă înregistrați pentru un cont.

Apoi, va trebui să instalați și să activați pluginul OptinMonster. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

Pluginul acționează ca un conector între site-ul dvs. WordPress și OptinMonster.

După activare, ar trebui să vedeți ecranul de bun venit. Continuați și faceți clic pe butonul „Conectați-vă contul existent”.

Se va deschide acum o nouă fereastră.

Pur și simplu faceți clic pe butonul „Connect to WordPress”.

Odată conectat, ești gata să creezi fereastra modală pop-up.

Pur și simplu accesați OptinMonster în zona de administrare WordPress și faceți clic pe butonul „Creați prima campanie”.

Pe ecranul următor, veți alege o campanie și un șablon.

Deoarece creăm o fereastră modală pop-up, să selectăm „Popup” ca tip de campanie.

În ceea ce privește șablonul, OptinMonster oferă o mulțime de șabloane preconstruite, astfel încât să puteți ajusta rapid unul, dacă este necesar.

Odată ce ați selectat un șablon, se va deschide o fereastră pop-up. Vi se va cere să adăugați un nume campaniei dvs.

După ce introduceți un nume, puteți face clic pe butonul „Start Building”.

După ce ați făcut acest lucru, veți fi redirecționat către constructorul de campanii OptinMonster.

Puteți adăuga diferite blocuri la șablonul dvs. din meniul din stânga. Deci, continuați și adăugați blocul WPForms.

După aceea, ar trebui să vedeți opțiunile blocului WPForms în meniul din stânga.

Puteți selecta formularul de autentificare pe care tocmai l-ați creat din meniul derulant „Selecție formular”.

Dacă nu vedeți formularul, selectați pur și simplu opțiunea „Adăugare scurtcod manual” și introduceți scurtcodul pe care l-ați copiat anterior la crearea formularului în WPForms.

Nu vă faceți griji dacă nu puteți previzualiza formularul în constructorul de campanii; formularul va apărea atunci când publicați campania.

Apoi, puteți accesa fila „Reguli de afișare”. OptinMonster oferă opțiuni puternice de direcționare.

De aici, veți dori să selectați regula de afișare „MonsterLink™” (La clic).

După selectarea opțiunii, ar trebui să vedeți MonsterLink ca regulă de afișare.

Continuați și faceți clic pe butonul „Copy MonsterLink Code”, apoi păstrați linkul undeva în siguranță. Veți avea nevoie de el mai târziu.

Acum, sunteți gata să faceți campania live.

Pur și simplu accesați fila „Publicare” din partea de sus a constructorului de campanii. De aici, puteți seta „Starea publicării” la „Publicare”.

Odată ce ați făcut acest lucru, nu uitați să faceți clic pe butonul „Salvare” din colțul din dreapta sus pentru a salva modificările.

Adăugarea unei ferestre modale de autentificare în WordPress

Acum, puteți crea o pagină WordPress nouă sau edita una existentă.

Odată ce sunteți în editorul de conținut, puteți face clic pe butonul „+” și adăuga un bloc „HTML personalizat”.

După aceea, va trebui să lipiți MonsterLink în blocul HTML personalizat. Ar trebui să arate cam așa:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

În mod implicit, textul linkului din codul dvs. MonsterLink va fi „Înscrieți-vă acum”, deoarece este adesea folosit pentru optin-uri prin e-mail.

Iată un exemplu de cod implicit:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">Subscribe Now</a>

Deoarece acesta este un formular de autentificare, veți dori să schimbați acel text. Pentru acest tutorial, l-am schimbat în „autentificare sau înregistrare”, așa cum puteți vedea în fragmentul de cod de mai jos.

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Puteți adăuga, de asemenea, codul de mai sus la meniurile WordPress, bara laterală sau orice altă zonă de pe site-ul dvs.

Asigurați-vă doar că salvați modificările paginii WordPress și vizitați site-ul dvs. pentru a vedea modalul de autentificare în acțiune.

Sfat bonus: Urmăriți parcursul utilizatorului în formularele de lead WordPress

Acum că ați învățat cum să creați o fereastră modală de autentificare în WordPress, să vedem cum să urmăriți parcursul utilizatorilor pentru formularele dvs. WordPress.

Acest lucru poate fi deosebit de util pentru formularul dvs. de autentificare, deoarece poate dezvălui ce conținut vizualizează utilizatorii chiar înainte de a decide să se autentifice sau să se înregistreze. Această informație vă poate ajuta să îmbunătățiți navigarea și experiența utilizatorului pe site-ul dvs.

Știind ce îi determină pe utilizatori să completeze formularele vă permite să recreați acel proces pentru a obține mai mulți clienți potențiali și a vă dezvolta afacerea. În timp ce Google Analytics poate arăta o parte din activitatea utilizatorilor, nu leagă comportamentul direct de utilizatorul specific care a trimis formularul.

Aici intervine WPForms. Este un plugin popular pentru crearea de formulare care include un addon „User Journey” (disponibil cu planul Elite), permițându-vă să vedeți de unde au venit utilizatorii, ce cale au urmat și cât timp au petrecut pe fiecare pagină înainte de a trimite un formular.

Dacă sunteți interesat să aflați mai multe, nu ezitați să consultați ghidul nostru despre cum să urmăriți parcursul utilizatorului pe formularele de lead WordPress.

Întrebări Frecvente despre Crearea unui Modal Popup de Autentificare WordPress

Iată câteva întrebări adresate frecvent de cititorii noștri despre adăugarea unui modal de autentificare pop-up în WordPress:

Pot personaliza designul pop-up-ului meu de autentificare WordPress?

Da, absolut. Ambele metode pe care le-am acoperit oferă opțiuni de personalizare pentru a se potrivi cu brandingul site-ului dvs. web. De obicei, puteți schimba culorile, fonturile, dimensiunile și puteți adăuga propriul logo pentru a crea un aspect coerent.

Un popup modal de autentificare va funcționa pe dispozitive mobile?

Da. Plugin-urile moderne de tip popup, precum OptinMonster, sunt construite pentru a fi complet responsive. Aceasta înseamnă că fereastra modală de autentificare se va ajusta automat pentru a arăta excelent pe desktop-uri, tablete și smartphone-uri.

Încetinesc ferestrele pop-up de autentificare un site web?

Când utilizați pluginuri bine codificate și optimizate precum WPForms și OptinMonster, nu ar trebui să existe un impact vizibil asupra performanței site-ului dvs.. Aceste instrumente sunt concepute pentru a fi ușoare și a se încărca eficient.

Pot adăuga butoane de autentificare socială la pop-up-ul meu?

Unele pluginuri oferă funcționalitate de autentificare socială ca o caracteristică încorporată sau premium. De exemplu, versiunea pro a pluginului Login/Signup Popup suportă autentificările sociale. Acest lucru poate face chiar mai ușor pentru utilizatori să se autentifice.

Sperăm că acest articol v-a ajutat să învățați cum să creați o fereastră modală de conectare în WordPress. Puteți, de asemenea, să consultați lista noastră completă cu cele mai bune pluginuri pentru pagina de conectare WordPress și ghidul nostru despre cum să redirecționați utilizatorii după o conectare reușită în WordPress.

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.