TuZonaWP utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies

Posteador
TuZonaWP
Administrador



Crear Widget para Inicio de Sesión Wordpress



Muchos tienen esa curiosidad de crear un widget de Login sin utilizar pluguins, sin embargo no es muy fácil conseguir dicha información ya que ami en los personal me costo investigar sobre el tema, lamentablemente tras una larga búsqueda no encontré la manera de crear el widget mencionado en el titulo, pero afortunadamente logre averiguar la forma de como crear un widget, de esta forma yo obtuve los conocimientos básicos para posteriormente crear el widget para iniciar sesión en el sidebar. Es por ello que adapte el formulario para iniciar sesión y así hacerlo un widget, ¿cuales son las ventajas?, si tu cuentas con un sitio web en el cual permites el registro de nuevos usuarios, sin duda alguna debes agregarlo para facilitar el acceso a el área admin. Pero si tu no permites el registro de usuario y solo tu eres el administrador no recomiendo que lo agregues. Ahora les cuento que tras una búsqueda muy tardada, solo encontré pluguins que cumplían con esta función, pero la mayoría como yo, desea no instalar pluguins. así que en esta ocasión les compartiré el código y les explicare paso a paso sobre como agregar el widget de login a nuestro theme.

El primer paso a realizar es crear un nuevo archivo llamado "login.php", ya creado el archivo que se le indico anteriormente sera momento de agregar el siguiente código:


<?php
function login($args, $instance){
extract($args);
$title = apply_filters( 'widget_title', $instance['title'] );
echo $before_widget;
if (!empty( $title ))
echo $before_title . $title . $after_title;
else
echo $before_title . '' . $after_title;
?>
<ul class="i-s">
<?php
if ( is_user_logged_in() )
{
global $current_user;
get_currentuserinfo();
?>
<?php echo get_avatar($current_user->ID, 90); ?>
<h4>Menu, Usuario</h4>
<strong><?php echo 'Hola ' . $current_user->user_login . "
";?></strong>
<li><a href="<?php bloginfo('url');?>/wp-admin/profile.php">Mi cuenta</a></li>
<li><a href="https://es.gravatar.com/" target="_blank">Cambia tu Avatar</a></li>
<li><a href="<?php echo esc_url( wp_logout_url( $_SERVER['REQUEST_URI'] ) ); ?>" title="Cerrar sesión">Desconectarse</a></li>
<?php } else { ?>
<form class="l-s input" name="loginform" action="<?php echo esc_url( wp_login_url( $_SERVER['REQUEST_URI'] ) ); ?>" method="post">
<input type="text" name="log" placeholder="Usuario" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="20" tabindex="10" />
<input type="password" name="pwd" placeholder="Contraseña" value="" size="20" tabindex="20" /><?php do_action('login_form'); ?>
<input type="submit" name="wp-submit" value="<?php _e('Entrar'); ?>" tabindex="100" />
<input name="rememberme" type="checkbox" checked="checked" value="forever" tabindex="90" /> Recordarme
<li><a href="<?php bloginfo('url'); ?>/wp-login.php?action=register">Registrarse</a></li>
<li><a href="<?php echo wp_lostpassword_url( get_bloginfo('url') ); ?>" title="Perdiste tu contraseña?">Perdiste tu contraseña?</a></li>
</form>
<?php } ?>
</ul>
<?php
echo $after_widget;
}
class login_tssf extends WP_Widget {
function login_tssf() {
parent::__construct( false, 'Login' , array( 'description' => 'Formulario de login perzonalizado'));
}
function widget( $args, $instance ) {
login($args, $instance);
}
function update( $new_instance, $old_instance ) {
return $new_instance;
}
function form( $instance ) {
$title = esc_attr($instance['title']);
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">Titulo: </label>
<input id="<?php echo $this->get_field_id('title'); ?>" class="widefat" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>
<?php
}
}
function Wg(){
register_widget( 'login_tssf' );
}
add_action( 'widgets_init', 'Wg' );
?>


PD, recuerde que el archivo creado anteriormente debe ser agregado en la carpeta de su theme, recuerde que usted podrá crear una carpeta dentro de su theme en la cual podrá agregar los archivos creados que cumplan diferentes funciones, pero yo en este caso simplemente lo agregare en la raíz de la carpeta del theme.

Ahora una vez realizado lo menciono anteriormente, a llegado el momento de llamar el archivo "login.php" para ello desde el archivo "functions.php" agregaremos el siguiente código:


include_once('login.php');


Listo esto a sido todo el proceso de agregación del código a nuestro theme, a si que ahora usted podrá entrar al área de administrador, una vez ingrese, diríjase en la parte que dice "Apariencia" - "Widgets" una vez dentro encontrara el widget llamado "Login" y de la manera mas fácil simplemente debe ser agregado a su sidebar.

Una vez agregado el widget usted simplemente deberá darle los estilos "CSS" así que a continuación le dejare el código CSS para que usted pueda darle su propio estilo de una manera muy fácil e innovadora a su formulario para inicio de sesión en el sidebar.

 
.i-s {
border: 1px solid #ddd;
background: #fff;
}

.wg .avatar {
margin-top: 4px;
}

.wg ul.i-s li {
list-style: none;
}

.wg .l-s a {
margin-left: -20px;
}


Espero sea de mucha ayuda, ya que personalmente me he tomado la molestia de crear este widget.

0 Comentarios


Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Ir al cielo