Jak dodać pasek postępu do swoich wpisów w WordPress (łatwy sposób)

Treści długie są fantastyczne dla SEO i dostarczania wartości czytelnikom, ale jest jeden mały problem: ludzie lubią wiedzieć, w co się angażują.

Kiedy ktoś trafia na samouczek o długości 3000 słów, chce od razu zrozumieć swoje zaangażowanie. Paski postępu doskonale rozwiązują ten problem, pokazując czytelnikom dokładnie, gdzie znajdują się w Twojej treści.

Używamy ich na naszej stronie WPBeginner video membership, aby pokazać, ile z kursu użytkownicy ukończyli. W ten sposób studenci mogą łatwo śledzić postępy w nauce i pozostać zmotywowani do ukończenia szkolenia.

Najlepsze jest to? Nie potrzebujesz żadnych umiejętności kodowania ani drogich wtyczek, aby dodać paski postępu do swojej witryny WordPress. W tym przewodniku pokażemy Ci dokładnie, jak je stworzyć, krok po kroku.

Kiedy dodać pasek postępu do wpisów na WordPressie

Istnieje kilka scenariuszy, w których dodanie paska postępu może ulepszyć Twoje wpisy na blogu WordPress i uczynić je bardziej wpływowymi.

Na przykład, paski postępu są doskonałe do wyświetlania statusu ukończenia projektu.

Jeśli prowadzisz bloga dokumentującego długoterminowe projekty, dodanie pasków postępu może dać czytelnikom szybką wizualną aktualizację o tym, jak daleko jesteś.

Używaliśmy również pasków postępu na naszej stronie z subskrypcją wideo.

Ma to na celu pomóc naszym użytkownikom zobaczyć, jak daleko ukończyli kurs.

Kampanie fundraisingowe na Twojej stronie WordPress mogą również skorzystać z pasków postępu. Zapewniają one natychmiastową wizualną reprezentację tego, jak blisko jesteś osiągnięcia celu, co może zachęcić do większej liczby darowizn.

W przypadku treści edukacyjnych paski postępu mogą ilustrować kamienie milowe nauki lub złożoność różnych tematów. Może to pomóc czytelnikom zobaczyć poziom trudności różnych tematów, które poruszasz w swoich postach na blogu.

Jeśli Twoja strona internetowa koncentruje się na tematach fitness lub zdrowia, paski postępu mogą być używane do pokazywania poziomów intensywności treningu, paska umiejętności, informacji o wartościach odżywczych lub postępów w osiąganiu celów zdrowotnych.

Poza tym dodanie paska postępu do postów o statystykach lub wynikach ankiet może sprawić, że dane będą bardziej przyswajalne i angażujące. Zamiast po prostu wymieniać procenty, możesz wizualnie przedstawić dane za pomocą kolorowych pasków postępu.

Mając to na uwadze, wymyśliliśmy 2 proste sposoby dodania paska postępu do Twojej witryny WordPress. Możesz skorzystać z poniższych szybkich linków, aby przejść do preferowanej metody:

• Metoda 1: Dodaj pasek postępu za pomocą kreatora stron (bardziej konfigurowalny)
• Metoda 2: Użyj darmowej wtyczki do pasków postępu (szybko i łatwo)
• Frequently Asked Questions: Adding Progress Bars in WordPress

Metoda 1: Dodaj pasek postępu za pomocą kreatora stron (bardziej konfigurowalny)

Jednym z efektywnych sposobów dodania paska postępu do Twojej witryny WordPress jest użycie kreatora stron z wbudowaną funkcją paska postępu. Takie podejście zapewnia, że pasek postępu będzie płynnie zintegrowany z ogólnym projektem Twojego motywu.

W tej metodzie użyjemy Thrive Architect, potężnego kreatora stron, który oferuje wiele różnych szablonów motywów i przyjazny dla użytkownika interfejs przeciągnij i upuść. Jest to doskonały wybór zarówno dla początkujących, jak i doświadczonych użytkowników, którzy chcą łatwo dostosować projekt swojej witryny WordPress.

Pamiętaj jednak, że ta metoda wiąże się ze zmianą motywu. Jeśli jesteś zadowolony ze swojego obecnego motywu i nie chcesz go zmieniać, być może wolisz naszą drugą metodę.

Ponadto Thrive Architect nie ma darmowej wersji. Mimo to możesz użyć naszego kodu kuponu Thrive Themes aby uzyskać do 50% zniżki na pierwszy zakup.

Więcej o platformie dowiesz się w naszej recenzji Thrive Architect.

Krok 1: Zainstaluj Thrive Theme Builder

Aby rozpocząć, musisz skonfigurować Thrive Architect. Zacznij od zalogowania się na swoje konto Thrive Themes i pobrania wtyczki Thrive Product Manager.

Następnie pobierz i zainstaluj wtyczkę Thrive Product Manager. Możesz zapoznać się z naszym przewodnikiem dla początkujących na temat instalacji wtyczki WordPress, aby uzyskać instrukcje krok po kroku.

Na tym etapie przejdź do sekcji Product Manager w swoim obszarze administracyjnym WordPress.

Po wykonaniu tej czynności możesz kliknąć przycisk „Zaloguj się na moje konto”, aby połączyć swoją witrynę WordPress z kontem Thrive Themes.

Powinieneś teraz zobaczyć listę wszystkich dostępnych produktów Thrive Themes na swoim koncie.

Po prostu wybierz „Thrive Architect” i zaznacz pole „Zainstaluj produkt”.

Następnie przewiń w dół do sekcji „Thrive Theme Builder” i zaznacz pole „Zainstaluj motyw”. Musimy to zrobić, ponieważ Thrive Architect najlepiej działa z motywem Thrive.

Następnie kliknij przycisk „Zainstaluj wybrane produkty”.

Powinieneś teraz zobaczyć, że Thrive Product Manager konfiguruje wtyczki Thrive Architect i Thrive Theme Builder.

Po zakończeniu kliknij „Przejdź do panelu Theme Builder”.

W tym momencie możesz po prostu wybrać motyw WordPress.

Możesz również kliknąć przycisk „Podgląd”, aby zobaczyć, jak wygląda motyw, zanim klikniesz na niego „Wybierz”.

Po skonfigurowaniu motywu powinieneś teraz trafić do kreatora Theme Builder Wizard.

Ten kreator onboardingu pomoże Ci przesłać własne logo, wybrać kolory marki do dodania do motywu oraz skonfigurować różne struktury i szablony motywu.

Po prostu ukończ onboarding, aby przejść do następnego kroku.

Krok 2: Dodaj pasek postępu do swoich wpisów na WordPressie

Dodajmy teraz pasek postępu do Twoich wpisów na WordPressie. Aby zacząć, otwórz edytor bloków dla nowego lub istniejącego wpisu.

Następnie wpisz tytuł swojego nowego wpisu. Po tym kliknij przycisk „Uruchom Thrive Architect”.

Teraz możesz użyć Thrive Architect do tworzenia treści swojego wpisu na blogu. Działa podobnie do edytora bloków.

Oznacza to, że możesz po prostu kliknąć przycisk „+” i przeciągnąć dowolny element do sekcji, która mówi „Kliknij, aby dodać tekst lub przeciągnij i upuść element z prawego panelu”.

Oto przykład dodania bloku tekstowego za pomocą edytora:

Proces dodawania paska postępu jest w zasadzie taki sam. Po prostu kliknij ponownie przycisk „+” i znajdź blok „Pasek postępu”.

Następnie po prostu dodaj go do swojego posta.

Następnie pojawi się okno podręczne z prośbą o wybranie projektu paska postępu.

Jest ich kilkadziesiąt do wyboru i zawsze możesz je później zmienić, jeśli zajdzie taka potrzeba.

Po dokonaniu wyboru wrócisz do głównego interfejsu edytora.

Krok 3: Dostosuj pasek postępu

Na tym etapie powinieneś zobaczyć pasek boczny w lewym panelu z opcjami dostosowywania paska postępu.

Istnieje wiele ustawień do skonfigurowania, a my omówimy główne, aby pokazać, jak zmodyfikować pasek postępu.

W menu Opcje główne możesz zmienić projekt paska postępu z prostego na taki z węzłami. Węzły to ikony pokazujące, gdzie jesteś w postępie. Wybraliśmy ten typ projektu dla przykładu.

Możesz również zmienić miejsce umieszczenia etykiet paska postępu, wysokość paska i bieżący poziom paska postępu.

Przesuwając się w dół panelu, znajdziesz opcje zmiany etykiet węzłów.

Aby je zmodyfikować, kliknij ikonę ołówka „Edytuj” obok etykiety.

Teraz po prostu wpisz swoją nową etykietę.

Po zakończeniu kliknij ikonę „Zapisz”.

Wspaniałe w Thrive jest to, że pozwala dostosować każdą inną część paska postępu, dzięki czemu możesz zaprojektować go tak, jak lubisz.

Aby zobaczyć te opcje dostosowywania w akcji, możesz najechać kursorem na jeden z elementów paska postępu i kliknąć go.

Tutaj wybraliśmy część paska postępu, która pokazuje nieukończony postęp.

Teraz w lewym pasku bocznym pojawił się nowy zestaw opcji.

Jeśli klikniesz menu rozwijane „Obecnie stylizowany” na górze, możesz zmienić określone części paska, takie jak etykiety postępu, ikony, węzły i inne.

Pamiętaj, aby zbadać każdą część, aby zobaczyć, co możesz dostosować.

Wypróbujmy kilka przykładów. Aby wyłączyć animację pasków cukierkowych w tle paska, wybierz „Tło linii zgrupowanych” w menu Obecnie stylizowany.

Następnie wyłącz przycisk „Animacja pasków cukierkowych”.

Jeśli chcesz zmienić ikony w węzłach postępu, przełącz się na „Ikony postępu” w menu rozwijanym Obecnie stylizowany.

Następnie w menu „Stan” na górze wybierz „Normalny”.

Powinieneś teraz zobaczyć ustawienia służące do zmiany ikon paska postępu.

Tutaj kliknij „Zmień ikonę”.

Thrive Architect posiada wiele ikon w swojej bibliotece dla różnych branż. Mimo to upewnij się, że wybrana ikona nadaje się do paska postępu.

Gdy dokonasz wyboru, po prostu kliknij „Wybierz”.

Aby zmienić styl ikony, kliknij przycisk „Zmień styl”.

Tutaj zobaczysz gotowe projekty ikon, które możesz wybrać.

Aby zmienić wygląd etykiety postępu, przełącz się na opcję „Etykieta postępu” w menu rozwijanym „Obecnie stylizowany”.

Tutaj zobaczysz opcje dostosowania koloru etykiety, podświetlenia, formatowania i tak dalej.

Gdy będziesz zadowolony z wyglądu paska postępu, kliknij „Zapisz pracę”, aby zachować zmiany.

Upewnij się, że podglądasz swój wpis na blogu na urządzeniach mobilnych, komputerach i tabletach, aby wszystko wyglądało świetnie.

Oto jak wygląda nasza strona demonstracyjna:

Alternatywa: Dodaj okrągły pasek postępu

Thrive Architect posiada również inny rodzaj paska postępu w swojej kolekcji bloków, zwany licznikiem wypełnienia. Blok Licznik Wypełnienia wygląda jak okrągły pasek postępu, co jest świetne do wyświetlania statystyk.

Aby go dodać, wystarczy kliknąć przycisk „+” na prawym pasku bocznym i znaleźć element „Licznik Wypełnienia”. Następnie przeciągnij i upuść go w dowolnym miejscu posta.

Po dodaniu zobaczysz opcje dostosowania licznika wypełnienia.

Głównie możesz zmienić rozmiar licznika wypełnienia, procent wypełnienia, kolory i to, czy wartość procentowa powinna wizualnie odpowiadać wartości prezentowanej w liczniku.

Możesz również kliknąć na liczbę wewnątrz licznika wypełnienia, aby zmienić jej wygląd.

Możesz dowolnie modyfikować jego kolory, typ czcionki, widoczność na różnych urządzeniach i wiele więcej.

Jeśli chcesz zmienić tekst poniżej procentu, po prostu kliknij na sam tekst.

Następnie możesz wpisać opis dla licznika wypełnienia.

Nie zapomnij zapisać swojej pracy po zakończeniu.

Alternatywa: Nie przepadasz za Thrive Architect? Konstruktor stron SeedProd również posiada blok paska postępu, który możesz dodać do swojego motywu lub niestandardowych stron.

Więcej informacji o tym, jak korzystać z SeedProd, znajdziesz w naszym przewodniku na temat tworzenia niestandardowego motywu WordPress.

Metoda 2: Użyj darmowej wtyczki do pasków postępu (szybko i łatwo)

Ta metoda jest najlepsza, jeśli nie chcesz używać konstruktora stron i potrzebujesz prostego i darmowego wtyczki paska postępu WordPress.

W tym celu użyjemy darmowej wtyczki Ultimate Blocks, która dodaje mnóstwo dodatkowych bloków Gutenberga do edytora WordPress.

Wspaniałe w tej wtyczce jest to, że blok paska postępu jest dostępny za darmo. Niemniej jednak, możesz uaktualnić do wersji pro wtyczki, aby uzyskać więcej bloków Gutenberga i opcji dostosowywania.

Więcej o wtyczce dowiesz się w naszej recenzji Ultimate Blocks.

Najpierw zainstaluj i aktywuj wtyczkę WordPress na swojej stronie internetowej. Po zakończeniu możesz otworzyć edytor bloków, aby utworzyć nowy wpis lub edytować istniejący.

Teraz kliknij przycisk „+” w dowolnym miejscu na stronie i wybierz blok „Pasek postępu”.

Pomyślnie dodałeś teraz blok paska postępu do swojego wpisu. Dostosujmy ten element projektowania WordPress dalej, aby dopasować go do swoich potrzeb.

Jeśli spojrzysz na pasek boczny ustawień bloku po prawej stronie, zobaczysz kilka opcji dostosowywania. W zakładce „Ogólne” możesz zmienić pozycję procentową paska postępu od góry do wewnątrz lub do dołu paska.

Możesz również wyłączyć lub włączyć projekt „Pasek” i zmienić wartość bieżącego postępu.

Następnie możesz dostosować Ustawienia Liczby.

Tutaj wybraliśmy, aby nie wyświetlać procentowej liczby, ponieważ nie uważamy jej za przydatną w naszym przykładzie.

Ale jeśli zdecydujesz się na pokazanie go, możesz zmienić prefiks liczby (symbol pojawiający się przed liczbą, taki jak znak minus) i sufiks liczby (symbol pojawiający się po liczbie, taki jak symbol waluty).

Następny jest Kontroler Responsywny.

Ponieważ paski postępu mogą zajmować trochę miejsca w Twoim poście, możesz chcieć go ukryć, gdy post jest przeglądany na mniejszym ekranie, na przykład na tabletach lub urządzeniach mobilnych.

Chcesz, aby pasek postępu był bardziej interaktywny? Rozważ dodanie animacji wejścia. Po włączeniu tej funkcji pasek postępu pojawi się z efektem animacji, gdy widz przewinie do niego.

Możesz również wybrać styl animacji i ustawić czas opóźnienia, aby pasek postępu pojawił się we właściwym momencie.

Przejdźmy do zakładki „Styl”, gdzie możesz dostosować wygląd paska postępu.

Na górze możesz zmienić projekt z linii na pasek postępu w kształcie koła lub półkola. Możesz również dodać promień zaokrąglenia do projektu paska, aby wyglądał bardziej okrągło niż prostokątnie i ostro.

Tutaj zdecydowaliśmy się pozostać przy pasku postępu liniowym.

Ale tak wyglądają paski postępu w kształcie koła i półkola:

Przewijając w dół, możesz zmienić grubość paska postępu, aby jeszcze bardziej się wyróżniał.

Możesz również zmienić kolor paska postępu, paska tła i etykiety paska postępu, aby dopasować je do projektu Twojej strony internetowej.

Innym elementem, który możesz zmienić, jest wypełnienie i margines paska postępu.

Oba ustawienia zasadniczo kontrolują odstępy między paskiem postępu a innymi otaczającymi go blokami.

Możesz zwiększyć wartość obu, jeśli nie chcesz, aby pasek postępu był zbyt blisko innych bloków powyżej lub poniżej.

Następnie możesz dodać etykietę lub opis do paska postępu, aby czytelnicy uzyskali więcej kontekstu z wizualizacji.

Na górze paska postępu po prostu wpisz jakiś tekst. Możesz również zmienić wyrównanie i styl tekstu, korzystając z ustawień na pasku narzędzi bloku.

Gdy będziesz zadowolony z wyglądu paska postępu, po prostu kliknij „Opublikuj” lub „Zaktualizuj” w edytorze bloków.

Możesz również wyświetlić post na urządzeniach mobilnych, komputerach stacjonarnych i tabletach, aby upewnić się, że pasek postępu wygląda dobrze na wszystkich urządzeniach.

To wszystko! Pomyślnie dodałeś pasek postępu do swoich postów w WordPress.

Oto jak nasz pasek postępu wygląda na naszej stronie demonstracyjnej:

Często zadawane pytania: Dodawanie pasków postępu w WordPress

Oto kilka pytań, które często zadają nasi czytelnicy na temat pasków postępu:

1. Kiedy powinienem używać paska postępu czytania w porównaniu do statycznego paska postępu?

Zalecamy używanie paska postępu czytania, gdy chcesz utrzymać zaangażowanie czytelników w długich postach. Wypełnia się on w miarę przewijania, pokazując, ile artykułu przeczytali.

Działa to dobrze w przypadku samouczków, przewodników lub postów na blogu, gdzie chcesz zmniejszyć współczynnik odrzuceń.

Pasek postępu statycznego jest lepszy do śledzenia ustalonego celu, takiego jak postęp zbiórki pieniędzy, ukończenie projektu lub poziom umiejętności. Paski te nie przesuwają się podczas przewijania przez użytkownika, ale zamiast tego wyświetlają ustalony procent lub wartość, na przykład „60% ukończono” lub „zebrano 300 USD z 500 USD”.

Jeśli Twoim celem jest zwiększenie zaangażowania podczas czytania, wybierz pasek oparty na przewijaniu. Jeśli chcesz pochwalić się postępem lub osiągnięciami, wybierz statyczny.

2. Jakie są najlepsze praktyki podczas korzystania z pasków postępu?

Oto kilka wskazówek, jak sprawić, by Twój pasek postępu był bardziej efektywny:

• Zachowaj prostotę – cienki, subtelny pasek działa najlepiej i nie odwraca uwagi od treści.
• Dopasuj do swojej marki – dostosuj kolor i rozmiar, aby pasowały do stylu Twojej witryny.
• Wybierz odpowiednie miejsce – większość czytelników oczekuje go u góry ekranu.
• Testuj na urządzeniach mobilnych – niektóre paski wyglądają nieporęcznie na małych ekranach. Wyłącz w razie potrzeby.
• Opcjonalnie: Dodaj czas czytania – pomaga określić oczekiwania co do tego, ile czasu zajmie post.

Czysty i dobrze umieszczony pasek postępu może poprawić doświadczenie użytkownika, nie spowalniając działania.

3. Czy dodanie paska postępu spowolni moją witrynę?

Większość nowoczesnych wtyczek do pasków postępu jest lekka i nie wpłynie zauważalnie na szybkość Twojej witryny.

Jednak źle napisane lub przeładowane wtyczki mogą wpłynąć na wydajność, zwłaszcza na urządzeniach mobilnych. Aby zachować bezpieczeństwo:

• Używaj zaufanych wtyczek z dobrymi opiniami.
• Przetestuj szybkość swojej witryny po zainstalowaniu.
• Wyłącz pasek na urządzeniach mobilnych, jeśli wpływa to na czas ładowania.

Dopóki będziesz ostrożny w wyborze wtyczek, dodanie paska postępu nie zaszkodzi SEO, a nawet może zwiększyć zaangażowanie.

Dodatkowe elementy projektowe dla Twojej witryny WordPress

Chcesz dodać inne elementy wizualne do swojej witryny WordPress? Sprawdź te artykuły poniżej:

• Jak dodać inicjały w postach WordPress
• Jak dodać widżet odliczania w WordPress
• Jak dodać przewijany ticker wiadomości w WordPress
• Jak dodać animowane tło w WordPress
• Jak pokazać animację licznika w WordPress
• Sposoby na dodanie efektów Halloween do Twojej witryny WordPress
• Jak dodać obracające się opinie w WordPress
• Jak dodać pola z ikonami w WordPress
• Jak dodać wideo z YouTube jako pełnoekranowe tło w WordPress

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak dodać pasek postępu do swoich postów w WordPress. Możesz również sprawdzić nasze najlepsze wybory najlepszych kreatorów motywów WordPress oraz nasz przewodnik jak edytować witrynę WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.