Cómo añadir una barra de progreso en sus mensajes de WordPress

¿Alguna vez has querido añadir una barra de progreso en tu sitio de WordPress? Puede utilizarlo para mostrar el progreso de 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 añadir una barra de progreso en un post de WordPress. En este artículo, te mostraremos cómo añadir una barra de progreso en tus posts, páginas y widgets de WordPress.

Video Tutorial

Suscribirse a AprenderWP

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

Lo primero que tiene que hacer es instalar y activar el plugin de la barra de progreso. Funciona desde el primer momento, y no hay ajustes que pueda configurar.

Simplemente edita una entrada o página en la que quieras mostrar la barra de progreso y añade el código abreviado en este formato:

wppb progress=50]

Esto mostrará una barra de progreso animada para indicar un 50% de progreso usando el color azul por defecto.

Bastante fácil, ¿verdad?

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

Adición de texto a la barra de progreso

En el ejemplo anterior, puede ver que nuestra barra de progreso no menciona de qué se trata. Puede cambiar esto añadiendo texto útil dentro de la barra de progreso utilizando 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, 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 divisa si lo utiliza para una campaña de recaudación de fondos.

A continuación se explica cómo utilizar el código abreviado para visualizar la moneda e indicar tanto el importe teórico como el importe cobrado hasta el momento.

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

Se verá así en su 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 los colores y apariencia de la barra de progreso

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

A continuación se explica cómo utilizar el código abreviado para utilizar cada opción:

Barra de progreso naranja

wppb progress=50 option=orange]

Barra de progreso animada en rojo

wppb progress=50 option="animated-candystripe red"]

Barra de progreso de franjas de caramelo en color verde

wppb progress=50 option="candystripe green"]

Una barra de progreso azul predeterminada 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 plana con franjas 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:

Adición de la barra de progreso en los widgets de WordPress Sidebar

Primero necesitarás habilitar los atajos para los widgets de texto en WordPress. Puede hacerlo añadiendo la siguiente línea de código en el archivo functions.php de su tema o en un plugin específico del sitio.

1add_filter(widget_text,do_shortcode);

Ahora puede visitar la página Apariencia " Widgets y añadir un widget de texto a su barra lateral. Utilice el código de acceso directo de la barra de progreso en el widget de texto de la misma manera que lo utilizaría en un mensaje o página. Aquí hay un código que usamos en nuestro sitio de demostración:

123456[wppb progress="$2500/$4500 "option="animated-candystripe red "fullwidth=true] Recaudado: $2500 Meta: $4500 "example.com">Dona aquí

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

Esperamos que este artículo le haya ayudado a añadir una barra de progreso hermosa en sus posts o páginas de WordPress. También puede consultar nuestra guía sobre cómo añadir un botón Donar de PayPal en WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir