Hur man lägger till en läsframstegsfält i WordPress-inlägg (3 enkla sätt)

Du känner till den känslan när du läser en lång artikel online och inte har någon aning om hur mycket mer som finns kvar? Det är problemet som läs-framstegsmätare löser för dina WordPress-besökare.

Dessa enkla visuella indikatorer visar läsarna exakt hur mycket av en artikel de har slutfört, vilket kan uppmuntra dem att fortsätta läsa och stanna kvar på din sida. Det utnyttjar samma tillfredsställelse du får av att slutföra något med ett tydligt slut.

Nu använder vi faktiskt inga förloppsindikatorer här på WPBeginner eftersom våra handledningar är utformade för att vara skanningsbara. De flesta hoppar direkt till den sektion de behöver snarare än att läsa från början till slut.

Men om du publicerar längre blogginlägg, djupgående guider eller detaljerade artiklar, kan en läsförloppsindikator verkligen hjälpa till att hålla folk engagerade.

I den här guiden visar vi dig tre olika sätt att lägga till en på din WordPress-webbplats, oavsett om du vill ha en enkel plugin-lösning eller något mer anpassat.

När du ska lägga till en läsförloppsindikator i dina WordPress-blogginlägg

För längre blogginlägg kan det vara ett värdefullt verktyg att lägga till en läsframstegsmätare för att få folk att stanna kvar på din WordPress-webbplats. Det kan låta läsarna veta hur mycket de har läst och hur mycket som återstår.

Läsare är mer benägna att fortsätta scrolla om de ser att de närmar sig slutet av artikeln. En framstegsmätare kan motivera dem att läsa klart.

Dessutom ger en läsindikator en touch av interaktivitet till ditt innehåll. Det kan få läsning att kännas mer som en resa med ett tydligt mål.

Det är dock viktigt att tänka på ditt innehåll. Genom vår testning har vi funnit att läsframstegsmätare fungerar bäst när ditt innehåll behöver konsumeras linjärt. Med det sagt kanske de inte är nödvändiga för webbplatser som vår som fokuserar på snabbt, skanningsbart referensmaterial.

Med det i åtanke, låt oss se hur du enkelt lägger till en läsframstegsindikator till dina WordPress-inlägg. Du kan använda snabblänkarna nedan för att hoppa till din föredragna metod:

• Metod 1: Designa ett anpassat tema med läsförloppsindikatorer
• Metod 2: Lägg till en läsprogressbar med ett gratis plugin
• Metod 3: Lägg till en läsprogressbar med kod
• Bonustips för att behålla dina WordPress-bloggläsare engagerade

Metod 1: Designa ett anpassat tema med läsförloppsindikatorer

Ett sätt att lägga till en läsförloppsindikator i WordPress-inlägg är att använda en temabyggare med en förloppsindikatorfunktion. På så sätt kommer förloppsindikatorns design att integreras sömlöst med resten av ditt tema, vilket gör det mer behagligt för ögat.

Tänk på att denna metod innebär att ändra ditt tema, så vi rekommenderar den inte om du redan är nöjd med ditt tema och inte planerar att byta det inom kort. Om så är fallet, bör du istället välja metod 2 (plugin) eller metod 3 (kod).

För den här metoden kommer vi att använda Thrive Theme Builder. Förutom att ha en läsförloppsindikator har Thrive Theme Builder dussintals temamallar för olika ändamål, från bloggar till företagswebbplatser.

Bäst av allt, dra-och-släpp-byggaren är enkel att använda, vilket gör den utmärkt för nybörjare.

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

En nackdel med Thrive Themes är att det inte finns någon gratisversion. Med det sagt kan du använda vår kupongkod för Thrive Themes för att få upp till 50% rabatt på ditt första köp.

Steg 1: Installera Thrive Theme Builder

Det första steget är att konfigurera Thrive Theme Builder. Du kan få tillgång till detta plugin genom att logga in på ditt konto på Thrive Themes webbplats.

Ladda sedan ner och installera pluginet Thrive Product Manager. För mer information, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

När pluginet är aktivt, klicka på Produktchef i ditt WordPress-administrationsområde.

Klicka sedan på knappen 'Logga in på mitt konto' för att ansluta din WordPress-webbplats till ditt Thrive Themes-konto.

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

Här, fortsätt och välj ‘Thrive Architect‘ och markera rutan ‘Installera produkt’.

Denna sidbyggarplugin fungerar tillsammans med temabyggaren, så det är därför vi behöver aktivera den.

Bläddra sedan ner till avsnittet ‘Thrive Theme Builder’ och markera rutan ‘Install Theme’.

Klicka nu bara på ‘Installera valda produkter.’

På nästa sida ser du att Thrive Product Manager installerar och aktiverar Thrive Theme Builder.

När processen är klar, klicka på 'Gå till Theme Builder Dashboard'.

Välj nu en WordPress-mall.

Om du är osäker på vilken du ska välja, klicka bara på knappen 'Förhandsgranska' för att se hur temat ser ut först. Klicka sedan på 'Välj' när du har fattat ditt beslut.

Du bör nu komma till guiden för Theme Builder.

Denna installationsguide guidar dig genom att ladda upp din egen logotyp, välja varumärkesfärger för att lägga till i ditt tema, och ställa in de olika strukturerna och mallarna för ditt tema.

Fortsätt och slutför installationsguiden innan du går vidare till nästa steg.

Steg 2: Lägg till en läsprogressbar till din mall för enskilda inlägg

Med ditt tema inställt, låt oss nu lägga till en läsprogressbar till din temamall. Eftersom vi bara vill visa läsmätaren i WordPress-inlägg, behöver vi bara redigera mallen för enskilda inlägg.

För att göra detta, byt till fliken 'Mallar' i Thrive Theme Builder. Hitta sedan mallen 'Standardinlägg' och klicka på 'Redigera'.

Du bör nu vara inne i temabyggaren. Det bör finnas en vänster sidopanel för att redigera din mall, en förhandsgranskning av själva mallen och en liten verktygsfält på höger sida för att lägga till fler block eller ändra mallens stil.

För att lägga till läsmätaren, skrolla ner i sidofältet till vänster och hitta inställningen 'Läsframstegsindikator'. Klicka helt enkelt på omkopplaren för att aktivera den.

Efter att ha lagt till förloppsindikatorn bör det nu finnas fler inställningar för dig att redigera den.

Först kan du välja att lägga till förloppsindikatorn under sidhuvudet eller högst upp i visningsområdet (precis ovanför sidhuvudet). Om du väljer det första alternativet måste du se till att sidhuvudet är inställt som klibbigt, vilket vi kommer att visa dig hur du gör senare.

Därefter kan du ändra färgen på förloppsindikatorn. Klicka bara på färgväljaren för att göra det.

Nu kan du antingen välja en av temafärgerna, vilket är ditt temas fördefinierade färgschema. Eller så kan du klicka på 'Koppla bort från temafärg' för att välja en helt annan färg som inte ingår i ditt tema.

Om du väljer alternativet ‘Koppla bort från temats färg’, kan du även justera färgens opacitet.

På så sätt kan du justera hur ogenomskinlig framstegsmätaren ser ut mot sin bakgrund. Med det sagt är det bäst att färgen på framstegsmätaren inte är så livlig att den distraherar användarna från att läsa.

När du är nöjd med färgen klickar du bara på ‘Verkställ’.

Slutligen kan du justera höjden på progressbaren.

Temabyggaren låter dig ändra storlek på stapeln till upp till 10 pixlar. Detta säkerställer att förloppsindikatorn inte ser för stor ut. Med detta i åtanke rekommenderar vi att du väljer en storlek mellan 5 och 10 så att förloppsindikatorn är tydligt synlig.

När du är nöjd med hur stapeln ser ut, klickar du bara på 'Spara arbete' för att behålla dina ändringar.

Steg 3: Gör din rubrik klistrig (valfritt)

Om du väljer att visa din läsförloppsindikator under sidhuvudet, måste du följa detta steg. Annars kan du hoppa över det.

Skrolla först upp i sidofältet till vänster och klicka på 'Header'.

En annan uppsättning inställningar för att anpassa sidhuvudet bör nu visas i sidofältet.

Fortsätt och scrolla ner till avsnittet Sidhuvud och klicka på ‘Redigera.’

Öppna nu fliken Scrollbeteende.

Sedan måste du välja 'Klibbig'. Beroende på ditt tema kan du också behöva ändra avståndet från skärmens topp till 1 px så att framstegsmätaren visas.

Du kan lämna resten av inställningarna som de är och klicka på 'Klar' längst ner.

Steg 4: Lägg till en lästidsindikator (valfritt)

En annan sak du kan göra med Thrive Theme Builder är att visa den beräknade lästiden för att gå igenom ett inlägg från början till slut. Detta hjälper användare att se hur lång tid det tar att läsa en artikel, så att de kan välja innehåll som passar deras tillgängliga tid.

Klicka först på blocket som ansvarar för att visa din inläggsmetadata.

Detta är den del av din mall för enskilda inlägg som visar information som blogginläggets författare, kategorier, taggar och så vidare.

Klicka sedan på ikonen 'Dynamisk text' i verktygsfältet.

Här måste du välja ‘Innehåll’ i den första rullgardinsmenyn och ‘Återstående lästid (i minuter)’ i den andra.

Klicka sedan på 'Infoga'.

Du bör nu se ny text som säger '0 minuter kvar' i inläggsmetadata. Du kan justera denna text efter eget tycke.

I vårt fall beslutade vi att ta bort ordet 'återstående'.

När du är klar, glöm inte att klicka på ‘Spara arbete.’

Steg 5: Förhandsgranska dina läsframstegsindikatorer

Nu när du har konfigurerat dina inställningar för framstegsindikatorn kan du besöka ditt blogginlägg för att se indikatorn i aktion.

Om du vill göra en förhandsgranskning istället för att se stapeln live på din webbplats, kan du bara klicka på knappen ‘Förhandsgranska’ längst ner. Thrive Theme Builder låter dig förhandsgranska din webbplats på dator, surfplatta och mobil.

Känn dig fri att göra så många ändringar som behövs.

Här är hur vår läsframstegsindikator ser ut:

Metod 2: Lägg till en läsprogressbar med ett gratis plugin

Om du bara vill lägga till en enkel läsframstegsmätare till dina WordPress-inlägg gratis, kan du använda pluginet Catch Scroll Progress Bar.

Detta plugin för läs-framstegsmätare kommer automatiskt att visa en läsmätare på dina sidor och inlägg, och du kan enkelt anpassa den efter dina preferenser.

Installera först pluginet i ditt WordPress-adminområde. För mer information, läs vår nybörjarguide om hur man installerar ett WordPress-plugin.

När det är klart, gå till Catch Scroll Progress Bar på din WordPress-instrumentpanel. Du kommer nu att se några inställningar för framstegsmätaren att konfigurera.

Med det här pluginet kan du ändra progressbarpositionen från toppen till botten. Med det sagt kan du bara lämna det som det är om du föredrar den vanliga toppositionen.

En annan sak du kan anpassa är bakgrundsfärgen och förgrundsfärgen.

Bakgrundsfärgen avser framstegsmätarens standardfärg när läsaren inte har scrollat igenom sidan. Under tiden är förgrundsfärgen den färg som kommer att visas när läsaren scrollar ner på sidan.

Nästa är opacitet, som styr transparensen för bakgrunds- och förgrundsfärgerna. Intervallet är mellan 0 och 1, där 1 är ogenomskinlig och 0 är transparent eller osynlig.

Lek gärna med siffrorna tills du hittar den opacitetsnivå du gillar.

Därefter kan du justera framstegsmätarens höjd och rundning av kanterna.

För höjden har vi funnit att det bästa antalet är mellan 1 och 8, men inte mer än så. Annars kan framstegsmätaren se för stor ut.

Kantradien styr hur rundade hörnen på din framstegsmätare ser ut. Om du inte gillar hur det ser ut kan du bara ange '0'.

Nu låter detta plugin dig också bestämma vilka mallar som framstegsmätaren ska visas i: på din startsida, bloggsida, arkiv och kategorier, och/eller enskilda inlägg eller sidor.

Vanligtvis behöver du bara lägga till en läsförloppsindikator på dina WordPress-blogginlägg. I det här fallet valde vi bara ‘Enkel sida/inlägg’ i inställningen ‘Välj mallvillkor för förloppsindikator’.

Vi kontrollerade även alternativet ‘Inlägg’ under ‘Välj inläggstyp för att tillämpa förloppsindikatorn’ eftersom vi bara vill att indikatorn ska visas i blogginlägg.

Med det sagt, känn dig fri att kontrollera de villkor som passar din webbplats bäst.

När du är nöjd med dina inställningar för framstegsmätaren, fortsätt och klicka på 'Spara ändringar'.

Nu, om du förhandsgranskar ditt blogginlägg på mobilen eller datorn, bör du se en framstegsmätare.

Metod 3: Lägg till en läsprogressbar med kod

Du kan också använda anpassad kod för att lägga till en läsframstegsmätare på din WordPress-webbplats.

Ofta kommer handledningar att be dig att lägga till kod direkt i ditt temas functions.php-fil. Men vi rekommenderar inte att du gör detta eftersom det minsta misstag kan förstöra din webbplats.

Istället rekommenderar vi att du använder pluginet WPCode. Det är det enklaste och säkraste sättet att lägga till anpassad kod i WordPress utan att behöva redigera några kärnfiler i WordPress.

Vi har grundligt testat WPCode och funnit att det är en pålitlig och nybörjarvänlig lösning.

Den levereras med ett inbyggt bibliotek av färdiga kodavsnitt som du kan lägga till på din webbplats med bara några få klick, inklusive ett för ett läsframstegsfält. Du kan kolla in vår fullständiga WPCode-recension för att lära dig mer om dess funktioner och varför vi rekommenderar den.

För att komma igång måste du installera och aktivera det kostnadsfria pluginet WPCode. Om du behöver hjälp, se vår handledning om hur man installerar ett WordPress-plugin.

När pluginet är aktiverat, gå till Kodavsnitt » Bibliotek från WordPress-instrumentpanelen.

Sök därifrån efter 'Scroll Progress Bar' i biblioteket, för muspekaren över den och klicka på knappen 'Använd kodavsnitt'.

WPCode kommer sedan automatiskt att lägga till koden åt dig.

Den korrekta insättningsmetoden kommer också att väljas åt dig i bakgrunden.

Därefter behöver du bara växla omkopplaren från Inaktiv till Aktiv.

Klicka sedan på knappen ‘Uppdatera’.

Nu kan du visa ett blogginlägg på din webbplats.

En enkel framstegsindikator bör nu visas, så här:

Bonustips för att behålla dina WordPress-bloggläsare engagerade

Vill du omvandla tillfälliga besökare till lojala läsare? Vi har dig täckt!

Kolla in dessa experttutorials för WordPress, fullpackade med tips för att hålla din publik engagerad:

• Styla varje WordPress-inlägg olika för att göra ditt innehåll visuellt engagerande.
• Skapa anpassade formdelare för att bryta upp din text och guida läsare genom ditt innehåll.
• Lägg till emojis för att omfamna din personlighet och ge din blogg en touch av skoj.
• Markera nya inlägg för återkommande besökare och få dem att komma tillbaka för mer.
• Markera text i dina WordPress-inlägg och betona viktiga punkter för dina läsare.
• Lägg till enkla och eleganta fotnoter i dina blogginlägg för att visa upp din forskning.
• Imponera på dina besökare genom att visa roterande kundrecensioner på din WordPress-webbplats.
• Lägg till en textstorleksjusterare på din WordPress-webbplats för att säkerställa att ditt innehåll är tillgängligt för alla.

Vi hoppas att den här artikeln hjälpte dig att lägga till läsframstegsfält i WordPress. Du kanske också vill se vår kompletta guide om hur man redigerar en WordPress-webbplats och våra experttips om bästa Canva-alternativen för webbplatsdesigngrafik.

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.