Cum să construiți o pagină de conectare WordPress personalizată

Ah, da, pagina de autentificare WordPress – una dintre cele mai recunoscute pagini din WordPress – nu-i așa?

Dar, în același timp, a avea această pagină pe site-ul tău WordPress în forma sa implicită nu este întotdeauna cea mai bună dintre idei.

De ce? - tu intrebi.

Iată răspunsul:

De ce ai avea nevoie de o pagină de autentificare WordPress personalizată?

Problema este de trei ori:

1. Traficul . Cu cât obțineți mai mult trafic, cu atât obțineți mai mult trafic „rău” ca rezultat direct. Prin trafic prost mă refer la scripturi și roboți rău intenționați, spammeri și tot felul de utilizatori care vin pe site-ul tău cu intenții rele. Personalizarea paginii de autentificare WordPress vă poate face site-ul mai sigur.
2. Site multi-utilizator . Dacă site-ul dvs. este gestionat de mai multe persoane – fie că este vorba de administratori sau autori/bloggeri – vor avea loc mai multe apariții de conectare. Furnizarea unui formular personalizat de autentificare va face procesul mai plăcut în general.
3. Branding . Pagina de autentificare implicită este bună, dar există logo-ul WordPress mare chiar în mijloc. Comutarea acesteia și a face ca pagina de conectare să arate mai mult ca a ta poate fi o notă de branding plăcută. Acest lucru este valabil mai ales dacă construiți un site web pentru un client. Oferirea clientului dumneavoastră cu o experiență consistentă este cu siguranță ceva pe care îl vor aprecia.

Dacă oricare dintre cele de mai sus vă sună convingător, ar trebui să luați în considerare trecerea paginii de autentificare la una personalizată. Iată cum:

Cum să creați o pagină de autentificare WordPress personalizată

Există două modalități principale în care puteți proceda:

• modul manual ,
• modul plugin .

Ambele moduri au avantajele și dezavantajele lor. Modul manual vă oferă mai mult control asupra aspectului paginii finale. Modul de plugin este mai ușor de urmărit, mai ales dacă nu aveți abilități de codare, dar trebuie să vă mulțumiți cu ceea ce vă permite pluginul să faceți.

Să le acoperim pe ambele.

Crearea manuală a unei pagini de conectare personalizată

Deși acest lucru necesită să modificați unele dintre fișierele sursă ale temei, nu este nimic atât de dificil. Voi folosi Twenty Fifteen ca exemplu aici.

Distracția începe prin crearea unei copii a fișierului page.php și a fișierului content-page.php .

Redenumiți acele copii noi în page-login.php și, respectiv content-login.php .

Deschideți page-login.php și modificați doar o linie. Din această:

 get_template_part( 'content', 'page' );

La acest:

 get_template_part( 'content', 'login' );

Acum, să edităm content-login.php și să adăugăm o linie chiar sub <?php the_content(); ?> <?php the_content(); ?> . Ca astfel:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

Notă. În această etapă, puteți efectua o serie de alte personalizări dacă doriți (cum ar fi ajustarea designului/aspectului, eliminarea barei laterale), dar totul este opțional. Schimbarea doar a acestor două linii va face treaba dacă optați pentru o abordare extrem de minimă cu noua dvs. pagină de conectare WordPress.

Acum, să creăm o pagină nouă în wp-admin și să o numim pur și simplu „login”. Asigurați-vă că permalink-ul este și „login”:

Făcând acest lucru, WordPress folosește automat fișierul șablon page-login.php .

Dacă vă vizitați noua pagină chiar acum, ar trebui să arate puțin așa:

În această etapă, singurul lucru rămas de făcut este să setați redirecționări pentru a elimina în cele din urmă pagina de conectare implicită a WordPress. Faceți acest lucru plasând aceste linii la sfârșitul fișierului functions.php :

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(Fragmente de cod construite pe baza: [1][2].)

În acest moment, singura pagină de autentificare accesibilă este cea nouă creată de tine. Lucrul minunat aici este că îl puteți edita liber prin editorul de pagini implicit al WordPress (la fel cum ați edita orice altă pagină).

Crearea unei pagini de autentificare WordPress personalizată cu un plugin

Această metodă funcționează puțin diferit, deoarece în loc să creăm o pagină de autentificare complet nouă, de fapt o modificăm pe cea implicită.

În primul rând, pluginul pe care îl vom folosi este: Custom Login Page Customizer.

După instalare și activare, trebuie doar să accesați Aspect > Personalizare autentificare , unde puteți lansa panoul de personalizare.

Opțiunile acestui plugin sunt destul de frumoase și vă permit să ajustați lucruri precum:

• Setați o siglă să apară în locul siglei implicite WordPress.
• Setați un fundal pentru întreaga pagină de conectare.
• Setați un fundal pentru formularul în sine.
• Ajustați stilul formularului și fiecare mic detaliu despre acesta (fonturi, dimensiuni, culori, câmpuri).
• Instalați un add-on de securitate pentru a obține un câmp captcha suplimentar în formular (excelent pentru a preveni autentificarea spam/roboții).

De exemplu, doar câteva minute de lucru cu pluginul și am obținut acest rezultat:

O altă opțiune de plugin

Un alt plugin personalizat pentru pagina de autentificare care merită aruncat o privire este: Login Designer. Acest plugin își propune să facă personalizarea paginii de autentificare WordPress foarte ușoară, oferindu-vă în același timp flexibilitate în design.

O modalitate prin care se realizează ușurința în utilizare este familiarizarea procesului de personalizare. Toate opțiunile și instrumentele sunt integrate direct în Personalizatorul WordPress. Deci, dacă sunteți obișnuit să utilizați Personalizatorul pentru a schimba opțiunile temei, vă veți simți ca acasă.

Urmăriți acest videoclip pentru o prezentare generală a modului în care funcționează pluginul.

Manual sau printr-un plugin ?

Care este metoda ta de alegere? Preferiți să codificați lucrurile manual sau să aveți totul gestionat de un plugin? Simțiți-vă liber să împărtășiți.