Cómo Agregar un Menú de Panel de Diapositivas en Temas de WordPress

Recientemente uno de nuestros usuarios nos preguntó cómo pueden reemplazar su menú de navegación con un menú de panel de diapositivas jQuery. El menú del panel de diapositivas se puede utilizar para mejorar enormemente la experiencia del usuario en sitios móviles. En este artículo le mostraremos cómo añadir un menú de panel de diapositivas en temas de WordPress.

Nota: Este es un tutorial de nivel intermedio y requiere conocimientos suficientes de HTML y CSS.

Sustitución del menú predeterminado por un menú de panel de diapositivas en WordPress

El objetivo aquí es mostrar un menú de panel de diapositivas a los usuarios en pantallas más pequeñas, manteniendo al mismo tiempo el menú predeterminado de nuestro tema para que los usuarios de ordenadores portátiles y de sobremesa puedan ver el menú completo. Antes de empezar, es importante saber que hay muchos temas diferentes de WordPress, y que tendrás que lidiar con un poco de CSS más adelante.

Lo primero que tiene que hacer es abrir un editor de texto plano en su ordenador, como el Bloc de notas, y crear un nuevo archivo. Copia y pega este código:

1234567891011121314(function($) {$('#toggle').toggle( function() { $('#popout').animate({ left: 0 }, `low', function() { $('#toggle').html(' '); }); }, function() { $('#popout').animate({ izquierda: -250 }, `lento', function() { $('#toggle').html(' '); }); })(jQuery);

Reemplace example.com con su propio nombre de dominio, y también reemplace su tema con su directorio temático actual. Guarde este archivo como slidepanel.js en su escritorio. Este código utiliza jQuery para alternar un menú de panel de diapositivas. También anima el efecto toggle.

Abra un cliente FTP como Filezilla y conéctese a su sitio web. A continuación, vaya a su directorio temático y si tiene una carpeta js, ábrala. Si su directorio temático no tiene una carpeta js, entonces necesita crear una y cargar el archivo slidepanel.js en la carpeta js.

El siguiente paso es diseñar o encontrar un icono de menú. El icono de menú más utilizado es el que tiene tres líneas. Puedes crear una usando Photoshop o encontrar una de las muchas imágenes existentes en google. Para este tutorial estamos usando un icono de menú de 27x23px. Una vez que haya creado o encontrado su icono de menú, renómbrelo a menu.png y cárguelo a la carpeta de imágenes en su directorio temático.

El siguiente paso es encolar el archivo javascript para el panel de diapositivas en WordPress. Básicamente, copie y pegue este código en el archivo functions.php de su tema.

1wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . /js/slidepanel.js', array('jquery'), '20131010', true );

Ahora que todo está configurado, necesita modificar el menú predeterminado de su tema. Normalmente, la mayoría de los temas muestran menús de navegación en el archivo header.php del tema. Abra el archivo header.php y encuentre la línea similar a ésta:

1 ` primario', 'menu_class'=> 'nav-menu') ); ?>

El objetivo aquí es envolver el menú de navegación de su tema con el código HTML para mostrar el menú de su panel de diapositivas en pantallas más pequeñas. Vamos a envolverlo en un y... Así:

1234 "toggle"> "popout"> ` primary', ` menu_class'=> ` nav-menu')); ?>

Reemplace example.com con su propio nombre de dominio y su tema con su directorio temático. Grabe las modificaciones.

El último paso es usar CSS para ocultar el icono del menú para los usuarios con pantallas más grandes y mostrarlo a los usuarios con pantallas más pequeñas. También necesitamos ajustar la posición del icono del menú y la apariencia del panel de diapositivas. Copie y pegue este CSS en la hoja de estilos de su tema.

123456789101112131414151617181920212223242526272829303132333435363738394041424344454647@media screenand (min-width: 769px) { #toggle {display:none;} }  @media screenand (max-width: 768px) { #popout {position: fixed;height: 100%;width: 250px;background: rgb(25, 25, 25, 25);background: rgba(25, 25, 25, 25, .9);color: white;top: 0px;izquierda: -250px;overflow:auto;}  #toggle {float: right;position: fixed;top: 60px;right: 45px;width: 28px;height: 24px; } .nav-menu li { border-bottom:1pxsolid#eee; padding:20px;width:100%;} .nav-menu li:hover { background:#CCC;} .nav-menu li a { color:#FFF;text-decoration:none;width:100%;}}}.

Recuerde que el menú de navegación de su tema puede estar usando diferentes clases CSS, y pueden entrar en conflicto con este estilo CSS. Sin embargo, puede solucionar estos problemas utilizando la herramienta Chrome Inspector para averiguar qué clases de css están en conflicto dentro de su hoja de estilo. Juega con el CSS para que se adapte a tu estilo y necesidades.

Esperamos que este tutorial le haya ayudado a añadir un menú de panel de diapositivas en WordPress usando jQuery. Para comentarios y preguntas, por favor deje un comentario a continuación y no olvide seguirnos en Google+