Cómo agregar una barra de progreso en sus publicaciones de WordPress

¿Alguna vez ha querido agregar una barra de progreso en su sitio de WordPress? Puede usarlo para mostrar el progreso en una campaña de recaudación de fondos, hitos para un proyecto específico en el que está trabajando, etc. Recientemente, uno de nuestros lectores preguntó cómo pueden agregar una barra de progreso en una publicación de WordPress. En este artículo, le mostraremos cómo agregar una barra de progreso en sus publicaciones, páginas y widgets de WordPress.

Tutorial en video

Suscríbete a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

Lo primero que debe hacer es instalar y activar el complemento de la barra de progreso. Funciona de inmediato y no hay opciones para configurar.

Simplemente edite una publicación o página en la que desee mostrar la barra de progreso y agregue el código corto en este formato:

[wppb progress=50]

Esto mostrará una barra de progreso animada para indicar el 50% de progreso utilizando el color azul predeterminado.

Código abreviado predeterminado para mostrar la barra de progreso

Bastante fácil, ¿verdad?

También puede personalizar el código abreviado para cambiar colores, agregar texto a la barra de progreso, mostrar moneda en lugar de porcentaje y más. Echemos un vistazo a algunas de estas opciones de personalización.

Agregar texto a la barra de progreso

En el ejemplo anterior, puede ver que nuestra barra de progreso en realidad no menciona de qué se trata. Puede cambiar eso agregando texto útil dentro de la barra de progreso usando el atributo de texto en el código corto.

[wppb progress=75 text=”Progress so far”]

Esto mostrará su texto en la parte superior de la barra de progreso y se verá así:

Barra de progreso en WordPress con texto encima

Mostrar moneda en lugar de porcentaje en la barra de progreso

De forma predeterminada, la barra de progreso muestra el porcentaje de finalización, pero puede cambiarlo a una moneda si la está utilizando para una campaña de recaudación de fondos.

Así es como usaría el código corto para mostrar la moneda e indicar tanto la cantidad objetivo como la cantidad recolectada hasta el momento.

[wppb progress=”$250/1000″ text=”$250/$1000 Raised”]

Se verá así en su sitio web:

Mostrando una barra de progreso con moneda

Si desea mostrar el texto fuera de la barra de progreso, puede modificar el código corto de esta manera:

[wppb progress=”$250/1000″ text=”$250/$1000 Raised” location=”after”]

Cambio de apariencia y colores de la barra de progreso

El complemento de la barra de progreso viene con algunos colores y opciones de apariencia que puede usar. Las opciones de color integradas son azul, rojo, amarillo, naranja y verde. Sin embargo, puede utilizar el color que desee. Puede agregar una barra de progreso plana o animada.

Así es como usará el código corto para usar cada opción:

Barra de progreso naranja
[wppb progress=50 option=orange]

Barra de progreso animada de rayas de caramelo en rojo
[wppb progress=50 option=”animated-candystripe red”]

Barra de progreso de rayas de caramelo en color verde
[wppb progress=50 option=”candystripe green”]

Una barra de progreso azul predeterminada con una franja de caramelo
[wppb progress=50 option=candystripe]

Una barra de progreso plana en color morado.
[wppb progress=50 option=flat color=purple]

Una barra de progreso plana con rayas de caramelo en marrón
[wppb progress=50 option=”flat candystripe” color=brown]

Así es como se verán estas barras de progreso en su sitio:

Usar colores y cambiar la apariencia de la barra de progreso

Agregar barra de progreso en los widgets de la barra lateral de WordPress

Primero deberá habilitar códigos cortos para widgets de texto en WordPress. Puede hacer esto agregando la siguiente línea de código en el archivo functions.php de su tema o en un complemento específico del sitio.

add_filter('widget_text','do_shortcode');

Ahora puedes visitar Apariencia »Widgets página y agregue un widget de texto a su barra lateral. Use el código abreviado de la barra de progreso en el widget de texto tal como lo usaría en una publicación o página. Aquí hay un código que usamos en nuestro sitio de demostración:

[wppb progress="$2500/$4500" option="animated-candystripe red" fullwidth=true]

Raised: $2500
Goal: $4500

Donate here

Así es como se veía en nuestro sitio de prueba:

Agregar barra de progreso en un widget de texto de WordPress

Esperamos que este artículo le haya ayudado a agregar una hermosa barra de progreso en sus publicaciones o páginas de WordPress. Es posible que también desee ver nuestra guía sobre cómo agregar un botón Donar de PayPal en WordPress.

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