Dit artikel beschrijft de procedure voor het toevoegen van een voortgangsbalk in WordPress met behulp van het volgende overzicht:
- Wat is een voortgangsbalk in WP?
- Hoe voortgangsbalken toevoegen aan WordPress-websites met behulp van code?
- Hoe voortgangsbalken toevoegen aan WordPress-websites met behulp van plug-ins?
Wat is een voortgangsbalk in WordPress?
Een voortgangsbalk toont de voortgang van iets in procenten met behulp van een horizontale balk. Het is een grafische weergave van bepaalde gegevens die de gebruiker in één oogopslag informatie kunnen verschaffen. Het gebruik van voortgangsbalken in uw WordPress-berichten om gegevens of statistieken weer te geven, kan de aantrekkingskracht van de website en de betrokkenheid van de gebruikers helpen verbeteren.
Hoe voortgangsbalken toevoegen aan WordPress-websites met behulp van code?
Om zonder plug-in een voortgangsbalk aan WordPress toe te voegen, moet de gebruiker de aangepaste HTML en CSS in een bericht gebruiken. Om dat te doen, volgt u de onderstaande stappen:
Stap 1: Log in op het Dashboard
Open de browser en ga naar de “ http://localhost/<Website-Name>/wp-login.php ' koppeling. Geef de beheerdersreferenties op en klik op de “ Log in ' knop:
Stap 2: Maak een nieuw bericht
Ga naar ' Berichten > Nieuw toevoegen ” uit het zijmenu van het beheerdersdashboard:
Stap 3: Voeg aangepaste HTML-code toe
Geef in het bericht de titel en aanvullende inhoud op. Klik vervolgens op de “ + '-pictogram en zoek naar het ' Aangepaste HTML ” blok:
Plak de onderstaande code in het toegevoegde HTML-blok. Verander de ' breedte ' binnen in de ' ”-tags voor het gewenste percentage van de voortgangsbalk. Wijzig op dezelfde manier de “ progressie-tekst ' overeenkomstig:
< div klas = 'aangepaste voortgangsbalk' >< span stijl = 'breedte: 80%' >< / span >
< div klas = 'voortgangstekst' > 80% < / div >
< / div >
Druk daarna op de “ Publiceren '-knop om het bericht naar de website te uploaden:
Stap 4: Voeg aangepaste CSS toe
Zodra het bericht is gepubliceerd, klikt u op de “ Bekijk bericht ' knop:
Klik in het voorbeeld op de “ Aanpassen ' om de stijl voor de voortgangsbalk toe te voegen:
Er verschijnt een editormenu aan de linkerkant van het scherm. Scroll hier naar beneden en klik op de “ Extra CSS ' sectie:
Plak de volgende CSS-code in het vak om de voortgangsbalk vorm te geven:
.aangepaste voortgangsbalk {achtergrond- kleur : #1a1a1a;
hoogte : 30px;
opvulling: 5px;
breedte : 500px;
marge: 5px 0 ;
grensradius: 5px;
doosschaduw: 0 1px 5px #000 inzet, 0 1px 0 # 444 ;
}
.aangepaste voortgangsbalk span {
achtergrond- kleur : #0000FF;
display: inline-blok;
zweven: links;
hoogte : 100 %;
randradius: 3px;
doosschaduw: 0 1px 0 RGBA ( 255 , 255 , 255 , .5 ) inzet;
overgang: breedte .4s gemak-in-uit;
}
.progressie- tekst {
tekst- uitlijnen : rechts;
kleur : wit;
marge: 0px;
}
Stap 5: Publiceer het bericht
Klik ten slotte op de “ Publiceren ' post om deze wijzigingen op te slaan:
Bij het herladen van de pagina kan de gebruiker zien dat de voortgangsbalk in het bericht zichtbaar is:
Hoe voortgangsbalken toevoegen aan WordPress-websites met behulp van plug-ins?
Deze demonstratie gebruikt de plug-in “Ultimate Blocks” om een voortgangsbalk toe te voegen aan een WordPress-website. Om hetzelfde te doen, volgt u de onderstaande stappen.
Stap 1: Voeg een nieuwe plug-in toe
Zodra de gebruiker is ingelogd op het dashboard, gaat u naar de “ Plug-ins > Nieuw toevoegen 'optie in de menubalk aan de zijkant:
Stap 2: Installeer de Ultimate Blocks-plug-in
Zoek naar de ultieme blokken en klik op de “ Binnenkomen ' sleutel. Klik vervolgens op het onderstaande punt “ Installeer nu ' knop:
Stap 3: Activeer ultieme blokken
Zodra de plug-in is geïnstalleerd, klikt u op de “ Activeren ”-knop om de voortgangsbalk in WordPress te gebruiken:
Stap 4: Maak een nieuw bericht
Om een voortgangsbalk aan een WordPress-bericht toe te voegen, ga naar de “ Berichten > Nieuw toevoegen ' optie uit het zijmenu:
Stap 5: Voeg het voortgangsbalkblok toe
Geef een titel en inhoud aan het bericht. Druk vervolgens op de “ + '-pictogram om een nieuw blok toe te voegen. Zoek in het menu naar de “ Voortgangsbalk ' en selecteer het blok:
Stap 6: Stel het percentage voor de balk in
Om een percentage voor de voortgangsbalk in te stellen, gebruikt u de blauwe schuifregelaar of voert u het percentage in het onderstaande gemarkeerde vak in:
Stap 7: Publiceer het bericht
Nadat het bericht is voltooid, klikt u op de “ Publiceren '-knop om het bericht naar de website te uploaden:
Stap 8: Bekijk het bericht
Nadat je het bericht hebt gepubliceerd, klik je op de knop ‘Bekijk bericht’ om een voorbeeld van het bericht op de website te bekijken:
In de onderstaande uitvoer is te zien dat de voortgangsbalk aan het bericht is toegevoegd:
Dat gaat allemaal over het toevoegen van een voortgangsbalk in WordPress.
Conclusie
Om een voortgangsbalk aan een WordPress-website toe te voegen, ga naar de “ Plug-ins > Nieuw toevoegen 'optie in het zijmenu. Zoek en installeer de “ Ultieme blokken ' inpluggen. Na de installatie activeert u deze. Ga dan naar ' Berichten > Nieuw toevoegen ' en geef de titel en inhoud van het bericht op. Klik vervolgens op de “ + '-pictogram en zoek naar de ' Voortgangsbalk ” blok. Stel het voortgangspercentage in met de schuifregelaar of door het getal in te voeren. Dit artikel heeft de procedure geïllustreerd voor het toevoegen van een voortgangsbalk in WordPress met en zonder de plug-in.