Orbital Theme de Romuald, ¡No lo compres! Usa su menú flotante en WordPress

  • Orbital Theme de Romuald Fons

Desde qué Romuald Fons  presentó su tema para WordPress ‘Orbital Theme’, mucha es la polémica alrededor del mismo, con críticas en contra y a su favor.

En este artículo voy a explicar cómo podemos aprovechar la funcionalidad del menú flotante para la versión mobile, que muy acertadamente, han incluido en Orbital Theme y que es usado por la mayoría de aplicaciones para Android, acercando el botón de menú a la posición abajo ‘bottom’ y a la derecha ‘right’.

Aquí, la tabla de contenidos.

Un botón de menú tipo hamburguesa en mobile

Sabemos, que la revolución digital que vivimos actualmente es única en la Historia y para adaptarnos a ella, debemos tener en cuenta la tendencia creciente de los dispositivos móviles frente a la versión escritorio, teniendo en cuenta que España es uno de los países líderes en consumo de dispositivos como Smartphones, tabletas e incluso libros electrónicos (aunque en este caso este dato no resulta interesante).

Casi el 80% de la población entre 16 y 74 años se conecta de forma regular a Internet, tanto para mirar el correo electrónico, leer noticias y buscar información. La siguiente imagen muestra el crecimiento de los dispositivos móviles frente a escritorio desde enero del 2012.

Crecimiento del uso de terminales móviles frente a escritorio

Crecimiento del uso de terminales móviles frente a escritorio

Por este motivo, la gran G, hizo publico un comunicado en su blog el 04 de nov de 2016, indicando que sus algoritmos iban a tener en cuenta en primer lugar la indexación en dispositivos móviles. Nos centramos; respecto al menú flotante:

Ventajas

  • Acceso rápido al menú por la ubicación en los dispositivos móviles.
  • Aumento en los Rankings (SERPs) gracias a la usabilidad móvil.
  • Mobile First Indexing.
  • Adaptable y personalizado para cualquier plantilla.

Inconvenientes

  • En este caso, al no ser nativo, instalamos un plugin más a nuestra librería.
  • ¿Qué pasa con los zurdos?

Descarga e instala el Menu Orbital Gratis

La finalidad de este post, es mostrar un menú clásico y tradicional en la versión Escritorio y Tablet, en la versión mobile, ocultar el menu clásico y mostrar un menu tipo ‘hamburguesa’ en la parte inferior derecha de la pantalla. Con esto conseguiremos una mayor usabilidad en versión móvil y según Google, una mejora en los Rankings, ya que como publicaron, tiene en cuenta en primer lugar la versión móvil de un sitio web.

Este ejemplo está realizado con un Wordpress, versión 4.9.(lo que sea, la última). El tema que voy a usar como ejemplo es el Twenty Sixteen. Tengo que aclarar que esto lo puedes aplicar a cualquier plantilla pero te tocará investigar un poco el código CSS con la consola de tu navegador y alguna de las Plugins Seo para Chrome. Aquí el resultado en la versión escritorio y móvil.

Menú del theme Orbital en versión Desktop

Imagen del menú clásico en la versión Escritorio.

 

Como conseguir el menu del theme Orbital de Romuald Fons

A izquierda el menú sin desplegar, a derecha el menú desplegado.

Configura tu menu flotante del Orbital Theme de Romu

¡Vamos al lio! Lo primero que vamos a hacer, es instalar un plugin llamado ‘Tap Tap: A Super Customizable Wordpress Mobile Menu’. Este plugin potencia las opciones y personalización del menú. El precio en codecanyon es de 22$, pero entre tu y yo, si eres SEO hallarás 😉

Antes de configurar tu menú flotante

Lo primero que vamos a hacer, es instalar y activar el plugin, fácil ¿No? Después, para configurar las opciones del plugin, debemos ir a Apariencia -> Personalizar, donde habrá aparecido una nueva pestaña llamada: TapTap Plugin, aquí es donde debemos configurar nuestro plugin. Configura de tal forma que se adapta a tu plantilla. Yo en mi caso, he desactivado la opción de ‘logo’ y la opción de ‘search button’, lo único interesante es es la opción de ‘menu button’.
Aquí puedes configurar a tu gusto como quieres visualizar tu menú en la versión escritorio, cuando termines ‘Guardar o Publicar’.

Crear la estructura de tu menú

En el siguiente paso, nos dirigimos a Apariencia -> Menú. Aquí vamos a crear el menú, en mi caso, al ser un proyecto nuevo, me dispongo a Crear un Menú, que voy a llamar, ‘Main Menu’, personalizo mi estructura de menú, aquí lo importante es que en la parte de abajo, seleccionemos dos opciones. En ajustes de menú, seleccionar: Menú Primario y TapTap, by Bonfire. Con esto, estamos indicando que este menú y esta estructura, será el menu principal y el menú que se mostrará usando el plugin de TapTap.

Configuración avanzada

Modificar el CSS para mostrar y ocultar el menú

Bueno, ya tenemos creado nuestro menú para la fiesta, el siguiente paso, será optimizar el código CSS, para que muestre uno u otro dependiendo del tamaño de la pantalla donde estamos visualizando nuestra web.

Como indiqué, estoy usando el tema gratuito de WordPress ‘Twenty Sixteen’ que viene por defecto al hacer una instalación. Esta plantilla trae la opción de incluir un código CSS personalizado y además que sobre-escriba el CSS de la plantilla. Nos dirigimos a Apariencia -> Personalizar y hacemos clic en CSS adicional, donde incluiremos el siguiente código:

@media screen and (max-width: 64rem) {
.menu-toggle {
display: none;
}
.taptap-main-menu-button {
top: auto!important;
bottom: 30px!important;
right: 30px!important;
position: fixed;
padding: 0.4rem;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
background-color: #f8f8f88a;
}
}

Con este código, lo que estamos haciendo es que en pantallas que tengan un ancho de 64rem o menor, es decir, para móviles, oculte la clase: menu-toggle con display: none (que es la clase del menú del tema) y además, que la clase del menú de taptap, lo ponga a 30 pixeles desde el margen de abajo y a 30 pixeles del margen derecho, así el menú móvil, estará en la parte de abajo a la derecha, después puedes introducir el código CSS que desees para personalizar tu botón de menú. Lo siguiente será:

@media screen and (min-width: 64rem) {
.taptap-menu-button-wrapper {
display: none;
}
}

Incluimos a continuación este código, este código está indicando que en pantallas con un ancho mínimo de 64rem, es decir, tablet o escritorio, oculte el menú TapTap para móviles. Como en el apartado de estructura del menú, tenemos asignado nuestro ‘Main Menu’ como menú primario y menú TapTap (para móviles), esto hará que muestre en la versión Escritorio el menú convencional.

Conclusión y opiniones

Como ves es muy sencillo tener el menú flotante del tema de Romuald ‘Orbital Theme’ en tu plantilla para Wordpress, pero no es oro todo lo que reluce, esta solución no es nativa, lo único que hace es ocultar un menú, mostrar otro y viceversa así que debes tener en cuenta que estamos duplicando los ‘a href’; valora recalcular tu métrica de LinkJuice de Autoridad o PageRank para optimizar tu enlazado interno. Debes tener en cuenta que la ‘patata’ de Romu hace exactamente la misma función que esta solución, es más, en el orbital, lo que han echo es incluir, depurar y mejorar algunos plugins que hay en el mercado e incluirlos nativamente en la plantilla, que prácticamente es un twenty sixteen con pequeños retoques en el CSS.

Velociad del Orbital Framework Wordpress

La velocidad de carga (WPO) es importante, en este apartado parece que el Orbital lo gestiona bien, pero se puede conseguir unos buenos valores WPO con temas potentes y creativos, cuidando el diseño y aprovechando otras plantillas de Wordpress mucho más dinámicas, no es necesario sacrificar todo esto por mejorar la velocidad de carga. Te dejo una captura de la velocidad de carga de mi sitio web, es más, de la página que exactamente estás leyendo.

Pingdom Text WPO

¿Alguna duda o sugerencia? Cómo siempre, los comentarios son bienvenidos y si vas a usar esta solución de menú para tu tema, deja tu comentario.

One Comment

  1. Cdroid 21 marzo, 2018 at 9:49 pm - Reply

    Yo lo aplique en blogger, pero me gustaría que me recomendaras un tema gratis Super rápido.

Deja un SEO comentario