Recientemente, uno de nuestros usuarios nos preguntó cómo pueden reemplazar su menú de navegación con un menú de panel deslizante de jQuery. El menú del panel deslizante se puede utilizar para mejorar en gran medida la experiencia del usuario en los sitios móviles. En este artículo, le mostraremos cómo agregar un menú de panel de diapositivas 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 hay muchos temas de WordPress diferentes, y tendrás 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:
(function($) { $('#toggle').toggle( function() { $('#popout').animate({ left: 0 }, 'slow', function() { $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />'); }); }, function() { $('#popout').animate({ left: -250 }, 'slow', function() { $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />'); }); } ); })(jQuery);
Reemplazar example.com
con su propio nombre de dominio, y también reemplace your-theme
con su directorio de temas actual. Guarde este archivo como slidepanel.js en su escritorio. Este código usa jQuery para alternar un menú de panel deslizante. También anima el efecto de alternancia.
Abra un cliente FTP como Filezilla y conéctese a su sitio web. A continuación, vaya al directorio de su tema 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 de tres líneas. Puede crear uno usando Photoshop o encontrar una de las muchas imágenes existentes de Google. Para este tutorial estamos usando un ícono de menú de 27x23px. Una vez que haya creado o encontrado su icono 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 de diapositivas en WordPress. Básicamente, simplemente copie y pegue este código en el functions.php
expediente.
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );
Ahora que todo está configurado, debes modificar el menú predeterminado de tu tema. Por lo general, la mayoría de los temas muestran menús de navegación en los header.php
expediente. Abierto header.php
file y busque la línea similar a esta:
<?php wp_nav_menu( array( 'theme_location' => '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. Lo vamos a envolver en un <div id="toggle">
y <div id="popout">
. Como esto:
<div id="toggle"><img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div> <div id="popout"> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> </div>
Reemplace example.com con su propio nombre de dominio y your-theme 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.
@media screen and (min-width: 769px) { #toggle { display:none; } } @media screen and (max-width: 768px) { #popout { position: fixed; height: 100%; width: 250px; background: rgb(25, 25, 25); background: rgba(25, 25, 25, .9); color: white; top: 0px; left: -250px; overflow:auto; } #toggle { float: right; position: fixed; top: 60px; right: 45px; width: 28px; height: 24px; } .nav-menu li { border-bottom:1px solid #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 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 Inspector de Chrome para averiguar 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 tus necesidades.
Esperamos que este tutorial le haya ayudado a agregar un menú de panel de diapositivas en WordPress usando jQuery. Para comentarios y preguntas, deje un comentario a continuación y no olvide seguirnos en Google+