Cómo crear un formulario personalizado de inicio y cierre de sesión en WordPress

Aprenda a crear un formulario de inicio y cierre de sesión personalizado en wordpress.

Para ello utilizaremos la función de WordPress wp_login_form(). Esta función crea un formulario en nuestra plantilla, que podemos personalizar con una serie de argumentos que le pasaremos. En nuestro ejemplo, veremos cómo comprobar si ya está conectado. En ese caso, mostraremos un mensaje de bienvenida junto con un botón de cierre de sesión; de lo contrario, mostraremos el formulario para que puedas iniciar sesión.

Lo primero es saber si tienes una sesión para mostrar una cosa u otra, para ello usaremos la función is_user_logged_in() que devuelve TRUE en caso de encontrar una sesión iniciada. En ese caso tendremos acceso a la información del usuario y podremos mostrar un mensaje personalizado. Además, crearemos un botón de cierre de sesión con la función wp_logout_url(), que devuelve una URL con los parámetros necesarios para cerrar la sesión. Esta función acepta como parámetro una URL para redirigir después del cierre de sesión.

Si la función is_user_logged_in() devuelve FALSE llamaremos a la función que crea el formulario

<?php
if ( is_user_logged_in() ) {
  $current_user = wp_get_current_user();
  echo 'Bem-vindo(a) ' . $current_user->user_firstname . '!';?>
 
  <a href="<?php echo wp_logout_url(home_url()); ?>">Logout</a>
<?php
} else {
  wp_login_form( $args );
}
?>

Veamos los argumentos que podemos pasar a la función wp_login_form ():

<?php
$args = array(
  'echo' => true,
  'redirect' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
  'form_id' => 'loginform',
  'label_username' => __( 'Username' ),
  'label_password' => __( 'Password' ),
  'label_remember' => __( 'Remember Me' ),
  'label_log_in' => __( 'Log In' ),
  'id_username' => 'user_login',
  'id_password' => 'user_pass',
  'id_remember' => 'rememberme',
  'id_submit' => 'wp-submit',
  'remember' => true,
  'value_username' => '',
  'value_remember' => false
);
?>

Y el html será el siguiente:

<form name="loginform" id="loginform" action="http://www.mydomain.com/wp-login.php" method="post">
  <p class="login-username">
    <label for="user_login">Username</label>
    <input type="text" name="log" id="user_login" class="input" value="" size="20" />
  </p>
  <p class="login-password">
    <label for="user_pass">Password</label>
    <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
  </p>
  <p class="login-remember">
    <label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label>
  </p>
  <p class="login-submit">
    <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" />
    <input type="hidden" name="redirect_to" value="http://www.mydomain.com/" />
  </p>
</form>

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ño y aspecto de su sitio web.

Sobre Hugo Calixto

Hugo Calixto¡Hola! Soy Hugo Calixto, Programador WEB y Profesional SEO desde 2017.

Qué hago: Desarrollo sitios personalizados (con o sin Wordpress), administro servidores y soy especialista en SEO (optimización de sitios para motores de búsqueda).

Y lo que más me gusta de mi trabajo es: "Ayudar a la gente" y "Probar de todo" y "usar lo que aprendo para poder hacer cosas nuevas".

¡Oh! Si necesitas ayuda, llama a Hugo Calixto.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

*