{"id":26955,"date":"2021-05-02T18:10:00","date_gmt":"2021-05-02T15:10:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26955"},"modified":"2021-10-17T17:41:20","modified_gmt":"2021-10-17T14:41:20","slug":"como-crear-un-formulario-de-inicio-de-sesion-personalizado-en-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-crear-un-formulario-de-inicio-de-sesion-personalizado-en-wordpress\/","title":{"rendered":"C\u00f3mo crear un formulario de inicio de sesi\u00f3n personalizado en WordPress"},"content":{"rendered":"<p>Recientemente, me encontr\u00e9 con una situaci\u00f3n en la que mi cliente quer\u00eda que creara un formulario de inicio de sesi\u00f3n personalizado en WordPress. El desarrollador de HTML ha creado un formulario de inicio de sesi\u00f3n llamativo y me lo ha entregado. En este art\u00edculo, le muestro c\u00f3mo utilic\u00e9 el dise\u00f1o exacto del formulario de inicio de sesi\u00f3n y cre\u00e9 un formulario de inicio de sesi\u00f3n personalizado en WordPress.<\/p>\n<h3>\u00bfPor qu\u00e9 necesita un formulario de inicio de sesi\u00f3n personalizado en WordPress?<\/h3>\n<p>WordPress proporcion\u00f3 un formulario integrado para iniciar sesi\u00f3n en su panel de control. Este formulario est\u00e1 disponible en el back-end solo con el dise\u00f1o predeterminado. No podemos mostrar este formulario predeterminado en la parte frontal, ya que este dise\u00f1o no coincide con la parte frontal.<\/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=\"C\u00f3mo crear un formulario de inicio de sesi\u00f3n personalizado en WordPress\" ><\/a><\/p>\n<h3>Uso de la funci\u00f3n wp_login_form<\/h3>\n<p>WordPress proporciona un m\u00e9todo <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_login_form\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_login_form()<\/a> que se puede utilizar para crear un formulario de inicio de sesi\u00f3n de front-end. Solo necesitamos pasar par\u00e1metros a la funci\u00f3n y mostrar\u00e1 el formulario HTML en el sitio. Simplemente llame a esta funci\u00f3n donde desee colocar un formulario de inicio de sesi\u00f3n.<\/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>Hemos utilizado el m\u00e9todo is_user_logged_in () para comprobar si el usuario ya ha iniciado sesi\u00f3n. Nuestro formulario de inicio de sesi\u00f3n se mostrar\u00e1 solo para los usuarios que no han iniciado sesi\u00f3n. Como se muestra en la matriz $ args, &#8216;form_id&#8217; =&gt; &#8216;loginform&#8217; agregar\u00e1 el atributo de ID HTML &#8216;loginform&#8217; a un formulario de inicio de sesi\u00f3n generado. De la misma manera, podemos pasar la identificaci\u00f3n al nombre de usuario, la contrase\u00f1a como &#8216;id_username&#8217; =&gt; &#8216;user_login&#8217; y &#8216;id_password&#8217; =&gt; &#8216;user_pass&#8217; respectivamente. A continuaci\u00f3n se muestra la captura de pantalla de un formulario generado.<\/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=\"C\u00f3mo crear un formulario de inicio de sesi\u00f3n personalizado en WordPress\" ><\/a><\/p>\n<p>Una vez que se genera su formulario de inicio de sesi\u00f3n, puede ajustar el CSS utilizando la identificaci\u00f3n de un formulario, campos de nombre de usuario, etc. En esta etapa, he aplicado CSS a este formulario seg\u00fan lo proporcionado por el desarrollador de HTML. No voy a mostrar un dise\u00f1o de formulario final. El alcance de este tutorial es simplemente mostrar c\u00f3mo se puede lograr el mismo resultado.<\/p>\n<p>Espero que comprenda c\u00f3mo crear un formulario de inicio de sesi\u00f3n personalizado en WordPress. Para cualquier pregunta o sugerencia, deje un comentario a continuaci\u00f3n.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mostrar el formulario de inicio de sesi\u00f3n personalizado en WordPress es una necesidad com\u00fan para los propietarios de sitios. En este art\u00edculo, le mostramos c\u00f3mo mostrar un formulario de inicio de sesi\u00f3n personalizado<\/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":[174,410,606],"tags":[849],"class_list":["post-26955","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chrome-2","category-diverso","category-uncategorized-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/26955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=26955"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/26955\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/21622"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=26955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=26955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=26955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}