Construire des pages de connexion et d'enregistrement personnalisées dans WordPress

Les plats clés

• Les pages de connexion et d'enregistrement par défaut WordPress peuvent être personnalisées à l'aide de plugins comme PropelePress pour mieux s'intégrer à la conception globale du site Web.
• Avec PropelePress, les pages de connexion, d'enregistrement et de réinitialisation de mot de passe personnalisées peuvent être créées sans écrire de code PHP, en utilisant des codes à la place.
• Après avoir créé les pages personnalisées, les pages de connexion, d'enregistrement et de réinitialisation de mot de passe par défaut par défaut peuvent être redirigées vers ces alternatives personnalisées.
• Le plugin ProfilePress permet également la création de widgets pour ces formulaires personnalisés, qui peuvent être facilement ajoutés à n'importe quelle zone ou barre widget sur le site Web.

WordPress a commencé sa vie en tant que moteur de blog, logiciel Web pour créer des blogs. Au fil des ans, il est devenu un système de gestion de contenu (CMS), même si certains développeurs pourraient être en désaccord sur le fait d'être considéré comme un CMS.

Il y a un manque de respect sain pour les pages de connexion et d'enregistrement par défaut WordPress, car ils vivent en dehors du site Web sans se conformer à la conception du site.

En ce qui concerne la création d'un site Web pour les clients, vous voudrez peut-être une page de connexion plus personnalisée, afin qu'elle s'intègre bien à la conception du site Web dans son ensemble. Il existe également de nombreux plugins qui étendent WordPress où les pages d'enregistrement et de connexion sont utilisées par les utilisateurs finaux, pas seulement les administrateurs de sites.

Deux développeurs ont publié plusieurs types de plugins pour personnaliser les formulaires de connexion et d'enregistrement par défaut dans WordPress tels que le personnalisateur de page de connexion personnalisé.

Le reproche sur la page de compte par défaut n'est pas principalement parce qu'il n'est pas joli, mais parce qu'il n'a pas de connexion au site Web Look and Feel.

Une recherche sur Google rapide sur la création de pages d'inscription et de connexion personnalisées pour WordPress révèle des tutoriels axés sur les développeurs avancés PHP / WordPress. C'est OK si vous êtes expérimenté, mais en tant que personne qui a écrit beaucoup de tutoriels de développeur, je sais qu'il y a aussi un public qui a besoin de quelque chose d'un peu plus simple.

Dans ce tutoriel, nous apprendrons comment créer des pages de connexion, d'enregistrement et de réinitialisation de mot de passe personnalisées avec un plugin que j'ai développé appelé ProfilePress, tous sans écrire une seule ligne de code PHP. Bien sûr, si vous êtes un développeur, vous êtes invités à consulter le code aussi.

La conception du formulaire ci-dessous est ce qui sera utilisé dans ce tutoriel.

Voir la connexion de Pen SP ProfilePress pour WordPress par Agbonghama Collins (@ Colzo4Sky) sur Codepen.

Voir l'enregistrement de PEN SP ProfilePress pour WordPress par Agbonghama Collins (@ Colzo4Sky) sur Codepen.

Voir la réinitialisation du mot de passe SP SP par Agbonghama Collins (@ colzo4sky) sur Codepen.

Si vous souhaitez passer de l'avance sur le tutoriel, vous pouvez afficher une démo des pages de connexion, d'enregistrement et de réinitialisation du mot de passe.

Présentation de ProfilePress

ProfilePress est un plugin WordPress qui fabrique des formulaires et un profil de connexion, de connexion, d'enregistrement, de réinitialisation de mot de passe et de modification) et de profil frontal bêtement simple sans avoir à coder aucun système de validation, d'authentification et d'autorisation PHP sur le côté serveur sur le côté serveur . C’est quelque chose que je voyais un besoin, alors je l’ai créé. Ce fut un projet intéressant sur lequel travailler, quelque chose que je partagerai davantage dans les futurs articles.

Pour un exemple typique, il peut transformer une simple forme de connexion HTML en une connexion WordPress fonctionnelle sans écrire de php.

ProfilePress n'est pas un type de plugin de glisser-déposer, il utilise plutôt les shortcodes comme système de modèles pour construire des formulaires de compte et des profils frontaux.

Les shortcodes doivent profiter de ce que le guidon et les brindilles sont respectivement à JavaScript et PHP. Vous connaissez peut-être déjà Shortcodes si vous avez utilisé des plugins tels que les formulaires de gravité, le formulaire de contact 7 ou la galerie NextGen. Ils sont très faciles à utiliser.

sans plus tarder, commençons par la création de formulaires de connexion, d'enregistrement et de mot de passe WordPress.

page de connexion personnalisée

Tout d'abord, installez et activez la version Lite du plugin ProFilePress disponible gratuitement dans WordPress Plugin Directory.

Cliquez sur le menu du formulaire de connexion comme indiqué dans l'image ci-dessous, puis le bouton Ajouter un nouveau pour commencer le processus.

Un formulaire vous sera présenté. Remplissez les champs comme suit.

Entrez un nom pour le formulaire de connexion dans le champ Nom de modèle.

Copiez le code du formulaire de connexion Codepen ci-dessus dans l'éditeur de conception de connexion TinyMCE, puis remplacez le texte, le mot de passe et soumettez les champs d'entrée par leurs équivalents de shortcode respectifs.

Voici le code HTML final pour le formulaire de connexion.

<span><span><span><div</span> class<span>="sp-pp"</span>></span>
</span>  <span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><h1</span>></span>SitePoint<span><span></h1</span>></span>
</span>    <span><span><span><h2</span>></span>Sign In<span><span></h2</span>></span>
</span>    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __first"</span>></span>
</span>      [login-username ]
      <span><span><span><label</span> for<span>="username"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Username"</span>></span>Username<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __second"</span>></span>
</span>      [login-password ]
      <span><span><span><label</span> for<span>="password"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Password"</span>></span>Password<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><div</span> class<span>="form-footer"</span>></span>
</span>       [login-submit  value="Log In"]
    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Remarque: Aucune balise de formulaire form> est autorisée. Ils sont automatiquement ajoutés par le plugin lors du rendu des formulaires.

Collez la connexion CSS dans la zone de texte de la feuille de style CSS.

Remarque: Les erreurs générées par les formulaires de connexion PropelePress sont enveloppées dans un div avec classe ProfilePress-Login-Status, donc la présence de la classe dans la feuille de style de connexion.

Pour voir un aperçu du formulaire de connexion, cliquez sur le bouton de conception de prévisualisation.

Enfin, appuyez sur le bouton Enregistrer les modifications pour créer le formulaire de connexion.

pour rendre le formulaire de connexion disponible sous forme de widget WordPress qui peut être traîné et déposé dans une zone / barre latérale widgettisée; cochez la case de faire une case de widget. Après enregistrer les modifications, accédez à la page d'administration du widget WordPress, faites glisser le widget de connexion ProFilePress vers un emplacement souhaité et sélectionnez le formulaire de connexion et enregistrez.

Revenez au catalogue de connexion, copiez le shortcode de connexion généré et collez-le sur la page que vous souhaitez faire votre page de connexion personnalisée.

Page d'enregistrement personnalisée

Construire un formulaire d'enregistrement personnalisé avec PropelePress suit à peu près les étapes en tant que formulaire de connexion, sauf pour le message de conception et de réussite du formulaire (texte affiché sur l'inscription réussie).

Cliquez sur le menu du formulaire d'inscription suivi du bouton Ajouter un nouveau.

Copiez le code de formulaire d'enregistrement du codePen ci-dessus à l'enregistrement de conception de l'éditeur TinyMCE.

Remplacez les composants du formulaire (nom d'utilisateur, mot de passe, e-mail, prénom, champs de nom et bouton de soumission) par leurs équivalents de shortcode ProfilePress respectifs.

Le formulaire de code pour l'enregistrement ressemblera enfin à ceci:

<span><span><span><div</span> class<span>="sp-pp"</span>></span>
</span>  <span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><h1</span>></span>SitePoint<span><span></h1</span>></span>
</span>    <span><span><span><h2</span>></span>Sign In<span><span></h2</span>></span>
</span>    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __first"</span>></span>
</span>      [login-username ]
      <span><span><span><label</span> for<span>="username"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Username"</span>></span>Username<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __second"</span>></span>
</span>      [login-password ]
      <span><span><span><label</span> for<span>="password"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Password"</span>></span>Password<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><div</span> class<span>="form-footer"</span>></span>
</span>       [login-submit  value="Log In"]
    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Collez le CSS d'enregistrement dans la zone de texte de la feuille de style CSS.

Remarque: Les erreurs générées par les formulaires d'enregistrement PropelePress sont enveloppées dans une div avec nom de classe ProfilePress-Reg-status, d'où la classe dans la feuille de style.

Entrez le code pour afficher un message personnalisé sur l'enregistrement de l'utilisateur réussi.

<span><span><span><div</span> class<span>="sp-pp"</span>></span>
</span>  <span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><h1</span>></span>SitePoint<span><span></h1</span>></span>
</span>    <span><span><span><h2</span>></span>Create a new account<span><span></h2</span>></span>
</span>    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __first"</span>></span>
</span>      [reg-username ]
      <span><span><span><label</span> for<span>="username"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Username"</span>></span>Username<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __second"</span>></span>
</span>      [reg-email ]
      <span><span><span><label</span> for<span>="email"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="E-mail Address"</span>></span>E-mail Address<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __third"</span>></span>
</span>      [reg-password ]
      <span><span><span><label</span> for<span>="password"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Password"</span>></span>Password<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __fourth"</span>></span>
</span>      [reg-first-name ]
      <span><span><span><label</span> for<span>="first-name"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="First Name"</span>></span>First Name<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __fourth"</span>></span>
</span>      [reg-last-name ]
      <span><span><span><label</span> for<span>="last-name"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Last Name"</span>></span>Last Name<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><div</span> class<span>="form-footer"</span>></span>
</span>      [reg-submit  value="Create Account"]
    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Il y a aussi la possibilité de rendre un formulaire d'enregistrement disponible en tant que widget, j'ai trouvé que cela peut être très utile.

Revenez au catalogue d'enregistrement, copiez le shortcode généré et collez-le sur la page que vous souhaitez faire de votre page d'inscription personnalisée.

page de réinitialisation de mot de passe personnalisée

Accédez à la page des paramètres de réinitialisation du mot de passe en cliquant sur le menu de réinitialisation du mot de passe.

Cliquez sur le bouton Ajouter un nouveau

Copiez le code du formulaire de réinitialisation du mot de passe Codepen ci-dessus avec le mot de passe de réinitialisation de la conception de l'éditeur TinyMCE.

Remplacez le champ d'utilisateur / champ de messagerie et le bouton Soumettre par leurs équivalents de raccourcis.

Le code final du formulaire de réinitialisation du mot de passe ressemblera à ceci:

<span><span><span><div</span> class<span>="profilepress-reg-status"</span>></span>Registration Successful.<span><span></div</span>></span></span>

Entrez le code ci-dessous en message sur la zone de texte réinitialisée par mot de passe réussie afin d'afficher un message personnalisé après que les utilisateurs aient réussi le formulaire pour réinitialiser leur mot de passe.

<span><span><span><div</span> class<span>="sp-pp"</span>></span>
</span>  <span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><h1</span>></span>SitePoint<span><span></h1</span>></span>
</span>    <span><span><span><h2</span>></span>Reset Password<span><span></h2</span>></span>
</span>    <span><span><span><fieldset</span> class<span>="form-fieldset ui-input __first"</span>></span>
</span>      [user-login ]
      <span><span><span><label</span> for<span>="userlogin"</span>></span>
</span>        <span><span><span><span</span> data-text<span>="Username / Email"</span>></span>Username / Email<span><span></span</span>></span>
</span>      <span><span><span></label</span>></span>
</span>    <span><span><span></fieldset</span>></span>
</span>
    <span><span><span><div</span> class<span>="form-footer"</span>></span>
</span>      [reset-submit  value="Reset"]
    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Enregistrez les modifications et revenez au catalogue.

Copiez le shortcode généré et collez-le sur la page que vous souhaitez créer votre page de mot de passe personnalisée.

Redirection des pages de compte WordPress par défaut vers les alternatives personnalisées

Enfin, tout ce que nous devons faire maintenant est de rediriger les pages de connexion, d'enregistrement et de réinitialisation de mot de passe par défaut par défaut vers leurs alternatives personnalisées créées avec ProfilePress, donc lorsque les utilisateurs visitent les URL par défaut suivantes ci-dessous, ils seront redirigées vers les pages personnalisées.

1. http://example.com/wp-login.php
2. http://example.com/wp-login.php?action=Register
3. http://example.com/wp-login.php?action=lostpassword

Pour y parvenir, cliquez sur le menu du plugin Paramètres.

Dans la section Paramètres globaux, sélectionnez et enregistrez les pages de connexion, d'enregistrement et de réinitialisation de mot de passe personnalisées.

Résumé

Dans ce didacticiel, nous avons appris à créer facilement une page de connexion, d'enregistrement et de réinitialisation de mot de passe personnalisée dans WordPress à l'aide d'un plugin que j'ai écrit appelé ProfilePress disponible dans le répertoire du plugin WordPress. Nous avons également appris à rediriger les pages de compte WordPress par défaut vers les pages de compte personnalisées.

Si vous avez des questions, des suggestions ou des contributions, veuillez me le faire savoir dans les commentaires.

Des questions fréquemment posées sur la construction de pages de connexion et d'enregistrement personnalisées dans WordPress

Comment puis-je personnaliser l'apparence de ma page de connexion WordPress?

La personnalisation de l'apparence de votre page de connexion WordPress peut être effectuée en utilisant un plugin ou un codage manuel. Des plugins comme le thème My Connexion, personnalisateur de page de connexion personnalisé et LoginPress fournissent des interfaces faciles à utiliser pour la personnalisation. Si vous préférez le codage, vous pouvez créer une page de connexion personnalisée en créant un nouveau fichier PHP dans votre répertoire de thème et en utilisant la fonction WP_Login_Form pour afficher le formulaire de connexion. Vous pouvez ensuite styliser le formulaire à l'aide de CSS.

Puis-je ajouter des champs supplémentaires à mon formulaire d'enregistrement personnalisé?

Oui, vous pouvez ajouter des champs supplémentaires à votre formulaire d'enregistrement personnalisé. Cela peut être fait en utilisant le crochet d'action «registre_form» dans WordPress. Vous pouvez ajouter une fonction à votre fichier functions.php qui ajoute les champs supplémentaires, puis utiliser les crochets 'Enregistrement_errors' et 'user_register' pour valider et enregistrer les données de champ.

Comment puis-je rediriger les utilisateurs après la connexion ou Enregistrement?

Vous pouvez rediriger les utilisateurs après la connexion ou l'enregistrement à l'aide du hook de filtre 'Login_redirect'. Ce crochet vous permet de spécifier une URL pour rediriger vers. Vous pouvez ajouter une fonction à votre fichier functions.php qui renvoie l'URL que vous souhaitez rediriger.

est-il possible de créer une page de connexion personnalisée sans plugin?

Oui, c'est possible de créer une page de connexion personnalisée sans plugin. Cela peut être fait en créant un nouveau fichier PHP dans votre répertoire de thème et en utilisant la fonction WP_login_form pour afficher le formulaire de connexion. Vous pouvez ensuite styliser le formulaire en utilisant CSS.

Comment puis-je ajouter une boîte à cocher Remember Me à mon formulaire de connexion personnalisé?

La fonction WP_Login_Form inclut un paramètre "Remember" que vous pouvez définir sur TRUE pour inclure une case Remember Me. Si vous utilisez un plugin, cochez les paramètres du plugin pour voir s'il y a une option pour inclure une case Remember Me. , vous pouvez utiliser un shortcode pour afficher votre formulaire de connexion personnalisé. La fonction WP_Login_Form renvoie une chaîne contenant le formulaire HTML, que vous pouvez utiliser dans une fonction Shortcode. Vous pouvez ensuite utiliser le raccourci dans vos messages ou pages pour afficher le formulaire.

Comment puis-je modifier les messages d'erreur sur mon formulaire de connexion personnalisé?

Vous pouvez modifier les messages d'erreur sur votre personnalité Formulaire de connexion en utilisant le crochet de filtre 'Login_errors'. Ce crochet vous permet de modifier les messages d'erreur avant d'être affichés.

Puis-je ajouter une connexion sociale à ma page de connexion personnalisée?

Oui, vous pouvez ajouter une connexion sociale à votre page de connexion personnalisée . Il existe plusieurs plugins disponibles qui fournissent des fonctionnalités de connexion sociale, telles que la connexion sociale NEXTEND et la connexion sociale WP. Si vous préférez le codage, vous pouvez utiliser la bibliothèque Hybridauth pour ajouter la connexion sociale.

Comment puis-je protéger ma page de connexion personnalisée contre les attaques de force brute?

Vous pouvez protéger votre page de connexion personnalisée contre Brute Forcez des attaques en utilisant un plugin comme Limit Login Tentatives ou Locin Lockdown. Ces plugins limitent le nombre de tentatives de connexion à partir d'une seule adresse IP.

Puis-je ajouter un captcha à mon formulaire de connexion personnalisé?

Oui, vous pouvez ajouter un captcha à votre formulaire de connexion personnalisé. Il existe plusieurs plugins disponibles qui fournissent des fonctionnalités CAPTCHA, telles que CAPTCHA vraiment simple et Google Captcha (RecaptCha). Si vous préférez le codage, vous pouvez utiliser l'API Google Recaptcha pour ajouter un captcha.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!