¿Alguna vez ha querido agregar una barra de progreso a su sitio de WordPress? Puede usarlo para mostrar el progreso de su recaudación de fondos, hitos para proyectos específicos en los que está trabajando y más. Recientemente, uno de nuestros lectores les preguntó cómo agregar una barra de progreso a una publicación de WordPress. En este artículo, le mostraremos cómo agregar barras de progreso a sus publicaciones, páginas y widgets de WordPress.

videotutorial

Suscríbete a WPBeginner

Si no te gusta el video o necesitas más explicaciones, sigue leyendo.

Lo primero que debe hacer es instalar y activar el complemento de la barra de progreso. Funciona de forma inmediata y no es necesario configurar ningún ajuste.

Simplemente edite la publicación o la página donde desea mostrar la barra de progreso y agregue el código abreviado en este formato:

[wppb progress=50]

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

Shortcode predeterminado para mostrar la barra de progreso

fácil verdad?

También puede personalizar códigos abreviados para cambiar colores, agregar texto a las barras de progreso, mostrar moneda en lugar de porcentajes 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 cambiarlo agregando texto útil a la barra de progreso usando el atributo de texto en el código abreviado.

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

Esto mostrará su texto en la parte superior de la barra de progreso de esta manera:

Barra de progreso en WordPress con texto

Mostrar moneda en lugar de porcentaje en la barra de progreso

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

Así es como puede usar un código abreviado para mostrar la moneda e indicar la cantidad objetivo y la cantidad recaudada hasta el momento.

[wppb progress="$250/1000" text="$250/$1000 Raised"]

Se verá así en su sitio web:

Mostrar barra de progreso con moneda

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

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

Cambiar el color y la apariencia de la barra de progreso

El complemento de la barra de progreso viene con algunas opciones de color y apariencia que puede usar. Las opciones de color integradas son azul, rojo, amarillo, naranja y verde. Sin embargo, puedes usar cualquier color que quieras. Puede agregar barras de progreso planas o animadas.

Así es como usará códigos cortos para usar cada opción:

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

Barra de progreso a rayas de caramelo rojo animado
[wppb progress=50 option="animated-candystripe red"]

barra de progreso de rayas de caramelo verde
[wppb progress=50 option="candystripe green"]

Barra de progreso azul predeterminada con rayas de caramelo
[wppb progress=50 option=candystripe]

barra de progreso plana púrpura
[wppb progress=50 option=flat color=purple]

Barra de progreso de rayas de caramelo plano marrón
[wppb progress=50 option="flat candystripe" color=brown]

Así es como se ven estas barras de progreso en su sitio web:

Usa colores y cambia la apariencia de la barra de progreso

Agregue una barra de progreso a un widget de barra lateral de WordPress

Primero, debe habilitar códigos cortos para widgets de texto en WordPress. Puede hacerlo agregando las siguientes líneas de código al archivo functions.php de su tema o un complemento específico del sitio.

add_filter('widget_text','do_shortcode');

ahora puedes acceder 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 un widget de texto tal como lo usaría en una publicación o página. Aquí está el código que usamos en el sitio de demostración:

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

Raised: $2500
Goal: $4500

<a href="example.com">Donate here</a>

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

Agregue una barra de progreso a un widget de texto de WordPress

Esperamos que este artículo lo haya ayudado a agregar hermosas barras de progreso a sus publicaciones o páginas de WordPress. También puede consultar nuestra guía sobre cómo agregar un botón de donación de PayPal en WordPress.

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

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.