Jak dodać pasek postępu do twoich wpisów w WordPressie?

Czy kiedykolwiek chciałeś dodać pasek postępu w twojej witrynie WordPress? Możesz go użyć do pokazania postępów w kampanii zbierania funduszy, kamieni milowych dla konkretnego projektu, nad którym pracujesz itp. Niedawno jeden z naszych czytelników zapytał, jak dodać pasek postępu we wpisie WordPress. W tym artykule pokażemy, jak dodać pasek postępu do twoich wpisów, stron i widżetów WordPress.

Film poradnik

Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, czytaj dalej.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę Progress Bar. Działa ona od razu po wyjęciu z pudełka i nie ma żadnych ustawień do skonfigurowania.

Po prostu edytuj wpis lub stronę, na której chcesz wyświetlić pasek postępu i dodaj krótki kod w tym formacie:

[wppb progress=50].

Spowoduje to wyświetlenie animowanego paska postępu wskazującego 50% postępu przy użyciu domyślnego niebieskiego koloru.

Całkiem proste, prawda?

Możesz również dostosować krótki kod, aby zmienić kolory, dodać tekst do paska postępu, wyświetlać walutę zamiast procentów i nie tylko. Przyjrzyjmy się niektórym z tych własnych opcji konfiguratora.

Dodawanie tekstu do paska postępu

W powyższym przykładzie widać, że nasz pasek postępu nie wspomina o tym, czego dotyczy. Można to zmienić, dodając pomocny tekst na pasku postępu za pomocą atrybutu text w krótkim kodzie.

[wppb progress=75 text="Progress so far"].

Spowoduje to wyświetlenie twojego tekstu na górze paska postępu i będzie wyglądać następująco:

Wyświetlanie waluty zamiast wartości procentowej na pasku postępu

Domyślnie pasek postępu pokazuje procent ukończenia, ale można go zmienić na walutę, jeśli jest używany w kampanii pozyskiwania funduszy.

Oto jak użyć krótkiego kodu, aby wyświetlić walutę i wskazać zarówno kwotę docelową, jak i kwotę zebraną do tej pory.

[wppb progress="$250/1000" text="$250/$1000 Raised"].

Będzie to wyglądać tak na twojej witrynie internetowej:

Jeśli chcesz wyświetlać tekst poza paskiem postępu, możesz zmodyfikować krótki kod w następujący sposób:

[wppb progress="$250/1000" text="$250/$1000 Raised" location="after"].

Zmiana kolorów i wyglądu paska postępu

Wtyczka Progress Bar zawiera kilka kolorów i opcji wyglądu, których można użyć. Wbudowane opcje kolorów to niebieski, czerwony, żółty, pomarańczowy i zielony. Możesz jednak użyć dowolnego koloru. Możesz dodać płaski lub animowany pasek postępu.

Oto jak użyć krótkiego kodu, aby skorzystać z każdej opcji:

Pomarańczowy pasek postępu
[wppb progress=50 option=orange].

Animowany pasek postępu Candy Stripe w kolorze czerwonym
[wppb progress=50 option="animated-candystripe red"].

Pasek postępu Candy Stripe w kolorze zielonym
[wppb progress=50 option="candystripe green"].

Domyślny niebieski pasek postępu z cukierkowym Stripe’em
[wppb progress=50 option=candystripe].

Płaski pasek postępu w kolorze fioletowym
[wppb progress=50 option=flat color=purple].

Płaski, cukierkowy pasek postępu w kolorze brązowym
[wppb progress=50 option="flat candystripe" color=brown].

Tak te paski postępu będą wyglądać na twojej witrynie:

Dodawanie paska postępu w widżetach paska bocznego WordPress

Najpierw należy włączyć krótki kod dla widżetów tekstowych w WordPress. Możesz to zrobić, dodając następujący wiersz kodu w pliku functions. php twojego motywu lub we wtyczce witryny.

add_filter('widget_text','do_shortcode');

.

Możesz teraz przejść na stronę Wygląd ” Widżety i dodać widżet tekstowy do twojego panelu bocznego. Użyj krótkiego kodu paska postępu w widżecie tekstowym, tak jak użyłbyś go we wpisie lub na stronie. Oto kod, którego użyliśmy na naszej witrynie demonstracyjnej:

[wppb progress="$2500/$4500" option="animated-candystripe red" fullwidth=true]

Raised: $2500
Goal: $4500

<a href="example.com">Donate here</a>

.

Tak to wyglądało na naszej witrynie testowej:

Mamy nadzieję, że ten artykuł pomógł ci dodać 111111 piękny pasek postępu w twoich wpisach lub stronach WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat dodawania przycisku darowizny PayPal w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.