Comment créer un formulaire de connexion personnalisé dans WordPress

Récemment, je suis tombé sur une situation où mon client voulait que je crée un formulaire de connexion personnalisé dans WordPress. Le développeur HTML a créé un formulaire de connexion accrocheur et me l’a remis. Dans cet article, je vous montre comment j’ai utilisé la conception exacte du formulaire de connexion et créé un formulaire de connexion personnalisé dans WordPress.

Pourquoi avoir besoin d’un formulaire de connexion personnalisé dans WordPress

WordPress a fourni un formulaire intégré pour vous connecter à votre tableau de bord. Ce formulaire est disponible en back-end uniquement avec la conception par défaut. Nous ne pouvons pas afficher ce formulaire par défaut sur le front-end car cette conception ne correspond pas au front-end.

Utilisation de la fonction wp_login_form

WordPress fournit une méthode wp_login_form() qui peut être utilisée pour créer un formulaire de connexion frontal. Nous avons juste besoin de passer des paramètres à la fonction et elle affichera le formulaire HTML sur le site. Appelez simplement cette fonction partout où vous souhaitez placer un formulaire de connexion.

<?php
if (! is_user_logged_in()) {
    $args = array(
        'echo'           => true,
        'remember'       => true,
        'redirect'       => (is_ssl()? 'https://': 'http://' ). $_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI'],
        'form_id'        => 'loginform',
        'id_username'    => 'user_login',
        'id_password'    => 'user_pass',
        'id_remember'    => 'rememberme',
        'id_submit'      => 'wp-submit',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in'   => __( 'Log In' ),
        'value_username' => '',
        'value_remember' => false
    );
 
    wp_login_form( $args );
}
?>

Nous avons utilisé la méthode is_user_logged_in() pour vérifier si l’utilisateur est déjà connecté. Notre formulaire de connexion ne s’affichera que pour les utilisateurs non connectés. Comme indiqué dans le tableau $args, ‘form_id’ => ‘loginform’ ajoutera l’attribut d’identifiant HTML ‘loginform’ à un formulaire de connexion généré. De la même manière, nous pouvons passer l’identifiant au nom d’utilisateur, le mot de passe comme ‘id_username’ => ‘user_login’ et ‘id_password’ => ‘user_pass’ respectivement. Ci-dessous se trouve la capture d’écran d’un formulaire généré.

Une fois que votre formulaire de connexion est généré, vous pouvez ajuster le CSS en utilisant l’identifiant d’un formulaire, les champs du nom d’utilisateur, etc. À ce stade, j’ai appliqué le CSS à ce formulaire conformément aux instructions fournies par le développeur HTML. Je ne vais pas montrer une conception de forme finale. La portée de ce tutoriel est juste de montrer comment on peut obtenir le même résultat.

J’espère que vous comprenez comment créer un formulaire de connexion personnalisé dans WordPress. Pour toute question ou suggestion, veuillez laisser un commentaire ci-dessous.