Portada Wordpress Cómo crear un Sticky Menu o Menú Pegajoso en WordPress
Quizás lo hayas visto en alguna web, un menú que siempre queda a la vista aunque hagas scroll por la pantalla.
A esto se le conoce como Sticky Menu y si lo traduces significa Menú Pegajoso, por lo de estar siempre «pegado» en la pantalla.
Da igual que se trate de un menú lateral o superior, no se trata de un frame, se consigue realizando modificaciones en el código y CSS del sitio web, pero esto no está al alcance de todo el mundo.
Pero en WordPress todo o casi todo, se arregla con un plugin y en esta ocasión podemos usar un plugin llamado Sticky Menu (or Anything!) on Scroll para conseguirlo.
El plugin Sticky Menu nos facilita la inclusión de un menú pegajoso en WordPress sin la necesidad de tocar código ni CSS, al menos no en nuestro WordPress.
Si que se necesita conocer un poco la estructura de la web y la etiqueta del menú o elemento que queremos añadir, pero gracias a los navegadores web actuales y sus herramientas de desarrollador, podemos verlo fácilmente.
El plugin es gratuito y no tiene opciones PRO de pago, al menos de momento, así que puedes utilizarlo libremente en tu WordPress.
Puedes buscarlo desde WordPress en Plugins > Añadir Nuevo o descargarlo desde la web de WordPress.org haciendo click aquí.
Después de instalarlo y activarlo encontraremos un nuevo menú en Ajustes > Sticky Menu (or Anything!).
El las opciones del plugin tenemos 3 pestañas que son:
En la configuración básica podemos encontrar la opción Sticky Element: (required) la cual determina el menú que queremos sea pegajoso, pero es la parte más confusa para algunos usuarios.
Lo que nos pide el plugin es que pongamos la etiqueta (ID) del menú o elemento, pero no existe un nombre genérico y en cada WordPress se puede llamar de una forma distinta, así que tenemos que buscarla.
Para esto vamos a usar un navegador web y sus herramientas para desarrolladores, en esta ocasión Chrome o cualquier otro basado en Chromium.
Una vez tengamos abierto el navegador Chrome, tenemos que dirigirnos al menú superior derecho de los tres puntos, pasar el ratón por Más Herramientas y luego en Herramientas para Desarrolladores.
Esto abrirá un menú lateral con un montón de información. No te asustes, ya que no es necesario saber cómo funciona todo.
Lo único que tienes que hacer es acceder a tu web, como accedes normalmente, pero con las herramientas para desarrolladores abierta.
Ahora vamos a ver la ID del menú superior, para esto tenemos que asegurarnos de estar en la sección Elements y sólo tenemos que pasar el ratón por el código, sin hacer click y veremos cómo se marcan secciones de nuestra web conforme lo movamos.
Lo que tenemos que hacer es encontrar la parte del código en la que queda seleccionado el menú que queremos hacer pegajoso.
Es posible que tengamos que abrir las flechas que aparecen en los laterales para llegar hasta el menú que nos interesa, pero al final tenemos que encontrar la ID que nos interesa.
Cuando lo tengamos localizada la ID del menú, sólo tenemos que copiarlo (podemos hacer doble click sobre él) y dirigirnos de nuevo al plugin.
Ahora lo único que tenemos que hacer es pegar la ID del menú en el campo correspondiente, pero antes es necesario añadir la almohadilla, tal y como se puede ver en la imagen:
Ahora sólo queda guardar los cambios y ver cómo queda el efecto Sticky en tu WordPress. ¡Así de fácil
El resto de la opciones que nos ofrece el plugin son para retocar la disposición del menú en la pantalla o no hacer el efecto Sticky en pantallas menores o mayores tamaño en pixeles (hay que decidirlo nosotros mismos).
El plugin Sticky Menu (or Anything!) on Scroll es realmente sencillo de utilizar y hace lo que dice a la perfección.
La complejidad viene por el lado de tener que averiguar la ID del menú o elemento que deseamos pegar en la pantalla, pero sólo hace falta un poco de práctica para localizarlas.
Los navegadores actuales nos ofrecen herramientas para saber cuál es la ID que necesitamos y si nos equivocamos, sólo tenemos que volver a cambiarla y ya está, no vamos a romper nada de nuestra web.
En el ejemplo hemos visto que podemos añadir a ID de un menú superior, pero en realidad en plugin nos permite añadir la ID de cualquier otro elemento.
Es decir, que podemos hacer pegajoso un banner, un botón, una imagen, etc... sólo necesitamos saber la ID de elemento y añadirla en el plugin.