C√≥mo agregar un men√ļ de 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√ļ del panel de diapositivas jQuery. El men√ļ del panel deslizante 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.

Men√ļ del panel deslizante en el tema predeterminado de WordPress

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

Reemplazar el men√ļ predeterminado con un men√ļ del panel deslizante en WordPress

El objetivo aqu√≠ es mostrar un men√ļ de panel de diapositivas a los usuarios en pantallas m√°s peque√Īas mientras se 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 de 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 ($) {
$ ('# alternar'). alternar (
    función () {
        $ ('# popout'). animate ({left: 0}, 'slow', function () {
            $ ('# alternar'). html ('cerca');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('cerrar');
        });
    }
);
}) (jQuery);

Reemplace example.com con su propio nombre de dominio, y tambi√©n reemplace su tema con su directorio de temas real. Guarde este archivo como slidepanel.js en su escritorio. Este c√≥digo usa 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, ábralo. Si su directorio de temas no tiene una carpeta js, entonces necesita crear uno y cargar el archivo slidepanel.js en la carpeta js.

El siguiente paso es dise√Īar o encontrar un √≠cono de men√ļ. El √≠cono de men√ļ m√°s utilizado es el que tiene tres l√≠neas. Puede crear uno con 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 archivo functions.php de su tema.

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

Ahora que todo est√° configurado, debe modificar el men√ļ predeterminado de su 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 encuentre la l√≠nea similar a esta:

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

El objetivo aqu√≠ es ajustar 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. Vamos a envolverlo en un

y

. Me gusta esto:

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

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

El √ļltimo paso es usar CSS para ocultar el √≠cono de men√ļ para 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 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. Juegue con el CSS para que coincida con su estilo y necesidades.

Esperamos que este tutorial te 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 se olvide de seguirnos en Google+