Uno de nuestros usuarios nos preguntó recientemente 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 deslizante en temas de WordPress.

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

Reemplazar el 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 diferentes de WordPress, y luego deberá ocuparse de algunos CSS.

Lo primero que debe hacer es abrir un editor de texto simple 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);

Sustituir 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 habilitar o deshabilitar 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. Luego, vaya al directorio de su tema 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 buscar un icono 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 el ícono del 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 agregar el archivo javascript para el panel deslizante en WordPress. Básicamente solo copie y pegue este código en sus temas functions.php Archivo.

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

Ahora que todo está configurado, debe cambiar el menú predeterminado de su tema. Por lo general, la mayoría de los temas muestran menús de navegación en temas header.php Archivo. Abrir header.php archivo 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 del tema con código HTML para mostrar el menú del panel deslizante en pantallas más pequeñas. Lo envolveremos 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 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 mostrárselo a los usuarios con pantallas más pequeñas. También necesitamos ajustar la posición del ícono 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 puede usar diferentes clases de CSS y puede 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 dentro de su hoja de estilo. Juega con CSS para adaptarlo a tu estilo y necesidades.

Esperamos que este tutorial lo 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 Google+