Cómo agregar un menú del 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 deslizante jQuery. El menú del panel deslizante se puede usar para mejorar considerablemente la experiencia del usuario en sitios móviles. En este artículo, le mostraremos cómo agregar un menú del panel deslizante en los temas de WordPress.

Nota: este es un tutorial de nivel intermedio y requiere suficiente conocimiento de HTML y CSS.

Reemplazo del menú predeterminado con un menú del panel deslizante en WordPress

El objetivo aquí es mostrar un menú del panel deslizante a los usuarios en pantallas más pequeñas mientras mantiene el menú predeterminado de nuestro tema para que los usuarios en computadoras portátiles y de escritorio puedan ver el menú completo. Antes de comenzar, es importante saber que hay muchos temas diferentes para WordPress, y tendrá que lidiar con un poco de CSS más adelante.

Lo primero que debe hacer es abrir un editor de texto sin formato en su computadora, como el Bloc de notas, y crear un nuevo archivo. Copia y pega este codigo:

 (función ($) $ ('# toggle'). toggle (función () $ ('# popout'). animate (left: 0, 'slow', function () $ ('# toggle' ) .html (''); ); , function () $ ('# popout'). animate (left: -250, 'slow', function () $ ('# toggle'). html (''); ); ); ) (jQuery); 

Reemplazar example.com con su propio nombre de dominio, y también reemplazar tu tema con su directorio de tema real. Guarde este archivo como slidepanel.js en su escritorio. Este código utiliza jQuery para alternar un menú del panel deslizante. También anima el efecto de alternar..

Abra un cliente FTP como Filezilla y conéctese a su sitio web. A continuación, vaya a su directorio de temas y si tiene una carpeta js, ábrala. Si su directorio de temas 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 ícono de menú. El icono de menú más utilizado es el que tiene tres líneas. Puedes crear uno usando Photoshop o encontrar una de las muchas imágenes existentes de google. Para este tutorial estamos usando un icono de menú de 27x23px. Una vez que haya creado o encontrado su ícono de menú, cambie su nombre a menu.png y cárguelo en la carpeta de imágenes en su directorio de temas.

El siguiente paso es poner en cola el archivo javascript para el panel de diapositivas en WordPress. Básicamente solo copie y pegue este código en su tema funciones.php expediente.

 wp_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. Por lo general, la mayoría de los temas muestran menús de navegación en los temas header.php expediente. Abierto header.php Archivo y encontrar la línea similar a esta:

  'primary', '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ú del panel deslizante en pantallas más pequeñas. Vamos a envolverlo en un y . Me gusta esto:

    'primary', 'menu_class' => 'nav-menu')); ?>  

Reemplace example.com con su propio nombre de dominio y su tema con su directorio de temas. Guarda tus cambios.

El último paso es usar CSS para ocultar el ícono del menú para usuarios con pantallas más grandes y mostrarlo a usuarios con pantallas más pequeñas. También debemos ajustar la posición del icono del menú y la apariencia del panel deslizante. Copia y pega este CSS en la hoja de estilos de tu tema.

 Pantalla @media y (ancho mínimo: 769 px) #toggle mostrar: ninguno;  @media screen y (max-width: 768px) #popout position: fixed; altura: 100%; ancho: 250px; fondo: rgb (25, 25, 25); fondo: rgba (25, 25, 25, .9); color blanco; arriba: 0px; izquierda: -250px; desbordamiento: auto;  #toggle float: right; posición: fijo superior: 60px; derecha: 45px; ancho: 28px; altura: 24px;  .nav-menu li border-bottom: 1px solid #eee; relleno: 20px; ancho: 100%;  .nav-menu li: hover background: #CCC;  .nav-menu li a color: #FFF; texto-decoración: ninguno; ancho: 100%;  

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

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