Panel Deslizante en Header con jQuery

Panel Deslizante en Header con jQuery

23. May, 2009 7 Comentarios

Buenas, hace unos días he leído un articulo en Web-Kreation donde nos enseña a crear un panel deslizante en WordPress, este panel por defecto, trae para registrarse, ingresar y el tablero de administración. Es muy practico, y hermoso.

Yo lo he estudiado por días para entender su diseño y su estructura, hasta que llegue a entenderlo y modificarlo para adaptarlo a mi theme, pero yo no lo voy a poner por que este panel se ubica en el header y me tapa una parte del logo, las paginas y los enlaces del feed, pero igual se los voy a dejar a ustedes ya traducido y editado.

He agregado en el panel una parte para poner iconos de redes sociales o los iconos que quieran. Mas adelante explico como hacer para agregar.

El panel cuando esta desplegado antes de ser editado era así:

01

Haz un Click para Ver la Imagen en su Tamaño Original

02

Haz un Click para Ver la Imagen en su Tamaño Original

El panel cuando no esta desplegado antes de ser editado era así:

03

Haz un Click para Ver la Imagen en su Tamaño Original

04

Haz un Click para Ver la Imagen en su Tamaño Original

Y una vez que yo lo he editado lo deje asi:

05

Haz un Click para Ver la Imagen en su Tamaño Original

06

Haz un Click para Ver la Imagen en su Tamaño Original

No se si se ve mejor, pero no quedaba con el theme que tengo, por ello lo edite y a la vez lo traduje.

Ahora, ya basta de hablar y empecemos con lo que es código, primero van a abrir el archivo header.php de su theme y van a buscar lo siguiente:

<?php wp_head(); ?>

Y después de eso vamos a copiar el siguiente código:

<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/pngfix/supersleight-min.js"></script>
<![endif]-->
<!-- jQuery - the core -->
<script src="<?php bloginfo('template_url'); ?>/includes/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- Sliding effect -->
<script src="<?php bloginfo('template_url'); ?>/includes/js/slide.js" type="text/javascript"></script>

Ahora vamos a buscar el siguiente código:

<body>

Después copiamos este código que vendría a ser el panel:

<!-- Panel -->
<div id="toppanel">
<?php
global $user_identity, $user_ID;
// If user is logged in or registered, show dashboard links in panel
if (is_user_logged_in()) {
?>
<div id="panel">
<div class="content clearfix">
<div class="left border">
<h1>Bienvenido</h1>
<h2>Desde Administración</h2>
Muchas Gracias por ser parte de este blog, al estar registrado tienes más beneficios.
<h2>Tablero</h2>
<ul>
<li style="font-size: 20px;"><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Ir al Tablero</a></li>
</ul>
<ul> <a href="http://www.flickr.com/groups/areaphotoshop"><img title="Nuestra Comunidad en Flickr" src="<?php bloginfo('stylesheet_directory'); ?>/images/flickr.png" alt="Enlace a Flickr" /></a>
<a href="http://twitter.com/areaphotoshop"><img title="Siguenos en Twitter" src="<?php bloginfo('stylesheet_directory'); ?>/images/twitter.png" alt="Enlace a Twitter" /></a>
<a href="http://feeds2.feedburner.com/AreaPhotoshop"><img title="Entradas Vía Email" src="<?php bloginfo('stylesheet_directory'); ?>/images/rss.png" alt="Enlace al Feed" /></a></ul>
</div>
<div class="left narrow">
<h2>Mi Cuenta</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Tablero</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Editar Mi Perfil</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-comments.php">Comentarios</a></li>
<li><a title="Cerrar sesión de este usuario" rel="nofollow" href="<?php echo wp_logout_url() ?>">Cerrar Sesión</a></li>
</ul>
<h2>Aspecto</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/themes.php">Temas</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/widgets.php">Widgets</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/theme-editor.php">Editor</a></li>
</ul>
</div>
<div class="left narrow">
<h2>Entradas</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Crear</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/edit.php">Editar</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-tags.php">Etiquetas</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/categories.php">Categorías</a></li>
</ul>
<h2>Plugins</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/plugins.php">Instalados</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/plugin-install.php">Añadir</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/plugin-editor.php">Editor</a></li>
</ul>
</div>
<div class="left narrow">
<h2>Páginas</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Crear</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-pages.php">Editar</a></li>
</ul>
<h2>Objetos</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/upload.php">Biblioteca</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/media-new.php">Añadir</a></li>
</ul>
<h2>Usuarios</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/users.php">Autores & Usuarios</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/user-new.php">Añadir</a></li>
</ul>
</div>
<div class="left narrow">
<h2>Opciones</h2>
<ul>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-general.php">General</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-writing.php">Escritura</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-reading.php">Lectura</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-discussion.php">Discusión</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-media.php">Objetos</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-privacy.php">Privacidad</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-permalink.php">Permalinks</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-misc.php">Misceláneas</a></li>
</ul>
</div>
</div>
</div>
<!-- /login -->

<!-- The tab on top -->
<div class="tab">
<ul class="login"><!-- Logout -->
<li><a title="Cerrar sesión de este usuario" rel="nofollow" href="<?php echo wp_logout_url() ?>">Cerrar Sesión</a></li>
<li class="sep">|</li>
<li id="toggle"> <a id="open" class="open" href="#">Mostrar Panel</a>
<a id="close" class="close" style="display: none;" href="#">Ocultar Panel</a></li>
</ul>
</div>

<?php
// Else if user is not logged in, show login and register forms
} else {
?>
<div id="panel">
<div class="content clearfix">
<div class="left border">
<h1>Bienvenido a Area Photoshop</h1>
<h2>Recursos para el Mejor Diseñador</h2>
Si aun no estas registrado en nuestro blog, puedes hacerlo ahora. Tendrás acceso a todo el blog.

Gracias!!
<p style="font-size: 20px;"><a title="Publicítate en Area Photoshop" href="http://areaphotoshop.com/anunciate/">Anúnciate</a></p>

</div>
<div class="left"><!-- Login Form -->

<form class="clearfix" action="<?php bloginfo('url') ?>/wp-login.php" method="post">
<h1>Iniciar Sesión</h1>
<label class="grey" for="log">Nombre de Usuario:</label>
<input id="log" class="field" name="log" size="23" type="text" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" />
<label class="grey" for="pwd">Contraseña:</label>
<input id="pwd" class="field" name="pwd" size="23" type="password" />
<label><input id="rememberme" checked="checked" name="rememberme" type="checkbox" value="forever" /> Recordarme</label>

<input class="bt_login" name="submit" type="submit" value="Iniciar" />
<input name="redirect_to" type="hidden" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
<a class="lost-pwd" href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">¿Olvidaste tu contraseña?</a>

</form></div>
<div class="left right"><!-- Register Form -->

<form id="registerform" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
<h1>¿Aun no eres miembro? Regístrate!!!</h1>
<label class="grey" for="user_login"></label>
<input id="user_login" class="field" name="user_login" size="20" type="text" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" tabindex="10" />
<label class="grey" for="user_email"></label>
<input id="user_email" class="field" name="user_email" size="25" type="text" value="<?php echo attribute_escape(stripslashes($user_email)); ?>" tabindex="20" />

<label id="reg_passmail"></label>
<input id="wp-submit" class="bt_register" name="wp-submit" type="submit" value="<?php _e('Registrarse'); ?>" />

</form>
<h1>Registros Cerrados</h1>
Lo siento, no te puedes registrar por que el admin ha cerrado el registro de nuevos usuarios!

Debes ser invitado por el administrador, para ello envíe un email a soporte@areaphotoshop.com.

<!-- Admin, delete text below later when you are done with configuring this panel -->
<p style="border-top:1px solid #e7e6e6;border-bottom:1px solid #e7e6e6;padding:10px 0;margin-top:10px;color: #565656"><em>Nota: si usted es el admin y quiere activar el registro de nuevos usuarios, en su tablero, tiene que ir a  <strong>Opciones</strong> > <strong>General</strong> y hacer un click en "Cualquiera puede registrarse".</em></p>

</div>
</div>
</div>
<!-- /login -->

<!-- The tab on top -->
<div class="tab">
<ul class="login"><!-- Login / Register -->
<li id="toggle"> <a id="open" class="open" href="#">Iniciar Sesión | Registrarse</a>
<a id="close" class="close" style="display: none;" href="#">Ocultar Panel</a></li>

</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
<?php } ?>
</div> <!--END panel -->

Listo, terminamos la parte del header, ahora abrimos el archivo style.php de nuestro theme y copiamos el siguiente código al final:

/* sliding panel */
#toppanel {
position: fixed;   /*Panel will overlap  content */
/*position: relative;*/   /*Panel will "push" the content down */
top: 0;
left: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 130%; /* font-size set to 130% for the default Kubrick Wordpress theme */
}

#panel {
width: 100%;
height: 280px;
color: #565656;
background: #f5f4f4;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #2a2a2a;
text-align: left;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: #9f9f9f;
text-align: left;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #9ca722;
}

#panel a:hover {
color: #abb725;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel ul {
margin: 0 0 5px 0;
padding: 0;
line-height: 1.6em;
list-style: none;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
margin-bottom: 25px;
padding: 0 15px;
border-right: 1px solid #e7e6e6;
min-height: 220px;
}

#panel .content .border {
border-left: 1px solid #e7e6e6;
}

#panel .content .narrow {
width:120px !important;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border-top: 1px #c5c3c3 solid;
border-left: 1px #c5c3c3 solid;
border-right: 1px #ededed solid;
border-bottom: 1px #ededed solid;
background: #ffffff;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: #676563;
height: 16px;
}

#panel .content input:focus.field {
background: #ffffff;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
color: #FFF;
background: transparent url(images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: #FFF;
background: transparent url(images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
color: #9ca722;
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

/* Panel Tab/button */
.tab {
background: url(images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
margin-top: -6px;
top: 0;
z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
background: url(images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin-top: -10px;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin-top: -10px;
display: block;
float: left;
}

.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
margin-top: -10px;
background: url(images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #9ca722;
}

.tab ul.login li a:hover {
color: #abb725;

}

.tab .sep {color:#f5f4f4}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 160px;
position: relative;
top: 11px;
}

.tab a.open {background: url(images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(images/bt_open.png) no-repeat left -20px;}
.tab a:hover.close {background: url(images/bt_close.png) no-repeat left -20px;}

Listo ya terminamos, ahora solo tienen que copiar la carpeta imagen e includes en la carpeta de su theme que les dejo al final de la entrada para que la descarguen.

Ahora como dije al comienzo que les iba a explicar como agregar iconos, hacemos lo siguiente, en el código que les he pasado buscan:

<ul>
<a href="http://www.flickr.com/groups/areaphotoshop"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flickr.png" alt="Enlace a Flickr" title="Nuestra Comunidad en Flickr"/></a>
<a href="http://twitter.com/areaphotoshop"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/twitter.png" alt="Enlace a Twitter" title="Siguenos en Twitter"/></a>
<a href="http://feeds2.feedburner.com/AreaPhotoshop"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/rss.png" alt="Enlace al Feed" title="Entradas Vía Email"/></a>
</ul>

Bueno si se dan cuenta:

<?php bloginfo('stylesheet_directory'); ?>

llama a el directorio de su theme, asi que no hay que modificar eso, pero si lo demás, asi:

				<a href="http://tudireccion.com"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icono.png" alt="Descripcion" title="Descripcion"/></a>

Si quieren su panel en el diseño por defecto entren aqui.
Pueden ver un demo, aquí.

Link | Panel Deslizante jQuery (60)
Enlace | Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+

Saludos!

Twitter Digg Delicious Stumbleupon Technorati Facebook Email
WordPress
, , ,

7 Comentarios a “Panel Deslizante en Header con jQuery”

  1. cristian Responder 28. May, 2009 a las 14:52

    No andan los links….
    Nose si ser´ña por el cambio del theme,pero no funcionan. Tambien me paso en los lins para ver el dem de tu primer theme para wordpress.
    Espero que lo soluciones y poder verlo.
    Saludos

  2. Miadeo Responder 07. Jun, 2009 a las 8:35

    Felicidades por tu blog Gonza, cuando quieras trabajo me avisas.

  3. alejandro Responder 02. Feb, 2010 a las 12:33

    hola capo, Cómo andás?…. mirá necesito alguna ayuda mas específica, me intereso esa onda del Panel, solo que no se como encontrar los archivos, ejemplo header.php… si me das una mano, o me decis donde puedo verlo con mas detalles, se te agradece.
    aBrazooooooo

Trackbacks/Pingbacks

  1. Bitacoras.com - 23. May, 2009

    Información Bitacoras.com…

    Valora en Bitacoras.com: No hay resumen disponible para esta anotación…

Deja un Comentario