Crear y diseñar un panel de acceso para que los visitantes de nuestro blog tengan una forma de acceder al mismo con un nuevo estilo, parece no ser propio de muchos, y la mayoría solemos recurrir a plugins para wordpress que nos faciliten esta tarea.
El caso es que diseñar uno propio no conlleva demasiado tiempo si disponemos del código necesario para ello y los pasos necesarios a llevar a cabo.
Implementarlo un panel de acceso a nuestro blog, es siempre más eficiente y se pueden conseguir más adeptos, disponiendo de una forma de acceder más facil e intuitiva.
Para poder crear el nuestro propio solo debemos seguir los siguientes pasos:
- Primeramente debemos copiar el siguiente código en el fichero header.php y justo antes del cierre de la etiqueta < /head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#slide-panel").slideToggle("slow");
});
});
</script>El código anterior lo que hace es llamara a jQuery por medio de la API de Google.
Copiamos el siguiente código y lo pegamos justo después de la etiqueta <body>
<div id="slide-panel"><!--Comienzo del panel-->
<?php if ( ! is_user_logged_in() ){ ?>
<h2>Login</h2>
<div class="loginform">
<div class="formdetails">
<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
<label for="log">Usuario: </label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" />
<label for="pwd">Password: </label><input type="password" name="pwd" id="pwd" size="20" />
<input type="submit" name="submit" value="Login" class="button" />
<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label><input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
</form>
</div>
<div class="loginregister">
<a href="<?php echo get_option('home'); ?>/wp-register.php">Registrarse</a> |
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recuperar password</a>
</div>
</div><!--loginform ends-->
<?php } else { ?>
<div class="loginform">
<h2>Panel de Control</h2><ul>
<li><a href="<?php echo get_option('home'); ?>/wp-admin/">Escritorio</a></li> |
<li><a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Escribir Nueva Entrada</a></li> |
<li><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Nueva Página</a></li> |
<li><a href="<?php echo wp_logout_url( get_bloginfo('url') ); ?>" title="Logout">Salir</a></li></ul>
</div><!--loginform ends-->
<?php }?>
</div><!--SLIDE PANEL ENDS-->
<div class="slide"><a href="#" class="btn-slide"><?php if ( ! is_user_logged_in() ){ ?>Login<?php } else { ?>Salir<?php }?></a></div><!--LOGIN BUTTON TEXT-->El código anterior integrará el panel en la parte superior de nuestra plantilla.
- Ahora solo nos falta el código CSS para darle estilo a la misma, el cual debemos copiar y pegar dentro de nuestro fichero de estilos style.css
* {margin:0; padding:0; outline:0;}
#slide-panel{ background-color:#000;border-bottom-style:solid;border-bottom-width:2px;display:none;height:100px;margin:auto;}
.slide {width:950px; margin:auto;}
.btn-slide:link, .btn-slide:visited{color:#fff; float:right; display:block;font-size:14px; text-transform:uppercase; font-weight:bold;height:26px; padding:3px 0 3px 0;line-height:22px;text-align:center;text-decoration:none;width:100px; background-color:#000; font-family:Arial;}
.loginform {width:950px; margin:auto; color:#999; font-family:Arial, Helvetica, sans-serif;}
.formdetails {color:#FFF; font-size:12px;padding:5px;}
.formdetails input{border:none; padding:2px 5px 2px 5px; background-color:#EFEFEF;}
.loginregister {color:#999; padding:5px;}
.loginregister a:link, .loginregister a:visited {color:#FFF; font-size:11px; text-decoration:underline;}
.loginform h2 {padding:10px 10px 10px 0; font-size:18px; font-weight:normal; text-transform:uppercase;}
.loginform ul li {display:inline;}
.loginform ul li a:link, .loginform ul li a:visited {color:#FFF; font-size:12px; text-decoration:underline;}
Ahora tu panel debería funcionar, tal y como el de la demostración.
Buenas tardes,
Muchas gracias por el post, es muy interesante.
No sé mucho sobre el tema, con este panel de acceso al blog, para recuperar la contraseña o registrarse recibiríamos un email con dichas solicitudes, ¿es así?.
Mil gracias y un saludo!
José Antonio, mil disculpas, no había visto tu comentario entre tantos cambios que se han llevado a cabo en el blog. Contestando a tu pregunta, si, es así, se recibirá un e-mail para registrarse o recuperar la contraseña.
Un saludo