Este artigo fornecerá o procedimento para adicionar uma barra de progresso no WordPress usando o seguinte esquema:
- O que é uma barra de progresso no WP?
- Como adicionar barras de progresso a sites WordPress usando código?
- Como adicionar barras de progresso a sites WordPress usando plug-ins?
O que é uma barra de progresso no WordPress?
Uma barra de progresso mostra o progresso de algo em porcentagem usando uma barra horizontal. É uma representação gráfica de alguns dados que podem fornecer informações ao usuário com apenas um olhar. Usar barras de progresso em suas postagens do WordPress para representar dados ou estatísticas pode ajudar a melhorar o apelo do site e o envolvimento dos usuários.
Como adicionar barras de progresso a sites WordPress usando código?
Para adicionar uma barra de progresso ao WordPress sem plugin, o usuário terá que usar HTML e CSS customizados em uma postagem. Para fazer isso, siga as etapas fornecidas abaixo:
Etapa 1: faça login no painel
Abra o navegador e vá para “ http://localhost/<Website-Name>/wp-login.php ' link. Forneça as credenciais de administrador e clique em “ Conecte-se ' botão:
Etapa 2: crie uma nova postagem
Vá para ' Postagens > Adicionar novo ”No menu lateral do painel de administração:
Etapa 3: adicionar código HTML personalizado
Na postagem, forneça o título e o conteúdo adicional. Em seguida, clique no botão “ + ”E pesquise o“ HTML personalizado ' bloquear:
No bloco HTML adicionado, cole o código fornecido abaixo. Mudar o ' largura ' dentro de ' ”Tags para a porcentagem desejada da barra de progresso. Da mesma forma, altere o “ texto de progressão ' de acordo:
< divisão aula = 'barra de progresso personalizada' >< período estilo = 'largura: 80%' >< / período >
< divisão aula = 'texto de progressão' > 80% < / divisão >
< / divisão >
Depois disso, aperte o botão “ Publicar ”Para enviar a postagem para o site:
Etapa 4: adicionar CSS personalizado
Assim que a postagem for publicada, clique no botão “ Ver postagem ' botão:
Na visualização, clique no botão “ Customizar ”Para adicionar o estilo à barra de progresso:
Um menu do editor aparecerá no lado esquerdo da tela. Aqui, role para baixo e clique no botão “ CSS adicional ' seção:
Cole o seguinte código CSS na caixa para estilizar a barra de progresso:
.barra de progresso personalizada {fundo- cor : #1a1a1a;
altura : 30px;
preenchimento: 5px;
largura : 500 pixels;
margem: 5px 0 ;
raio da borda: 5px;
Sombra da caixa: 0 1px 5px #000 inserido, 0 1px 0 # 444 ;
}
.barra de progresso personalizada período {
fundo- cor : #0000FF;
display: bloco embutido;
flutuar: esquerda;
altura : 100 %;
raio da borda: 3px;
Sombra da caixa: 0 1px 0 RGB ( 255 , 255 , 255 , 0,5 ) inserir;
transição: largura .4s facilidade de entrada;
}
.progressão- texto {
texto- alinhar : certo;
cor : branco;
margem: 0px;
}
Etapa 5: publique a postagem
Por fim, clique no botão “ Publicar ”Postagem para salvar essas alterações:
Ao recarregar a página, o usuário poderá ver que a barra de progresso pode ser vista na postagem:
Como adicionar barras de progresso a sites WordPress usando plug-ins?
Esta demonstração usará o plugin “Ultimate Blocks” para adicionar uma barra de progresso a um site WordPress. Para fazer o mesmo, siga as etapas fornecidas abaixo.
Etapa 1: adicionar um novo plug-in
Assim que o usuário estiver logado no painel, vá para “ Plug-ins > Adicionar novo ”Opção na barra de menu lateral:
Etapa 2: instalar o plug-in Ultimate Blocks
Procure os Ultimate Blocks e clique no botão “ Digitar ' chave. Em seguida, clique no botão abaixo apontado “ instale agora ' botão:
Etapa 3: ativar blocos finais
Assim que o plugin estiver instalado, clique no botão “ Ativar ”Para usar a barra de progresso no WordPress:
Etapa 4: crie uma nova postagem
Para adicionar uma barra de progresso a uma postagem do WordPress, vá para “ Postagens > Adicionar novo ”Opção do menu lateral:
Etapa 5: adicione o bloco da barra de progresso
Forneça um título e conteúdo para a postagem. Em seguida, pressione o botão “ + ”Ícone para adicionar um novo bloco. No menu, pesquise “ Barra de progresso ”E selecione o bloco:
Etapa 6: definir a porcentagem da barra
Para definir uma porcentagem para a barra de progresso, use o controle deslizante azul ou insira a porcentagem na caixa de destaque abaixo:
Etapa 7: publique a postagem
Após a conclusão da postagem, clique no botão “ Publicar ”Para enviar a postagem para o site:
Etapa 8: visualizar a postagem
Após publicar o post, clique no botão “Ver Post” para ver a prévia do post no site:
Pode-se ver na saída abaixo que a barra de progresso foi adicionada à postagem:
Trata-se de adicionar uma barra de progresso no WordPress.
Conclusão
Para adicionar uma barra de progresso a um site WordPress, vá para “ Plug-ins > Adicionar novo ”Opção no menu lateral. Pesquise e instale o “ Blocos finais ' plugar. Após a instalação, ative-o. Então vá para ' Postagens > Adicionar novo ”E forneça o título e o conteúdo da postagem. Em seguida, clique no botão “ + ”E pesquise o“ Barra de progresso ' bloquear. Defina a porcentagem de progresso usando o controle deslizante ou digitando o número. Este artigo ilustrou o procedimento para adicionar uma barra de progresso no WordPress com e sem o plugin.