Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 901.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62.

Você já quis adicionar uma barra de progresso ao seu blog WordPress?

Você pode usá-lo para mostrar o progresso de uma campanha de angariação de fundos ou para um projeto específico em que você está trabalhando.

Recentemente, um assinante estava tentando descobrir qual método ele poderia usar para adicionar rapidamente uma barra de progresso ao seu blog WordPress.

Neste tutorial, mostrarei como adicionar uma barra de progresso ao seu blog WordPress com facilidade.

A primeira coisa a fazer é instalar e ativar o plugin « Barra de progresso »Disponível no WordPress.org, este plugin funciona sem configuração.

plugin de barra de progresso

Tudo o que você precisa fazer é adicionar o código de acesso a uma página ou artigo (e até a uma barra lateral) para ver como funciona. O código de acesso a adicionar é o seguinte:

« [Wppb progresso = 50] »

Isto irá mostrar uma barra de progresso

como add-a-bar-in-progress

Muito simples, não é?

Crie facilmente seu site com Elementor

Elementor permite que você crie Facilmente e Gratuito qualquer site ou blog com um visual profissional. Pare de pagar muito por um site que você pode fazer sozinho.

Você também pode personalizar esse código adicionando cores, texto na barra de progresso, exibindo uma moeda em vez de uma porcentagem e muito mais. Vamos tentar juntos explorar as diferentes possibilidades

Como adicionar um texto na barra de progresso

No código curto anterior, postamos uma barra de progresso sem menção. Para modificar isso com um texto que possa ser indicativo para os usuários, adicionaremos o parâmetro "text" ao código de acesso da seguinte maneira:

"[Wppb progress = 76 text =" Progresso do trabalho "]"

Para este resultado

evolution-de-obra

Como adicionar um lema na barra de progresso

Por padrão, a barra de progresso mostra uma alteração percentual, mas você pode alterá-lo por uma moeda de sua escolha, o que pode ser muito útil se você quiser mostrar a evolução de um angariador de fundos.

"[Wppb progress =" 50 € / 400 'text = '50 € / 400 inquéritos "]"

Para um resultado semelhante a este

dique-de-fonds

Como alterar a cor e a aparência da barra de evolução

Este plug-in oferece algumas cores que você pode usar para personalizar a barra de progresso. As cores padrão são "vermelho", "azul", "laranja" e "verde"; no entanto, você pode usar a cor desejada. Também é possível adicionar barras de progresso animadas.

Veja como você pode usar o shortcode para cada opção:

barra de progresso de laranja

[Wppb progress = opção 50 = orange]

Barra de progresso vermelha animada com listras

[wppb progress = 50 option = "animado-candystrip red"]

barra de progresso verde com listras

[wppb progress = 50 option = "candystrip green"]

barra de progresso com listras planas

[wppb progress = 50 option = "flat candystrip" color = brown]

Como adicionar uma barra de progresso em uma barra lateral

Nós vamos usar o widget " textos Para chegar lá. Tudo que você precisa fazer é usar o seguinte filtro "widget_text" dessa maneira:

"Add_filter (" widget_text "," do_shortcode "); "

Adicione esta linha ao arquivo “functions.php” do seu tema. Em seguida, visite o local "Aparência> Widgets" e adicione o widget "texto" em uma das áreas de widget do seu tema. Você pode até personalizá-lo ao seu gosto, desta forma:

"[Wppb progress =" 2500 € / 4500 € "option =" cartoon-candystripe red "fullwidth = true]"

Níveis: 2500 €
Objetivo: 4500 €

Faça uma doação »

Para um resultado semelhante a este:

meta-widget

Isso é tudo para este tutorial, espero que seja de grande utilidade, não hesite em compartilhá-lo com seus amigos ou em suas redes sociais favoritas.

4 ações
ação2
chilrear
Enregistrer2