Menu Jquery-Lavalamp y WordPress v0.2
Bueno despues de crear la entrada Menu Jquery-Lavalamp y WordPress y al crear otro diseño y sabiendo que utilizaria el mismo plugin de jquery decidi visitar al pagina del creador para saber si tenian una nueva version y en efecto nos a añadido la posibilidad de crear un menu con diferentes niveles, podeis ver un ejemplo aqui.
Lo mejor del todo es que no es necesario editar el archivo js del plugin para que funcione con wordpress.
Para facilitar todo el proceso os recomiendo hacer todas las modificaciones desde el wordpress instalado en local, sino sabeis como hacerlo cree una entrada de como hacerlo aqui.
Bueno basicamente nos descargaremos este zip que contiene lo siguiente:
-Lavalamp 1.3.3-minificado.
-Plugin easing para crear los efectos.
Os dejo el enlace para que podais decidir que efecto usareis.
-Y un pequeño archivo donde tenemos nuestra personalizacion del efecto.
LavaLamp.js (4,9 KiB, 14 Descargas)
Ahora lo mas importante es la libreria jquery que usaremos directamente desde su repositorio "hasta que averigue como usar la libreria que tiene wordpress que no acaba de funcionar".
Aqui os dejo el codigo para que podais colocarlo en el header.php de vuestro diseño.
Por cierto se debe colocar antes de
Aqui os dejo como seria al tener todos los codigos subidos.
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.lavalamp.1.3.3-min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/global.options.js"></script>
<?php wp_head(); ?>
Si os fijais los archivos js estan dentro de una carpeta llamada js creo que es mejor para separar los archivos, pero podeis colocarlos directamente dentro de la carpeta de vuestro diseño y en el archivo header.php eliminar la direccion .../js/... dejandolo de la siguiente manera:
Ahora que tenemos nuestro archivos y antes de subirlos haremos unas cositas.
-Crearemos nuestra imagen si lo creemos oportuno para el lavalamp o decidiremos el color de fondo, mas adelante acabare de explicar este detalle.
-Decidiremos el efecto que deseemos para el menu.
-Modificaremos el header.php o el archivo donde tengamos nuestro menu.
-Modificaremos el style.css de nuestro diseño para que funcione correctamente.
La imagen es un asunto personal asi que no entrare en detalles pero basicamente es una imagen por ejemplo con un tamaño de 200px por 32px lo importante es que sea lo suficientemente larga para que no se corte en enlaces largos y con una altura que nos quede a gusto con el diseño que tengamos, en la pagina de las demos del plugin osea aqui, podemos ver las diferentes formas de usarlas, si por el contrario solo quereis usar un color lo definiremos en el archivo CSS de nuestro diseño.
El efecto lo decidiremos desde la pagina de las demos.
