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

¿Alguna vez has querido agregar una barra de progreso en tu sitio de WordPress? Puede usarlo para mostrar el progreso en una campaña de recaudación de fondos, hitos para el 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.

Video Tutorial

Si no te gusta el video o necesitas más instrucciones, continúa leyendo.

Lo primero que debes hacer es instalar y activar el complemento Barra de progreso. Funciona fuera de la caja, y no hay configuraciones para configurar.

Simplemente edite una publicación o página donde desee 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 progreso del 50% usando el color azul predeterminado.

Bastante facil derecha?

También puede personalizar el código abreviado para cambiar los colores, agregar texto a la barra de progreso, mostrar la moneda en lugar del 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, puedes ver que nuestra barra de progreso en realidad no menciona de qué se trata. Puede cambiar eso agregando un texto útil dentro de la barra de progreso usando el atributo de texto en el código corto.

[wppb progress = 75 text = "Progress hasta ahora"]

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

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 lo está utilizando para una campaña de recaudación de fondos.

Aquí es cómo usaría el código abreviado para mostrar la moneda e indicar tanto el monto objetivo como el monto cobrado hasta el momento.

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

Se verá así en tu sitio web:

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

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

Cambio de colores de la barra de progreso y apariencia

El complemento Barra de progreso viene con algunos colores y opciones de apariencia que puedes usar. Las opciones de color incorporadas son azul, rojo, amarillo, naranja y verde. Sin embargo, puede utilizar cualquier color que desee. Puedes añadir una barra de progreso plana o animada..

Aquí es cómo usará el código abreviado para usar cada opción:

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

Barra de progreso animada franja de caramelos en rojo
[wppb progress = 50 option = "animated-candystripe red"]

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

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

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

Una barra de progreso de rayas planas en marrón.
[wppb progress = 50 option = "flat candystripe" color = brown]

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

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] Recaudado: $ 2500 Meta: $ 4500 Done aquí 

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

Esperamos que este artículo te haya ayudado a agregar hermosas barras de progreso en tus publicaciones o páginas de WordPress. También puede querer ver nuestra guía sobre Cómo agregar un botón Donar de PayPal en WordPress.

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..