Cómo crear un Sticky Menu o Menú Pegajoso en WordPress

Categorias: Wordpress

Cómo crear un Sticky Menu o Menú Pegajoso en WordPress

Los menús Sticky o Pegajosos son muy útiles para mostrar siempre el menú en pantalla, aunque se haga scroll. WordPress no tiene una forma nativa de hacer esto, pero podemos usar el plugin «Sticky Menu on Scroll» para coseguir que cualquier elemento de nuestro WordPress quede siempre visible.

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.


Tenemos diferentes tipos de hosting, selecciona uno:


 

Plugin Sticky Menu (or Anything!) on Scroll

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!).

menu sticky WordPress

El las opciones del plugin tenemos 3 pestañas que son:

  • – Basic Settings
    Desde donde realizaremos la configuración básica del plugin.
  • – Advanced Settings
    Una configuración avanzada para usuarios avanzados.
  • – FAQ
    Una sección de preguntas frecuentes.

menu sticky configuracion WordPress

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.

sticky elemento WordPress

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.

chrome herramientas 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.

web herramientas desarrolladores Chrome

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.

localizar id menu Chrome

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:

anadir id sticky menu WordPress

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).

resto opciones sticky menu WordPress

Cosas a Tener en Cuenta

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.

 

Hosting WordPress SSD con IP Española

  • Hosting especializado en WordPress con discos SSDWordPress 1desde4´38€ / mes
  • Hosting especializado en WordPress con discos SSDWordPress 2desde5´54€ / mes
  • Hosting especializado en WordPress con discos SSDWordPress 3desde8´34€ / mes
  • Hosting especializado en WordPress con discos SSDWordPress 1desde4´38€/mes
  • Hosting especializado en WordPress con discos SSDWordPress 2desde5´54€/mes
  • Hosting especializado en WordPress con discos SSDWordPress 3desde8´34€/mes
    • Almacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSDAlmacenamiento en disco duro ultra rápido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Ideado para sacar el máximo partido a tu WordPress
    • Aumenta la velocidad de tu web + Info
    • Tras evaluación de nuestro equipo de migraciones
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM, .INFO, .NET, .ORG ó .EU.
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Ideado para sacar el máximo partido a tu WordPress
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Hosting específicamente preparado para sacar el máximo rendimiento a tu Wordpress
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM, .INFO, .NET, .ORG ó .EU.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opción de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Opción de contratación de certificados SSL. Se requiere Ip dedicada.Puedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUI
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el cPanel de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control cPanel.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting, Dominios y Wordpress
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!