{"id":939,"date":"2022-03-30T13:15:00","date_gmt":"2022-03-30T13:15:00","guid":{"rendered":"https:\/\/hugocalixto.es\/?p=939"},"modified":"2022-03-30T13:15:00","modified_gmt":"2022-03-30T13:15:00","slug":"crear-formulario-personalizado-wordpress","status":"publish","type":"post","link":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/blog\/crear-formulario-personalizado-wordpress\/","title":{"rendered":"C\u00f3mo crear un formulario personalizado de inicio y cierre de sesi\u00f3n en WordPress"},"content":{"rendered":"\n<p>Aprenda a crear un formulario de inicio y cierre de sesi\u00f3n personalizado en wordpress.<\/p>\n\n\n\n<p>Para ello utilizaremos la funci\u00f3n de WordPress wp_login_form(). Esta funci\u00f3n crea un formulario en nuestra <a href=\"https:\/\/hugocalixto.es\/servicio\/desarrollo-web-con-wordpress\/\">plantilla<\/a>, que podemos personalizar con una serie de argumentos que le pasaremos. En nuestro ejemplo, veremos c\u00f3mo comprobar si ya est\u00e1 conectado. En ese caso, mostraremos un mensaje de bienvenida junto con un bot\u00f3n de cierre de sesi\u00f3n; de lo contrario, mostraremos el formulario para que puedas iniciar sesi\u00f3n.<\/p>\n\n\n\n<p>Lo primero es saber si tienes una sesi\u00f3n para mostrar una cosa u otra, para ello usaremos la funci\u00f3n is_user_logged_in() que devuelve TRUE en caso de encontrar una sesi\u00f3n iniciada. En ese caso tendremos acceso a la informaci\u00f3n del usuario y podremos mostrar un mensaje personalizado. Adem\u00e1s, crearemos un bot\u00f3n de cierre de sesi\u00f3n con la funci\u00f3n wp_logout_url(), que devuelve una URL con los par\u00e1metros necesarios para cerrar la sesi\u00f3n. Esta funci\u00f3n acepta como par\u00e1metro una URL para redirigir despu\u00e9s del cierre de sesi\u00f3n.<\/p>\n\n\n\n<p>Si la funci\u00f3n is_user_logged_in() devuelve FALSE llamaremos a la funci\u00f3n que crea el formulario<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nif ( is_user_logged_in() ) {\n  $current_user = wp_get_current_user();\n  echo 'Bem-vindo(a) ' . $current_user-&gt;user_firstname . '!';?&gt;\n \n  &lt;a href=\"&lt;?php echo wp_logout_url(home_url()); ?&gt;\"&gt;Logout&lt;\/a&gt;\n&lt;?php\n} else {\n  wp_login_form( $args );\n}\n?&gt;<\/code><\/pre>\n\n\n\n<p>Veamos los argumentos que podemos pasar a la funci\u00f3n wp_login_form ():<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n$args = array(\n  'echo' =&gt; true,\n  'redirect' =&gt; ( is_ssl() ? 'https:\/\/' : 'http:\/\/' ) . $_SERVER&#091;'HTTP_HOST'] . $_SERVER&#091;'REQUEST_URI'],\n  'form_id' =&gt; 'loginform',\n  'label_username' =&gt; __( 'Username' ),\n  'label_password' =&gt; __( 'Password' ),\n  'label_remember' =&gt; __( 'Remember Me' ),\n  'label_log_in' =&gt; __( 'Log In' ),\n  'id_username' =&gt; 'user_login',\n  'id_password' =&gt; 'user_pass',\n  'id_remember' =&gt; 'rememberme',\n  'id_submit' =&gt; 'wp-submit',\n  'remember' =&gt; true,\n  'value_username' =&gt; '',\n  'value_remember' =&gt; false\n);\n?&gt;<\/code><\/pre>\n\n\n\n<p>Y el html ser\u00e1 el siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form name=\"loginform\" id=\"loginform\" action=\"http:\/\/www.mydomain.com\/wp-login.php\" method=\"post\"&gt;\n  &lt;p class=\"login-username\"&gt;\n    &lt;label for=\"user_login\"&gt;Username&lt;\/label&gt;\n    &lt;input type=\"text\" name=\"log\" id=\"user_login\" class=\"input\" value=\"\" size=\"20\" \/&gt;\n  &lt;\/p&gt;\n  &lt;p class=\"login-password\"&gt;\n    &lt;label for=\"user_pass\"&gt;Password&lt;\/label&gt;\n    &lt;input type=\"password\" name=\"pwd\" id=\"user_pass\" class=\"input\" value=\"\" size=\"20\" \/&gt;\n  &lt;\/p&gt;\n  &lt;p class=\"login-remember\"&gt;\n    &lt;label&gt;&lt;input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/&gt; Remember Me&lt;\/label&gt;\n  &lt;\/p&gt;\n  &lt;p class=\"login-submit\"&gt;\n    &lt;input type=\"submit\" name=\"wp-submit\" id=\"wp-submit\" class=\"button-primary\" value=\"Log In\" \/&gt;\n    &lt;input type=\"hidden\" name=\"redirect_to\" value=\"http:\/\/www.mydomain.com\/\" \/&gt;\n  &lt;\/p&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>Como puede ver, casi todos los elementos tienen clases CSS; por lo tanto, puede personalizar los estilos de todos los elementos del formulario y adaptarlo al dise\u00f1o y aspecto de su sitio web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprenda a crear un formulario de inicio y cierre de sesi\u00f3n personalizado en wordpress. Para ello utilizaremos la funci\u00f3n de WordPress wp_login_form(). Esta funci\u00f3n crea un formulario en nuestra plantilla, que podemos personalizar con una serie de argumentos que le pasaremos. En nuestro ejemplo, veremos c\u00f3mo comprobar si ya est\u00e1 conectado. En ese caso, mostraremos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":941,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-939","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articulos"],"_links":{"self":[{"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/posts\/939","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/comments?post=939"}],"version-history":[{"count":0,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/posts\/939\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/media\/941"}],"wp:attachment":[{"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/media?parent=939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/categories?post=939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hugocalixto.com\/demos\/huuguu-lite\/wp-json\/wp\/v2\/tags?post=939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}