Cet article fournira la procédure pour ajouter une barre de progression dans WordPress en utilisant le schéma suivant :
- Qu’est-ce qu’une barre de progression dans WP ?
- Comment ajouter des barres de progression aux sites Web WordPress à l'aide de code ?
- Comment ajouter des barres de progression aux sites Web WordPress à l’aide de plugins ?
Qu'est-ce qu'une barre de progression dans WordPress ?
Une barre de progression montre la progression de quelque chose en pourcentage à l'aide d'une barre horizontale. Il s'agit d'une représentation graphique de certaines données qui peut fournir des informations à l'utilisateur d'un simple coup d'œil. L’utilisation de barres de progression dans vos publications WordPress pour représenter des données ou des statistiques peut contribuer à améliorer l’attrait du site Web et l’engagement des utilisateurs.
Comment ajouter des barres de progression aux sites Web WordPress à l'aide de code ?
Pour ajouter une barre de progression à WordPress sans plugin, l'utilisateur devra utiliser le HTML et le CSS personnalisés dans une publication. Pour ce faire, suivez les étapes ci-dessous :
Étape 1 : Connectez-vous au tableau de bord
Ouvrez le navigateur et accédez au « http://localhost/<Website-Name>/wp-login.php ' lien. Fournissez les informations d’identification de l’administrateur et appuyez sur le bouton « Se connecter ' bouton:
Étape 2 : Créer une nouvelle publication
Aller à ' Messages > Ajouter un nouveau » dans le menu latéral du tableau de bord d'administration :
Étape 3 : ajouter du code HTML personnalisé
Dans la publication, fournissez le titre et le contenu supplémentaire. Ensuite, cliquez sur le « + ' et recherchez le ' HTML personnalisé ' bloc:
Dans le bloc HTML ajouté, collez le code fourni ci-dessous. Changer la ' largeur ' à l'intérieur de '
< portée style = 'largeur : 80 %' >< / portée >
< div classe = 'texte de progression' > 80% < / div >
< / div >
Après cela, appuyez sur le bouton « Publier Bouton ' pour télécharger la publication sur le site :
Étape 4 : ajouter du CSS personnalisé
Une fois l’article publié, cliquez sur le « Voir l'article ' bouton:
Dans l’aperçu, cliquez sur le « Personnaliser ' pour ajouter le style de la barre de progression :
Un menu d'édition apparaîtra sur le côté gauche de l'écran. Ici, faites défiler vers le bas et cliquez sur le « CSS supplémentaire ' section:
Collez le code CSS suivant dans la zone pour styliser la barre de progression :
.barre de progression personnalisée {arrière-plan- couleur : #1a1a1a;
hauteur : 30px;
remplissage : 5 px ;
largeur : 500px;
marge : 5px 0 ;
rayon de bordure : 5 px ;
boîte ombre: 0 1px 5px #000 encart, 0 1px 0 # 444 ;
}
.barre de progression personnalisée portée {
arrière-plan- couleur : #0000FF;
affichage : bloc en ligne ;
flotteur : gauche ;
hauteur : 100 % ;
rayon de bordure : 3 px ;
boîte ombre: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) encart ;
transition: largeur .4s facilité d'entrée et de sortie ;
}
.progression- texte {
texte- aligner : droite;
couleur : blanc;
marge : 0px ;
}
Étape 5 : publier la publication
Enfin, cliquez sur le « Publier » post pour enregistrer ces modifications :
En rechargeant la page, l'utilisateur peut voir que la barre de progression est visible dans la publication :
Comment ajouter des barres de progression aux sites Web WordPress à l’aide de plugins ?
Cette démonstration utilisera le plugin « Ultimate Blocks » pour ajouter une barre de progression à un site WordPress. Pour faire de même, suivez les étapes ci-dessous.
Étape 1 : Ajouter un nouveau plugin
Une fois l’utilisateur connecté au tableau de bord, rendez-vous dans la rubrique « Plugins > Ajouter un nouveau ' dans la barre de menu latérale :
Étape 2 : Installer le plugin Ultimate Blocks
Recherchez les blocs ultimes et appuyez sur le bouton « Entrer ' clé. Ensuite, cliquez sur le point ci-dessous « Installer maintenant ' bouton:
Étape 3 : Activer les blocs ultimes
Une fois le plugin installé, cliquez sur le bouton « Activer Bouton » pour utiliser la barre de progression dans WordPress :
Étape 4 : Créer une nouvelle publication
Pour ajouter une barre de progression à une publication WordPress, accédez à la section « Messages > Ajouter un nouveau ' dans le menu latéral :
Étape 5 : ajouter le bloc de barre de progression
Fournissez un titre et un contenu à la publication. Ensuite, appuyez sur le bouton « + ' Icône pour ajouter un nouveau bloc. Dans le menu, recherchez le « Barre de progression » et sélectionnez le bloc :
Étape 6 : Définir le pourcentage de la barre
Pour définir un pourcentage pour la barre de progression, utilisez le curseur bleu ou entrez le pourcentage dans la case en surbrillance ci-dessous :
Étape 7 : publier la publication
Une fois le message terminé, cliquez sur le bouton « Publier Bouton ' pour télécharger la publication sur le site :
Étape 8 : Afficher la publication
Après avoir publié l'article, cliquez sur le bouton « Afficher l'article » pour voir l'aperçu de l'article sur le site :
On peut voir dans le résultat ci-dessous que la barre de progression est ajoutée à la publication :
Il s’agit d’ajouter une barre de progression dans WordPress.
Conclusion
Pour ajouter une barre de progression à un site WordPress, rendez-vous dans la rubrique « Plugins > Ajouter un nouveau ' dans le menu latéral. Recherchez et installez le ' Blocs ultimes ' brancher. Après l'installation, activez-le. Ensuite aller à ' Messages > Ajouter un nouveau » et fournissez le titre et le contenu du message. Ensuite, cliquez sur le « + ' et recherchez le ' Barre de progression ' bloc. Définissez le pourcentage de progression à l'aide du curseur ou en entrant le nombre. Cet article a illustré la procédure pour ajouter une barre de progression dans WordPress avec et sans le plugin.