Buscando nuevas modificaciones para Wordpress me encontré con una estupenda guía acerca de crear un Shelf (slidebar). Puesto que la guía está en inglés y es bastante extensa voy a condensarla un poco omitiendo lo justo.

Bueno, os preguntaréis ¿de qué narices habla este? Para haceros una idea podéis visitar la web de Shaun Inman. El shelf no es mas que el menú que aparece en la parte superior de la pantalla al pulsar el botón “Navigate”. Otros ejemplos de esto son: Asymptomatic y Low End Theory

Primeros pasos:

Lo primero que hemos de hacer es preparar nuestra página para albergar el shelf. Puesto que el nuestro irá en la parte superior de la página modificaremos el header.php de nuestro theme que debe encontrarse en /wp-content/themes/nuestro_theme/ . Para prepararlo añadiremos el siguiente código dentro de nuestra etiqueta < body > … < / body > .
[code]

Aquí irá el contenido de nuestro shelf

[/code]
De momento lo dejamos así, más tarde volveremos con él. Todas las animaciones del shelf funcionan con Javascript, pero tranquilo, no vas a tener que aprender nada sobre este lenguaje para hacerlo funcionar ya que todo lo que necesitamos está hecho. Sólo te voy a enseñar a implementarlo adecuadamente…

Hay varias librerías de las que podemos tomar funciones para nuestro shelf, sin duda podría pegar el trozo de código que hace que el menú se abra y se cierre. Tú se lo añades a tu librería y listo… pero no. Vamos a ir un poco mas allá y descargaremos una librería con multitud de funciones que nos sirvan en un futuro, eso hará tu shelf mucho mas poderoso (todo depende de tu destreza).

Sin duda una de las mejores es Prototype, que en este tutorial usaremos acompañada de moo.fx en detrimento de la también genial Scriptaculous la cual no usa el autor simplemente porque moo.fx hace cosas en su web que esta no puede hacer. No obstante puedes probar Scriptaculous y comentar aquí tus resultados.

Ahora (suponiendo que ya las has descargado) hemos de incluirlas en nuestro header.php, el cual dejamos apartado antes. Para que el navegador reconozca de forma correcta las librerías vamos a añadirlas de la siguiente manera:
[code]


[/code]

Copia y pega dentro del < head > … < / head > de tu archivo, verás como hay llamadas similares dependiendo del theme que uses.

Hagamos que funcione:

Ya está la mitad del trabajo hecho, ahora sólo hay que decirle a nuestro script lo que debe hacer. Le vamos a decir al navegador que ejecute una función llamada iniciarShelf cuando la página cargue por primera vez, así que añadiremos la función a nuestra etiqueta:

[code]

[/code]
Copia y pega esto debajo de las llamadas anteriores < script > … < / script > ¿recuerdas?. La primera línea de la función iniciarshelf crea un nuevo efecto de moo.fx llamado shelffx para la ‘altura’ de nuestro shelf; básicamente contrae y expande el elemento cuando este es visible. Fijaos que usa el elemento con la ID “shelf” que es la de nuestro < div > en el header.php así que si habéis cambiado el nombre modificadlo.
La segunda línea es importante porque oculta el shelf cuando carga la página. Lo normal es usar la etiqueta de CSS [code lang="css"]display:none;[/code] para hacer estas cosas pero moo.fx (y otras librerías) no pueden determinar el tamaño real del shelf cuando está abierto. Si todo ha ido bien hasta el momento y has hecho alguna prueba, no deberias ver el shelf al cargar la página sino el “botón de menú”.

Ahora piensa en lo que quieres hacer. Cuando alguien pinche en tu handle (el botoncito) vamos a hacer que se muestre nuestro shelf por completo. Busca en tu header.php el trozo < div id="handle" > y sustituyelo por el siguiente:
[code]

boton de menu

[/code]

Y eso es todo, ahora sólo debes incluir dentro de < div id="shelf" > lo que quieras que aparezca en tu shelf.

Consejos:

Si quieres tenerlo todo mas organizado, o simplemente tu shelf contiene muchas cosas, puedes hacer lo siguiente: crea un archivo llamado shelf.php en la misma ruta que tu header.php y coloca dentro las dos etiquetas < div > que hemos creado antes.
En el archivo header.php puedes dejar las etiquetas < script > y añadir el siguiente código donde quieras que aparezca tu shelf.
[code lang="php"]

[/code]

El segundo consejo es mas bien una necesidad. Como ves todo funciona a la perfección pero el shelf es soso, muy soso, te recomiendo que uses tu hoja de estilos (normalmente será Style.css) para darle forma. En la segunda parte de esta guía intentaré explicar algunos trucos en este aspecto.