Czy kiedykolwiek chciałeś dodać pasek postępu do swojego blog WordPress ?

Możesz go użyć, aby pokazać postęp kampanii pozyskiwania funduszy lub konkretnego projektu, nad którym pracujesz.

Ostatnio subskrybent szukał sposobu, w jaki mógłby szybko dodać pasek postępu do swojego blog WordPress.

W tym samouczku pokażę, jak dodać pasek postępu do pliku blog WordPress z całkowitą prostotą.

Pierwszą rzeczą do zrobienia jest instalacja i aktywacja wtyczki « Pasek postępu »Wtyczka dostępna na WordPress.org działa bez konfiguracji.

Wtyczka postęp bar

Wszystko, co musisz zrobić, to dodać krótki kod do strony lub artykułu (a nawet paska bocznego), aby zobaczyć, jak to działa. Krótki kod do dodania jest następujący:

« [postępy wppb = 50] »

Wyświetli się pasek postępu

jak dodać-a-bar w toku

Całkiem proste, prawda?

Możesz także dostosować ten kod, dodając kolory, tekst na pasku postępu, wyświetlając walutę zamiast wartości procentowej i więcej. Spróbujmy wspólnie zbadać różne możliwości

Jak dodać tekst do paska postępu

W poprzednim krótkim kodzie opublikowaliśmy pasek postępu bez żadnej wzmianki. Aby zmodyfikować to za pomocą tekstu, który może być orientacyjny dla użytkowników, dodamy parametr „text” do shortcode w ten sposób:

"[Wppb progress = 76 text =" Postęp prac "]"

Za ten wynik

evolution-of-pracy

Jak dodać walutę do paska postępu

Domyślnie pasek postępu pokazuje zmianę procentową, ale możesz to zmienić o wybraną walutę, co może być bardzo przydatne, jeśli chcesz pokazać ewolucję fundraisera.

"[Postęp Wppb =" 50 € / 400 'text =' 50 € / 400 ankiet "]"

Dla wyniku podobnego do tego

ranne-de-Fonds

Jak zmienić kolor i wygląd paska ewolucji

Ta wtyczka oferuje niektóre kolory, których można użyć do dostosowania paska postępu. Domyślne kolory to „czerwony”, „niebieski”, „pomarańczowy” i „zielony”, jednak można użyć żądanego koloru. Możliwe jest również dodawanie animowanych pasków postępu.

Oto jak możesz użyć krótkiego kodu dla każdej z opcji:

Pasek postępu pomarańczowy

[postęp wppb = opcja 50 = pomarańczowy]

Animowany czerwony pasek postępu z paskami

[postęp wppb = 50 opcja = "animowany-kandystrip czerwony"]

Zielony pasek postępu z zarysowaniami

[postęp wppb = opcja 50 = „zielony pasek kandyzu”]

Płaski pasek postępu z paskami

[postęp wppb = 50 opcja = "płaski pasek kandyzowany" kolor = brązowy]

Jak dodać pasek postępu na pasku bocznym

Użyjemy widżetu „ Teksty Żeby się tam dostać Wszystko, co musisz zrobić, to użyć następującego filtra „widget_text” w ten sposób:

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

Dodaj tę linię do pliku „functions.php” motywu. Następnie przejdź do lokalizacji „Wygląd> Widżety” i dodaj widżet „tekst” w jednym z obszarów widżetów w motywie. Możesz nawet dostosować go do swoich upodobań w ten sposób:

Opcja [Postęp wppb = "2500 € / 4500 €" = "animowany-czerwony pręgowany kolor" pełna szerokość = prawda] "

Poziomy: 2500 €
Cel: 4500 €

Przekaż darowiznę »

Aby uzyskać wynik podobny do tego:

meta-widget

To wszystko w tym samouczku, mam nadzieję, że będzie on bardzo przydatny, nie wahaj się podzielić się nim z przyjaciółmi lub w ulubionych sieciach społecznościowych.