¿Quieres añadir una barra de progreso de lectura a WordPress?

Una barra de progreso de lectura es una forma estupenda de mejorar la experiencia de los usuarios de tu sitio, ya que ofrece a los lectores un indicador visual de su progreso en una entrada.

Si quieres añadir una a tu sitio, hay un montón de estupendos plugins gratuitos o asequibles que te ayudan a añadir una barra de progreso y a adaptar su diseño al resto de tu sitio.

En este post, hemos recopilado 8 de las mejores opciones, 6 de las cuales son completamente gratuitas.

A continuación, compartiremos los detalles de cada plugin, junto con una rápida introducción sobre cómo funcionan las barras de progreso y por qué pueden ser beneficiosas para tu sitio.

¿Qué Es una Barra de Progreso de Lectura?

Una barra de progreso de lectura hace más o menos lo que su nombre indica: permite a los visitantes de tu sitio web ver cuánto han avanzado en el contenido de tu entrada.

Normalmente, colocarás una barra horizontal en la parte superior o inferior de la página. A medida que los usuarios se desplacen por la entrada, la barra se «completará» para indicar lo cerca que están del final del contenido.

Algunos plugins también te dan la opción de crear una barra de progreso vertical a la izquierda o a la derecha del contenido. En estos casos, se parece a una barra de desplazamiento. Sin embargo, la diferencia clave es que la barra de progreso se basará en la longitud del contenido real, mientras que la barra de desplazamiento del navegador se basa en la longitud total de la página.

Aquí tienes dos ejemplos reales de la forma típica en que los sitios utilizan las barras de progreso de lectura..

HubSpot añade una barra de progreso naranja que aparece directamente debajo de su encabezado fijo:

Una barra de progreso de lectura de HubSpot
Un ejemplo de barra de progreso de lectura de HubSpot.

Sin embargo, puedes experimentar con diferentes posiciones de la barra de progreso en función de tu sitio.

¿Por Qué Añadir una Barra de Progreso de Lectura a WordPress?

A alto nivel, una barra de progreso de lectura es una forma de mejorar la usabilidad y la experiencia del usuario en tu sitio, lo que puede tener efectos más directos en métricas importantes como el tiempo en la página y la tasa de rebote.

En primer lugar, hablemos de la experiencia del usuario en general.

La mayoría de la gente quiere saber en qué se está metiendo antes de invertir el tiempo necesario para participar en tu publicación. ¿Se trata de un artículo de 5 minutos que pueden leer entre tareas o es un artículo largo de 20 minutos que requerirá una gran concentración?

Una barra de progreso da a los lectores una buena idea de lo que pueden esperar de tu artículo cuando empiezan a leerlo. Para ayudar con esto, algunos sitios también añaden un tiempo de lectura estimado además de la barra de progreso, que soportan varios de los plugins que aparecen a continuación.

Una vez que tus visitantes empiezan a leer, la barra de progreso también puede animarles a terminar el post. Por ejemplo, si un lector ve que ya ha llegado al 80% del contenido, se animará a terminar el último 20% porque ya ha llegado a la mayor parte del post.

Estas mejoras en la experiencia del usuario pueden tener efectos positivos en dos métricas clave:

  • Tiempo de permanencia – si animas a los lectores a terminar un post una vez que han empezado a leerlo, puedes aumentar el tiempo que pasan en la página.
  • Tasa de rebote – al aumentar el tiempo que los visitantes pasan en tu página, aumentarás la posibilidad de que un visitante continúe interactuando con tu sitio (tal vez leyendo otro post), lo que puede ayudar a reducir tu tasa de rebote.

Si combinas las barras de progreso con otras tácticas para mejorar la experiencia del usuario, como una estructura de navegación de calidad y un uso inteligente de la paginación, puedes crear una experiencia realmente agradable y atractiva para los visitantes.

Los 8 Mejores Plugins de WordPress para Barras de Progreso de Lectura

Ahora, vamos a adentrarnos en los 8 mejores plugins de WordPress para barras de progreso que te ayudarán a añadir una barra de progreso de lectura a tu sitio.

Aunque puedes encontrar plugins de barra de progreso genéricos que te permiten crear una barra de progreso personalizada para cualquier cosa, este post se centra específicamente en los plugins que añaden indicadores de progreso de lectura basados en la longitud del contenido de una página.

En cuanto al precio, 6 de estos plugins son completamente gratuitos, mientras que los 2 restantes son asequibles y añaden una flexibilidad extra que no encontrarás en la mayoría de las opciones gratuitas.

Lo mejor de todo es que todos estos plugins deberían funcionar con prácticamente cualquier tema de WordPress.

Read Meter

El plugin Read Meter.
Read Meter

Read Meter es un plugin de barra de progreso de lectura de Brainstorm Force, el mismo equipo que está detrás del popular tema Astra de WordPress (que entró en nuestra lista de los temas más rápidos de WordPress).

El plugin te permite añadir automáticamente una barra de progreso de lectura que se sitúa en la parte superior o inferior de la página. También tienes la opción de mostrar el tiempo estimado de lectura de la entrada junto con la barra de progreso.

Esto es todo lo que obtendrás con Read Meter:

  • Colocación superior o inferior – muestra la barra de progreso en la parte superior o inferior de la pantalla del usuario.
  • Orientación por tipo de entrada – puedes optar por añadir el progreso de lectura sólo para determinados tipos de entrada (incluidos los tipos de entrada personalizados). Por ejemplo, puedes mostrarlo en las entradas del blog pero no en las páginas.
  • Tiempo de lectura – añade automáticamente el tiempo de lectura estimado a varias partes de la entrada (por ejemplo, debajo del título) o colócalo manualmente utilizando un shortcode.
  • Colores personalizables – puedes personalizar los colores y el estilo de cada elemento para que coincida con tu sitio.

Precio: Read Meter es 100% gratuito.

Reading progressbar

El plugin Reading progressbar.
El plugin Reading progressbar

Junto con Read Meter, Reading progressbar es otro de los plugins de barra de progreso más populares en WordPress.org. Sin embargo, a diferencia de Read Meter, este plugin no te da la opción de añadir el tiempo estimado de lectura – sino que es exclusivamente para la barra de progreso.

Sin embargo, te da una flexibilidad de orientación adicional que Read Meter no ofrece. Por ejemplo, puedes orientar tu barra de progreso a plantillas específicas, además de la orientación del tipo de post.

Esto es todo lo que obtendrás con la barra de progreso de Lectura:

  • Posicionamiento flexible – puedes fijar automáticamente tu barra de progreso en la parte superior o inferior de la página. O también hay una opción de posicionamiento personalizado que te permite pegarla a cualquier elemento CSS. Por ejemplo, si tienes un encabezado fijo, puedes colocarla debajo del menú de navegación de la cabecera en lugar de en la parte superior de la página (como en el ejemplo de HubSpot).
  • Diseño personalizable – cambia la altura y los colores de tu barra de progreso para que coincida con tu sitio.
  • Opciones de orientación – puedes mostrar tu barra de progreso sólo en determinadas plantillas y/o tipos de post.

Precio: La barra de progreso de lectura es 100% gratuita.

Worth the Read

El plugin Worth the Read.
Worth the Read

Worth the Read es uno de los plugins para WordPress de barra de progreso más personalizables, lo que lo convierte en una gran opción si los plugins anteriores te parecen demasiado limitados.

Incluye algunas opciones únicas de colocación y orientación que la mayoría de los otros plugins no ofrecen, junto con algunos otros toques únicos. También te da la opción de añadir un tiempo estimado de lectura si lo prefieres.

Esto es todo lo que obtendrás con Worth the Read:

  • Opciones de posicionamiento horizontal o vertical – incluye una barra de progreso horizontal en la parte superior o inferior de la pantalla O una barra de progreso vertical en la parte izquierda o derecha de la pantalla. La opción vertical es única, ya que la mayoría de los otros plugins no la soportan.
  • Orientación por tipo de publicación – sólo incluye tu barra de progreso de lectura en determinados tipos de publicación.
  • Orientación por dispositivos – tienes la opción de desactivar la barra de progreso para dispositivos móviles y tabletas (o para ordenadores de sobremesa).
  • Progreso de los comentarios – tienes la opción de incluir los comentarios en el progreso de la lectura, lo que puede estar bien si tienes secciones de comentarios activas con información útil.
  • Compatibilidad con RTL – es uno de los pocos plugins que te permite cambiar a RTL, lo que puede ser estupendo para sitios en idiomas RTL.
  • Opciones de estilo – personaliza los colores, el grosor, la opacidad, etc. Si has habilitado los comentarios, puedes incluso utilizar un color distinto para indicar cuándo empieza la sección de comentarios en la barra de progreso.
  • Tiempo de lectura estimado – si habilitas el tiempo de lectura, puedes personalizar su funcionalidad y colocarlo de forma automática o manual mediante un shortcode.

Precio: Worth the Read es 100% gratuito.

Catch Scroll Progress Bar

Área de configuración del plugin Catch Scroll Progress Bar plugin.
Catch Scroll Progress Bar

Catch Scroll Progress Bar es otra opción ligera para añadir una barra de progreso básica a tu sitio.

Mantiene las cosas bastante simples, con sólo las opciones mínimas que necesitas para colocar y dar estilo a tu barra de progreso.

Esto es todo lo que obtendrás con Catch Scroll Progress Bar:

  • Posición superior o inferior – coloca tu barra de progreso en la parte superior o inferior de la página.
  • Orientación por tipo de entrada – sólo añade tu barra de progreso a ciertos tipos de entrada.
  • Orientación por plantilla – dentro de esos tipos de entrada, sólo se mostrará en determinadas plantillas. Por ejemplo, puedes añadirla a las entradas individuales pero no a la página de archivo.
  • Opciones de color y estilo – personaliza los colores, la opacidad y la altura de tu barra de progreso.

Precio: Catch Scroll Progress Bar es 100% gratuito.

WP Reading Progress

El plugin WP Reading Progress.
WP Reading Progress

WP Reading Progress es otro plugin de WordPress de barra de progreso gratuito que está disponible en WordPress.org.

Al igual que el plugin anterior, sólo te ofrece los ajustes mínimos necesarios para personalizar tu barra de progreso de lectura. Pero para la mayoría de la gente, eso es todo lo que necesita, lo que lo convierte en otra opción sólida.

Esto es todo lo que obtendrás con WP Reading Progress:

  • Posicionamiento flexible – pega automáticamente la barra a la parte superior o inferior de la página. O bien, puedes adherirla manualmente a cualquier selector CSS.
  • Orientación por tipo de entrada – incluye la barra de progreso sólo en determinados tipos de entrada. También hay una opción para activar/desactivar en las páginas de archivo.
  • Personalización del estilo – puedes personalizar el color y el grosor de la barra de progreso. Sin embargo, sólo puedes elegir un único color y no hay opciones de opacidad.

Precio: WP Reading Progress es 100% gratuito.

Reading Time

El plugin Premium Reading Time.

Reading Time es el primer plugin de progreso de lectura de esta lista que sólo viene en versión premium.

Sin embargo, sigue siendo bastante asequible y ofrece actualizaciones de por vida a través del marketplace CodeCanyon de Envato.

Hay dos razones principales por las que puedes considerar Reading Time en lugar de las alternativas gratuitas:

  • Más de 8 estilos preestablecidos – tienes algunas opciones de estilo únicas, como el uso de barras verticales en lugar de un relleno sólido dentro de la barra de progreso (imagen superior).
  • Reglas avanzadas de orientación – además de orientar los tipos de publicación y las plantillas, puedes orientar tus barras de progreso según reglas muy específicas, como los roles de los usuarios, las URL, los dispositivos, etc.

También obtienes todas las funciones «estándar» que esperarías de un plugin:

  • Posicionamiento flexible – además de la colocación automática en la parte superior o inferior, también puedes utilizar el posicionamiento personalizado para pegar tu barra de progreso a cualquier selector CSS.
  • Opciones de estilo – además de los más de 8 estilos preestablecidos, también tienes opciones generales para personalizar los colores y la altura de tu barra de progreso.

Precio: Reading Time cuesta 15$, viene con actualizaciones de por vida para un solo sitio y 6 meses de soporte.

Reading Position Indicator

El plugin Reading Position Indicator.
Reading Position Indicator

Reading Position Indicator es otro plugin ligero de barra de progreso gratuito en WordPress.org.

No te da una tonelada de ajustes, pero tiene una opción única que te permite usar un gradiente personalizado para tu barra de progreso de lectura (además de un color sólido).

Esto es todo lo que obtendrás con el Indicador de Posición de Lectura:

  • Posición superior o inferior – no hay orientación de selector CSS, pero puedes añadir un desplazamiento.
  • Orientación por tipo de entrada – orienta tu barra de progreso a tipos de entrada específicos.
  • Opciones de personalización del estilo – elige entre estilos de color sólido o degradado. También puedes ajustar el grosor de la barra de progreso.

Precio: Reading Position Indicator es 100% gratuito.

ReBar

El plugin premium ReBar.
ReBar

ReBar es otro plugin premium de barra de progreso de lectura para WordPress que se vende a través del marketplace CodeCanyon de Envato.

Al igual que con Reading Time, estas son algunas de las características únicas que ofrece y que pueden hacer que merezca la pena gastar el dinero:

  • Más de 8 estilos preestablecidos – tienes una serie de estilos únicos que van más allá de los rellenos de color sólido, como el plástico, los degradados, el estilo iOS, etc.
  • Reglas avanzadas de orientación – además de orientar los tipos de publicación, puedes orientar tus barras de progreso según reglas muy específicas, como los roles de los usuarios, URLs, dispositivos, etc.
  • Soporte de scroll infinito – ReBar sigue funcionando con diseños de scroll infinito, lo que la convierte en una gran opción para esos sitios. Puedes definir el área de desplazamiento basándote en selectores CSS y generará una barra de progreso única para cada entrada en el desplazamiento infinito.

Aquí tienes otras características destacables:

  • Estilos horizontal y vertical – coloca una barra de progreso horizontal en la parte superior o inferior de la página O coloca una barra de progreso vertical en el lado izquierdo o derecho de la página.
  • Estilos personalizables – además de los más de 8 estilos preestablecidos, también puedes personalizar los colores y la altura/anchura de tu barra de progreso.
  • Soporte RTL – puedes invertir la barra de progreso para los idiomas RTL.

Precio: ReBar cuesta 15 dólares, viene con actualizaciones de por vida para un solo sitio y 6 meses de soporte.

Resumen

Con esto terminamos nuestra recopilación de los 8 mejores plugins de WordPress para la barra de progreso de lectura.

Para las opciones más sencillas de añadir una barra de progreso básica, puedes considerar plugins como Read Meter o Reading progressbar.

Por otro lado, si quieres la mayor capacidad de personalización de forma gratuita, quizá quieras empezar con Worth the Read, ya que incluye una serie de opciones y funciones únicas que otros plugins no ofrecen.

Si quieres ir más allá de un color de relleno sólido para la barra de progreso, también podrías considerar las opciones premium de CodeCanyon –Reading Time o ReBar. De nuevo, los detalles más singulares de estos plugins son que ambos vienen con más de 8 estilos preestablecidos y opciones de orientación mucho más avanzadas.

Cada plugin tiene su propio estilo en lo que respecta al estilo y las funciones, así que vale la pena explorarlos todos para encontrar la opción más adecuada para tu sitio.

La mayoría de ellos tienen versiones gratuitas en WordPress.org, lo que facilita su prueba. Si alojas tu sitio con Kinsta, puedes crear fácilmente un sitio de staging para probar con seguridad cómo se verá cada plugin en tu sitio.

Para encontrar otros plugins que pueden mejorar tu sitio, también puedes consultar nuestra lista completa de los mejores plugins de WordPress.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).