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

formulario de sesiones 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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Sobre Hugo Calixto

Hugo Calixto¡Hola! Soy Hugo Calixto, Desarrollador Web con amplios conocimientos en Wordpress y Woocommerce y Experto en SEO.

Qué hago: Desarrollo sitios personalizados (con o sin Wordpress), administro servidores y soy experto 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. Los campos obligatorios están marcados con *

*

cta 601 37 38 42

601 37 38 42

cta Escríbeme

Escríbeme

cta 601 37 38 42

601 37 38 42