Menu Jquery-Lavalamp y Worpress
Bueno, hoy os explicare como añadir el famoso menu lavalamp de Jquery para que funcione perfectamente con Wordpress.
Lo primero que haremos sera descargar/guardar los siguientes archivos:
- Lavalamp.js
Archivo para crear el efecto del menu (este archivo tiene pequeñas explicaciones en ingles, pero podeis encontrar la version minificada aqui.)
- Jquery.js
Este archivo es la libreria Jquery minificada.
- Easing.js
Este archivo es un complemento para crear segun que efecto del plugin Lavalamp.
- Archivo CSS
Estilo CSS para el menu, AVISO!! Que esta preparado para mi menu, eso quiere decir que teneis que adaptarlo para vuestro diseño.
Aqui encontrareis todos los archivos que usa mi blog por si encontrais problemas con los enlaces anteriores
Menu Lavalamp (21.9 KB, 118 Descargas)
Ahora crearemos un par carpetas llamadas, css y js, lo haremos para separar nuestro diseño del los archivos tipo js y el css del menu aunque la carpeta css la podemos descartar si quereis usar el editor de temas del wordpress. Aclaro que las explicaciones son con las carpetas creadas, lo comento porque se tendria que modificar un par de cositas sino creais la carpeta css.
Siempre tenemos que hacer copias de los archivos que editaremos por si tenemos un error y poder arreglarlo.
Aunque mi consejo es que si os gusta experimentar o tocatear vuestro Wordpress lo tengais instalado localmente para pruebas y una vez acabadas y revisando que todo funciona bien subirlo al servidor donde tengamos nuestro blog/web.
Lo primero que hacemos una vez descargados los archivos y colocados en su sitio (es decir, dentro de la carpeta de nuestro theme) empezaremos editando el archivo header.php que normalmente es donde se encuentra el menu y donde siempre se colocan las llamadas a los archivos tipo js y css.
Ahora como comente un poco mas arriba añadimos las llamadas para los archivos de nuestro menu.
Este enlace lo colocamos justo despues de la llamada al archivo css del theme para que lo carge despues.
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.lavalamp.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/global.options.js"></script>
Estas llamadas las colocaremos antes de
El primero es la libreria jquery, la segunda es el plugin easing y la tercera es el plugin lavalamp. Como podeis ver existe otro archivo que personalmente lo tengo puesto ya que me gusta tener los codigos js en archivos en vez de escribirlos en el header.
Lo podeis descargar desde aqui o lo encontrareis en el zip de mas arriba.
Una vez realizados estos pasos empezaremos con la modificacion del menu para que funcione con los efectos del plugin lavalamp.
Basicamente copiamos el siguiente codigo por el que tengamos realizando los cambios oportunos si fuese el caso.
<li <?php if(is_home()) echo 'class="current_page_item selected"'; ?>><a href="<?php bloginfo('url'); ?>"><?php _e('home', 'ds'); ?></a></li>
<?php wp_list_pages("title_li=&depth=1");?>
</ul>
Con este codigo tendremos funcionando nuestro menu con el efecto del lavalamp y que muestre nuestras paginas, ademas de que el efecto se quede en la pagina que hayamos seleccionado.
Aclaro que podemos tener problemas de diseño asi que ir con cuidado.
Decir tambien que necesitas crear una imagen que sera el fondo de nuestro menu cuando tengamos el lavalamp funcionando.
Yo en mi caso tengo la siguiente:
Pero claro que debereis cambiarla por la vuestra.
Para los que entiendan un poco de ingles o quieran ver diferentes menus os dejo el siguiente enlace para que lo podais ver:
LavaLamp 1.3.2 - a jQuery series plugin
Fue el que use para orientarme a la hora de crear el mio.
Espero haberme explicado bien!!
23r9i0:
Juan Carlos:
Fernando:
luiz:
27 Feb, 2010
Hola Juan Carlos!!
Mirando por encima creo que el problema lo tienes en $ dentro de global.options.js
cambialo por jQuery
jQuery(document).ready(function(){
jQuery(function() {
jQuery('.lavaLamp').lavaLamp({
fx: 'backout',
speed: 700
})
});
});
Pero esta vez estoy hablando por hablar, mira que pasa y cuando tenga mas tiempo lo miro mas tranquilamente!!
Saludos!!