Cómo agregar un menú de panel deslizante 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 de jQuery. El menú del panel de desplazamiento se puede utilizar para mejorar en gran medida la experiencia del usuario en 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 conocimientos suficientes 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 encargarte de algo de CSS más adelante.

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="https://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="https://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 el directorio de temas actual. Guarde este archivo como slidepanel.js en su escritorio. Este código usa jQuery para activar / desactivar un menú de panel deslizante. También anima el efecto de conmutación.

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 el 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 estamos usando un ícono de menú de 27x23px. Una vez que haya creado o encontrado el 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 agregar el archivo javascript para el panel deslizante en WordPress. Básicamente, solo copia y pega este código en tu tema. 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ú de temas predeterminado. Por lo general, la mayoría de los temas muestran menús de navegación en temas. header.php archivo. 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 del tema con el código HTML para mostrar el menú del panel deslizante en pantallas más pequeñas. Lo envolveremos en un archivo <div id="toggle"> es <div id="popout">. Me gusta esto:

<div id="toggle"><img src="https://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 su tema con su directorio de temas. Guarde sus cambios.

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 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 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 Google+

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *