Den här artikeln kommer att ge proceduren för att lägga till en förloppsindikator i WordPress med hjälp av följande disposition:
- Vad är en framstegsindikator i WP?
- Hur lägger man till förloppsindikatorer på WordPress-webbplatser med kod?
- Hur lägger man till förloppsindikatorer på WordPress-webbplatser med plugins?
Vad är en framstegsindikator i WordPress?
En förloppsindikator visar förloppet för något i procent med hjälp av en horisontell stapel. Det är en grafisk representation av vissa data som kan ge information till användaren bara genom en enda blick. Att använda förloppsindikatorer i dina WordPress-inlägg för att representera data eller statistik kan bidra till att förbättra webbplatsens tilltalande och användarnas engagemang.
Hur lägger man till förloppsindikatorer på WordPress-webbplatser med kod?
För att lägga till en förloppsindikator till WordPress utan ett plugin måste användaren använda anpassad HTML och CSS i ett inlägg. För att göra det, följ stegen nedan:
Steg 1: Logga in på instrumentpanelen
Öppna webbläsaren och gå till ' http://localhost/<Website-Name>/wp-login.php ' länk. Ange administratörsuppgifterna och tryck på ' Logga in ' knapp:
Steg 2: Skapa ett nytt inlägg
Gå till ' Inlägg > Lägg till nytt ” från sidomenyn på administratörsinstrumentpanelen:
Steg 3: Lägg till anpassad HTML-kod
Ange titel och ytterligare innehåll i inlägget. Klicka sedan på ' + '-ikonen och sök efter ' Anpassad HTML ' block:
I det tillagda HTML-blocket klistrar du in koden nedan. Ändra ' bredd ' inuti ' ”-taggar för önskad procentandel av förloppsindikatorn. Ändra på samma sätt ' progressionstext ' i enlighet därmed:
< div klass = 'custom-progress-bar' >< spänna stil = 'bredd: 80%' >< / spänna >
< div klass = 'progressionstext' > 80 % < / div >
< / div >
Efter det, tryck på ' Publicera ”-knappen för att ladda upp inlägget till webbplatsen:
Steg 4: Lägg till anpassad CSS
När inlägget har publicerats klickar du på ' Visa inlägg ' knapp:
I förhandsgranskningen klickar du på ' Anpassa ”-knappen för att lägga till stilen för förloppsindikatorn:
En redigeringsmeny visas till vänster på skärmen. Här, scrolla ner och klicka på ' Ytterligare CSS ' sektion:
Klistra in följande CSS-kod i rutan för att utforma förloppsindikatorn:
.custom-progress-bar {bakgrund- Färg : #1a1a1a;
höjd : 30px;
stoppning: 5px;
bredd : 500px;
marginal: 5px 0 ;
border-radie: 5px;
box-skugga: 0 1px 5px #000 infälld, 0 1 px 0 # 444 ;
}
.custom-progress-bar spänna {
bakgrund- Färg : #0000FF;
display: inline-block;
flyta till vänster;
höjd : 100 %;
border-radie: 3px;
box-skugga: 0 1 px 0 rgba ( 255 , 255 , 255 , .5 ) infälld;
övergång: bredd .4s lätta-in-ut;
}
.progression- text {
text- justera : höger;
Färg : vit;
marginal: 0px;
}
Steg 5: Publicera inlägget
Klicka slutligen på ' Publicera ' posta för att spara dessa ändringar:
När sidan laddas om kan användaren se att förloppsindikatorn kan ses i inlägget:
Hur lägger man till förloppsindikatorer på WordPress-webbplatser med plugins?
Den här demonstrationen kommer att använda pluginet 'Ultimate Blocks' för att lägga till en förloppsindikator på en WordPress-webbplats. För att göra detsamma, följ stegen nedan.
Steg 1: Lägg till en ny plugin
När användaren är inloggad på instrumentpanelen, gå till ' Plugins > Lägg till nytt ' alternativ från sidomenyn:
Steg 2: Installera Ultimate Blocks Plugin
Sök efter de ultimata blocken och tryck på ' Stiga på ” nyckel. Klicka sedan på den nedan pekade ' Installera nu ' knapp:
Steg 3: Aktivera Ultimate Blocks
När plugin-programmet är installerat klickar du på ' Aktivera ”-knappen för att använda förloppsindikatorn i WordPress:
Steg 4: Skapa ett nytt inlägg
För att lägga till en förloppsindikator till ett WordPress-inlägg, gå till ' Inlägg > Lägg till nytt ' alternativ från sidomenyn:
Steg 5: Lägg till förloppsindikatorblocket
Ange en titel och innehåll till inlägget. Tryck sedan på ' + ”-ikonen för att lägga till ett nytt block. I menyn, sök efter ' Förloppsindikator ” och välj blocket:
Steg 6: Ställ in procentandelen för stapeln
För att ställa in en procentsats för förloppsindikatorn, använd det blå skjutreglaget eller ange procenttalet i rutan nedan:
Steg 7: Publicera inlägget
När inlägget är klart klickar du på ' Publicera ”-knappen för att ladda upp inlägget till webbplatsen:
Steg 8: Se inlägget
När du har publicerat inlägget, klicka på knappen 'Visa inlägg' för att se förhandsvisningen av inlägget på webbplatsen:
Det kan ses i utgången nedan att förloppsindikatorn läggs till inlägget:
Det handlar om att lägga till en förloppsindikator i WordPress.
Slutsats
För att lägga till en förloppsindikator på en WordPress-webbplats, gå till ' Plugins > Lägg till nytt ' alternativ från sidomenyn. Sök och installera ' Ultimata blocken ' plugin. Efter installationen, aktivera den. Gå sedan till ' Inlägg > Lägg till nytt ” och ange rubrik och innehåll för inlägget. Klicka sedan på ' + '-ikonen och sök efter ' Förloppsindikator ” block. Ställ in framstegsprocenten med hjälp av reglaget eller genom att ange siffran. Den här artikeln har illustrerat proceduren för att lägga till en förloppsindikator i WordPress med och utan plugin.