Come creare una pagina di accesso in WordPress senza utilizzare il plug-in

Stai cercando il modo migliore per creare una pagina di accesso in WordPress senza un plug-in e senza personalizzare la pagina di accesso predefinita di WordPress? Se desideri creare una pagina di accesso in WordPress senza utilizzare i popolari plug-in di accesso di WordPress, puoi farlo aggiungendo il codice di accesso in uno shortcode o in un modello di pagina personalizzato.

In questo tutorial, dimostrerò come creare una pagina di accesso in WordPress utilizzando una funzione shortcode e anche come creare una pagina di accesso in WordPress utilizzando la funzione di accesso in un modello di pagina personalizzato.

Ognuno di questi modi dovrebbe funzionare perfettamente con qualsiasi tema WordPress o qualsiasi ambiente di hosting WordPress.

Crea una pagina di accesso in WordPress senza plug-in

L'obiettivo di questo tutorial è aiutarti a creare una pagina di accesso come l'accesso predefinito di WordPress che ti consente di accedere alla dashboard di WordPress dopo aver effettuato l'accesso.

Idealmente, questa pagina di accesso personalizzata dovrebbe essere una pagina di accesso frontend in cui accedono gli utenti del tuo sito. Come ho accennato nell'introduzione, ci sono due modi che tratteremo in questo tutorial;

1. Codice breve della pagina di accesso
2. Accesso al modello di pagina personalizzato

Crea uno shortcode della pagina di accesso

Il primo passo quando vogliamo creare una pagina di accesso ovunque su WordPress è usare uno shortcode. Lo shortcode può essere aggiunto a qualsiasi pagina o post o anche a un widget e a un modello di pagina personalizzato.

In questo passaggio creeremo uno shortcode per il modulo di accesso che verrà utilizzato per pubblicare il modulo di accesso su qualsiasi pagina di WordPress o su un post. Questo approccio offre all'utente la flessibilità di creare una pagina di accesso su qualsiasi sezione del proprio sito.

Per creare lo shortcode utilizzeremo il seguente codice:

 // Crea lo shortcode del modulo di accesso

funzione njengah_add_login_shortcode() {

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

}

Abbiamo aggiunto lo shortcode in una funzione in modo da poterlo inizializzare in un secondo momento. La funzione add_shortcode crea uno shortcode in WordPress. L'espressione generale della funzione add_shortcode() è la seguente:

 add_shortcode(stringa $tag, richiamabile $callback)

Come puoi vedere questa funzione ha due parametri che sono i seguenti:

 //Fase 2: richiamata con shortcode
funzione njengah_login_form_shortcode() {
	
	se (is_user_logged_in())
		
	return '<p>Benvenuto. Hai effettuato l'accesso!</p>'; ?> 
		
<div class ="njengah-login-tutorial" >  
		
	<?php return wp_login_form( 
		Vettore( 
			'eco' => falso ,
			'label_username' => __( 'Il tuo nome utente' ),
			'label_password' => __( 'La tua password' ),
			'label_remember' => __( 'Ricordami' )
			        )
	); ?> 
		
            </div>
  <?php 
   }

Se controlli attentamente il codice noterai che abbiamo utilizzato la funzione per verificare se l'utente è loggato come ho spiegato nel post su come verificare se l'utente è loggato in WordPress .

Se l'utente non ha effettuato l'accesso, utilizziamo la funzione wp_login_form() per visualizzare il modulo di accesso. Se l'utente ha effettuato l'accesso, mostriamo condizionalmente il messaggio di benvenuto su quella pagina invece di mostrare il modulo di accesso.

Funzione WP wp_login_form()

Il wp_login_form() è una funzione di WordPress che fornisce agli sviluppatori di temi un modo per mostrare il modulo di WordPress ovunque. Questa funzione può essere generalmente espressa come segue:

 wp_login_form( array $args = array() )

$args può essere una matrice di opzioni che controllano la modalità di visualizzazione del modulo.

Di seguito sono riportati gli argomenti che è possibile utilizzare nella matrice per modificare il modo in cui viene visualizzato il modulo.

Ad esempio, puoi impostare l'array degli argomenti e passarlo a questa funzione come segue:

 <?php 

wp_login_form( 

	 Vettore(
			'eco' => vero,
			// Il valore predefinito 'redirect' riporta l'utente all'URI della richiesta.
			'redirect' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['RICHIESTA_URI'],
			'form_id' => 'loginform',
			'label_username' => __( 'Il tuo nome utente' ),
			'label_password' => __( 'La tua password' ),
			'label_remember' => __( 'Ricordami' ),
			'label_log_in' => __( 'Accedi' ),
			'id_username' => 'user_login',
			'id_password' => 'user_pass',
			'id_remember' => 'ricordami',
			'id_submit' => 'wp-submit',
			'ricorda' => vero,
			'value_username' => '',
			// Imposta 'value_remember' su true per impostazione predefinita la casella di controllo "Ricordami" su selezionata.
			'value_remember' => falso,
		);
		
); ?>

Il modulo verrà visualizzato con le nuove etichette aggiunte all'array anziché con le etichette del modulo di accesso WordPress predefinite. Nel codice sopra, ho cambiato il nome utente in Your Username e la password in Your Password.

Dopo aver creato lo shortcode e la funzione di callback, è necessario inizializzarlo in modo che ora possiamo utilizzare lo shortcode ovunque sul post o sulla pagina di WordPress per aggiungere il modulo di accesso personalizzato.

Quello che segue è il codice che inizializzerà lo shortcode del form di accesso:

 // Passaggio 3: avvia la funzione shortcode

add_action('init', 'njengah_add_login_shortcode');

Snippet di codice completo per creare un modulo di accesso Shortcode in WordPress

Ora possiamo mettere insieme tutti questi frammenti di codice in un unico frammento di codice e aggiungere il codice al functions.php del tema WordPress attivo, quindi visualizzare il modulo di accesso di WordPress utilizzando lo shortcode – [ njengah-login-form].

Quello che segue è lo snippet di codice completo che dovresti aggiungere al file functions.php per aggiungere lo shortcode del modulo di accesso di WordPress:

 /**
 * Crea un modulo di accesso WordPress personalizzato senza plug-in [Shortcode del modulo di accesso di WordPress] 
 * @autore Joe Njengah 
 * @ gist - https://gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 */ 


// Passaggio 1: crea uno shortcode
funzione njengah_add_login_shortcode() {
	add_shortcode('jay-login-form', 'njengah_login_form_shortcode');
}

//Fase 2: richiamata con shortcode
funzione njengah_login_form_shortcode() {
	
	se (is_user_logged_in())
		
		return '<p>Benvenuto. Hai effettuato l'accesso!</p>'; ?> 
		
		<div class ="njengah-login-tutorial" >  
		
			<?php return wp_login_form( 
							Vettore( 
								'eco' => falso ,
								'label_username' => __( 'Il tuo nome utente' ),
								'label_password' => __( 'La tua password' ),
								'label_remember' => __( 'Ricordami' )
			              )
			); ?> 
		
		</div>
  <?php 
   }

// Passaggio 3: avvia la funzione shortcode
add_action('init', 'njengah_add_login_shortcode');

//Fase 4: usa lo shortcode [njengah-login-form] per incorporare il modulo di accesso in una pagina o in un post 

Quando aggiungi questo codice a functions.php dovresti creare una pagina di accesso e aggiungere lo shortcode [ njengah-login-form] per pubblicare il modulo di accesso. Il modulo di accesso dovrebbe apparire come mostrato nell'immagine qui sotto:

Stile del modulo di accesso di WordPress

Ho aggiunto i seguenti stili per rendere attraente il modulo di accesso e prendere il design del tema che sto usando:

 .njengah-login-tutorial {
    sfondo: #6379a4;
    imbottitura: 20px;
    larghezza massima: 70%;
    margine: 0 automatico;
    colore: #fff;
}

.etichetta password di accesso {
    margine-destra: 120px;
}

.login-nome utente {
    imbottitura superiore: 30px;
}

Crea un modello di pagina personalizzata per il modulo di accesso

Un modo alternativo per creare una pagina di accesso in WordPress senza plug-in è creare un modello di pagina personalizzato e utilizzare la funzione wp_login_form() per pubblicare il modulo di accesso su quella pagina.

Di seguito è riportato il codice per la creazione della pagina di accesso personalizzata che si trova nel modello di pagina personalizzata:

 <?php
/**
 * Nome modello: pagina di accesso 
 */
 
 get_header(); 
 
 
 se (is_user_logged_in()){
	 
	     echo '<p>Benvenuto. Hai effettuato l'accesso!</p>'; 
		 
 }altro{ 
	 
	 wp_login_form( 

		 Vettore(
				'eco' => vero,
				// Il valore predefinito 'redirect' riporta l'utente all'URI della richiesta.
				'redirect' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['RICHIESTA_URI'],
				'form_id' => 'loginform',
				'label_username' => __( 'Il tuo nome utente' ),
				'label_password' => __( 'La tua password' ),
				'label_remember' => __( 'Ricordami' ),
				'label_log_in' => __( 'Accedi' ),
				'id_username' => 'user_login',
				'id_password' => 'user_pass',
				'id_remember' => 'ricordami',
				'id_submit' => 'wp-submit',
				'ricorda' => vero,
				'value_username' => '',
				// Imposta 'value_remember' su true per impostazione predefinita la casella di controllo "Ricordami" su selezionata.
				'value_remember' => falso,
			)
						
		);
    }			
	
get_footer();		
				

Salva questo codice in un file e chiamalo login-page.php e assicurati che sia salvato nella cartella principale del tuo tema WordPress.

Crea una nuova pagina e vedrai che il modello di accesso è ora disponibile nell'opzione del modello degli attributi della pagina come mostrato di seguito:

Scegli il modello e pubblica la pagina. Quando controlli il frontend dovresti vedere che il modulo di accesso viene visualizzato per gli utenti che non hanno effettuato l'accesso e viene visualizzato il messaggio di benvenuto per gli utenti che hanno effettuato l'accesso.

Conclusione

In questo post, ho delineato i due modi in cui puoi aggiungere il modulo di accesso nella pagina di WordPress. Puoi utilizzare una funzione shortcode per creare uno shortcode del modulo di accesso WordPress oppure puoi utilizzare un modello di pagina personalizzato per creare una pagina di accesso in WordPress senza plug-in. Spero che ora tu possa implementare uno di questi metodi per creare un modulo di accesso frontend personalizzato sul tuo sito WordPress.

Articoli simili

1. Come creare un'impaginazione WordPress per tipi di post personalizzati
2. 30 migliori plugin di sicurezza per WordPress per proteggere il tuo sito
3. Come creare una pagina in WordPress in modo programmatico
4. Come accedere al dashboard di amministrazione di WordPress o accedere al dashboard di WordPress
5. Come creare una pagina di ricezione dell'ordine personalizzato WooCommerce
6. Come collegare Printful a WooCommerce
7. Come aggiornare le estensioni di WooCommerce
8. Come aggiungere la casella di ricerca sul tema della vetrina in cima alla pagina
9. Oltre 40 migliori plugin per moduli di contatto WordPress per un facile contatto
10. Come rimuovere la categoria non categorizzata in WordPress WooCommerce
11. Come rimuovere la barra laterale dalla pagina di WordPress o nascondere la barra laterale di WordPress
12. Come creare un'impaginazione di query personalizzata in WordPress con un esempio
13. WooCommerce vs Magento: qual è la migliore piattaforma di e-commerce?
14. Come eseguire il backup del database di WooCommerce
15. I migliori 30+ migliori plugin per moduli WordPress »Miglior plugin per moduli WordPress
16. Come creare pagine di accesso e registrazione separate in WooCommerce
17. Più di 35 migliori plugin gratuiti per WordPress
18. Come migrare da Shopify a WooCommerce