Comment créer une page de connexion dans WordPress sans utiliser de plugin

Cherchez-vous le meilleur moyen de créer une page de connexion dans WordPress sans plugin et sans personnaliser la page de connexion WordPress par défaut ? Si vous souhaitez créer une page de connexion dans WordPress sans utiliser les plugins de connexion WordPress populaires, vous pouvez le faire en ajoutant le code de connexion dans un shortcode ou dans un modèle de page personnalisé.

Dans ce didacticiel, je vais vous montrer comment créer une page de connexion dans WordPress à l'aide d'une fonction de code court et également comment créer une page de connexion dans WordPress à l'aide de la fonction de connexion dans un modèle de page personnalisé.

Chacune de ces méthodes devrait fonctionner de manière transparente avec n'importe quel thème WordPress ou n'importe quel environnement d'hébergement WordPress.

Créer une page de connexion dans WordPress sans plugin

Le but de ce tutoriel est de vous aider à créer une page de connexion comme la connexion WordPress par défaut qui vous permet d'accéder au tableau de bord WordPress après vous être connecté.

Idéalement, cette page de connexion personnalisée devrait être une page de connexion frontale sur laquelle les utilisateurs de votre site se connectent. Comme je l'ai mentionné dans l'introduction, nous aborderons deux manières dans ce didacticiel.

1. Code abrégé de la page de connexion
2. Connexion au modèle de page personnalisé

Créer un shortcode de page de connexion

La première étape lorsque nous voulons créer une page de connexion n'importe où sur WordPress consiste à utiliser un shortcode. Le shortcode peut être ajouté à n'importe quelle page ou à n'importe quel article ou même à un widget et à un modèle de page personnalisé.

Dans cette étape, nous allons créer un shortcode pour le formulaire de connexion qui sera utilisé pour publier le formulaire de connexion sur n'importe quelle page de WordPress ou sur un article. Cette approche donne à l'utilisateur la possibilité de créer une page de connexion sur n'importe quelle section de son site.

Pour créer le shortcode nous utiliserons le code suivant :

 // Créer un shortcode de formulaire de connexion

function njengah_add_login_shortcode() {

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

}

Nous avons ajouté le shortcode dans une fonction afin de pouvoir l'initialiser plus tard. La fonction add_shortcode crée un shortcode dans WordPress. L'expression générale de la fonction add_shortcode() est la suivante :

 add_shortcode( string $tag, appelable $callback )

Comme vous pouvez le voir, cette fonction a deux paramètres qui sont les suivants :

 //Étape 2 : Rappel du shortcode
function njengah_login_form_shortcode() {
	
	si (is_user_logged_in())
		
	retour '<p>Bienvenue. Vous êtes connecté !</p>'; ?> 
		
<div class ="njengah-login-tutorial" >  
		
	<?php renvoie wp_login_form( 
		déployer( 
			'écho' => faux ,
			'label_username' => __( 'Votre nom d'utilisateur ' ),
			'label_password' => __( 'Votre mot de passe' ),
			'label_remember' => __( 'Se souvenir de moi' )
			        )
	); ?> 
		
            </div>
  <?php 
   }

Si vous vérifiez attentivement le code, vous remarquerez que nous avons utilisé la fonction pour vérifier si l'utilisateur est connecté, comme je l'ai expliqué dans le post sur la façon de vérifier si l'utilisateur est connecté à WordPress .

Si l'utilisateur n'est pas connecté, nous utilisons la fonction wp_login_form() pour afficher le formulaire de connexion. Si l'utilisateur est connecté, nous affichons conditionnellement le message de bienvenue sur cette page au lieu d'afficher le formulaire de connexion.

Fonction WP wp_login_form()

Le wp_login_form () est une fonction WordPress qui fournit aux développeurs de thèmes un moyen d'afficher le formulaire WordPress n'importe où. Cette fonction peut être généralement exprimée comme suit :

 wp_login_form( tableau $args = tableau() )

Les $args peuvent être un tableau d'options qui contrôlent l'affichage du formulaire.

Voici les arguments que vous pouvez utiliser dans le tableau pour modifier la façon dont le formulaire est affiché.

Par exemple, vous pouvez définir le tableau d'arguments et le transmettre à cette fonction comme suit :

 <?php 

wp_login_form( 

	 déployer(
			'écho' => vrai,
			// La valeur 'redirect' par défaut ramène l'utilisateur à l'URI de la requête.
			'redirect' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
			'form_id' => 'loginform',
			'label_username' => __( 'Votre nom d'utilisateur' ),
			'label_password' => __( 'Votre mot de passe' ),
			'label_remember' => __( 'Se souvenir de moi' ),
			'label_log_in' => __( 'Connexion' ),
			'id_username' => 'user_login',
			'id_password' => 'user_pass',
			'id_remember' => 'se souvenir de moi',
			'id_submit' => 'wp-submit',
			'se souvenir' => vrai,
			'value_username' => '',
			// Définissez 'value_remember' sur true pour que la case à cocher "Se souvenir de moi" soit cochée par défaut.
			'value_remember' => faux,
		);
		
); ?>

Le formulaire sera affiché avec les nouvelles étiquettes que vous avez ajoutées au tableau, par opposition aux étiquettes de formulaire de connexion WordPress par défaut. Dans le code ci-dessus, j'ai changé le nom d'utilisateur en votre nom d'utilisateur et le mot de passe en votre mot de passe.

Après avoir créé le shortcode et la fonction de rappel, nous devons l'initialiser afin que nous puissions maintenant utiliser le shortcode n'importe où sur la publication ou la page WordPress pour ajouter le formulaire de connexion personnalisé.

Voici le code qui initialisera le shortcode du formulaire de connexion :

 // Etape 3 : Initialiser la fonction shortcode

add_action( 'init', 'njengah_add_login_shortcode' );

Extrait de code complet pour créer un shortcode de formulaire de connexion dans WordPress

Nous pouvons maintenant rassembler tous ces extraits de code en un seul extrait de code et ajouter le code au functions.php du thème WordPress actif, puis afficher le formulaire de connexion WordPress en utilisant le shortcode – [njengah-login-form].

Voici l'extrait de code complet que vous devez ajouter au fichier functions.php pour ajouter le shortcode du formulaire de connexion WordPress :

 /**
 * Créer un formulaire de connexion WordPress personnalisé sans plugin [Formulaire de connexion WordPress Shortcode] 
 * @auteur Joe Njengah 
 * @essentiel - https://gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 */ 


// Étape 1 : créer un code court
function njengah_add_login_shortcode() {
	add_shortcode( 'jay-login-form', 'njengah_login_form_shortcode' );
}

//Étape 2 : Rappel du shortcode
function njengah_login_form_shortcode() {
	
	si (is_user_logged_in())
		
		retour '<p>Bienvenue. Vous êtes connecté !</p>'; ?> 
		
		<div class ="njengah-login-tutorial" >  
		
			<?php renvoie wp_login_form( 
							déployer( 
								'écho' => faux ,
								'label_username' => __( 'Votre nom d'utilisateur ' ),
								'label_password' => __( 'Votre mot de passe' ),
								'label_remember' => __( 'Se souvenir de moi' )
			              )
			); ?> 
		
		</div>
  <?php 
   }

// Etape 3 : Initialiser la fonction shortcode
add_action( 'init', 'njengah_add_login_shortcode' );

//Étape 4 : Utilisez le shortcode [njengah-login-form] pour intégrer le formulaire de connexion sur une page ou une publication 

Lorsque vous ajoutez ce code au functions.php, vous devez créer une page de connexion et ajouter le shortcode [njengah-login-form] pour publier le formulaire de connexion. Le formulaire de connexion devrait apparaître comme indiqué sur l'image ci-dessous :

Style de formulaire de connexion WordPress

J'ai ajouté les styles suivants pour rendre le formulaire de connexion attrayant et prendre le design du thème que j'utilise :

 .njengah-login-tutoriel {
    arrière-plan : #6379a4 ;
    rembourrage : 20px ;
    largeur max : 70 % ;
    marge : 0 automatique ;
    couleur : #fff ;
}

.étiquette de mot de passe de connexion {
    marge droite : 120 px ;
}

.nom d'utilisateur connexion {
    rembourrage en haut : 30 px ;
}

Créer un modèle de page personnalisé de formulaire de connexion

Une autre façon de créer une page de connexion dans WordPress sans plugin consiste à créer un modèle de page personnalisé et à utiliser la fonction wp_login_form() pour publier le formulaire de connexion sur cette page.

Voici le code permettant de créer la page de connexion personnalisée qui se trouve dans le modèle de page personnalisée :

 <?php
/**
 * Nom du modèle : page de connexion 
 */
 
 get_header(); 
 
 
 si (is_user_logged_in()){
	 
	     echo '<p>Bienvenue. Vous êtes connecté !</p>'; 
		 
 }autre{ 
	 
	 wp_login_form( 

		 déployer(
				'écho' => vrai,
				// La valeur 'redirect' par défaut ramène l'utilisateur à l'URI de la requête.
				'redirect' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
				'form_id' => 'loginform',
				'label_username' => __( 'Votre nom d'utilisateur' ),
				'label_password' => __( 'Votre mot de passe' ),
				'label_remember' => __( 'Se souvenir de moi' ),
				'label_log_in' => __( 'Connexion' ),
				'id_username' => 'user_login',
				'id_password' => 'user_pass',
				'id_remember' => 'se souvenir de moi',
				'id_submit' => 'wp-submit',
				'se souvenir' => vrai,
				'value_username' => '',
				// Définissez 'value_remember' sur true pour que la case à cocher "Se souvenir de moi" soit cochée par défaut.
				'value_remember' => faux,
			)
						
		);
    }			
	
get_footer();		
				

Enregistrez ce code dans un fichier et nommez-le login-page.php et assurez-vous qu'il est enregistré dans le dossier racine de votre thème WordPress.

Créez une nouvelle page et vous verrez que le modèle de connexion est maintenant disponible sur l'option de modèle d'attributs de page comme indiqué ci-dessous :

Choisissez le modèle et publiez la page. Lorsque vous vérifiez l'interface, vous devriez voir que le formulaire de connexion s'affiche pour les utilisateurs qui ne sont pas connectés et que le message de bienvenue s'affiche pour les utilisateurs qui sont connectés.

Conclusion

Dans cet article, j'ai décrit les deux façons d'ajouter le formulaire de connexion à la page WordPress. Vous pouvez utiliser une fonction de shortcode pour créer un shortcode de formulaire de connexion WordPress ou vous pouvez utiliser un modèle de page personnalisé pour créer une page de connexion dans WordPress sans plugin. J'espère que vous pouvez maintenant mettre en œuvre l'une de ces méthodes pour créer un formulaire de connexion frontal personnalisé sur votre site WordPress.

Articles similaires

1. Comment créer une pagination WordPress pour des types de publication personnalisés
2. 30 meilleurs plugins de sécurité WordPress pour protéger votre site
3. Comment créer une page dans WordPress par programmation
4. Comment accéder au tableau de bord d'administration WordPress ou se connecter à votre tableau de bord WordPress
5. Comment créer une page personnalisée de commande reçue WooCommerce
6. Comment connecter Printful à WooCommerce
7. Comment mettre à jour les extensions WooCommerce
8. Comment ajouter un champ de recherche en haut de la page du thème Storefront
9. 40+ meilleurs plugins de formulaire de contact WordPress pour un contact facile
10. Comment supprimer une catégorie non catégorisée dans WordPress WooCommerce
11. Comment supprimer la barre latérale de la page WordPress ou masquer la barre latérale WordPress
12. Comment créer une pagination de requête personnalisée dans WordPress avec un exemple
13. WooCommerce vs Magento : quelle est la meilleure plateforme de commerce électronique ?
14. Comment sauvegarder la base de données WooCommerce
15. Top 30+ des meilleurs plugins de formulaire WordPress »Meilleur plugin de formulaire WordPress
16. Comment créer des pages de connexion et d'inscription séparées dans WooCommerce
17. 35+ meilleur plugin de formulaire gratuit WordPress
18. Comment migrer de Shopify vers WooCommerce