SummArg | Cursos y recursos para webmasters

29/12/2011

Crear un formulario de login en tu sidebar o en cualquier parte de tu theme

Existen plugins y varios snippets dando vueltas en la red para poder colocar un formulario de login en tu barra lateral o en cualquier parte de tu theme. Vamos a repasar algunos de ellos y les vamos a compartir nuestro código para insertar uno.

Snippet para crear un widget de login

Para crear un recuadro de login como el de la imagen, debemos insertar el siguiente código en el área seleccionada (puede ser una sidebar o en el footer, por mencionar algunos ejemplos).

<div class="widget-dark">
 <?php global $user_ID, $user_identity, $user_level ?>
 <h3>Area de miembros</h3>
 <?php if ( $user_ID ) : ?>
 <p>Identificado como <strong><?php echo $user_identity ?></strong>.</p>
 <ul>
 <li><a href="<?php bloginfo('url') ?>/wp-admin/">Panel de control</a></li>
 <?php if ( $user_level >= 1 ) : ?>
 <li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Escribir una entrada</a></li>
 <?php endif // $user_level >= 1 ?>
 <li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Perfil y opciones personales</a></li>
 <li><a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Cerrar sesi&oacute;n</a></li>
 </ul>
<?php elseif ( get_option('users_can_register') ) : ?>
 <form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
 <label for="log" class="loginform">Usuario <input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /></label><br />
 <label for="pwd" class="loginform">Contrase&ntilde;a <input type="password" name="pwd" id="pwd" size="22" /></label><br />
 <label for="rememberme" style="float:right;font-size:10px;"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" />Recordar</label>
 <input type="submit" name="submit" value="Ingresar" class="button" style="float:right;"/><br />
 <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
 </form>
<ul style="width:205px;display:block;float:left;">
 <li><a href="<?php bloginfo('url') ?>/wp-register.php">Registrar</a></li>
 <li><a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Recuperar contrase&ntilde;a</a></li>
 </ul>
<?php endif // get_option('users_can_register') ?>
 </div><!-- end of widget-dark -->

Y en el CSS agregamos:

.widget {width: 205px;padding: 5px;background: #054983;color: white;float:left;}
.widget a {color:#83bced;}
.widget-dark h3 {font-size: 12px;text-transform: uppercase;font-weight:bold;color:white;
}
.widget-dark ul {list-style-type:none;}
.widget-dark ul li {margin: 0px 0px 5px 10px;}

Le damos un poco de forma al formulario:

input {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; border: 1px solid #054983;-webkit-box-shadow: inset 0px 0px 1px 1px #ccc;-moz-box-shadow: inset 0px 0px 1px 1px #ccc;box-shadow: inset 0px 0px 1px 1px #ccc; }
input#log, input#pwd {width: 120px;height:17px;float:right;margin-left:5px;}
label.loginform {height: 17px;width: 205px;margin-bottom:5px;float:left;text-align:right;}

Y listo! A probar que todo funcione como es esperado y a mejorar los detalles del CSS que puedan surgir. Una alternativa de diseño diferente pero con un código similar la pueden encontrar aquí.

Widget Sidebar Login

Existe un widget para poder implementar el formulario de login en pocos clicks. Descargamos el plugin, lo activamos y lo añadimos como widget. AyudaWordPress ofrece una traducción en español del plugin.

Repositorio oficial | Versión en español

Formulario de login con un shortcode

Nuevamente mencionamos a AyudaWordPress quienes comparten un snippet para colocar en nuestro archivo functions.php y habilitar un shortcode para colocar en cualquier entrada o página un formulario de login.

//Shortcode para login donde quieras
function ayudawp_formulario_login_shortcode() {	if ( is_user_logged_in() )		return '';
	return wp_login_form( array( 'echo' =&gt; false ) );}
function ayudawp_add_shortcodes() {	add_shortcode( 'ayudawp_formulario_login', 'ayudawp_formulario_login_shortcode' );}
add_action( 'init', 'ayudawp_add_shortcodes' );

El shortcode a utilizar será el siguiente:

[ayudawp-formulario-login]

Login With Ajax

Formulario de login listo para insertar en cualquier área que acepte widgets con la característica de que permite todas las acciones (login, registro, logout, recuperar contraseña) sin recargar la página, todo utilizando AJAX. Dispone de shortcodes y template tags para colocarlo en donde se necesite.

Login with AJAX

Dejar un comentario