Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
session

Cómo crear un formulario de log-in/log-out personalizado con WordPress

En la anterior entrada Cómo restringir el acceso al back-end de WordPress a usuarios no administradores vimos como limitar el acceso al panel de control a un tipo de usuario determinado.

La pregunta es fácil: Si no lo dejo acceder al back-end, ¿Cómo puede un usuario iniciar o cerrar sesión? A continuación veremos cómo crear un formulario de log-in/log-out personalizado.

Para ello utilizaremos la función wp_login_form() de WordPress. Ésta función nos pinta un formulario en nuestra plantilla, que podremos personalizar con una serie de argumentos que pasaremos. En nuestro ejemplo veremos cómo consultar si ya has iniciado sesión, en éste caso mostraremos un mensaje dándote la bienvenida junto con un botón de cerrar sesión, y en caso contrario te mostraremos el formulario para que puedas iniciar sesión.

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

En caso de que la función is_user_logged_in() devuelva FALSE llamaremos a la función que nos construye el formulario:

<?php if ( is_user_logged_in() ) { $current_user = wp_get_current_user(); echo '¡Bienvenid@ ' . $current_user->user_firstname . '!';?> <a href="<?php echo wp_logout_url(home_url()); ?>">Cerrar Sesión</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 que pinta es 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 podrás observar casi todos los elementos posen clases CSS para que puedas personalizar los estilos de todos los elementos del formulario y adaptarlo al diseño y look&feel de tu página web.

Puede que también te interese

Elimina las columnas de Yoast SEO en los listados de posts
Elimina las columnas de Yoast SEO en los listados de posts
Es bastante probable que hayas utilizado un plugin para trabajar el SEO de tu web, o la de alguno de tus clientes. De hecho mucha…
PHP tip, comprueba si una variable existe y tiene un valor concreto
PHP tip, comprueba si una variable existe y tiene un valor concreto
Hoy me animo a escribir de nuevo un artículo en el blog después de mucho tiempo. En esta ocasión es simplemente un truquillo o consejo para…
Cómo desactivar Emojis en WordPress
Cómo desactivar Emojis en WordPress
A partir de la versión 4.2 de WordPress se ha introducido una nueva característica: Emojis Icons. Permite el uso de los iconos Emoji en los…
WordCamp Barcelona 2018, gestión avanzada de assets en WordPress
WordCamp Barcelona 2018, gestión avanzada de assets en WordPress
He tenido el gran honor de abrir la WordCamp Barcelona 2018 en el Aula Magna del Edificio Histórico de la Universidad de Barcelona. Hoy en día,…