Recientemente, uno de nuestros usuarios nos preguntó cómo podría reemplazar su menú de navegación con un menú de panel deslizante de jQuery. El menú del panel deslizante se puede utilizar para mejorar drásticamente la experiencia del usuario en los sitios móviles. En este artículo, le mostraremos cómo agregar un menú de panel deslizante en los temas de WordPress.
Nota: Este es un tutorial de nivel intermedio y requiere suficientes conocimientos de HTML y CSS.
Reemplazo del menú predeterminado con un menú de panel deslizante en WordPress
El objetivo aquí es mostrar un menú de panel deslizante a los usuarios en pantallas más pequeñas mientras se mantiene el menú predeterminado de nuestro tema para que los usuarios de computadoras portátiles y de escritorio puedan ver el menú completo. Antes de comenzar, es importante saber que existen muchos temas de WordPress diferentes, y tendrá que lidiar con 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. Copie y pegue este código: (function ($) {$ (‘# toggle’). Toggle (function () {$ (‘# popout’). Animate ({left: 0}, ‘slow’, function () { $ (‘# alternar’). html (‘
‘); }); }, función () {$ (‘# ventana emergente’). animar ({izquierda: -250}, ‘lento’, función () {$ (‘# alternar’). html (‘‘); }); }); }) (jQuery); Reemplace example.com con su propio nombre de dominio y también reemplace su tema con su directorio de temas actual. Guarde este archivo como slidepanel.js en su escritorio. Este código usa jQuery para cambiar a un menú de panel deslizante. También anima el efecto de balanceo. Abra un cliente FTP como Filezilla y conéctese a su sitio web. Luego vaya a su directorio de temas y si tiene una carpeta js ábrala. Si su directorio de temas no tiene una carpeta js, debe 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 de tres líneas. Puede crear una usando Photoshop o encontrar una de las muchas imágenes existentes de Google. Para este tutorial, usamos un ícono de menú de 27x23px. Una vez que haya creado o encontrado su ícono de menú, cámbiele el 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 deslizante en WordPress. Básicamente, copie y pegue este código en el archivo functions.php de su tema. wp_enqueue_script (‘wpb_slidepanel’, get_template_directory_uri (). ‘/js/slidepanel.js’, array (‘jquery’), ‘20131010’, verdadero); Ahora que todo está configurado, debes cambiar el menú predeterminado de tu tema. Por lo general, 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 busque una línea similar a esta:
‘primario’, ‘menu_class’ => ‘menú de navegación’)); ?> El objetivo aquí es envolver el menú de navegación de su tema con el código HTML para mostrar el menú del panel de diapositivas en pantallas más pequeñas. Lo envolveremos en un
Reemplace example.com con su propio nombre de dominio y su tema con su directorio de temas. Guarde sus cambios. El último paso es usar CSS para ocultar el ícono 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 deslizante. Copie y pegue este CSS en la hoja de estilo de su tema. @ pantalla multimedia y (ancho mínimo: 769px) {#toggle {display: none; }} @ Pantalla de medios y (ancho máximo: 768px) {#popout {posición: fija; altura: 100%; ancho: 250px; fondo: rgb (25, 25, 25); fondo: rgba (25, 25, 25, .9); El color blanco; alto: 0px; izquierda: -250px; desbordamiento: automático; } #toggle {float: right; posición: fija; alto: 60px; derecha: 45px; ancho: 28px; altura: 24px; } .nav-menu li {borde inferior: 1px sólido #eee; relleno: 20px; ancho: 100%; } .nav-menu li: hover {background: #CCC; } .nav-menu li a {color: #FFF; decoración de texto: ninguna; ancho: 100%; }} Tenga en cuenta que el menú de navegación de su tema puede usar 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 averiguar qué clases de CSS están en conflicto en su hoja de estilo. Juega con CSS para que coincida con tu estilo y tus necesidades. Esperamos que este tutorial te haya ayudado a agregar un menú de panel deslizable en WordPress usando jQuery. Para sus comentarios y preguntas, deje un comentario a continuación y no olvide seguirnos en Google+.
Originally posted 2021-02-25 00:12:30.
