---
title: "Cómo crear un panel de acceso al blog tipo slide en Wordpress"
description: "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 plu..."
url: https://verasoul.com/como-crear-un-panel-de-acceso-al-blog-tipo-slide-en-wordpress.html
date: 2022-12-25
modified: 2022-12-25
author: "VeraSoul"
image: https://verasoul.com/wp-content/uploads/image_thumb566.png
categories: ["Curiosidades", "Software", "Tutoriales", "WordPress"]
tags: ["amp nbsp", "Curiosidades", "div class", "div id", "etiqueta", "Howto", "JavaScript", "JQuery", "PHP", "Plugins", "script type", "Software", "Trucos", "Tutoriales"]
type: post
lang: es
---

# Cómo crear un panel de acceso al blog tipo slide en Wordpress

[![image](https://verasoul.com/wp-content/uploads/image_thumb566.png)](https://verasoul.com/wp-content/uploads/image556.png)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 ****

 

```
<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" />&nbsp;&nbsp;&nbsp;&nbsp;

<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](http://www.blogohblog.com/labs/sliding_login_panel.html).