W artykule:
Czy kiedykolwiek chciałeś dodać pasek postępu w swojej 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 mogą dodać pasek postępu w poście WordPress. W tym artykule pokażemy, jak dodać pasek postępu w postach, stronach i widżetach WordPress.
Video Tutorial
Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę paska postępu. Działa po wyjęciu z pudełka i nie ma żadnych ustawień do skonfigurowania.
Po prostu Edytuj post lub stronę, na której chcesz wyświetlić pasek postępu i dodaj krótki kod w tym formacie:
[wppb progress=50]
Zostanie wyświetlony animowany pasek postępu wskazujący 50% postępu przy użyciu domyślnego niebieskiego koloru.
Całkiem proste, prawda?
Możesz także dostosować skrócony kod, aby zmienić kolory, dodać tekst do paska postępu, pokazać walutę zamiast procentu i nie tylko. Rzućmy okiem na niektóre z tych opcji dostosowywania.
Dodawanie tekstu do paska postępu
W powyższym przykładzie widać, że nasz pasek postępu w rzeczywistości nie wspomina, o co chodzi. Możesz to zmienić, dodając pomocny tekst w pasku postępu za pomocą atrybutu tekst w kodzie skrótu.
[wppb progress=75 text = "Progress so far"]
Spowoduje to wyświetlenie Twojego tekstu na pasku postępu i będzie wyglądał tak:
Wyświetlanie waluty zamiast procentu na pasku postępu
Domyślnie pasek postępu pokazuje procent ukończenia, ale możesz go zmienić na walutę, jeśli używasz jej do kampanii zbierania funduszy.
Oto jak użyć shortcode, aby wyświetlić walutę i wskazać zarówno kwotę docelową, jak i kwotę zebraną do tej pory.
[wppb progress= "$250/1000 "text =" $250 / $ 1000 podniesione"]
Będzie to wyglądać tak na twojej stronie:
Jeśli chcesz wyświetlić tekst poza paskiem postępu, możesz zmodyfikować krótki kod w ten sposób:
[wppb progress= "$250/1000 "text =" $250 / $1000 " location = "after"]
Zmiana kolorów i wyglądu paska postępu
Wtyczka paska postępu zawiera kilka kolorów i opcji wyglądu, których możesz użyć. Wbudowane opcje kolorów to niebieski, czerwony, żółty, pomarańczowy i zielony. Możesz jednak użyć dowolnego koloru, który chcesz. Możesz dodać płaski lub animowany pasek postępu.
Oto jak użyjesz shortcode, aby użyć każdej opcji:
Pomarańczowy pasek postępu[wppb progress=50 opcja = 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 paskiem cukierków[wppb progress=50 option = candystripe]
Płaski pasek postępu w Kolorze Fioletowym[wppb progress=50 Opcja=kolor płaski = fioletowy]
Płaski pasek postępu candy stripe w kolorze brązowym[wppb progress=50 option= "flat candystripe" color=brown]
W ten sposób te paski postępu będą wyglądać w Twojej witrynie:
Dodawanie paska postępu w widżetach paska bocznego WordPress
Najpierw musisz włączyć skróty dla widżetów tekstowych w WordPress. Możesz to zrobić, dodając następujący wiersz kodu w funkcjach szablonu.plik php lub w wtyczce specyficznej dla witryny.
add_filter ('widget_text', 'do_shortcode');
Możesz teraz odwiedzić Wygląd ” Widgety strona i dodaj widżet tekstowy do paska bocznego. Użyj skrótu paska postępu w widżecie tekstowym, tak jak używasz go w poście lub stronie. Oto kod, którego użyliśmy na naszej stronie demo:
[wppb progress= "$2500 / $4500 " option=" animated-candystripe red " fullwidth = true] Podniesiony: $2500 Cel: $4500 <a href="example.com" > Darowizna tutaj< / a>
Tak to wyglądało na naszej stronie testowej:
Mamy nadzieję, że ten artykuł pomógł Ci dodać piękny pasek postępu w postach lub stronach WordPress. Możesz również zobaczyć nasz przewodnik, Jak Dodać przycisk PayPal Donate w WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
