{"id":23516,"date":"2021-05-02T18:17:00","date_gmt":"2021-05-02T15:17:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=23516"},"modified":"2021-10-18T02:23:58","modified_gmt":"2021-10-17T23:23:58","slug":"comment-creer-un-formulaire-de-connexion-personnalise-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-creer-un-formulaire-de-connexion-personnalise-dans-wordpress\/","title":{"rendered":"Comment cr\u00e9er un formulaire de connexion personnalis\u00e9 dans WordPress"},"content":{"rendered":"<p>R\u00e9cemment, je suis tomb\u00e9 sur une situation o\u00f9 mon client voulait que je cr\u00e9e un formulaire de connexion personnalis\u00e9 dans WordPress. Le d\u00e9veloppeur HTML a cr\u00e9\u00e9 un formulaire de connexion accrocheur et me l&rsquo;a remis. Dans cet article, je vous montre comment j&rsquo;ai utilis\u00e9 la conception exacte du formulaire de connexion et cr\u00e9\u00e9 un formulaire de connexion personnalis\u00e9 dans WordPress.<\/p>\n<h3>Pourquoi avoir besoin d&rsquo;un formulaire de connexion personnalis\u00e9 dans WordPress<\/h3>\n<p>WordPress a fourni un formulaire int\u00e9gr\u00e9 pour vous connecter \u00e0 votre tableau de bord. Ce formulaire est disponible en back-end uniquement avec la conception par d\u00e9faut. Nous ne pouvons pas afficher ce formulaire par d\u00e9faut sur le front-end car cette conception ne correspond pas au front-end.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20809-60822b425a066.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20809-60822b425a066.png\" alt=\"Comment cr\u00e9er un formulaire de connexion personnalis\u00e9 dans WordPress\" ><\/a><\/p>\n<h3>Utilisation de la fonction wp_login_form<\/h3>\n<p>WordPress fournit une m\u00e9thode <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_login_form\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_login_form()<\/a> qui peut \u00eatre utilis\u00e9e pour cr\u00e9er un formulaire de connexion frontal. Nous avons juste besoin de passer des param\u00e8tres \u00e0 la fonction et elle affichera le formulaire HTML sur le site. Appelez simplement cette fonction partout o\u00f9 vous souhaitez placer un formulaire de connexion.<\/p>\n<pre><code>&lt;?php\nif (! is_user_logged_in()) {\n\u00a0\u00a0\u00a0\u00a0$args = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'echo'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'remember'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'redirect'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; (is_ssl()? 'https:\/\/': 'http:\/\/' ). $_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI'],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'form_id'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; 'loginform',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'id_username'\u00a0\u00a0\u00a0 =&gt; 'user_login',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'id_password'\u00a0\u00a0\u00a0 =&gt; 'user_pass',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'id_remember'\u00a0\u00a0\u00a0 =&gt; 'rememberme',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'id_submit'\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; 'wp-submit',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label_username' =&gt; __( 'Username' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label_password' =&gt; __( 'Password' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label_remember' =&gt; __( 'Remember Me' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'label_log_in'\u00a0\u00a0 =&gt; __( 'Log In' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'value_username' =&gt; '',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'value_remember' =&gt; false\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_login_form( $args );\n}\n?&gt;<\/code><\/pre>\n<p>Nous avons utilis\u00e9 la m\u00e9thode is_user_logged_in() pour v\u00e9rifier si l&rsquo;utilisateur est d\u00e9j\u00e0 connect\u00e9. Notre formulaire de connexion ne s&rsquo;affichera que pour les utilisateurs non connect\u00e9s. Comme indiqu\u00e9 dans le tableau $args, &lsquo;form_id&rsquo; =&gt; &lsquo;loginform&rsquo; ajoutera l&rsquo;attribut d&rsquo;identifiant HTML &lsquo;loginform&rsquo; \u00e0 un formulaire de connexion g\u00e9n\u00e9r\u00e9. De la m\u00eame mani\u00e8re, nous pouvons passer l&rsquo;identifiant au nom d&rsquo;utilisateur, le mot de passe comme &lsquo;id_username&rsquo; =&gt; &lsquo;user_login&rsquo; et &lsquo;id_password&rsquo; =&gt; &lsquo;user_pass&rsquo; respectivement. Ci-dessous se trouve la capture d&rsquo;\u00e9cran d&rsquo;un formulaire g\u00e9n\u00e9r\u00e9.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20809-60822b42bdbaa.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20809-60822b42bdbaa.png\" alt=\"Comment cr\u00e9er un formulaire de connexion personnalis\u00e9 dans WordPress\" ><\/a><\/p>\n<p>Une fois que votre formulaire de connexion est g\u00e9n\u00e9r\u00e9, vous pouvez ajuster le CSS en utilisant l&rsquo;identifiant d&rsquo;un formulaire, les champs du nom d&rsquo;utilisateur, etc. \u00c0 ce stade, j&rsquo;ai appliqu\u00e9 le CSS \u00e0 ce formulaire conform\u00e9ment aux instructions fournies par le d\u00e9veloppeur HTML. Je ne vais pas montrer une conception de forme finale. La port\u00e9e de ce tutoriel est juste de montrer comment on peut obtenir le m\u00eame r\u00e9sultat.<\/p>\n<p>J&rsquo;esp\u00e8re que vous comprenez comment cr\u00e9er un formulaire de connexion personnalis\u00e9 dans WordPress. Pour toute question ou suggestion, veuillez laisser un commentaire ci-dessous.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>L&rsquo;affichage d&rsquo;un formulaire de connexion personnalis\u00e9 dans WordPress est un besoin courant pour les propri\u00e9taires de sites. Dans cet article, nous vous montrons comment afficher un formulaire de connexion personnalis\u00e9<\/p>\n","protected":false},"author":1,"featured_media":21622,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[176,412,608],"tags":[844],"class_list":["post-23516","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chrome-4","category-divers","category-uncategorized-4","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/23516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=23516"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/23516\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/21622"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=23516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=23516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=23516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}