Cómo agregar una barra de progreso de lectura en publicaciones de WordPress (3 formas fáciles)

¿Conoces esa sensación cuando lees un artículo largo en línea y no tienes idea de cuánto falta? Ese es el problema que las barras de progreso de lectura resuelven para tus visitantes de WordPress.

Estos sencillos indicadores visuales muestran a los lectores exactamente cuánto de un artículo han completado, lo que puede animarlos a seguir leyendo y permanecer en tu página. Aprovecha esa misma satisfacción que obtienes al completar algo con un punto final claro.

Ahora, en realidad no usamos barras de progreso aquí en WPBeginner porque nuestros tutoriales están diseñados para ser escaneables. La mayoría de las personas van directamente a la sección que necesitan en lugar de leer de principio a fin.

Pero si publicas entradas de blog más largas, guías detalladas o artículos extensos, una barra de progreso de lectura puede ayudar realmente a mantener a la gente interesada.

En esta guía, te mostraremos tres formas diferentes de agregar una a tu sitio de WordPress, ya sea que desees una solución de plugin simple o algo más personalizado.

Cuándo agregar una barra de progreso de lectura a las entradas de tu blog de WordPress

Para entradas de blog más largas, añadir una barra de progreso de lectura puede ser una herramienta valiosa para animar a los visitantes a permanecer en tu sitio web de WordPress.

Sin embargo, no son necesarios para todos los sitios. Según nuestra experiencia, hemos descubierto que las barras de progreso de lectura funcionan mejor en estas situaciones específicas:

• Artículos de formato largo: Si publicas guías o historias detalladas, una barra de progreso anima a los usuarios a seguir desplazándose hasta el final.
• Contenido lineal: Son perfectos para contenido que necesita ser leído de principio a fin en lugar de ser escaneado.
• Diseño interactivo: Un medidor de lectura añade un toque de interactividad. Hace que la experiencia del usuario se sienta más como un viaje con un destino claro.

Teniendo esto en cuenta, veamos cómo agregar fácilmente una barra de progreso de lectura a tus publicaciones de WordPress. Puedes usar los enlaces rápidos a continuación para saltar a tu método preferido:

• Method 1: Design a Custom Theme With Reading Progress Indicators
• Método 2: Agrega una barra de progreso de lectura con un plugin gratuito
• Método 3: Agrega una barra de progreso de lectura con código
• Consejos adicionales para mantener a tus lectores del blog de WordPress comprometidos

Método 1: Diseña un tema personalizado con indicadores de progreso de lectura

Una forma de agregar una barra de progreso de lectura en las publicaciones de WordPress es usar un constructor de temas con una función de barra de progreso. De esta manera, el diseño de la barra de progreso se integrará perfectamente con el resto de tu tema, haciéndolo más agradable a la vista.

Ten en cuenta que este método implicará cambiar tu tema, por lo que no lo recomendamos si ya estás contento con tu tema y no buscas cambiarlo en un futuro cercano. Si ese es el caso, entonces deberías optar por el método 2 (plugin) o el método 3 (código) en su lugar.

Para este método, usaremos el Thrive Theme Builder. Además de tener una barra de progreso de lectura, Thrive Theme Builder tiene docenas de plantillas de temas para varios propósitos, desde blogs hasta sitios web corporativos.

Lo mejor de todo es que el constructor de arrastrar y soltar es fácil de usar, lo que lo hace ideal para principiantes.

Puedes aprender más sobre la plataforma en nuestra reseña de Thrive Themes.

Una desventaja de Thrive Themes es que no hay versión gratuita. Dicho esto, puedes usar nuestro código de cupón de Thrive Themes para obtener hasta un 50% de descuento en tu primera compra.

Paso 1: Instalar el Thrive Theme Builder

El primer paso es configurar Thrive Theme Builder. Puedes acceder a este plugin iniciando sesión en tu cuenta en el sitio web de Thrive Themes.

Luego, descarga e instala el plugin Thrive Product Manager. Para más información, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activo, haz clic en Product Manager en tu área de administración de WordPress.

Luego, haz clic en el botón 'Iniciar sesión en mi cuenta' para conectar tu sitio web de WordPress con tu cuenta de Thrive Themes.

Después de eso, ahora deberías ver una lista de todos los productos disponibles de Thrive Themes dentro de tu cuenta.

Aquí, procede a seleccionar 'Thrive Architect' y marca la casilla 'Instalar Producto'.

Este plugin constructor de páginas funciona junto con el constructor de temas, por eso necesitamos activarlo.

A continuación, desplázate hacia abajo hasta la sección 'Thrive Theme Builder' y marca la casilla 'Instalar Tema'.

Ahora, simplemente haz clic en 'Instalar productos seleccionados'.

En la siguiente página, verás que Thrive Product Manager está instalando y activando Thrive Theme Builder.

Una vez que el proceso haya terminado, haz clic en 'Ir al panel del constructor de temas'.

Ahora, procede a elegir un tema de WordPress.

Si no estás seguro de cuál elegir, simplemente haz clic en el botón 'Vista previa' para ver cómo se ve el tema primero. Luego, haz clic en 'Elegir' una vez que hayas tomado tu decisión.

Ahora deberías llegar al Asistente del Constructor de Temas.

Este asistente de configuración te guiará para subir tu propio logotipo, elegir los colores de marca para añadir a tu tema y configurar las diferentes estructuras y plantillas de tu tema.

Continúa y completa el asistente de configuración antes de pasar al siguiente paso.

Paso 2: Añade una barra de progreso de lectura a tu plantilla de publicación individual

Con tu tema configurado, ahora añadamos una barra de progreso de lectura a la plantilla de tu tema. Dado que solo queremos mostrar la barra medidora de lectura en las publicaciones de WordPress, solo necesitaremos editar la plantilla de publicación individual.

Para hacer esto, cambia a la pestaña 'Plantillas' en Thrive Theme Builder. Luego, busca la plantilla 'Publicación Predeterminada' y haz clic en 'Editar'.

Ahora deberías estar dentro del constructor de temas. Debería haber una barra lateral izquierda para editar tu plantilla, una vista previa de la plantilla en sí y una pequeña barra de herramientas en el lado derecho para añadir más bloques o cambiar el estilo de la plantilla.

Para añadir el medidor de lectura, desplázate hacia abajo en la barra lateral izquierda y busca la configuración 'Indicador de progreso de lectura'. Simplemente haz clic en el interruptor para activarlo.

Después de añadir la barra de progreso, ahora debería haber más configuraciones para que las edites.

Primero, puedes elegir añadir la barra de progreso debajo del encabezado o en la parte superior de la ventana gráfica (justo encima del encabezado). Si eliges la primera opción, deberás asegurarte de que el encabezado esté configurado como fijo, lo cual te mostraremos cómo hacer más adelante.

A continuación, puedes cambiar el color de la barra de progreso. Simplemente haz clic en el selector de color para hacerlo.

Ahora, puedes elegir uno de los colores del tema, que es el esquema de color predefinido de tu tema. O, puedes hacer clic en ‘Desvincular del color del tema’ para elegir un color completamente diferente que no sea parte de tu tema.

Si eliges la opción ‘Desvincular del color del tema’, entonces también puedes ajustar la opacidad del color.

De esta manera, puedes ajustar qué tan opaca se ve la barra de progreso contra su fondo. Dicho esto, es mejor hacer que el color de la barra de progreso no sea tan vibrante que distraiga a los usuarios de la lectura.

Una vez que estés satisfecho con el color, simplemente haz clic en ‘Aplicar’.

Finalmente, puedes ajustar la altura de la barra de progreso.

El constructor de temas te permite cambiar el tamaño de la barra hasta 10 píxeles. Esto asegura que la barra de progreso no se vea demasiado grande. Teniendo esto en cuenta, recomendamos un tamaño entre 5 y 10 para que la barra de progreso sea claramente visible.

Cuando estés satisfecho con el aspecto de la barra, simplemente haz clic en ‘Guardar trabajo’ para conservar tus cambios.

Paso 3: Haz que tu encabezado sea fijo (Opcional)

Si eliges mostrar tu barra de progreso de lectura debajo del encabezado, entonces tendrás que seguir este paso. De lo contrario, puedes omitirlo.

Primero, desplázate hacia arriba en la barra lateral izquierda y haz clic en ‘Encabezado’.

Ahora deberían aparecer en la barra lateral un conjunto diferente de configuraciones para personalizar el encabezado.

Continúa y desplázate hacia abajo hasta la sección de Encabezado y haz clic en ‘Editar’.

Ahora, abre la pestaña Comportamiento de desplazamiento.

Luego, necesitas seleccionar ‘Fijo’. Dependiendo de tu tema, también podrías necesitar cambiar la distancia desde la parte superior de la pantalla a 1 px para que aparezca la barra de progreso.

Puedes dejar el resto de la configuración como está y hacer clic en ‘Listo’ en la parte inferior.

Paso 4: Agrega un indicador de tiempo de lectura (Opcional)

Otra cosa que puedes hacer con Thrive Theme Builder es mostrar el tiempo estimado de lectura para recorrer una publicación de principio a fin. Esto ayuda a los usuarios a ver cuánto tiempo les tomará leer un artículo, permitiéndoles elegir contenido que se ajuste a su tiempo disponible.

Primero, haz clic en el bloque que es responsable de mostrar los metadatos de tu publicación.

Esta es la parte de tu plantilla de publicación única que muestra información como el autor de la entrada del blog, categorías, etiquetas, etc.

Luego, haz clic en el ícono de ‘Texto dinámico‘ en la barra de herramientas.

Aquí, debes seleccionar ‘Contenido’ en el primer menú desplegable y ‘Tiempo de lectura restante (en minutos)’ en el segundo.

Después de eso, haz clic en ‘Insertar’.

Ahora deberías ver un nuevo texto que dice, ‘0 minutos restantes’ en los metadatos de la publicación. Puedes ajustar este texto a tu gusto.

En nuestro caso, decidimos eliminar la palabra ‘restantes’.

Cuando hayas terminado, no olvides hacer clic en ‘Guardar trabajo’.

Paso 5: Previsualiza tus indicadores de progreso de lectura

Ahora que has configurado los ajustes de tu barra de progreso, puedes visitar tu entrada de blog para ver la barra en acción.

Si deseas hacer una previsualización en lugar de ver la barra en vivo en tu sitio, simplemente puedes hacer clic en el botón ‘Vista previa’ en la parte inferior. Thrive Theme Builder te permite previsualizar tu sitio web en escritorio, tableta y móvil.

Siéntete libre de hacer tantos cambios como sean necesarios.

Así es como se ve nuestra barra de progreso de lectura:

Método 2: Agrega una barra de progreso de lectura con un plugin gratuito

Si solo deseas agregar una barra de progreso de lectura simple a tus publicaciones de WordPress de forma gratuita, puedes usar el plugin Catch Scroll Progress Bar.

Este plugin de barra de progreso de lectura mostrará automáticamente un medidor de lectura en tus páginas y publicaciones, y puedes personalizarlo fácilmente según tus preferencias.

Primero, instala el plugin en tu área de administración de WordPress. Para más información, lee nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Una vez hecho esto, ve a Catch Scroll Progress Bar en tu panel de WordPress. Ahora verás algunas configuraciones de la barra de progreso para configurar.

Con este plugin, puedes cambiar la posición de la barra de progreso de arriba a abajo. Dicho esto, puedes dejarlo como está si prefieres la posición normal de arriba.

Otra cosa que puedes personalizar es el color de fondo y el color de primer plano.

El color de fondo es el color de la barra vacía antes de desplazarse. Mientras tanto, el color de primer plano llena la barra para mostrar el progreso a medida que el lector se desplaza hacia abajo en la página.

Lo siguiente es la opacidad, que controla la transparencia de los colores de fondo y primer plano. El rango está entre 0 y 1, donde 1 es opaco y 0 es transparente o invisible.

Siéntete libre de jugar con los números hasta que encuentres el nivel de opacidad que te guste.

A continuación, puedes ajustar la altura y el radio del borde de la barra de progreso.

Para la altura, hemos descubierto que el mejor número está entre 1 y 8, pero no más que eso. De lo contrario, la barra de progreso puede parecer demasiado grande.

El radio del borde controla qué tan redondeadas se ven las esquinas de tu barra de progreso. Si no te gusta cómo se ve, puedes simplemente ingresar '0'.

Ahora, este plugin también te permite decidir en qué plantillas mostrar la barra de progreso: en tu página de inicio, página de blog, archivos y categorías, y/o publicaciones o páginas individuales.

Por lo general, solo necesitas agregar una barra de progreso de lectura en las publicaciones de tu blog de WordPress. En este caso, solo elegimos 'Página/publicación única' en la configuración de la condición de la plantilla.

También marcamos la opción 'Publicaciones' en 'Seleccionar el tipo de publicación para aplicar la barra de progreso' porque solo queremos que la barra aparezca en las publicaciones del blog.

Dicho esto, siéntete libre de marcar las condiciones que mejor se adapten a tu sitio web.

Una vez que estés satisfecho con la configuración de tu barra de progreso, haz clic en 'Guardar cambios'.

Ahora, si previsualizas tu publicación de blog en el móvil o en el escritorio, deberías ver una barra de progreso.

Método 3: Agrega una barra de progreso de lectura con código

También puedes usar código personalizado para agregar una barra de progreso de lectura a tu sitio de WordPress.

A menudo, los tutoriales te pedirán que agregues código directamente al archivo functions.php de tu tema. Pero, no recomendamos hacer esto porque el error más pequeño puede romper tu sitio.

En su lugar, recomendamos usar el plugin WPCode. Es la forma más fácil y segura de agregar código personalizado en WordPress sin necesidad de editar ningún archivo principal de WordPress.

Hemos probado WPCode a fondo y lo hemos encontrado una solución confiable y fácil de usar para principiantes.

Viene con una biblioteca incorporada de fragmentos de código listos para usar que puedes agregar a tu sitio con solo unos pocos clics, incluido uno para una barra de progreso de lectura. Puedes consultar nuestra reseña completa de WPCode para obtener más información sobre sus características y por qué lo recomendamos.

Para comenzar, necesitas instalar y activar el plugin gratuito WPCode. Si necesitas ayuda, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activado, ve a Fragmentos de código » Biblioteca desde el panel de WordPress.

Desde ahí, busca la ‘Barra de progreso de desplazamiento’ en la biblioteca, pasa el cursor del mouse sobre ella y haz clic en el botón ‘Usar fragmento’.

WPCode agregará automáticamente el código por ti.

El plugin también elegirá automáticamente el método correcto de 'Inserción automática' para ti en segundo plano.

Después de eso, todo lo que necesitas hacer es cambiar el interruptor de Inactivo a Activo.

Luego, haz clic en el botón 'Actualizar'.

Ahora, puedes ver una entrada de blog en tu sitio web.

Debería aparecer una barra de progreso simple, así:

Consejos adicionales para mantener a tus lectores del blog de WordPress comprometidos

¿Quieres convertir visitantes casuales en lectores leales? ¡Te tenemos cubierto!

Consulta estos tutoriales expertos de WordPress repletos de consejos para mantener a tu audiencia enganchada:

• Da estilo a cada publicación de WordPress de manera diferente para que tu contenido sea visualmente atractivo.
• Crea divisores de formas personalizados para dividir tu texto y guiar a los lectores a través de tu contenido.
• Agrega emojis para mostrar tu personalidad y un toque de diversión a tu blog.
• Resalta las nuevas publicaciones para los visitantes recurrentes y haz que vuelvan por más.
• Resalta texto en tus publicaciones de WordPress y enfatiza puntos clave para tus lectores.
• Agrega notas al pie de página sencillas y elegantes a tus publicaciones de blog para mostrar tu investigación.
• Impresiona a tus visitantes mostrando testimonios rotatorios en tu sitio de WordPress.
• Agrega un redimensionador de fuentes a tu sitio de WordPress para asegurar que tu contenido sea accesible para todos.

Esperamos que este artículo te haya ayudado a agregar barras de progreso de lectura en WordPress. También te puede interesar nuestra guía completa sobre cómo editar un sitio web de WordPress y nuestras selecciones expertas de las mejores alternativas a Canva para gráficos de diseño web.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.