Cómo añadir una barra de progreso de lectura en las entradas de WordPress (3 maneras fáciles)

Añadir una barra de progreso de lectura a las entradas de WordPress es una forma estupenda de mejorar la experiencia del lector.

A veces, las entradas largas de un blog pueden resultar intimidantes, y una barra de progreso ofrece una señal visual que muestra a los lectores exactamente hasta dónde han llegado y cuánto les queda.

Hemos escrito más de 3000 entradas de blog en WPBeginner, así que conocemos la importancia de mantener la participación de tus lectores. Por eso estamos aquí para compartir nuestros mejores consejos para mejorar tu blog.

En este artículo, le mostraremos cómo añadir fácilmente una barra de progreso de lectura a sus entradas de WordPress.

Cuándo añadir 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 hacer que la gente permanezca en su sitio web de WordPress. Permite a los lectores saber cuánto han leído y cuánto les queda.

Es más probable que los lectores sigan desplazándose si ven que se acercan al final del artículo. Una barra de progreso puede motivarles a terminar de leer.

Además, tener un medidor de lectura añade un toque de interactividad a su contenido. Puede hacer que la lectura parezca más un viaje con un destino vaciado.

Sin embargo, es importante tener en cuenta su contenido. Una barra de progreso puede ser innecesaria si escribe principalmente artículos cortos y escaneables. Del mismo modo, puede distraer a algunos lectores.

Con esto en mente, veamos cómo añadir fácilmente una barra de progreso de lectura a tus entradas de WordPress. Puede utilizar los enlaces rápidos a continuación para omitir a su método preferido:

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

Una forma de añadir una barra de progreso de lectura en las entradas de WordPress es utilizar un maquetador de temas con una característica de barra de progreso. De esta forma, el diseño de la barra de progreso se integrará a la perfección con el resto de tu tema, haciéndolo más agradable a la vista.

Ten en cuenta que este método implica cambiar de tema, por lo que no te lo recomendamos si ya estás contento con tu tema y no vas a cambiarlo pronto. Si ese es el caso, entonces usted debe ir con el método 2 en su lugar.

Para este método, utilizaremos el Thrive Theme Builder. Además de tener una barra de progreso de lectura, el 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 maquetador de arrastrar y soltar es fácil de usar, por lo que es ideal para principiantes.

Puedes aprender más acerca de la plataforma en nuestra reseña / valoración de Thrive Themes.

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

Paso 1: Instalar el Thrive Theme Builder

El primer paso es establecer el Thrive Theme Builder. Puedes acceder a este plugin conectándote a tu cuenta en el sitio web de Thrive Themes.

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

Una vez que el plugin esté activado, haga clic en Product Manager en su área de administrador de WordPress.

A continuación, haz clic en el botón ‘Acceder a mi cuenta’ para conectar tu sitio web WordPress con tu cuenta de Thrive Themes.

Después de eso, ahora deberías ver un anuncio / catálogo / ficha de todos los productos disponibles de Thrive Themes dentro de tu cuenta.

Aquí, siga adelante y seleccione‘Thrive Architect‘ y marque la casilla ‘Instalar Producto’.

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

A continuación, desplázate hasta la sección ‘Thrive Theme Builder’ y marca la casilla ‘Instalar tema’.

Ahora, basta con hacer clic en “Instalar los productos seleccionados”.

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

Una vez finalizado el proceso, haga clic en “Ir al Escritorio del Maquetador de Temas”.

A continuación, elija un tema de WordPress.

Si no está seguro de cuál elegir, haga clic en el botón “Vista previa” para ver primero el aspecto del tema. Después, haz clic en “Elegir” cuando hayas tomado una decisión.

Ahora debería llegar al asistente para el maquetador de temas.

Este asistente de configuración le guiará a través de la subida de su propio logotipo, la elección de colores de marca para añadir a su tema, y el establecimiento de las diferentes estructuras y plantillas de su tema.

Siga adelante y complete el asistente de configuración antes de pasar al siguiente paso.

Paso 2: Añadir una barra de progreso de lectura a su plantilla de entrada única

Con tu tema establecido, vamos ahora a añadir una barra de progreso de lectura a tu plantilla de tema. Dado que sólo queremos mostrar la barra de lectura en entradas de WordPress, entonces sólo tendremos que editar la plantilla de una sola entrada.

Para ello, cambie a la pestaña ‘Plantillas’ en el Thrive Theme Builder. Luego, busca la plantilla ‘Entrada por defecto’ y haz clic en ‘Editar’.

Ahora deberías estar dentro del maquetador 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ácese por la barra lateral izquierda y busque el ajuste “Indicador de progreso de lectura”. Basta con hacer clic en el conmutador para activarlo.

Ahora debería haber algunos ajustes más para que edites el indicador de posición de lectura.

En primer lugar, puedes añadir la barra de progreso debajo de la cabecera o en la parte superior del área visible (justo encima de la cabecera). Si eliges la primera opción, tendrás que asegurarte de que la cabecera está establecida como fija, lo que te mostraremos cómo hacer más adelante.

A continuación, puedes cambiar el color de la barra de progreso. Para ello, basta con hacer clic en el selector de color.

Ahora puedes elegir uno de los colores del tema, que es la combinación de colores predefinida de tu tema. O bien, puedes hacer clic en “Desvincular del color del tema” para elegir un color completamente diferente que no forme parte de tu tema.

Si elige la opción “Desvincular del color del tema”, también podrá ajustar la opacidad del color.

De este modo, puedes ajustar el grado de opacidad de la barra de progreso sobre el fondo. Dicho esto, lo mejor es que el color de la barra de progreso no sea tan vibrante que distraiga a los usuarios de la lectura.

Cuando estés satisfecho con el color, haz clic en “Aplicar”.

Por último, puede ajustar la altura de la barra de progreso.

El maquetador de temas permite cambiar el tamaño de la barra hasta 10 píxeles. Esto garantiza que la barra de progreso no parezca demasiado grande. Teniendo esto en cuenta, recomendamos elegir 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, sólo tienes que hacer clic en “Guardar trabajo” para conservar los cambios.

Paso 3: Fije la cabecera (opcional)

Si elige mostrar la barra de progreso de lectura debajo de la cabecera, tendrá que seguir este paso. De lo contrario, puede omitirlo.

En primer lugar, desplácese hacia arriba por la barra lateral izquierda y haga clic en “Cabecera”.

Ahora debería aparecer en la barra lateral otro conjunto de ajustes para personalizar la cabecera.

Desplácese hasta la sección de cabeceras y haga clic en “Editar”.

Ahora, abra la pestaña Comportamiento del desplazamiento.

A continuación, debes seleccionar “Fijo”. Dependiendo de su tema, puede que también tenga que cambiar la distancia desde la parte superior de la pantalla a 1 px para que aparezca la barra de progreso.

Puede dejar el resto de los ajustes como están y hacer clic en “Listo” en la parte inferior.

Paso 4: Añadir 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 entrada de principio a fin. Esto ayuda a los usuarios a ver cuánto tiempo tardarán en leer un artículo, permitiéndoles elegir el contenido que se ajuste a su tiempo disponible.

En primer lugar, haga clic en el bloque encargado de mostrar los metadatos de su entrada.

Esta es la parte de la plantilla de entradas individuales que muestra información como el autor de la entrada del blog, las categorías, las etiquetas, etc.

A continuación, haga clic en el icono “Texto dinámico” de la barra de herramientas.

Aquí debe seleccionar “Contenido” en el primer menú desplegable y “Tiempo de lectura restante (en minutos)” en el segundo.

A continuación, haz clic en “Insertar”.

Ahora debería ver un nuevo texto que dice ‘0 minutos restantes’ en la meta entrada. Puede seguir adelante y ajustar este texto a su gusto.

En nuestro caso, decidimos quitar la palabra “restante”.

Cuando hayas terminado, no olvides hacer clic en “Guardar trabajo”.

Paso 5: Vista previa de los indicadores de progreso de lectura

Ahora que ha establecido los ajustes de la barra de progreso, puede visitar la entrada de su blog para ver la barra en acción.

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

No dudes en hacer todos los cambios que sean necesarios.

Este es el aspecto de nuestra barra de progreso de lectura:

Método 2: Añadir una barra de progreso de lectura con un plugin gratuito

Si sólo desea añadir una simple barra de progreso de lectura a sus entradas de WordPress de forma gratuita, entonces puede utilizar 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 entradas, y podrás personalizarlo fácilmente según tus preferencias.

En primer lugar, instale el plugin en su área de administrador 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, vaya a Catch Scroll Progress Bar en su escritorio de WordPress. Ahora verá algunos ajustes de la barra de progreso para establecer.

Con este plugin, puede cambiar la posición de la barra de progreso de la parte superior a la parte inferior. Dicho esto, puedes dejarla como está si prefieres la posición superior normal.

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

El color de fondo se refiere al color por defecto de la barra de progreso cuando el lector no se ha desplazado por la página. Por su parte, el color de primer plano es el que aparecerá cuando el lector se desplace por 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, siendo 1 opaco y 0 transparente o invisible.

No dudes en jugar con los números hasta que encuentres el nivel de opacidad que te guste.

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

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

El radio del borde controla el aspecto redondeado de las esquinas de la barra de progreso. Si no te gusta cómo se ve, entonces puedes simplemente introducir ‘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 entradas o páginas individuales.

Normalmente, solo necesitas añadir una barra de progreso de lectura en las entradas de tu blog de WordPress. En este caso, solo elegimos ‘Una sola página/entrada’ en el ajuste ‘Seleccionar la condición de la plantilla para la barra de progreso’.

También marcamos la opción “Entradas” en “Seleccionar el tipo de contenido para aplicar la barra de progreso” porque solo queremos que la barra aparezca en las entradas del blog.

Dicho esto, no dude en marcar / comprobar las condiciones que mejor se adapten a su sitio web.

Cuando estés satisfecho con los ajustes de la barra de progreso, haz clic en “Guardar cambios”.

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

Método 3: Añadir una barra de progreso de lectura con código

También puede utilizar código personalizado para añadir una barra de progreso de lectura a su sitio WordPress.

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

En su lugar, recomendamos utilizar el plugin WPCode. Es la forma más fácil y segura de añadir código personalizado en WordPress sin necesidad de editar ningún archivo del núcleo de WordPress.

Además, ni siquiera necesitas estar familiarizado con la codificación para utilizarlo, ya que viene con una biblioteca de fragmentos de código listos para usar que puedes añadir a tu sitio en un par de clics, incluido uno para una barra de progreso de lectura.

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

Una vez activado el plugin, vaya a Code Snippets ” Library desde el escritorio de WordPress.

A partir de ahí, busca “Barra de progreso de desplazamiento” en la biblioteca, pasa el ratón por encima y haz clic en el botón “Usar fragmento”.

WPCode añadirá automáticamente el código y seleccionará el método de inserción adecuado.

Después, todo lo que tienes que hacer es cambiar el interruptor de Inactivo a Activo. A continuación, haz clic en el botón “Actualizar”.

Ahora, puede ver una entrada de blog en su sitio web y aparecerá una sencilla barra de progreso.

Consejos adicionales para mantener la participación de los lectores de su blog de WordPress

¿Quiere convertir a los visitantes ocasionales en lectores fieles? Nosotros nos encargamos.

Marque / compruebe estos tutoriales expertos en WordPress repletos de consejos para mantener a su público enganchado:

• Estiliza cada entrada de WordPress de forma diferente para que tu contenido sea visualmente atractivo.
• Cree separadores con formas personalizadas para dividir el texto y guiar a los lectores a través de su contenido.
• Añade emojis para dar un toque de personalidad y diversión a tu blog.
• Destaque las nuevas entradas para los visitantes que regresan y haga que vuelvan a por más.
• Resalte texto en sus entradas de WordPress y destaque los puntos clave para sus lectores.
• Añada notas a pie de página sencillas y elegantes a las entradas de su blog para mostrar sus investigaciones.
• Impresione a sus visitantes mostrando testimonios rotativos en su sitio WordPress.
• Añade un reescalador de fuentes a tu sitio de WordPress para asegurarte de que tu contenido es accesible para todo el mundo.

Esperamos que este artículo te haya ayudado a añadir una barra de progreso de lectura en WordPress. Puede que también quieras ver nuestra guía completa sobre cómo editar un sitio web en WordPress y nuestra selección experta de las mejores alternativas a Canva para gráficos de diseño de sitios web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.