Cum să creezi corect o pagină de autentificare personalizată în WordPress (Pas cu Pas)

Te-ai întrebat vreodată dacă poți crea o pagină de autentificare personalizată în WordPress?

Crearea unei pagini de autentificare personalizate vă ajută să afișați un brand consecvent utilizatorilor dvs., ceea ce conferă site-ului dvs. un aspect mai profesional.

În acest articol, vă vom arăta cum să creați o pagină de autentificare personalizată în WordPress.

Crearea unei pagini de autentificare WordPress personalizate – Cuprins

• De ce să creați o pagină de autentificare personalizată?
• Alegerea pluginului potrivit pentru crearea unei pagini de autentificare personalizate
• Metoda 1: Utilizarea SeedProd pentru a crea o pagină de autentificare
• Metoda 2: Utilizarea WPForms pentru a crea o pagină de autentificare
• Metoda 3: Utilizarea Theme My Login pentru a crea o pagină de autentificare
• Metoda 4: Personalizarea paginii de autentificare WordPress existente fără un plugin
• Metoda 5: Afișează formularul de autentificare oriunde, fără un plugin

De ce să creați o pagină de autentificare personalizată?

Dacă administrați un site bazat pe comunitate, cum ar fi un forum, un site de membru, o rețea socială de nișă sau orice alt site care necesită ca utilizatorii să creeze un cont și să se autentifice, atunci va trebui să creați o pagină de autentificare personalizată.

Pagina implicită de autentificare WordPress arată generic și plictisitor. Cu o pagină de autentificare personalizată, puteți personaliza toate elementele de pe pagină din jurul formularului.

Dacă aveți o pagină de autentificare personalizată, atunci puteți ascunde pagina de autentificare implicită dacă doriți. Aceasta poate reduce spamul la autentificare și poate menține site-ul dvs. WordPress securizat.

Alegerea pluginului potrivit pentru crearea unei pagini de autentificare personalizate

În depozitul oficial de pluginuri WordPress, puteți găsi zeci de pluginuri diferite care vă ajută să creați cu ușurință o pagină de autentificare personalizată. În acest articol, vom analiza 3 pluginuri diferite: SeedProd, WPForms și Theme My Login.

Alegeți SeedProd dacă aveți nevoie de un constructor de pagini de destinație ușor de utilizat pentru a crea pagini de autentificare personalizate, pagini de vânzări, pagini de abonare, pagini de tip „în curând” (coming soon), pagini de mod de întreținere și multe altele.

Iată câteva caracteristici remarcabile ale SeedProd:

• Șabloane de pagină de autentificare proiectate profesional pentru a vă ajuta să începeți.
• Personalizați complet pagina de autentificare cu elemente precum profiluri sociale, video, mărturii, evaluări cu stele și multe altele.
• Adăugați un formular de autentificare la orice pagină de destinație pe care o creați cu SeedProd.

Alegeți WPForms dacă aveți nevoie de un plugin de formulare WordPress complet care vă ajută să creați cu ușurință orice tip de formulare online, inclusiv formulare de înregistrare, formulare de plată, formulare de contact etc.

Câteva beneficii ale WPForms sunt:

• Personalizează-ți formularul de autentificare așa cum dorești, fără nicio restricție.
• Publică-ți formularul de autentificare pe orice postări sau pagini.
• Încorporează-ți formularul de autentificare în bara laterală sau chiar în subsolul widgetizat.

Alege Theme My Login dacă vrei să creezi o pagină de autentificare simplă cu ușurință.

Mai jos sunt câteva caracteristici ale Theme My Login:

• Nu este necesară nicio configurare pentru a crea o pagină de autentificare personalizată.
• Ascunde automat pagina de autentificare implicită și redirecționează către pagina de autentificare nou creată.
• Adaugă un link către pagina de autentificare în bara laterală cu un widget de autentificare personalizat.

Dezavantajul este că, spre deosebire de SeedProd și WPForms, Theme My Login nu îți permite să încorporezi formularul de autentificare oriunde pe site-ul tău și va apărea exclusiv pe pagina ta de autentificare. Deoarece nu este un plugin de formulare complet precum celelalte, posibilitatea de a-ți personaliza formularul de autentificare este limitată.

Metoda 1: Folosind SeedProd pentru a crea o pagină de autentificare

Mai întâi, să vedem cum să creezi o pagină de autentificare personalizată cu SeedProd, pas cu pas.

Pasul 1: Instalează SeedProd pe site-ul tău

Pentru a începe, trebuie să descărcați pluginul SeedProd. Apoi, încărcați și activați pluginul pe site-ul dvs. WordPress.

Pentru instrucțiuni detaliate, urmați acest tutorial despre cum se instalează un plugin WordPress.

După activarea pluginului, vei vedea un ecran de bun venit unde va trebui să introduci cheia de licență. Poți găsi cheia de licență din contul tău de pe site-ul SeedProd.

Once your license key is verified, scroll down the page further and click on the Create Your First Page button.

În continuare, veți fi direcționat către tabloul de bord SeedProd. Aici puteți vedea diferitele tipuri de pagini de destinație pe care le puteți crea. Faceți clic pe Configurați o pagină de conectare pentru a începe.

Pasul 2: Alegeți un șablon de pagină de conectare

În acest pas, vi se va solicita să alegeți un șablon de pagină de conectare. SeedProd oferă o mulțime de șabloane proiectate profesional din care puteți alege.

Există, de asemenea, un șablon gol pe care îl puteți utiliza dacă doriți să începeți designul de la zero.

Pentru a alege un șablon de pagină de autentificare, pur și simplu treceți cursorul peste el și faceți clic pe pictograma bifă.

În continuare, este timpul să personalizați șablonul.

Pasul 3: Personalizați-vă pagina de autentificare

Cel mai bun lucru la SeedProd este că vă puteți personaliza cu ușurință pagina de autentificare folosind constructorul vizual drag and drop. Mai întâi, puteți personaliza orice element existent din șablon, făcând clic pe el.

De exemplu, puteți face clic pe titlul „Sign In” pentru a schimba textul, dimensiunea, alinierea, tipografia și multe altele.

Pentru a adăuga conținut nou la pagina dvs. de autentificare, puteți utiliza blocurile de pagini de destinație gata făcute de la SeedProd.

În partea stângă a constructorului vizual, există blocuri de pagini de destinație precum imagine, video, buton, profiluri sociale, cronometru, bară de progres și multe altele.

Pur și simplu trageți blocul dorit și plasați-l pe pagina dvs. de autentificare. Din nou, puteți face clic pe bloc pentru a personaliza stilul, dimensiunea, alinierea etc.

SeedProd oferă, de asemenea, secțiuni pre-construite precum Caracteristici, Întrebări frecvente, Antet și altele, pe care le puteți adăuga la pagina dvs. de autentificare.

Pur și simplu faceți clic pe o secțiune și SeedProd o va adăuga automat la pagina dvs.

Puteți, de asemenea, să accesați Setările globale ale SeedProd din colțul de jos pentru a schimba imaginea de fundal, fontul și culorile întregii pagini de autentificare, în loc să schimbați fiecare element individual.

De exemplu, dacă doriți să schimbați schema de culori a paginii dvs. de autentificare, SeedProd oferă peste 20 de palete de culori pe care le puteți utiliza pentru a crea un aspect coerent.

Odată ce sunteți mulțumit de aspectul paginii dvs. de autentificare, faceți clic pe Salvare în colțul din dreapta sus.

Pasul 4: Configurați setările paginii dvs. de autentificare

Dacă adăugați un formular de abonare prin e-mail la pagina dvs. de autentificare, îl puteți conecta cu serviciul dvs. de marketing prin e-mail din fila Conectare.

Pur și simplu faceți clic pe furnizorul dvs. de marketing prin e-mail preferat și urmați instrucțiunile pentru a vă conecta contul. Acum, de fiecare dată când cineva furnizează adresa sa de e-mail prin formularul de abonare, acesta va fi adăugat automat la lista dvs. de e-mailuri.

Puteți accesa și fila Setări pagină pentru a configura alte setări.

Setările de pe această pagină includ:

• General – Modificați numele și URL-ul paginii de conectare, afișați un link de afiliere SeedProd și multe altele.
• SEO – Setați titlul paginii SEO, meta descrierea etc. Dacă utilizați un plugin SEO precum All in One SEO, puteți folosi aceasta ca o scurtătură către setările sale.
• Analize – Urmăriți performanța paginii dvs. de autentificare folosind un plugin de analiză precum MonsterInsights.
• Scripturi – Utilizați scripturi de urmărire și retargeting, cum ar fi cookie-uri sau pixeli de urmărire Facebook.

Nu uitați să faceți clic pe butonul Salvare pentru a vă salva setările.

Pasul 5: Publicați pagina dvs. de conectare

Acum este momentul să publicați pagina dvs. personalizată de conectare pe site-ul dvs. Pentru a face acest lucru, faceți clic pe săgeata derulantă de lângă butonul verde Salvare și apăsați butonul Publicare.

Veți vedea apoi un mesaj de succes care vă anunță că pagina de conectare este acum live.

Faceți clic pe Vezi pagina live pentru a vizualiza noua dvs. pagină personalizată de conectare.

Ultimul pas este să activați modul pagină de conectare în zona de administrare WordPress. Acest lucru poate suna dificil, dar SeedProd îl face extrem de ușor.

Pur și simplu ieșiți din constructorul vizual de pagini de destinație și reveniți la tabloul de bord principal SeedProd. Sub secțiunea Pagina de conectare, comutați butonul de la Inactiv la Activ.

Gata! Acum pagina de autentificare WordPress are un design personalizat. Dacă dorești vreodată să dezactivezi pagina de autentificare, pur și simplu trebuie să te întorci la același buton de comutare și să-l dezactivezi.

Metoda 2: Utilizarea WPForms pentru a crea o pagină de autentificare

Să vedem cum să creezi o pagină de autentificare cu WPForms.

Pasul 1: Instalează WPForms pe site-ul tău

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul WPForms. Asigurați-vă că verificați cheia de licență navigând la WPForms » Setări. Puteți obține cheia de licență din contul dvs. de pe site-ul WPForms.

Pentru a putea crea o pagină de autentificare personalizată cu WPForms, va trebui să instalați suplimentul de înregistrare utilizatori accesând WPForms » Suplimente. Faceți clic pe Instalare Supliment lângă Suplimentul de înregistrare utilizatori, apoi faceți clic pe Activare.

Odată ce suplimentul este activat, poți continua și crea un formular de autentificare pentru utilizatori cu WPForms.

Pasul 2: Creează un formular de autentificare personalizat

Cu constructorul puternic de tip drag and drop al WPForms, poți construi un formular de autentificare în doar câteva minute, nu ore, fără a scrie o singură linie de cod.

Pentru a crea un formular de autentificare, vizitează WPForms » Adaugă Nou. Pe pagina de configurare a formularului, va trebui să alegi șablonul Formular de Autentificare Utilizator pentru a crea un formular de autentificare.

Vei vedea acum constructorul de formulare unde poți adăuga, personaliza și elimina câmpurile formularului de autentificare. Implicit, șablonul formularului de autentificare adaugă următoarele câmpuri: Nume utilizator și Parolă.

Poți personaliza orice câmp făcând clic pe el în constructorul de pagină. Apoi, poți face personalizările dorite în panoul din stânga.

Pasul 3: Configurare formular

Pentru a configura setările generale, poți accesa Setări » Generale. Pe această pagină, poți personaliza numele formularului, descrierea, textul butonului de trimitere etc.

Nu trebuie să faceți nimic în fila Notificări pentru formularul dvs. de autentificare personalizat. Implicit, notificările sunt dezactivate, deci nu veți primi un e-mail ori de câte ori cineva se autentifică pe site-ul dvs.

Când un utilizator se autentifică prin formularul dvs. de autentificare personalizat, va ajunge pe pagina de pornire a site-ului dvs. web. Puteți schimba URL-ul de redirecționare, dacă doriți, în câmpul URL de redirecționare la confirmare.

Pasul 4: Publicați formularul dvs. WordPress

Unul dintre principalele avantaje ale utilizării WPForms pentru crearea unui formular de autentificare este că vă permite să încorporați formularul oriunde pe site-ul dvs., inclusiv în postări, pagini, widgeturi din bara laterală sau zone de subsol cu widgeturi.

Să aruncăm o privire la cum să vă publicați formularul în postări sau pagini.

Creați o nouă postare sau pagină în WordPress și apoi faceți clic pe pictograma + din editorul de blocuri Gutenberg. Puteți căuta blocul WPForms și faceți clic pe el.

Apoi, selectați formularul dvs. de autentificare în blocul WPForms și acesta se va încărca automat în postarea / pagina dvs.

După adăugarea formularului, puteți publica postarea / pagina dvs.

De asemenea, puteți adăuga formularul de autentificare la widget-ul barei laterale, după cum urmează. Accesați Aspect » Widget-uri și adăugați widget-ul WPForms la bara laterală.

Selectați formularul dvs. de autentificare personalizat în setările widget-ului și faceți clic pe butonul Salvare pentru a salva modificările.

Metoda 3: Utilizarea Theme My Login pentru a crea o pagină de autentificare

Pluginul Theme My Login face extrem de ușoară publicarea unui formular de autentificare personalizat pe site-ul dvs. WordPress. Pentru a crea o pagină de autentificare simplă, tot ce trebuie să faceți este să instalați și să activați pluginul Theme My Login.

Pluginul funcționează imediat, fără nicio altă configurare.

Cu toate acestea, dacă aveți nevoie să personalizați setările pluginului, puteți face clic pe meniul Theme My Login din tabloul de bord WordPress.

Puteți apoi modifica tipurile de autentificare și înregistrare. De asemenea, puteți ajusta slug-urile URL-urilor pentru paginile de autentificare, deconectare, înregistrare, recuperare parolă și resetare parolă.

Metoda 4: Personalizați pagina existentă de autentificare WordPress fără un plugin

Dacă preferați să faceți modificări sau să adăugați stiluri personalizate paginii dvs. de autentificare existente, în loc să creați una complet nouă, iată cum puteți face acest lucru.

Pur și simplu adăugați acest cod în fișierul functions.php al temei dvs. sau într-un plugin specific site-ului:

//Custom login page
function clp_login_head() {
		
	echo '<style>'; //Begin custom styles
	echo '.login #nav a, .login #backtoblog a { color: # !important; }'; //Login page link color
	echo '.login h1 a { background:url("' . get_bloginfo('stylesheet_directory') . '/images/IMAGE GOES HERE"); width: px; height: px; }'; //Login page logo
	echo '.login .button-primary { background:#; border-color:#; }'; //Login page button color
	echo '</style>'; //End custom styles
		
}
add_action('login_head', 'clp_login_head');

Puteți schimba CSS-ul și URL-ul imaginii din codul de mai sus pentru a adăuga stilurile personalizate pentru pagina de autentificare WordPress.

Metoda 5: Afișați formularul de autentificare WordPress oriunde, fără un plugin

Dacă doriți să afișați formularul de autentificare WordPress pe orice pagină, bară laterală sau în zona footer-ului, puteți adăuga acest cod în fișierul șablon al temei dvs.:

<?php
          wp_login_form();
?>

Codul de mai sus va afișa doar pagina generală de autentificare WordPress în locația unde adăugați codul. În cazul în care doriți să adăugați o pagină de formular WordPress personalizată cu câmpuri și opțiuni suplimentare, puteți folosi acest cod:

<?php $args = array(
        'echo' => true,
        'redirect' => 'http://wpsnipp.com',
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => false );
wp_login_form($args);
?>

Câteva fragmente de cod suplimentare care vă vor fi utile:

• Schimbați URL-ul de autentificare prin fișierul .htaccess
• Schimbați URL-ul de autentificare prin functions.php
• Eliminați efectul de agitare la autentificarea WordPress atunci când apare o eroare

Asta e tot! Dacă intenționați să adăugați fragmente de cod pe site-ul dvs. mai des, consultați pluginul WPCode. Este cea mai bună soluție pentru a adăuga cu ușurință fragmente de cod personalizate.

Sperăm că acest ghid v-a ajutat să creați o pagină de autentificare personalizată în WordPress. Dacă v-a plăcut acest articol, s-ar putea să doriți să aflați cum să creați o pagină protejată prin parolă în WordPress. Această postare vă va ajuta să vă restricționați conținutul cu o parolă pentru a câștiga bani sau pentru a colecta adrese de e-mail ale utilizatorilor.

De asemenea, ați putea dori să limitați încercările de autentificare pe pagina dvs. de autentificare pentru a preveni hackerii să efectueze atacuri de tip brute force pe site-ul dvs.

Citiți ghidul nostru complet de securitate pentru WordPress pentru mai multe informații despre acest subiect.