Hur du lägger till en framstegsmätare i dina WordPress-inlägg (det enkla sättet)

Långt innehåll är fantastiskt för SEO och för att ge värde till dina läsare, men det finns ett litet problem: folk vill veta vad de ger sig in på.

När någon landar på en handledning på 3 000 ord vill de förstå sitt engagemang direkt. Progressbars löser detta vackert genom att visa läsarna exakt var de befinner sig i ditt innehåll.

Vi har använt dem på vår WPBeginner videomedlemskapssida för att visa hur mycket av kursen användarna har slutfört. På så sätt kan studenter enkelt följa sina inlärningsframsteg och hålla sig motiverade att slutföra sin utbildning.

Det bästa? Du behöver inga kodningskunskaper eller dyra plugins för att lägga till förloppsindikatorer på din WordPress-webbplats. I den här guiden visar vi dig exakt hur du skapar dem, steg för steg.

När du ska lägga till en framstegsmätare i WordPress-inlägg

Det finns flera scenarier där tillägg av en förloppsindikator kan förbättra dina WordPress-blogginlägg och göra dem mer slagkraftiga.

Till exempel är framstegsmätare utmärkta för att visa status för projektavslutande.

Om du driver en blogg som dokumenterar långsiktiga projekt, kan tillägg av progressbars ge läsarna en snabb visuell uppdatering om hur långt du har kommit.

Vi har också använt framstegsfält på vår videomedlemskapswebbplats.

Detta är för att hjälpa våra användare att se hur långt de har kommit i kursen.

Insamlingskampanjer på din WordPress-webbplats kan också dra stor nytta av framstegsfält. De ger en omedelbar visuell representation av hur nära du är att nå ditt mål, vilket kan uppmuntra till fler donationer.

För utbildningsinnehåll kan progressbars illustrera inlärningsmilstolpar eller komplexiteten hos olika ämnen. Detta kan hjälpa läsarna att se svårighetsgraden för olika ämnen du täcker i dina blogginlägg.

Om din webbplats fokuserar på fitness- eller hälsoteman kan förloppsindikatorer användas för att visa träningsintensitetsnivåer, färdighetsstaplar, näringsinformation eller framsteg mot hälsomål.

Annat än det, att lägga till en förloppsindikator till inlägg om statistik eller enkätresultat kan göra datan mer lättsmält och engagerande. Istället för att bara lista procentandelar kan du visuellt representera datan med färgglada förloppsindikatorer.

Med detta i åtanke har vi tagit fram 2 enkla sätt att lägga till en förloppsindikator på din WordPress-webbplats. Du kan använda snabblänkarna nedan för att hoppa till din föredragna metod:

• Metod 1: Lägg till en framstegsmätare med en sidbyggare (mer anpassningsbar)
• Metod 2: Använd ett gratis plugin för förloppsindikator (snabbt och enkelt)
• Frequently Asked Questions: Adding Progress Bars in WordPress

Metod 1: Lägg till en framstegsmätare med en sidbyggare (mer anpassningsbar)

Ett effektivt sätt att lägga till en framstegsmätare på din WordPress-webbplats är att använda en sidbyggare med en inbyggd funktion för framstegsmätare. Detta tillvägagångssätt säkerställer att din framstegsmätare sömlöst integreras med din övergripande temadesign.

För den här metoden kommer vi att använda Thrive Architect, en kraftfull sidbyggare som erbjuder många olika temamallar och ett användarvänligt dra-och-släpp-gränssnitt. Det är ett utmärkt val för både nybörjare och erfarna användare som vill ha ett enkelt sätt att anpassa sin WordPress-webbplatsdesign.

Tänk dock på att denna metod innebär att byta tema. Om du är nöjd med ditt nuvarande tema och inte vill byta, kanske du föredrar vår andra metod istället.

Dessutom har Thrive Architect ingen gratisversion. Med det sagt kan du använda vår Thrive Themes kupongkod för att få upp till 50% rabatt på ditt första köp.

Du kan lära dig mer om plattformen i vår Thrive Architect-recension.

Steg 1: Installera Thrive Theme Builder

För att komma igång måste du installera Thrive Architect. Börja med att logga in på ditt Thrive Themes-konto och ladda ner plugin-programmet Thrive Product Manager.

Därefter laddar du ner och installerar Thrive Product Manager-pluginet. Du kan kolla in vår nybörjarguide om hur man installerar ett WordPress-plugin för steg-för-steg-instruktioner.

I det här skedet, klicka på Produktchef i ditt WordPress-adminområde.

När du har gjort detta kan du klicka på knappen 'Logga in på mitt konto' för att ansluta din WordPress-webbplats till ditt Thrive Themes-konto.

Du bör nu se en lista över alla tillgängliga Thrive Themes-produkter i ditt konto.

Välj helt enkelt ‘Thrive Architect’ och markera rutan ‘Installera produkt’.

Därefter, låt oss skrolla ner till avsnittet 'Thrive Theme Builder' och kryssa i rutan 'Installera tema'. Vi måste göra detta eftersom Thrive Architect fungerar bäst med ett Thrive-tema.

Klicka sedan på knappen 'Installera valda produkter'.

Du bör nu se att Thrive Product Manager konfigurerar plugins för Thrive Architect och Thrive Theme Builder.

När det är klart, klicka bara på 'Gå till Theme Builder Dashboard'.

Vid det här laget kan du bara fortsätta och välja ett WordPress-tema.

Du kan också klicka på knappen 'Förhandsgranska' för att se hur temat ser ut innan du klickar på 'Välj' det.

Med ditt tema inställt bör du nu komma till guiden för temabyggaren.

Den här guiden hjälper dig att ladda upp din egen logotyp, välja varumärkes färger att lägga till i ditt tema, och ställa in de olika strukturerna och mallarna för ditt tema.

Slutför bara guiden så att du kan gå vidare till nästa steg.

Steg 2: Lägg till en framstegsmätare till dina WordPress-inlägg

Låt oss nu lägga till en progressbar i dina WordPress-inlägg. För att börja, öppna blockredigeraren för ett nytt inlägg eller ett befintligt.

Skriv sedan titeln på ditt nya inlägg där. Klicka sedan på knappen 'Starta Thrive Architect'.

Nu kan du använda Thrive Architect för att skapa innehållet för ditt blogginlägg. Det fungerar på ett liknande sätt som blockredigeraren.

Det vill säga, du kan bara klicka på '+' -knappen och dra och släppa vilket element du vill till sektionen som säger 'Klicka för att lägga till text eller dra och släpp element från panelen till höger'.

Här är ett exempel på hur vi lägger till ett textblock med hjälp av redigeraren:

Processen för att lägga till ett framstegsfält är i stort sett densamma. Klicka bara på '+' -knappen igen och hitta blocket 'Framstegsfält'.

Efter det, lägg bara till det i ditt inlägg.

Därefter visas ett popup-fönster där du uppmanas att välja en design för förloppsindikatorn.

Det finns dussintals att välja mellan, och du kan alltid ändra det senare om det behövs.

När du har gjort ditt val återgår du till huvudredigeringsgränssnittet.

Steg 3: Anpassa progressbaren

I det här skedet bör du se en sidopanel till vänster med anpassningsalternativ för förloppsindikatorn.

Det finns många inställningar att konfigurera, och vi kommer att täcka de viktigaste för att visa hur man ändrar framstegsmätaren.

I menyn Main Options kan du ändra progressbarens design från en enkel till en med noder. Noder är ikoner som visar var du befinner dig i framstegen. Vi har valt den typen av design för exemplet.

Du kan också ändra var etiketter för förloppsindikatorn ska placeras, stapelns höjd och förloppsindikatorns aktuella nivå.

När du går ner i panelen hittar du alternativ för att ändra nodetiketterna.

För att ändra dem, klicka på 'Redigera'-ikonen med en penna bredvid etiketten.

Skriv nu bara in din nya etikett.

När du är klar, klicka på 'Spara'-ikonen.

Det som är bra med Thrive är att det låter dig anpassa alla andra delar av framstegsmätaren så att du kan designa den som du vill.

För att se dessa anpassningsalternativ i aktion kan du sväva över ett av elementen i progressbaren och klicka på det.

Här har vi valt den del av framstegsmätaren som visar ofullständig framsteg.

Nu har en ny uppsättning alternativ dykt upp i sidofältet till vänster.

Om du klickar på rullgardinsmenyn 'Stil för närvarande' högst upp kan du ändra specifika delar av mätaren, som framstegsetiketter, ikoner, noder och mer.

Se till att utforska varje del för att se vad du kan anpassa.

Låt oss prova några exempel. För att inaktivera animationen med godisränder i bakgrundsfältet, välj 'Grouped lines background' i menyn Currently styling.

Stäng sedan av knappen 'Candy stripe animation'.

Om du vill ändra ikonerna inuti framstegsnoderna, byt till 'Framstegsikoner' i rullgardinsmenyn 'Stil för närvarande'.

Därefter, i menyn 'State' högst upp, välj 'Normal'.

Du bör nu se några inställningar som är gjorda för att ändra ikonerna för framstegsmätaren.

Klicka här på 'Ändra ikon'.

Thrive Architect har många ikoner i sitt bibliotek för olika branscher. Med det sagt, se till att ikonen du väljer är lämplig för en förloppsindikator.

När du har gjort ditt val klickar du bara på ‘Välj’.

För att ändra ikonstilen, klicka bara på knappen 'Ändra stil'.

Härifrån ser du några färdiga ikon-designer som du kan välja.

För att ändra utseendet på förloppetiketten, byt till alternativet 'Progress label' i rullgardinsmenyn 'Currently styling'.

Här ser du några alternativ för att anpassa etikettens färg, markera, formatering och så vidare.

När du är nöjd med hur förloppsindikatorn ser ut, klicka på 'Spara arbete' för att spara dina ändringar.

Se till att förhandsgranska ditt blogginlägg på mobil, dator och surfplatta så att allt ser bra ut.

Här är hur vår ser ut på vår demosida:

Alternativ: Lägg till en cirkulär framstegsmätare

Thrive Architect har också en annan typ av progressbar i sin blocksamling som kallas fyllnadsräknare. Block för fyllnadsräknare ser ut som en cirkulär progressbar, vilket är utmärkt för att visa statistik.

För att lägga till den, klicka bara på '+' -knappen i sidofältet till höger och hitta elementet 'Fill Counter'. Dra och släpp det sedan var som helst i inlägget.

När du har lagt till den ser du några alternativ för att anpassa fyllnadsräknaren.

Huvudsakligen kan du ändra storleken på fyllnadsräknaren, fyllnadsprocenten, färger och om procentvärdet ska matcha det värde som visuellt presenteras i räknaren.

Du kan också klicka på siffran inuti fyllnadsräknaren för att ändra dess utseende.

Ändra gärna dess färger, teckensnittstyp, synlighet på olika enheter och mer.

Om du vill ändra texten under procentandelen, klickar du bara på själva texten.

Efter det kan du skriva in en beskrivning för räknaren.

Glöm inte att spara ditt arbete när du är klar.

Alternativ: Inte ett fan av Thrive Architect? SeedProd sidbyggare har också en förloppsindikator-block som du kan lägga till i ditt tema eller dina anpassade sidor.

För mer information om hur du använder SeedProd, kolla bara in vår guide om hur man skapar ett anpassat WordPress-tema.

Metod 2: Använd ett gratis plugin för förloppsindikator (snabbt och enkelt)

Den här metoden är bäst om du inte vill använda en sidbyggare och bara behöver ett enkelt och gratis WordPress-plugin för förloppsindikatorer.

För detta kommer vi att använda det kostnadsfria pluginet Ultimate Blocks, som lägger till massor av extra Gutenberg-block till din WordPress-redigerare.

Det fantastiska med detta plugin är att framstegsmätarblocket är tillgängligt gratis. Det sagt, du kan uppgradera till pro-versionen av plugin-programmet för att få fler Gutenberg-block och anpassningsalternativ.

Du kan lära dig mer om pluginet i vår recension av Ultimate Blocks.

Först, installera och aktivera WordPress-pluginet på din webbplats. När det är klart kan du öppna blockredigeraren för att skapa ett nytt inlägg eller redigera ett befintligt.

Klicka nu på '+' -knappen var som helst på sidan och välj blocket 'Framstegsmätare'.

Du har nu framgångsrikt lagt till ett progressbar-block i ditt inlägg. Låt oss anpassa detta WordPress-designelemnt ytterligare för att passa dina behov.

Om du tittar på sidofältet för blockinställningar till höger ser du några anpassningsalternativ. Under fliken ‘Allmänt’ kan du ändra progressbar:ens procentuella placering från toppen till insidan eller botten av stapeln.

Du kan också inaktivera eller aktivera 'Rand'-designen och ändra värdet för den aktuella framstegen.

Därefter kan du anpassa Nummerinställningarna.

Här har vi valt att inte visa procentandelen eftersom vi inte tycker att den är användbar för vårt exempel.

Men om du väljer att visa den, kan du ändra nummerprefixet (en symbol som visas före numret, som ett minustecken) och nummersuffixet (en symbol som visas efter numret, som ett valutatecken).

Nästa punkt är Responsiv kontroll.

Eftersom framstegsmätare kan ta upp en del utrymme i ditt inlägg, kanske du vill dölja den när inlägget visas från en mindre skärm, som på surfplattor eller mobila enheter.

Vill du göra progressbaren mer interaktiv? Överväg att lägga till en entréanimation. När du aktiverar den här funktionen kommer progressbaren att visas med en animerad effekt när betraktaren skrollar ner till den.

Du kan också välja en animationsstil och ställa in fördröjningsperioden så att progressbaren visas vid rätt ögonblick.

Låt oss byta till fliken 'Stil', där du kan anpassa framstegsmätarens design.

Överst kan du ändra designen från en linje till en cirkel eller ett halv-cirkelformat framstegsfält. Du kan också lägga till en kantradie till fältets design så att det ser mer cirkulärt ut snarare än rektangulärt och skarpt.

Här har vi valt att hålla oss till linjens framstegsmätare.

Men så här ser cirkulära och halv-cirkulära progressbars ut:

När du skrollar ner kan du ändra tjockleken på framstegsmätaren så att den sticker ut ännu mer.

Du kanske också vill ändra färgen på förloppsindikatorn, bakgrundsfältet och etiketten för förloppsindikatorn för att passa din webbplatsdesign.

En annan del du kan ändra är förloppsindikatorns utfyllnad och marginal.

Båda inställningarna styr i huvudsak avståndet mellan framstegsfältet och de andra blocken som omger det.

Du kan öka värdet för båda om du inte vill att framstegsmätaren ska vara för nära de andra blocken ovanför eller under den.

Därefter kanske du vill lägga till en etikett eller beskrivning till förloppsindikatorn så att läsarna får mer kontext från det visuella.

Ovanför framstegsmätaren, skriv bara in lite text. Du kanske också vill ändra textens justering och stil med hjälp av inställningarna i blockets verktygsfält.

När du är nöjd med hur förloppsindikatorn ser ut klickar du bara på ‘Publicera’ eller ‘Uppdatera’ i blockredigeraren.

Du kanske också vill visa inlägget på mobil, dator och surfplatta för att säkerställa att förloppsindikatorn ser bra ut på alla enheter.

Det var allt! Du har nu lagt till en framstegsmätare till dina WordPress-inlägg.

Här är hur vår framstegsmätare ser ut på vår demonstrationswebbplats:

Vanliga frågor: Lägga till progressbars i WordPress

Här är några frågor som våra läsare ofta ställer om förloppsindikatorer:

1. När ska jag använda ett läsframstegsfält kontra ett statiskt framstegsfält?

Vi rekommenderar att använda en läsförloppsindikator när du vill hålla läsarna engagerade i långa inlägg. Den fylls på när de skrollar, och visar hur mycket av artikeln de har läst.

Detta fungerar bra för handledningar, guider eller blogginlägg där du vill minska avvisningsfrekvensen.

En statisk progressbar är bättre för att spåra ett fast mål, som insamlingsframsteg, projektavslut eller färdighetsnivåer. Dessa staplar rör sig inte när användaren skrollar utan visar istället en fast procentandel eller ett värde, som “60% klart” eller “300 USD av 500 USD insamlade”.

Om ditt mål är att öka engagemanget under läsning, välj en rullningsbaserad mätare. Om du vill visa framsteg eller prestationer, välj en statisk.

2. Vilka är några bästa metoder när man använder förloppsindikatorer?

Här är några tips för att göra din förloppsindikator mer effektiv:

• Håll det enkelt – En tunn, subtil stapel fungerar bäst och distraherar inte från ditt innehåll.
• Matcha ditt varumärke – Anpassa färg och storlek för att passa din webbplats stil.
• Välj rätt plats – De flesta läsare förväntar sig den högst upp på skärmen.
• Testa på mobil – Vissa mätare ser klumpiga ut på små skärmar. Inaktivera vid behov.
• Valfritt: Lägg till lästid – Det hjälper till att sätta förväntningar på hur lång tid inlägget kommer att ta.

En ren och välplacerad framstegsmätare kan förbättra användarupplevelsen utan att sakta ner saker.

3. Kommer en förloppsindikator att sakta ner min webbplats?

De flesta moderna plugins för förloppsindikatorer är lätta och påverkar inte mätbart din webbplatshastighet.

Dåligt kodade eller uppblåsta plugins kan dock påverka prestandan, särskilt på mobilen. För att vara säker:

• Använd betrodda plugins med bra recensioner.
• Testa din webbplatshastighet efter installationen.
• Inaktivera stapeln på mobila enheter om det påverkar laddningstiden.

Så länge du är försiktig med ditt pluginval, kommer tillägg av en framstegsmätare inte att skada SEO och kan till och med öka engagemanget.

Bonus designelement för din WordPress-webbplats

Vill du lägga till andra visuella element på din WordPress-webbplats? Titta bara på dessa artiklar nedan:

• Hur man lägger till initialer i WordPress-inlägg
• Hur man lägger till en nedräkningstimer-widget i WordPress
• Hur man lägger till en rullande nyhetsticker i WordPress
• Hur man lägger till en animerad bakgrund i WordPress
• Hur man visar en animerad räknare i WordPress
• Sätt att lägga till Halloween-effekter på din WordPress-webbplats
• Hur man lägger till roterande vittnesmål i WordPress
• Hur man lägger till funktionsrutor med ikoner i WordPress
• Hur man lägger till YouTube-video som helskärmsbakgrund i WordPress

Vi hoppas att den här handledningen har hjälpt dig att lära dig hur du lägger till en förloppsindikator i dina WordPress-inlägg. Du kanske också vill kolla in våra experters val av de bästa WordPress-temabyggarna och vår guide om hur man redigerar en WordPress-webbplats.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.