Cum să personalizați pagina de conectare WordPress

De ce aveți nevoie de o pagină de conectare personalizată pentru WordPress?

• Utilizatorii dvs. se vor înregistra și se vor autentifica folosind ecranul implicit de autentificare WordPress, deoarece WordPress nu oferă opțiuni încorporate pentru adăugarea propriului logo sau schimbarea aspectului general pentru a se potrivi cu orice temă personalizată sau branding pe care îl aveți pe site-ul dvs.

• Acest lucru poate funcționa bine pentru site-uri web mici. Cu toate acestea, dacă gestionați un site web de afaceri sau o comunitate online ocupată, atunci poate doriți să vă arătați propria marcă în loc de WordPress.

Iată cele două moduri prin care poți parcurge:

Puteți contacta experții de la populara companie de dezvoltare WordPress din SUA pentru orice întrebări.

Să citim în continuare soluțiile de mai jos!

1. Utilizați aspectul WordPress existent.

• De fapt, este ușor să personalizați cel existent.
• Dacă este vorba doar de schimbarea siglei sau de un aspect complet diferit, locul de început este acțiunea login_enqueue_scripts.
• Aici puteți lua decizia de a scoate o bucată normală, simplă de CSS sau de a oferi un link către un fișier complet de CSS. De asemenea, puteți pune în coadă orice JavaScript la alegere, pe care doriți să îl utilizați.
• În function.php

 add_action('login_head', 'my_custom_login');
funcția my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/your_login_styles.css" />';}

• your_login_styles.css este numele fișierului CSS care este creat pentru personalizarea paginii de conectare.
• Aici trebuie avut grijă, asigurați-vă că utilizați selectoare extrem de specifice, pentru a vă asigura că treceți peste stilul de bază.
• În mod implicit, logo-ul leagă pe oricine la adresa: wordpress.org. Aceasta poate fi schimbată în adresa URL a site-ului dvs. folosind codul de mai jos din fișierul functions.php:

 add_filter( 'login_headerurl', 'my_login_logo_url');
funcția my_login_logo_url() {
return get_bloginfo('url');
}
add_filter( 'login_headertitle', 'my_login_logo_url_title');
funcția my_login_logo_url_title() {
returnează „Numele și informațiile site-ului tău”;}

Cea mai convenabilă modalitate de a schimba mesajul de eroare este prin codul de mai jos din functions.php:

 add_filter('erori_login', 'override_eroare_login');
funcția login_error_override()
{
returnează „Detalii de conectare incorecte.”;
}

Înrudit: WordPress vs Adobe Business Catalyst: Care CMS este cel mai bun pentru dezvoltare?

2. Creați un aspect nou.

• Pentru început, trebuie creat un șablon de pagină personalizat pentru pagina de conectare.
• Pentru a face acest lucru, puteți alege să creați un șablon de pagină nou și să îi dați un nume. de exemplu: page-login.php.
• După aceea, creați o pagină nouă de la administratorul WP. Configurați permalinkul pentru a vă autentifica. Astfel, WordPress va prelua în mod implicit șablonul page-login.php pentru această pagină.
• Păstrați eticheta wp_login_form în șablonul de pagină page-login.php pentru a afișa formularul de autentificare

O agenție globală de soluții pentru tehnologia informației care oferă servicii digitale proaspete și creative companiilor care doresc să se dezvolte online. Concentrându-ne pe rezultate, folosim abilitățile noastre tehnice și cunoștințele din domeniu pentru a vă ajuta să vă îndepliniți obiectivele digitale. Fie că este vorba de reducerea ratei de respingere cu design web interactiv sau de a aduce trafic și fluxuri de venituri noi pe site-ul dvs. <a href="www.elsner.com/contact-us”>Vorbește cu noi</a> despre proiectul tău pentru a începe...

  </p>
</div>
<div class="login-form">
<?php
$args = matrice(
'redirect' => home_url(),
'id_username' => 'utilizator',
'id_password' => 'treceți',
);
?>
<?php wp_login_form( $args ); ?>
</div>

• Se poate face un CSS conform cerințelor dumneavoastră personale. Pagina de autentificare este deja în funcțiune.
• Putem încerca să ne autentificăm, dacă este un succes, vom fi redirecționați la adresa care a fost specificată în parametrul de redirecționare de mai sus. Cu toate acestea, este ceva de abordat.

 add_action('init','redirect_login_page'); 

funcția redirect_login_page() {
$login_page = home_url( '/login/' );
$page_viewed = nume de bază($_SERVER['REQUEST_URI']);
if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET')
{
    wp_redirect($login_page);
    Ieșire;
}
}

– Pagina de autentificare poate funcționa conform așteptărilor după ce ne-am conectat. În cazul în care apare o eroare, cum ar fi la trimiterea unei combinații de id-uri și parolă nevalide sau trimiterea de spații goale, vom fi redirecționați către wp-login.php. Pentru a rezolva această problemă, puteți adăuga următoarea funcție în functions.php:

 add_action( 'wp_login_failed', 'login_failed');

funcția login_failed() {
$login_page = home_url( '/login/' );
wp_redirect( $login_page . '?login=failed' );
Ieșire;
}

 add_filter( 'autentificare', 'verificare_nume_utilizator_parola', 1, 3);

funcția verify_username_password( $utilizator, $nume utilizator, $parolă ) {
$login_page = home_url( '/login/' );
if( $nume utilizator == "" || $parolă == "" ) {
wp_redirect( $login_page . "?login=empty" );
Ieșire;
}
}

– Problema finală este că vom fi redirecționați și către wp-login.php atunci când suntem deconectați de pe site. Prin urmare, trebuie să specificăm adresa URL de redirecționare și la deconectare.

 add_action('wp_logout','logout_page');
funcția logout_page() {
$login_page = home_url( '/login/' );
wp_redirect( $login_page . "?login=false" );
Ieșire;
}

• Există o serie de lucruri care ar putea fi făcute pentru a îmbunătăți pagina de conectare, cum ar fi adăugarea linkului pentru parola pierdută, linkul Înregistrare și chiar un mesaj de eroare personalizat. Cu toate acestea, în acest moment, acum funcționează suficient de bine pentru ca utilizatorii să se autentifice și să se deconecteze. Ar putea fi un început grozav să creați o pagină de conectare care este mai avansată.

Deci da! Aia este.
Cu cele câteva modificări simple, vă puteți personaliza destul de confortabil pagina de autentificare pentru a se potrivi cu aspectul și aspectul site-ului dvs.

Mulți designeri de teme se abțin de la stilarea paginii de autentificare, deoarece o consideră inutilă, mai ales atunci când nu se află în configurarea temei WordPress.

Cu toate acestea, atunci când creați un site client, neglijând stilul – și în mod semnificativ, marca – pagina de autentificare se poate dovedi a fi o oportunitate pierdută care ar putea distruge experiența utilizatorului atunci când există o temă personalizată.

Cealaltă oportunitate de a-ți marca site-ul, care lasă și o impresie de lungă durată în mintea utilizatorului tău.