Creați o pagină de conectare personalizată WordPress fără plugin

Publicat: 2022-09-01

Te-ai plictisit vreodată de pagina de conectare implicită WordPress?

V-ați întrebat vreodată dacă există o modalitate de a face pagina de conectare în concordanță cu designul site-ului dvs.?

Dacă da, ați ajuns la locul potrivit. În acest articol, vă vom ghida prin diferite metode de a vă personaliza pagina de autentificare fără pluginuri.

Ce am inclus astăzi?

  • Pagina de conectare implicită WordPress
  • De ce ar trebui să creați o pagină de conectare personalizată?
  • Personalizați pagina de conectare implicită WordPress
    • Personalizați sigla paginii de conectare
    • Dezactivarea comutatorului de limbă a paginii de conectare WordPress
  • Creați o nouă pagină de conectare personalizată

Pagina de conectare implicită WordPress

În mod implicit, puteți accesa pagina de conectare WordPress adăugând /login/, /admin/ sau wp-login.php la sfârșitul adresei URL a site-ului dvs.

Primești acest ecran de conectare de fiecare dată când o faci, nu-i așa?

PPWP Pro: Pagina de conectare implicită WordPress

După cum puteți vedea, pagina de autentificare WordPress conține următoarele elemente:

  1. Fundal implicit
  2. Logo-ul WordPress
  3. Câmpuri de introducere (nume de utilizator și parolă)
  4. Caseta de selectare Remember Me
  5. Butonul Trimitere
  6. Link-ul Am pierdut parola
  7. Înapoi la link

Ce se întâmplă dacă doriți să înlocuiți această pagină generică cu una personalizată, să spunem, în scopuri de branding?

Continuați să citiți până la sfârșitul blogului nostru. Vor fi câteva surprize pentru tine.

De ce ar trebui să creați o pagină de conectare personalizată WordPress?

În primul rând, paginile de conectare personalizate aduc o experiență mult mai bună pentru utilizator. Dacă conduceți o afacere mică care are câțiva utilizatori care să se conecteze la site-ul dvs., puteți utiliza cu siguranță pagina de conectare implicită WordPress.

Cu toate acestea, imaginați-vă că site-ul dvs. este un magazin online, a permite clienților să se conecteze la site-ul dvs. printr-un gateway plictisitor și non-branding nu este o chemare bună.

Cea mai bună practică este să faceți pagina de conectare în concordanță cu stilurile site-ului dvs.

Un alt beneficiu al unei pagini de autentificare personalizată WordPress este îmbunătățirea securității site-ului dvs. Schimbând adresa URL implicită de conectare WordPress, utilizatorii nedoriți nu pot ajunge cu ușurință la pagina dvs. de conectare de administrator. Acest lucru ajută la evitarea atacurilor nedorite asupra site-ului dvs.

Acum, să trecem la următoarele secțiuni, unde vă vom ghida prin pașii detaliați pentru a vă crea propria pagină de conectare.

Personalizați pagina de conectare implicită WordPress

Știți că puteți înlocui logo-urile și linkurile din pagina de conectare implicită WordPress cu propriile dvs.?

Personalizați sigla paginii de conectare

Pentru a înlocui sigla WordPress, adăugați pur și simplu următorul fragment de cod în fișierul functions.php al temei (copil).

 funcția ppwp_custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
imagine de fundal: url( https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png );
        înălțime: 100px ;
        latime: 300px ;
        dimensiunea fundalului: 300px 100px ;
        background-repeat: no-repeat ;
        padding-bottom: 10px ;
        }
    </stil>
<?php }
add_action( 'login_enqueue_scripts', 'ppwp_custom_login_logo');

Această acțiune vă ajută să înlocuiți numai sigla. Când faceți clic pe logo-ul dvs., sunteți în continuare redirecționat către pagina WordPress.

Cum poți redirecționa utilizatorii către site-ul tău?

Doar o bucată de tort cu următorul fragment de cod.

 funcția ppwp_custom_login_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'ppwp_custom_login_url');
funcția ppwp_login_logo_url_redirect() {
    returnează „ https://passwordprotectwp.com/ ”;
}
add_filter( 'login_headertitle', 'ppwp_login_logo_url_redirect');

Nu uitați să înlocuiți adresa URL a site-ului cu numele real al site-ului dvs. Logo-ul personalizat de pe ecranul dvs. de conectare este indicat acum către pagina de pornire a site-ului dvs.

Dezactivarea comutatorului de limbă a paginii de conectare WordPress

WordPress 5.9 include o funcție pentru ca utilizatorii să selecteze limbile atunci când se conectează la site-ul dvs.

Este util atunci când rulați un site multilingv. Dacă site-ul dvs. este disponibil într-o singură limbă, este posibil să doriți să dezactivați această funcție pentru a simplifica formularul de conectare.

Cum poți face asta?

Pur și simplu adăugați următorul fragment de cod în fișierul functions.php al temei (copil) sau în pluginul Code Snippets.

 add_filter( 'login_display_language_dropdown', '__return_false');

Creați o nouă pagină de conectare personalizată WordPress

Ce se întâmplă dacă vrei să faci mai mult decât să schimbi siglele și linkurile?

Vă permite WordPress să vă creați propria pagină de conectare și să înlocuiți cea implicită WordPress cu a dvs.?

Da! Poti absolut!

Doar urmați pașii noștri de mai jos. Vă rugăm să rețineți că acest ghid necesită puține cunoștințe de codare. Dacă nu sunteți familiarizat cu codurile, utilizați în schimb pluginuri.

Nu uitați să faceți o copie de rezervă a site-ului dvs. înainte de a începe.

Pasul 1: Creați un fișier șablon nou

Pentru a face acest lucru, accesați Aspect > Editor de fișiere tematice.

În secțiunea șablon-părți, adăugați un nou fișier .php și denumiți-l după cum doriți, de exemplu, custom-login-page.php.

Mai întâi, adăugați această linie în fișierul șablon personalizat:

 <?php /* Nume șablon: pagini personalizate de conectare */ ?>

Această acțiune va face din fișierul PHP creat un șablon de pagină. În consecință, veți vedea numele șablonului când editați pagini în backend.

Pasul 2: Personalizați fișierul șablon creat

Următorul pas este să adăugați coduri PHP pentru a crea un formular complet de autentificare.

Adăugați un formular de conectare

 <?php
/**
* Nume șablon: Pagina de conectare personalizată
*/
get_header();
if ( ! is_user_logged_in() ) {
    $args = matrice
        'redirect' => admin_url(), // redirecționează către tabloul de bord admin.
        'form_id' => 'custom_loginform',
        'label_username' => __( ' Nume utilizator: ' ),
        'label_password' => __( ' Parola: ' ),
        'label_remember' => __( ' Ține-mă minte ' ),
        'label_log_in' => __( ' Conectează-mă ' ),
         „remember” => adevărat
    );
wp_login_form($args);
}
get_footer();

Redirecționează wp-login.php către pagina de conectare personalizată

Ați creat cu succes o pagină de conectare personalizată. Cu toate acestea, utilizatorii pot ajunge direct la pagina de conectare implicită WordPress tastând wp-admin sau wp-login.php după URL-urile site-ului dvs.

Pentru a evita acest lucru, trebuie să redirecționați utilizatorii de la adresele URL de conectare implicite WordPress către cele personalizate.

Pentru a face acest lucru, adăugați următoarele coduri personalizate la funcțiile.php sau la pluginul Code Snippets a temei (copil) ale dvs.

 funcția redirect_login_page() {
    $login_url = home_url( '/login' );
    $url = nume de bază($_SERVER['REQUEST_URI']); // obțineți adresa URL solicitată
    isset( $_REQUEST['redirect_to'] ) ? ( $url = "wp-login.php" ): 0; // dacă utilizatorii trimit cererea către wp-admin
    if( $url == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect( $login_url );
        Ieșire;
    }
}
add_action('init','redirect_login_page');

Gestionarea erorilor de conectare

După ce ați terminat de creat o pagină de conectare personalizată, utilizatorii care introduc detaliile de conectare corecte vor ajunge la tabloul de bord. Solicitările de conectare nereușite vor fi redirecționate către una implicită WordPress.

Pentru a face față încercărilor eșuate de conectare, adăugați următorul cod în fișierul functions.php al temei (copil).

 function error_handler() {
    $login_page = home_url( '/login' );
    $erori globale;
    $err_codes = $erori->get_error_codes(); // obțineți coduri de eroare încorporate în WordPress
    $_SESSION["err_codes"] = $err_codes;
    wp_redirect( $login_page ); // menține utilizatorii pe aceeași pagină
    Ieșire;
}
add_filter( 'erori_de_login', 'gestionar_eroare');

Apoi, adăugați următoarele coduri la custom_login_page.php.

 $err_codes = isset( $_SESSION["err_codes"] )? $_SESSION["err_codes"] : 0;
    if( $err_codes !== 0 ){
        echo display_error_message( $err_codes );
}
function display_error_message( $err_code ){
    // Nume de utilizator invalid.
    if ( in_array( 'nume de utilizator_invalid', $err_code ) ) {
        $error = '<strong>EROARE</strong>: nume de utilizator nevalid.';
    }
    // Parola incorecta.
    if ( in_array( 'parola_incorecta', $err_code ) ) {
        $error = '<strong>EROARE</strong>: parola introdusă este incorectă.';
    }
    // Numele de utilizator gol.
    if ( in_array( 'empty_username', $err_code ) ) {
        $error = '<strong>EROARE</strong>: câmpul nume de utilizator este gol.';
    }
    // Parola goală.
    if ( in_array( 'parola_vide', $err_code ) ) {
        $error = '<strong>EROARE</strong>: câmpul pentru parolă este gol.';
    }
    // Numele de utilizator gol și parola goală.
    if( in_array( 'empty_username', $err_code ) && in_array( 'empty_parola', $err_code )){
        $error = '<strong>EROARE</strong>: numele de utilizator și parola sunt goale.';
    }
returnează $eroare;
}

Pasul 3: Creați o pagină nouă și atribuiți șablonul creat unei pagini personalizate

Acum, navigați la secțiunea Pagini din tabloul de bord administrativ și creați o pagină nouă.

În meniul drop-down Șablon din secțiunea Atribute pagină, selectați șablonul creat.

PPWP Pro: Creați pagini personalizate de conectare

Salvați pagina.

Acum aveți propria pagină de conectare.

Ți-ai creat cu succes pagina de conectare personalizată?

V-am prezentat pașii detaliați pentru a vă personaliza pagina de autentificare de administrator.

Puteți schimba sigla și adresa URL asociată în formularul de conectare implicit WordPress.

Alternativ, vă puteți crea propria pagină de conectare personalizată WordPress creând un șablon de pagină nou. În timp ce a doua soluție pare să necesite cunoștințe de codificare la început, este destul de ușor cu ghidul nostru clar pas cu pas. Deci nu-ți face griji deloc.

Ați reușit să vă creați încă pagina de conectare personalizată?

Ai nevoie de alte informații?

Anunțați-ne în secțiunea de comentarii de mai jos!