Gå till innehållet

Hur man lägger till en förloppsindikator på Wordpress

Divi: det enklaste WordPress-temat att använda

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Har du någonsin velat lägga till en framstegsfält till din WordPress-blogg?

Du kan använda den för att visa framstegen för en insamlingskampanj, eller för ett specifikt projekt du arbetar med.

Nyligen försökte en abonnent ta reda på vilken metod han kunde använda för att snabbt lägga till en framstegsfält till sin WordPress-blogg.

I den här tutorialen kommer jag att visa dig hur du enkelt lägger till en framstegsfält till din WordPress-blogg.

Det första du ska göra är att installera och aktivera plugin-programmet « Progress Bar »Tillgängligt på WordPress.org, det här pluginet fungerar utan konfiguration.

framsteg-bar plugin

Allt du behöver göra är att lägga till kortkoden på en sida eller artikel (och till och med i en sidofält) för att se hur det fungerar. Kortkoden att lägga till är följande:

« [Vikt-ppb framsteg = 50] »

Detta kommer att visa en förloppsindikator

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

hur add-a-bar-in-progress

Ganska enkelt är det inte?

Du kan också anpassa den här koden genom att lägga till färger, text i framstegsfältet, visa en valuta i stället för en procentsats och mer. Låt oss försöka tillsammans utforska de olika möjligheterna

Hur man lägger till en text på förloppsindikatorn

I den tidigare kortkoden publicerade vi en framstegsfält utan att nämna. För att ändra detta med en text som kan vara vägledande för användare lägger vi till "text" -parametern till kortkoden på detta sätt:

"[Wppb progress = 76 text =" Work progress "]"

För detta resultat

evolution-of-arbete

Hur man lägger till ett motto på förloppsindikatorn

Som standard visar framstegsfältet en procentuell förändring, men du kan ändra den med en valfri valuta, vilket kan vara mycket användbart om du vill visa utvecklingen av en insamling.

"[Wppb progress =" 50 € / 400 'text = '50 € / 400 undersökningar "]"

För ett resultat som liknar det här

levee-de-Fonds

Hur man ändrar färgen och utseendet på utvecklingsfältet

Detta plugin erbjuder några färger som du kan använda för att anpassa framstegsfältet. Standardfärgerna är "röd", "blå", "orange" och "grön", men du kan använda den färg du vill ha. Det är också möjligt att lägga till animerade framstegsfält.

Här är hur du kan använda kortkod för varje alternativ:

apelsin förloppsindikator

[Vikt-ppb framsteg = 50 option = apelsin]

Animerad röd progress bar med ränder

[wppb progress = 50 option = "animated-candystrip red"]

Grön förloppsindikator med ränder

[wppb progress = 50 option = "candystrip green"]

Framsteg bar med ränder platta

[wppb progress = 50 option = "flat candystrip" color = brown]

Hur man lägger till en förloppsindikator i en sidopanel

Vi kommer att använda widgeten " texter Att komma dit. Allt du behöver göra är att använda följande filter "widget_text" på detta sätt:

"Add_filter (" widget_text "," do_shortcode "); "

Lägg till den här raden i ditt temas "functions.php" -fil. Besök sedan platsen "Utseende> Widgets" och lägg till "text" -widgeten i ett av widgetområdena för ditt tema. Du kan även anpassa det efter eget tycke, på detta sätt:

"[Wppb progress =" 2500 € / 4500 € "option =" animated-candystripe red "fullwidth = true]"

Nivåer: 2500 €
Mål: 4500 €

Ge en donation »

För ett resultat som liknar det här:

meta-widget

Det är allt för denna självstudie, jag hoppas att det kommer att vara till stor nytta, tveka inte att dela det med dina vänner eller på dina favorit sociala nätverk.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
4 aktier
del2
tweet
Enregistrer2