Cómo agregar una barra de progreso de lectura a WordPress










  • ¿Alguna vez has estado leyendo un artículo en un sitio web y te has preguntado cuánto has avanzado? Muchos sitios web le muestran cuánto ha leído mediante una especie de barra de progreso. Afortunadamente, puede agregar fácilmente una barra de progreso de lectura a WordPress con el uso de un complemento suave.

    ¿Por qué agregar una barra de progreso de lectura?

    Una barra de progreso de lectura de WordPress es una gran herramienta que permitirá que su sitio se destaque. También es una herramienta fantástica para que los usuarios de su sitio web tengan acceso. El progreso les dirá a sus lectores qué tan lejos han leído un artículo y les mostrará cuánto tiempo les queda.

    Hay varias formas de diseñar la barra de progreso y mostrarla en su sitio web de WordPress . En lugar de usar cualquier tipo de código complicado, vamos a usar un excelente complemento que encontré llamado "Reading Progressbar".

    Esto le dará una forma de mostrar una barra de progreso en múltiples formatos. Le brinda a su lector una forma divertida e interesante de rastrear cuánto ha leído de una publicación.

    Muchos de estos complementos son pagos, pero encontré uno que es totalmente gratuito y le brindará muchas opciones. Echémosle un vistazo juntos. También hay algunas alternativas a continuación para revisar si tiene curiosidad.

    Echemos un vistazo a cómo puede agregar fácilmente una barra de progreso de lectura a su sitio web de WordPress.

    Barra de progreso de lectura

    Complemento de barra de progreso de lectura

    El complemento Reading Progressbar le permitirá instalar y configurar fácilmente un indicador de posición en forma de barra de progreso en su sitio web. El plugin es bastante único y ligero.

    Le brinda varias opciones de posición, incluida la visualización de la barra en la parte superior o inferior de una página. También puede personalizarlo aún más para mostrarlo de manera diferente en tipos de publicaciones o en ciertas páginas.

    Reading Progressbar también tiene varias opciones de diseño. Algunos de estos incluyen:

    • Altura de la barra de progreso
    • Color de primer plano
    • Color de fondo
    • Posicionamiento de la barra de progreso
    • La capacidad de corregir una clase si se selecciona una posición personalizada
    • Plantillas de página
    • Tipos de publicaciones

    Básicamente, este complemento de WordPress de barra de progreso de lectura le dará todo lo que necesita para posicionar y mostrar una barra de progreso dinámica en su sitio web de WordPress.

    Quizás lo mejor de este complemento es que es gratuito. Así que echemos un vistazo y veamos qué se necesita para instalarlo y configurarlo.

    Nota: Esto no funcionará con una instalación multisitio .

    Instalar el complemento de barra de progreso de lectura

    Para crear y configurar una barra de progreso de lectura para su sitio web de WordPress, primero debe instalar y activar el complemento . Puede hacerlo dirigiéndose a la página del complemento de su panel de administración de WordPress.

    Instalar y activar el complemento de la barra de progreso de lectura

    Una vez que el complemento se haya instalado y activado, querrá encontrar el camino a la página de configuración principal. Para llegar allí, haga clic en Configuración > Barra de progreso de lectura.

    Haga clic en configuración y luego haga clic en la barra de progreso de lectura

    Esto lo llevará directamente a la página de configuración principal del complemento. Desde aquí, podemos pasar juntos por el proceso de configuración.

    Configurar los ajustes de la barra de progreso de lectura

    Ahora que ha llegado a la página de configuración para el complemento de la barra de progreso de lectura, es hora de configurarlo como desea que se vea y se sienta en su sitio web.

    La configuración es rápida y fácil, ya que no hay muchas opciones por las que pasar. Le dan lo suficiente para que se vea genial en su sitio web.

    El primer conjunto de opciones en la parte superior incluye:

    • Altura de la barra de progreso
    • Color de primer plano
    • Color de fondo
    • Posición de la barra de progreso
    • Elemento HTML (si es necesario)

    Configuración de la barra de progreso de lectura

    Continúe y complételos como mejor le parezca para su sitio web.

    Ahora desplácese hacia abajo en la página un poco. Verá dos secciones finales. En el primero, completará las casillas de verificación donde desea que se aplique la plantilla para la barra de progreso de lectura. Seleccione todo lo que le importa.

    Luego continúe y seleccione todos los tipos de publicaciones en las que desea que se muestre y muestre la barra. Una vez más, hay varias opciones disponibles. Lo que sea que quieras verificar, adelante, hazlo.

    Más opciones de complementos

    Ahora haga clic en el botón "Guardar cambios" en la parte inferior de su página. ¡Eso es todo! Ha agregado con éxito una barra de progreso de lectura a su sitio web de WordPress.

    Ver la barra de progreso en la parte delantera

    Ahora que tiene todas sus configuraciones en su lugar, es hora de ver su barra de progreso de lectura. Para hacer esto, puede ir a cualquier publicación o página en la que configuró que se muestre en la configuración anterior.

    Para el siguiente ejemplo, configuré mi altura en 7 px e hicimos una barra de progreso amarilla con un color rojo para mostrar cuánto de la publicación has visto en un momento dado. También elegí mostrar la barra de progreso en la parte superior de la página.

    barra de progreso amarilla

    Ahora, a medida que nos desplazamos hacia abajo en la publicación, puede ver que el color rojo en la barra comienza a mostrarse cada vez más. Esto representa qué tan lejos hemos llegado dentro de la publicación.

    barra de progreso roja

    ¡Eso es todo! En este punto, la barra de progreso de lectura que creó debería ser completamente funcional y mostrarse en cada parte del sitio que configuró en los pasos de configuración.

    Soluciones alternativas de complementos

    Si desea algo un poco más robusto que el complemento Reading Progressbar, entonces hay un par de soluciones diferentes que puede consultar. Ambos son complementos y fáciles de instalar y configurar.

    Utilícelos como una alternativa al que se muestra en este tutorial . Podrían ofrecer algo más de lo que deseas. También pueden tener más opciones disponibles.

    De cualquier manera, logran lo mismo. Aquí hay un par de complementos de la barra de progreso de WordPress para considerar si es necesario.

    Barra de progreso de WP

    Barra de progreso de WP

    La barra de progreso de WP es un complemento muy liviano y fácil de usar que le permite mostrar una barra de progreso en publicaciones y páginas. El complemento es totalmente personalizable y se mostrará perfectamente en cualquier dispositivo. Esto lo hace compatible con dispositivos móviles y receptivo. Definitivamente vale la pena echarle un vistazo a este como alternativa.

    Barra de progreso y barra de habilidades

    Barra de progreso y barra de habilidades

    El complemento Barra de progreso y barra de habilidades le permite agregar barras de progreso y barras de habilidades a cualquier publicación o página que desee dentro de su sitio web de WordPress. Este también le permite agregar múltiples colores y estilos de sus barras de progreso. Es una versión más compleja de la barra de progreso y le permitirá más funcionalidad si es necesario. Pruebe este si está buscando un complemento de barra de progreso que sea más complejo.

    Pensamientos finales

    Una barra de progreso de lectura en WordPress le dará a su sitio web una apariencia única y agregará algo que no tienen muchos otros sitios. Además, la barra también proporcionará a los usuarios de su sitio una herramienta que les permite navegar y comprender qué tan lejos están de un artículo.

    Puede utilizar los conocimientos de programación y crear una barra de progreso en WordPress utilizando su propio código. Sin embargo, si está buscando una manera mucho más fácil de completar esta tarea, entonces Reading Progressbar es definitivamente el camino a seguir. Le brindará estilo y funcionalidad con solo unos pocos clics de instalación y configuración.

    ¿Alguna vez ha usado este complemento para crear una barra de progreso de lectura y mostrarla en su sitio web? ¿Ha probado otra opción de complemento o ha hecho esto con su propio código?










  • Subir