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]
[/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]
[/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.
Etiquetas: Freaking, Wordpress - K2
Como hacer un shelf para wordpress con K2 integrado…
Se explica paso a paso como realizar un menú desplegable para usar en tu blog. En concreto es para blogs basados en WordPress+K2 pero es tan fácil que se podría aplicar a cualquier otra plataforma con un par de sencillos cambios….
Interesante, interesante.
Si quieres poner código php encabezado por >php, sin que te separe el símbolo > del ‘php’, te recomiendo que instales el plugin CodeHighlight.
Lo he corregido para que funcione bien con WP 2.x. Puedes bajarte el parche aquí: http://www.boriel.com/2006/04/14/codehighlight-fix/
Vale, estupendo. Me he confundido. Donde dije “>php”, quería decir <php. Es decir, el parche permite código coloreado de php sin problemas.
Excelente tutorial, estaba buscando uno hace tiempo sobre este tema..GRACIAS!
Gracias por los comentarios, espero que os sirva de ayuda. En cuanto disponga de algo más de tiempo espero terminar la segunda parte del tutorial.
P.D: Probaré ese plugin, me hace mucha falta
Pues me parece bastante interesante este tuto por que si le veo potencial al shelf. Lastima que no todos somos coders y este es mi primer blog, me gustaria que me aclararas algo.
Primero, ¿en donde guardo los archivos .js de prototype y moo.fx, o sea, en que parte de mis directorios dentro de mi blog de wordpress tengo que poner esos dos archivos?
Hice todo lo que me dijeron pero al no saber en donde colocar esos archivos .js pues sospecho que no funciono bien el shelf, ni boton ni nada pude ver, solo me aparecia codigo bien raro encima de mi blog.
Segundo, no logro encontrar en mi archivo header.php la seccion , utilizo el tema kubrick que trae por default wordpress.
Fuera de todo esto la verdad esta muy claro y muy facil tu tuto, ojala y puedas ayudarme.
Saludos y gracias.
Iba a resolver tus dudas pero al visitar tu blog me he dado cuenta de que no sólo tienes hecho el shelf sino que es una autentica maravilla.
Asi es, me he perdido completamente entre tanto codigo pero lo he logrado al fin. Ahora me estoy dedicando a modificar un poco el shelf, pero como no se mucho o casi nada de PHP estoy a tientas. Por ejemplo, no quiero que el shelf ocupe todo el ancho de la pagina, solo quiero que sea del ancho del header (740px).
Pero bueno, espero lograrlo revisando el codigo un poco. Saludos y gracias
Hola, estupendo trabajo el tuyo, gracias por mostrarlo al mundo, queria saber exactamente donde es que pongo los .js ?. Lo preguntaba Fito antes pero no logro hacerlos arrancar
Izak: Los archivos javascript ( .js ) están en “../wp-content/themes/k2/js/” si usas el theme K2, si usas el theme Kubrick (default) deberás crear una carpeta llamada “js” y colocarlos dentro.
En realidad es lo mismo donde esten colocados los archivos, siempre que indiques su ruta al modificar el archivo header.php; es más sencillo de lo que parece a simple vista.
Fito: Es muy sencillo, sólo tienes que modificar tu código CSS añadiédole:
width:740px;
dentro de #shelf { … } obviamente.
Espero haber aclarado vuestras dudas, siento la tardanza en contestar.
[...] Inclasificados: Intenta – Refrescar automáticamente la página con Javascript slayeroffice – Cross Browser Gradients No click links kusor xdhtml – Introducción al Modelo de Eventos del DOM moo.fx – the next small thing The Idiot’s Guide to moo.fx jsScrolling Como hacer un shelf ( parte I ) at BlogFirst [...]
En el script de javascript creo que hay un error:
En la primera linea aparece
Event.observe(window, 'load', initShelf, false);pero la funcion en realidad se llama iniciarShelf().Creo que deberías arreglarlo por posibles comeduras de cabeza como la mia de ahora mismo que no funciona
Saludos y gracias por el mini-tutorial
Corregido. Gracias por el aviso.
ay manera de que el shelf no se carge desde el inicio junto con el resto de la pagina?
Me parece que no…
Hola chicos/as
Antes de todo quiero agradecer el manual sobre moo.fx ya que por desgracia dentro de la comunidad hispana no se encuentra casi nada de esto. Por otra parte tengo un problema:
Estoy haciendo un menu horizontal con dos botones como veis en mi blog y al pulsar sobre un boton aparece un contenido debajo. Luego lo vuelves a pulsar y desaparece. El problema está que cuando está abierto un contenido de un boton y le das a otro se solapan. ¿como se hace para que cuando des a uno se limpie el que ya habia?
This one makes sence “One’s first step in wisdom is to kuesstion everything – and one’s last is to come to terms with everything.”