¿Te gustaría crear un menú receptivo en tu blog de WordPress?

Los usuarios móviles superan en número a los usuarios de escritorio en estos días. Agregar un menú móvil receptivo facilita a los usuarios navegar por su sitio web.

En este tutorial, le mostraremos cómo crear fácilmente un menú receptivo en WordPress.

Pero antes, si nunca has instalado WordPress, descubre Cuántos complementos instalar en WordPress. et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog 

Luego de vuelta a por qué estamos aquí.

Aquí será cuestión de profundizar mostrándote tanto el método con plugin para principiantes como el método de codificación para usuarios avanzados.

Primer método: crear un menú móvil con un complemento de WordPress

Este método es más fácil y recomendado para principiantes porque no requiere ninguna habilidad especial de codificación.

En este método, crearemos un menú (con un icono de hamburguesa) que se desliza en la pantalla del móvil.

Lo primero que debe hacer es instalar y activar el Complemento de menú receptivo de WordPress . Para más detalles, consulte nuestra guía sobre cómo instalar un complemento de WordPress .

Después de activar el complemento, el complemento agregará un nuevo elemento en el menú, titulado " Menú sensible ". Al hacer clic en él, accederá a la página de configuración del Plugin de WordPress.

Primero debe ingresar el tamaño desde el cual debe aparecer el menú móvil. El valor predeterminado es 800px, que debería funcionar para la mayoría de los sitios web.

Después de eso, debe seleccionar el menú que desea usar en el móvil.

La última opción en la pantalla le permite proporcionar una clase CSS para su menú. Esto permitirá que el complemento oculte su menú que no responde en pantallas pequeñas.

No olvides hacer clic en « Las opciones de actualización Para guardar su configuración.

También te sugerimos que descubras nuestro Complementos de 10 WordPress para crear menús en tu blog

Ahora puede visitar su sitio web y cambiar el tamaño de la pantalla de su navegador para ver el menú de respuesta en acción.

El complemento « Menú sensible »Ofrece muchas otras opciones que le permiten modificar el comportamiento y la apariencia de su menú de respuesta. Puede explorar estas opciones en la página de configuración del complemento y ajustarlas según sea necesario.

Método 2: Cómo agregar un menú móvil manualmente

Uno de los métodos más comunes que se utilizan para mostrar un menú en las pantallas de los dispositivos móviles es utilizar el apalancamiento.

Este método requiere que agregue código personalizado a sus archivos de WordPress.

En uno de nuestros tutoriales anteriores, te mostramos cómo crear un complemento de WordPress.

Primero debe abrir un editor de texto como el Bloc de notas y pegar este código.

(function () {nav var = document.getElementById ('site-navigation'), button, menu; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = nav. getElementsByTagName ('ul') [0]; if (! button) {return;} // Ocultar botón si falta el menú o está vacío si (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ('nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ('toggled-on')) {button.className = button.className.replace ('toggled-on', ''); menu.className = menu.className.replace ('toggled -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Ahora debe guardar este archivo con el nombre " navigation.js En tu escritorio

Luego debe abrir un cliente FTP para descargar este archivo a la ubicación "/ wp-content / themes / your-theme / js /" en su sitio web de WordPress.

Reemplace la expresión " Su tema » con el nombre de la carpeta de tu tema de WordPress Actual. Si su directorio de temas no tiene una carpeta js, entonces necesita crear una.

Después de cargar el archivo JavaScript, el siguiente paso es asegurarse de que su sitio web de WordPress cargue los archivos JavaScript. Deberá agregar el siguiente código al " functions.php " de su tema de WordPress.

Descubre algo mas ¿Qué puedes hacer con el archivo functions.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '/js/navigation.js', array (' jquery '), 20160909', true.);

Ahora necesitamos agregar el menú de navegación en nuestro tema de WordPress. Por lo general, el menú de navegación se agrega en el " header.php De tu tema de WordPress.

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

Suponemos que la ubicación del menú definida por su tema de WordPress se llama “ primario ". De lo contrario, use la ubicación definida por su tema de WordPress.

El último paso es agregar algo de CSS para que nuestro menú use las clases de CSS adecuadas para cambiar cuando se ve en dispositivos móviles.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

Ahora puede visitar su sitio web y cambiar el tamaño de la pantalla de su navegador para ver si su menú sensible cambia.

Descubre también algunos complementos premium de WordPress  

Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.

Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.

1. UberMenu

UberMenu es un Plugin de WordPress dedicado a crear un megamenú altamente personalizable, receptivo y accesible para el usuario. Es funcional tras su instalación, sin necesidad de ninguna configuración particular.

Es un complemento fácil de usar, pero lo suficientemente potente como para crear diseños de megamenús altamente personalizables y creativos.

Vea también nuestro 9 plugins de WordPress para crear cuadrículas de precios en un blog

Encontrarás entre otros: 3 plantillas de menú, diseño totalmente responsive, compatibilidad con dispositivos móviles (iPhone, iPad, Android), soporte táctil, etc ...

Descargar | Demo | alojamiento web

2. LMM

Liquida Mega Menu también llamado LMM es un Plugin de WordPress Diseñado para usuarios y desarrolladores. Tiene una interfaz sencilla e intuitiva, integrada en el panel de WP, que te permite crear y personalizar una cantidad ilimitada de mega menús, sin necesidad de conocimientos de programación.

Viene con docenas de funciones, ya sea para usuarios regulares o avanzados. Como funcionalidades, ofrece entre otras: integración automática y manual, soporte para multisitio, cuidando los temas infantiles, estilo completamente personalizable para menús, ubicaciones de menú personalizables, menú fijo, etc.

Descargar | Demo | alojamiento web

3. Menú 8Degree Fly

8Degree Fly Menu es un complemento premium de WordPress que le permite agregar un menú de lienzo en su sitio web, para darle un aspecto que resalte y fácilmente su información. Utiliza la función de menú predeterminada de WordPress para crear sus menús.

Podrá agregar elementos adicionales a los elementos de menú predeterminados, como iconos, lemas de menú, un encabezado de pseudogrupación y una descripción larga.

Lea también: 10 complementos de WordPress para optimizar barras laterales y encabezados adhesivos

También viene con un editor WYSIWYG para ayudarlo a comprender su descripción larga de una manera fácil de usar. Con este editor también puede usar códigos cortos.

Descargar | Demo | alojamiento web

Otros recursos recomendados

También lo invitamos a consultar los recursos a continuación para avanzar en el control y agarre de su sitio web y blog.

• Cómo cambiar el nombre de imágenes en un blog de WordPress
• Cómo crear un menú flotante en WordPress
• Los complementos de 8 WordPress para crear un megamenú en tu blog
• Algunos consejos para crear menús modernos para tu blog
• Complementos de 6 WordPress para administrar categorías y subcategorías en tu blog

Conclusión

Listo ! Eso es todo por este tutorial, espero que le permita crear un menú para usuarios móviles. no dude en comparte el consejo con tus amigos en tus redes sociales.

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Pero, mientras tanto, cuéntenos sobre su comentarios y sugerencias en la sección dedicada.

...