Cum să creezi o pagină de conectare în WordPress fără a folosi pluginul

Căutați cea mai bună modalitate de a crea o pagină de autentificare în WordPress fără un plugin și fără a personaliza pagina implicită de autentificare WordPress? Dacă doriți să creați o pagină de conectare în WordPress fără a utiliza pluginurile populare de conectare WordPress, puteți face acest lucru adăugând codul de autentificare într-un shortcode sau într-un șablon de pagină personalizată.

În acest tutorial, voi demonstra cum puteți crea o pagină de conectare în WordPress folosind o funcție de cod scurt și, de asemenea, cum puteți crea o pagină de autentificare în WordPress folosind funcția de conectare într-un șablon de pagină personalizată.

Fiecare dintre aceste moduri ar trebui să funcționeze perfect cu orice temă WordPress sau orice mediu de găzduire WordPress.

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

Scopul acestui tutorial este să vă ajute să creați o pagină de conectare, cum ar fi autentificarea implicită WordPress, care vă permite să accesați tabloul de bord WordPress după autentificare.

În mod ideal, această pagină de conectare personalizată ar trebui să fie o pagină de autentificare frontală în care utilizatorii site-ului dvs. se conectează. După cum am menționat în introducere, există două moduri pe care le vom acoperi în acest tutorial;

1. Cod scurt pentru pagina de conectare
2. Conectare cu șablon de pagină personalizat

Creați codul scurt al paginii de conectare

Primul pas când vrem să creăm o pagină de conectare oriunde pe WordPress este să folosim un shortcode. Shortcode-ul poate fi adăugat la orice pagină sau orice postare sau chiar un widget și un șablon de pagină personalizat, de asemenea.

În acest pas, vom crea un cod scurt pentru formularul de conectare care va fi folosit pentru a publica formularul de autentificare pe orice pagină din WordPress sau pe o postare. Această abordare oferă utilizatorului flexibilitatea de a crea o pagină de conectare în orice secțiune a site-ului său.

Pentru a crea codul scurt vom folosi următorul cod:

 // Creați codul scurt al formularului de conectare

funcția njengah_add_login_shortcode() {

                add_shortcode( 'njengah-login-form', 'njengah_login_form_shortcode');

}

Am adăugat shortcode-ul într-o funcție, astfel încât să îl putem inițializa mai târziu. Funcția add_shortcode creează un shortcode în WordPress. Expresia generală a funcției add_shortcode() este următoarea:

 add_shortcode( șir $tag, apelabil $callback )

După cum puteți vedea, această funcție are doi parametri care sunt după cum urmează:

 //Pasul 2: apel invers prin cod scurt
funcția njengah_login_form_shortcode() {
	
	if (este_user_logged_in())
		
	returnează „<p>Bine ai venit. Sunteți autentificat!</p>'; ?> 
		
<div class ="njengah-login-tutorial" >  
		
	<?php return wp_login_form( 
		matrice( 
			'eco' => fals,
			'label_username' => __( 'Numele dvs. de utilizator ' ),
			'label_password' => __( 'Parola ta' ),
			'label_remember' => __( 'Ține-mă minte' )
			        )
	); ?> 
		
            </div>
  <?php 
   }

Dacă verificați cu atenție codul, veți observa că am folosit funcția pentru a verifica dacă utilizatorul este autentificat, așa cum am explicat în postarea despre cum să verificați dacă utilizatorul este autentificat în WordPress .

Dacă utilizatorul nu este autentificat, folosim funcția wp_login_form() pentru a afișa formularul de autentificare. Dacă utilizatorul este conectat, afișăm condiționat mesajul de bun venit pe pagina respectivă în loc să arătăm formularul de autentificare.

Funcția WP wp_login_form()

Wp_login_form() este o funcție WordPress care oferă dezvoltatorilor de teme o modalitate de a afișa formularul WordPress oriunde. Această funcție poate fi exprimată în general după cum urmează:

 wp_login_form( array $args = array() )

$args pot fi o serie de opțiuni care controlează modul în care este afișat formularul.

Următoarele sunt argumentele pe care le puteți folosi în matrice pentru a schimba modul în care este afișat formularul.

De exemplu, puteți seta matricea de argumente și o puteți transmite acestei funcții după cum urmează:

 <?php 

wp_login_form( 

	 matrice(
			'eco' => adevărat,
			// Valoarea implicită de „redirecționare” duce utilizatorul înapoi la URI-ul solicitării.
			'redirect' => ( is_ssl() ? 'https://': 'http://' ). $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
			'form_id' => 'form de conectare',
			'label_username' => __( 'Numele dvs. de utilizator' ),
			'label_password' => __( 'Parola ta' ),
			'label_remember' => __( 'Ține-mă minte' ),
			'label_log_in' => __( 'Autentificare' ),
			'id_username' => 'user_login',
			'id_password' => 'user_pass',
			'id_remember' => 'remember-ma',
			'id_submit' => 'wp-submit',
			„remember” => adevărat,
			'value_username' => '',
			// Setați „value_remember” la true pentru ca caseta de selectare „Remember me” să fie bifată.
			„value_remember” => fals,
		);
		
); ?>

Formularul va fi afișat cu noile etichete pe care le-ați adăugat la matrice, spre deosebire de etichetele implicite ale formularului de autentificare WordPress. În codul de mai sus, am schimbat numele de utilizator în Numele tău de utilizator și parola în Parola ta.

După crearea codului scurt și a funcției de apel invers, trebuie să o inițializam, astfel încât acum să putem folosi codul scurt oriunde pe postarea sau pagina WordPress pentru a adăuga formularul de conectare personalizat.

Următorul este codul care va inițializa codul scurt al formularului de conectare:

 // Pasul 3: Inițiază funcția de cod scurt

add_action('init', 'njengah_add_login_shortcode');

Fragment complet de cod pentru a crea formularul de autentificare Shortcode în WordPress

Acum putem să punem împreună toate aceste fragmente de cod într-un singur fragment de cod și să adăugăm codul la funcțiile.php ale temei active WordPress, apoi să afișăm formularul de autentificare WordPress folosind codul scurt – [njengah-login-form].

Următorul este fragmentul de cod complet pe care ar trebui să-l adăugați la fișierul functions.php pentru a adăuga codul scurt al formularului de conectare WordPress:

 /**
 * Creați formular personalizat de autentificare WordPress fără plugin [ Formular de conectare WordPress Shortcode ] 
 * @autorul Joe Njengah 
 * @ gist - https://gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 */ 


// Pasul 1: Creați cod scurt
funcția njengah_add_login_shortcode() {
	add_shortcode('jay-login-form', 'njengah_login_form_shortcode');
}

//Pasul 2: apel invers prin cod scurt
funcția njengah_login_form_shortcode() {
	
	if (este_user_logged_in())
		
		returnează „<p>Bine ai venit. Sunteți autentificat!</p>'; ?> 
		
		<div class ="njengah-login-tutorial" >  
		
			<?php return wp_login_form( 
							matrice( 
								'eco' => fals,
								'label_username' => __( 'Numele dvs. de utilizator ' ),
								'label_password' => __( 'Parola ta' ),
								'label_remember' => __( 'Ține-mă minte' )
			              )
			); ?> 
		
		</div>
  <?php 
   }

// Pasul 3: Inițiază funcția de cod scurt
add_action('init', 'njengah_add_login_shortcode');

//Pasul 4: Folosiți codul scurt [njengah-login-form] pentru a încorpora formularul de conectare într-o pagină sau postare 

Când adăugați acest cod la functions.php, ar trebui să creați o pagină de conectare și să adăugați codul scurt [ njengah-login-form] pentru a publica formularul de autentificare. Formularul de autentificare ar trebui să apară așa cum se arată în imaginea de mai jos:

Stilul formularului de autentificare WordPress

Am adăugat următoarele stiluri pentru a face formularul de autentificare atrăgător și pentru a prelua designul temei pe care o folosesc:

 .njengah-login-tutorial {
    fundal: #6379a4;
    umplutură: 20px;
    latime maxima: 70%;
    marja: 0 auto;
    culoare: #fff;
}

.login-parolă etichetă {
    margine-dreapta: 120px;
}

.login-username {
    padding-top: 30px;
}

Creați un șablon de pagină personalizată pentru formular de autentificare

O modalitate alternativă de a crea o pagină de conectare în WordPress fără plugin este să creați un șablon de pagină personalizat și să utilizați funcția wp_login_form() pentru a publica formularul de autentificare pe pagina respectivă.

Următorul este codul pentru crearea paginii de autentificare personalizată care se află în șablonul de pagină personalizată:

 <?php
/**
 * Nume șablon: Pagina de conectare 
 */
 
 get_header(); 
 
 
 if (este_user_logged_in()){
	 
	     echo „<p>Bine ați venit. Sunteți autentificat!</p>'; 
		 
 }altfel{ 
	 
	 wp_login_form( 

		 matrice(
				'eco' => adevărat,
				// Valoarea implicită de „redirecționare” duce utilizatorul înapoi la URI-ul solicitării.
				'redirect' => ( is_ssl() ? 'https://': 'http://' ). $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
				'form_id' => 'form de conectare',
				'label_username' => __( 'Numele dvs. de utilizator' ),
				'label_password' => __( 'Parola ta' ),
				'label_remember' => __( 'Ține-mă minte' ),
				'label_log_in' => __( 'Autentificare' ),
				'id_username' => 'user_login',
				'id_password' => 'user_pass',
				'id_remember' => 'remember-ma',
				'id_submit' => 'wp-submit',
				„remember” => adevărat,
				'value_username' => '',
				// Setați „value_remember” la true pentru ca caseta de selectare „Remember me” să fie bifată.
				„value_remember” => fals,
			)
						
		);
    }			
	
get_footer();		
				

Salvați acest cod într-un fișier și denumiți-l login-page.php și asigurați-vă că este salvat în folderul rădăcină al temei dvs. WordPress.

Creați o pagină nouă și veți vedea că șablonul de autentificare este acum disponibil în opțiunea șablon atribute paginii, așa cum se arată mai jos:

Alegeți șablonul și publicați pagina. Când verificați interfața, ar trebui să vedeți că este afișat formularul de conectare pentru utilizatorii care nu sunt autentificați și mesajul de bun venit este afișat pentru utilizatorii care sunt autentificați.

Concluzie

În această postare, am subliniat cele două moduri prin care puteți adăuga formularul de autentificare în pagina WordPress. Puteți utiliza o funcție de cod scurt pentru a crea un cod scurt de formular de conectare WordPress sau puteți utiliza un șablon de pagină personalizat pentru a crea o pagină de conectare în WordPress fără plugin. Sper că acum puteți implementa una dintre aceste metode pentru a crea un formular personalizat de conectare pe site-ul dvs. WordPress.

Articole similare

1. Cum se creează paginarea WordPress pentru tipuri de postări personalizate
2. Cele mai bune 30 de pluginuri de securitate WordPress pentru a vă proteja site-ul
3. Cum se creează o pagină în WordPress în mod programatic
4. Cum să accesați tabloul de bord de administrare WordPress sau să vă conectați la tabloul de bord WordPress
5. Cum se creează o pagină personalizată de comandă primită WooCommerce
6. Cum să vă conectați Printful la WooCommerce
7. Cum să actualizați extensiile WooCommerce
8. Cum să adăugați caseta de căutare pe tema Vitrinei de sus a paginii
9. 40+ Cele mai bune pluginuri de formulare de contact WordPress pentru un contact ușor
10. Cum să eliminați categoria necategorizată din WordPress WooCommerce
11. Cum să eliminați bara laterală din pagina WordPress sau să ascundeți bara laterală WordPress
12. Cum să creați o paginare personalizată a interogărilor în WordPress cu un exemplu
13. WooCommerce vs Magento: care este cea mai bună platformă de comerț electronic?
14. Cum se face backup pentru baza de date WooCommerce
15. Top 30+ cele mai bune pluginuri pentru formulare WordPress » Cel mai bun plugin pentru formulare pentru WordPress
16. Cum se creează pagini separate de autentificare și înregistrare în WooCommerce
17. 35+ Cel mai bun plugin gratuit WordPress
18. Cum să migrezi de la Shopify la WooCommerce