Créer une page de connexion personnalisée WordPress sans plugin

Publié: 2022-09-01

Vous êtes-vous déjà ennuyé avec la page de connexion par défaut de WordPress ?

Vous êtes-vous déjà demandé s'il existait un moyen de rendre la page de connexion cohérente avec la conception de votre site Web ?

Si oui, vous êtes au bon endroit. Dans cet article, nous vous guiderons à travers différentes méthodes pour personnaliser votre page de connexion sans aucun plugin.

Qu'avons-nous inclus aujourd'hui ?

  • Page de connexion par défaut de WordPress
  • Pourquoi créer une page de connexion personnalisée ?
  • Personnaliser la page de connexion par défaut de WordPress
    • Personnaliser le logo de la page de connexion
    • Désactivation du sélecteur de langue de la page de connexion WordPress
  • Créer une nouvelle page de connexion personnalisée

Page de connexion par défaut de WordPress

Par défaut, vous pouvez accéder à la page de connexion de WordPress en ajoutant /login/, /admin/ ou wp-login.php à la fin de l'URL de votre site.

Vous obtenez cet écran de connexion à chaque fois que vous le faites, n'est-ce pas ?

PPWP Pro : page de connexion par défaut de WordPress

Comme vous pouvez le voir, la page de connexion WordPress contient les éléments suivants :

  1. Arrière-plan par défaut
  2. Le logo WordPress
  3. Champs de saisie (nom d'utilisateur et mot de passe)
  4. La case Se souvenir de moi
  5. Le bouton Soumettre
  6. Le lien Perdu votre mot de passe
  7. Retour au lien

Que se passe-t-il si vous souhaitez remplacer cette page générique par votre page personnalisée, disons, à des fins de personnalisation ?

Continuez à lire jusqu'à la fin de notre blog. Il y aura des surprises pour vous.

Pourquoi devriez-vous créer une page de connexion personnalisée WordPress ?

Avant tout, les pages de connexion personnalisées offrent une bien meilleure expérience utilisateur. Si vous dirigez une petite entreprise qui compte quelques utilisateurs pour se connecter à votre site, vous pouvez absolument utiliser la page de connexion par défaut de WordPress.

Cependant, imaginez que votre site soit une boutique en ligne, laisser les clients se connecter à votre site via une passerelle ennuyeuse et sans marque n'est pas une bonne décision.

La meilleure pratique consiste à rendre la page de connexion cohérente avec les styles de votre site Web.

Un autre avantage d'avoir une page de connexion personnalisée WordPress est d'améliorer la sécurité de votre site. En modifiant l'URL de connexion WordPress par défaut, les utilisateurs indésirables ne peuvent pas accéder facilement à votre page de connexion administrateur. Cela permet d'éviter les attaques indésirables sur votre site.

Passons maintenant aux sections suivantes, où nous vous guiderons à travers les étapes détaillées pour créer votre propre page de connexion.

Personnaliser la page de connexion par défaut de WordPress

Savez-vous que vous pouvez remplacer les logos et les liens de la page de connexion par défaut de WordPress par les vôtres ?

Personnaliser le logo de la page de connexion

Pour remplacer le logo WordPress, ajoutez simplement l'extrait de code suivant au fichier functions.php de votre thème (enfant).

 fonction ppwp_custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
image d'arrière-plan : URL ( https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png ) ;
        hauteur : 100px ;
        largeur : 300px ;
        taille d'arrière-plan : 300px 100px ;
        background-repeat : pas de répétition ;
        rembourrage en bas : 10 px ;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'ppwp_custom_login_logo' );

Cette action vous permet de remplacer uniquement le logo. Lorsque vous cliquez sur votre logo, vous êtes toujours redirigé vers la page WordPress.

Comment pouvez-vous rediriger les utilisateurs vers votre site ?

Juste un morceau de gâteau avec l'extrait de code suivant.

 fonction ppwp_custom_login_url() {
    retourner home_url();
}
add_filter( 'login_headerurl', 'ppwp_custom_login_url' );
fonction ppwp_login_logo_url_redirect() {
    retourner ' https://passwordprotectwp.com/ ';
}
add_filter( 'login_headertitle', 'ppwp_login_logo_url_redirect' );

N'oubliez pas de remplacer l'URL du site par le nom réel de votre site. Le logo personnalisé sur votre écran de connexion pointe maintenant vers la page d'accueil de votre site.

Désactivation du sélecteur de langue de la page de connexion WordPress

WordPress 5.9 inclut une fonctionnalité permettant aux utilisateurs de sélectionner des langues lors de la connexion à votre site.

C'est pratique lorsque vous gérez un site multilingue. Si votre site Web est disponible dans une seule langue, vous pouvez désactiver cette fonction pour simplifier votre formulaire de connexion.

Comment peux-tu faire ça?

Ajoutez simplement l'extrait de code suivant au fichier functions.php de votre thème (enfant) ou au plugin Code Snippets.

 add_filter( 'login_display_language_dropdown', '__return_false' );

Créer une nouvelle page de connexion personnalisée WordPress

Et si vous voulez faire plus que simplement changer les logos et les liens ?

WordPress vous permet-il de créer votre propre page de connexion et de remplacer celle par défaut de WordPress par la vôtre ?

Oui! Vous pouvez absolument!

Suivez simplement nos étapes ci-dessous. Veuillez noter que ce guide nécessite quelques connaissances en codage. Si vous n'êtes pas familier avec les codes, utilisez plutôt des plugins.

N'oubliez pas de sauvegarder votre site avant de commencer.

Étape 1 : créer un nouveau fichier de modèle

Pour ce faire, accédez à votre Apparence > Éditeur de fichiers thématiques.

Sous la section template-parts, ajoutez un nouveau fichier .php et nommez-le comme vous le souhaitez, par exemple custom-login-page.php.

Tout d'abord, ajoutez cette ligne à votre fichier de modèle personnalisé :

 <?php /* Nom du modèle : pages de connexion personnalisées */ ?>

Cette action fera de votre fichier PHP créé un modèle de page. En conséquence, vous verrez le nom du modèle lors de la modification des pages dans le backend.

Étape 2 : Personnalisez votre fichier de modèle créé

L'étape suivante consiste à ajouter des codes PHP pour créer un formulaire de connexion complet.

Ajouter un formulaire de connexion

 <?php
/**
* Nom du modèle : page de connexion personnalisée
*/
get_header();
si ( ! is_user_logged_in() ) {
    $args = tableau
        'redirect' => admin_url(), // redirige vers le tableau de bord de l'administrateur.
        'form_id' => 'custom_loginform',
        'label_username' => __( ' Nom d'utilisateur : ' ),
        'label_password' => __( ' Mot de passe : ' ),
        'label_remember' => __( ' Se souvenir de moi ' ),
        'label_log_in' => __( ' Me connecter ' ),
         'se souvenir' => vrai
    );
wp_login_form( $args );
}
get_footer();

Rediriger wp-login.php vers la page de connexion personnalisée

Vous avez créé avec succès une page de connexion personnalisée. Cependant, les utilisateurs peuvent toujours accéder directement à la page de connexion par défaut de WordPress en tapant wp-admin ou wp-login.php après les URL de votre site.

Pour éviter que cela ne se produise, vous devez rediriger les utilisateurs des URL de connexion par défaut de WordPress vers vos URL personnalisées.

Pour ce faire, ajoutez les codes personnalisés suivants au plugin functions.php ou Code Snippets de votre thème (enfant).

 fonction redirect_login_page() {
    $login_url = home_url( '/login' );
    $url = nom de base($_SERVER['REQUEST_URI']); // récupère l'URL demandée
    isset( $_REQUEST['redirect_to'] ) ? ( $url = "wp-login.php" ): 0; // si les utilisateurs envoient une requête à wp-admin
    if( $url == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect( $login_url );
        sortir;
    }
}
add_action('init','redirect_login_page');

Gestion des erreurs de connexion

Une fois que vous avez terminé de créer une page de connexion personnalisée, les utilisateurs qui saisissent les informations de connexion correctes accéderont au tableau de bord. Les demandes de connexion échouées seront redirigées vers celles par défaut de WordPress.

Pour gérer les tentatives de connexion infructueuses, ajoutez le code suivant au fichier functions.php de votre thème (enfant).

 fonction error_handler() {
    $login_page = home_url( '/login' );
    $erreurs globales ;
    $err_codes = $errors->get_error_codes(); // obtenir les codes d'erreur intégrés à WordPress
    $_SESSION["err_codes"] = $err_codes ;
    wp_redirect( $page_connexion ); // garder les utilisateurs sur la même page
    sortir;
}
add_filter( 'login_errors', 'error_handler');

Ensuite, ajoutez les codes suivants à custom_login_page.php.

 $err_codes = isset( $_SESSION["err_codes"] ) ? $_SESSION["err_codes"] : 0 ;
    si( $err_codes !== 0 ){
        echo display_error_message( $err_codes );
}
fonction display_error_message( $err_code ){
    // Nom d'utilisateur invalide.
    if ( in_array( 'invalid_username', $err_code ) ) {
        $error = '<strong>ERREUR</strong> : nom d'utilisateur invalide.';
    }
    // Mot de passe incorrect.
    if ( in_array( 'incorrect_password', $err_code ) ) {
        $error = '<strong>ERREUR</strong> : Le mot de passe que vous avez entré est incorrect.';
    }
    // Nom d'utilisateur vide.
    if ( in_array( 'empty_username', $err_code ) ) {
        $error = '<strong>ERREUR</strong> : Le champ du nom d'utilisateur est vide.';
    }
    // Mot de passe vide.
    if ( in_array( 'empty_password', $err_code ) ) {
        $error = '<strong>ERREUR</strong> : Le champ du mot de passe est vide.';
    }
    // Nom d'utilisateur vide et mot de passe vide.
    if( in_array( 'empty_username', $err_code ) && in_array( 'empty_password', $err_code )){
        $error = '<strong>ERREUR</strong> : Le nom d'utilisateur et le mot de passe sont vides.';
    }
retourne $error ;
}

Étape 3 : créer une nouvelle page et attribuer un modèle créé à une page personnalisée

Maintenant, accédez à la section Pages sous votre tableau de bord d'administration et créez une nouvelle page.

Dans la liste déroulante Modèle sous la section Attributs de page, sélectionnez votre modèle créé.

PPWP Pro : créer des pages de connexion personnalisées

Enregistrez la page.

Vous avez maintenant votre propre page de connexion.

Avez-vous réussi à créer votre page de connexion personnalisée ?

Nous vous avons guidé à travers les étapes détaillées pour personnaliser votre page de connexion administrateur.

Vous pouvez modifier le logo et l'URL associée dans le formulaire de connexion par défaut de WordPress.

Alternativement, vous pouvez créer votre propre page de connexion personnalisée WordPress en créant un nouveau modèle de page. Alors que la 2ème solution semble nécessiter des connaissances en codage au début, c'est assez facile avec notre guide étape par étape clair. Alors ne vous inquiétez pas du tout.

Avez-vous déjà réussi à créer votre page de connexion personnalisée ?

Avez-vous besoin de plus d'informations ?

Faites-nous savoir dans la section commentaire ci-dessous!