Jak dodać pasek postępu czytania do wpisów WordPress (3 proste sposoby)

Znasz to uczucie, gdy czytasz długi artykuł online i nie masz pojęcia, ile jeszcze zostało? Taki problem rozwiązują paski postępu czytania dla Twoich odwiedzających WordPressa.

Te proste wizualne wskaźniki pokazują czytelnikom dokładnie, ile artykułu już przeczytali, co może zachęcić ich do dalszego czytania i pozostania na Twojej stronie. Wykorzystuje to tę samą satysfakcję, jaką odczuwasz po ukończeniu czegoś z wyraźnym punktem końcowym.

W WPBeginner nie używamy pasków postępu, ponieważ nasze samouczki są zaprojektowane tak, aby można je było szybko przeglądać. Większość ludzi przeskakuje bezpośrednio do sekcji, której potrzebują, zamiast czytać od początku do końca.

Ale jeśli publikujesz dłuższe posty na blogu, szczegółowe przewodniki lub obszerne artykuły, pasek postępu czytania może naprawdę pomóc w utrzymaniu zaangażowania czytelników.

W tym przewodniku pokażemy Ci trzy różne sposoby dodania jednego do swojej witryny WordPress, niezależnie od tego, czy chcesz proste rozwiązanie w postaci wtyczki, czy coś bardziej spersonalizowanego.

Kiedy dodać pasek postępu czytania do swoich wpisów na blogu WordPress

W przypadku dłuższych postów na blogu dodanie paska postępu czytania może być cennym narzędziem, aby ludzie pozostali na Twojej stronie WordPress. Może on informować czytelników, ile już przeczytali i ile pozostało.

Czytelnicy chętniej przewijają dalej, widząc, że zbliżają się do końca artykułu. Pasek postępu może zmotywować ich do dokończenia czytania.

Dodatkowo, posiadanie wskaźnika czytania dodaje odrobinę interaktywności do Twoich treści. Może sprawić, że czytanie będzie bardziej przypominać podróż z jasno określonym celem.

Warto jednak wziąć pod uwagę swoją treść. Z naszych testów wynika, że paski postępu czytania działają najlepiej, gdy treść musi być konsumowana liniowo. Niemniej jednak mogą nie być konieczne dla stron internetowych takich jak nasza, które koncentrują się na szybkich, łatwych do zeskanowania materiałach referencyjnych.

Mając to na uwadze, zobaczmy, jak łatwo dodać pasek postępu czytania do swoich postów na WordPress. Możesz skorzystać z poniższych szybkich linków, aby przejść do preferowanej metody:

• Metoda 1: Zaprojektuj niestandardowy motyw z wskaźnikami postępu czytania
• Metoda 2: Dodaj pasek postępu czytania za pomocą darmowej wtyczki
• Metoda 3: Dodaj pasek postępu czytania za pomocą kodu
• Dodatkowe wskazówki, jak utrzymać zaangażowanie czytelników Twojego bloga WordPress

Metoda 1: Zaprojektuj niestandardowy motyw z wskaźnikami postępu czytania

Jednym ze sposobów dodania paska postępu czytania do wpisów WordPress jest użycie kreatora motywów z funkcją paska postępu. W ten sposób projekt paska postępu będzie płynnie integrował się z resztą motywu, co sprawi, że będzie przyjemniejszy dla oka.

Pamiętaj, że ta metoda będzie wymagać zmiany motywu, dlatego nie zalecamy jej, jeśli jesteś już zadowolony ze swojego motywu i nie planujesz go wkrótce zmieniać. W takim przypadku powinieneś zamiast tego skorzystać z metody 2 (wtyczka) lub metody 3 (kod).

W tej metodzie użyjemy Thrive Theme Builder. Oprócz paska postępu czytania, Thrive Theme Builder oferuje dziesiątki szablonów motywów do różnych celów, od blogów po strony korporacyjne.

Co najlepsze, kreator typu „przeciągnij i upuść” jest łatwy w użyciu, co czyni go świetnym dla początkujących.

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

Jedną z wad Thrive Themes jest brak darmowej wersji. Niemniej jednak możesz użyć naszego kodu rabatowego Thrive Themes, aby uzyskać do 50% zniżki na pierwszy zakup.

Krok 1: Zainstaluj Thrive Theme Builder

Pierwszym krokiem jest skonfigurowanie Thrive Theme Builder. Dostęp do tej wtyczki można uzyskać, logując się na swoje konto na stronie Thrive Themes.

Następnie pobierz i zainstaluj wtyczkę Thrive Product Manager. Więcej informacji znajdziesz w naszym przewodniku dla początkujących na temat jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki kliknij Menedżer Produktów w swoim obszarze administracyjnym WordPress.

Następnie kliknij przycisk „Zaloguj się na moje konto”, aby połączyć swoją stronę WordPress z kontem Thrive Themes.

Po tym powinieneś zobaczyć listę wszystkich dostępnych produktów Thrive Themes w swoim koncie.

Tutaj wybierz „Thrive Architect” i zaznacz pole „Zainstaluj produkt”.

Ten kreator stron działa razem z kreatorem motywów, dlatego musimy go aktywować.

Następnie przewiń w dół do sekcji „Thrive Theme Builder” i zaznacz pole „Install Theme”.

Teraz po prostu kliknij „Zainstaluj wybrane produkty”.

Na następnej stronie zobaczysz, że Thrive Product Manager instaluje i aktywuje Thrive Theme Builder.

Po zakończeniu procesu kliknij „Przejdź do panelu kreatora motywów”.

Teraz wybierz motyw WordPress.

Jeśli nie jesteś pewien, którą opcję wybrać, po prostu kliknij przycisk „Podgląd”, aby najpierw zobaczyć, jak wygląda motyw. Następnie kliknij „Wybierz”, gdy podejmiesz decyzję.

Powinieneś teraz dotrzeć do Kreatora Motywów.

Ten kreator konfiguracji przeprowadzi Cię przez proces przesyłania własnego logo, wybierania kolorów marki do dodania do motywu oraz konfigurowania różnych struktur i szablonów motywu.

Dokończ kreatora konfiguracji przed przejściem do następnego kroku.

Krok 2: Dodaj pasek postępu czytania do szablonu pojedynczego posta

Po skonfigurowaniu motywu dodajmy teraz pasek postępu czytania do szablonu motywu. Ponieważ chcemy wyświetlać pasek postępu tylko w postach WordPress, będziemy musieli edytować szablon pojedynczego posta.

Aby to zrobić, przełącz się na zakładkę „Szablony” w Thrive Theme Builder. Następnie znajdź szablon „Domyślny wpis” i kliknij „Edytuj”.

Powinieneś teraz znaleźć się w kreatorze motywów. Powinien być tam lewy pasek boczny do edycji szablonu, podgląd samego szablonu i mały pasek narzędzi po prawej stronie do dodawania kolejnych bloków lub zmiany stylu szablonu.

Aby dodać wskaźnik czytania, przewiń w dół lewy pasek boczny i znajdź ustawienie „Wskaźnik postępu czytania”. Po prostu kliknij przełącznik, aby go aktywować.

Po dodaniu paska postępu powinno pojawić się więcej ustawień do jego edycji.

Najpierw możesz wybrać dodanie paska postępu pod nagłówkiem lub na górze obszaru widocznego na ekranie (tuż nad nagłówkiem). Jeśli wybierzesz pierwszą opcję, upewnij się, że nagłówek jest ustawiony jako „lepki”, co pokażemy, jak zrobić później.

Następnie możesz zmienić kolor paska postępu. Wystarczy kliknąć selektor kolorów, aby to zrobić.

Teraz możesz wybrać jeden z kolorów motywu, czyli predefiniowaną paletę kolorów Twojego motywu. Lub możesz kliknąć „Odłącz od koloru motywu”, aby wybrać zupełnie inny kolor, który nie jest częścią Twojego motywu.

Jeśli wybierzesz opcję „Usuń powiązanie z kolorem motywu”, możesz również dostosować przezroczystość koloru.

W ten sposób możesz dostosować, jak bardzo przezroczysty jest pasek postępu na tle. Biorąc to pod uwagę, najlepiej jest, aby kolor paska postępu nie był tak jaskrawy, aby rozpraszał użytkowników podczas czytania.

Gdy będziesz zadowolony z koloru, po prostu kliknij „Zastosuj”.

Na koniec możesz dostosować wysokość paska postępu.

Kreator motywów pozwala na zmianę rozmiaru paska do 10 pikseli. Zapewnia to, że pasek postępu nie będzie wyglądał zbyt duży. Mając to na uwadze, zalecamy wybór rozmiaru od 5 do 10, aby pasek postępu był wyraźnie widoczny.

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

Krok 3: Uczyń swój nagłówek „lepkim” (opcjonalnie)

Jeśli zdecydujesz się wyświetlić pasek postępu czytania pod nagłówkiem, będziesz musiał wykonać ten krok. W przeciwnym razie możesz go pominąć.

Najpierw przewiń w dół lewy pasek boczny i kliknij „Nagłówek”.

W pasku bocznym powinna teraz pojawić się inna grupa ustawień do dostosowywania nagłówka.

Przewiń w dół do sekcji Nagłówek i kliknij „Edytuj”.

Teraz otwórz kartę Zachowanie podczas przewijania.

Następnie musisz wybrać „Przyklejony”. W zależności od motywu może być konieczne również ustawienie odległości od góry ekranu na 1 piksel, aby pasek postępu się pojawił.

Pozostałe ustawienia możesz pozostawić bez zmian i kliknąć „Gotowe” na dole.

Krok 4: Dodaj wskaźnik czasu czytania (opcjonalnie)

Inną rzeczą, którą możesz zrobić z Thrive Theme Builder, jest wyświetlanie szacowanego czasu czytania, aby przejść przez post od początku do końca. Pomaga to użytkownikom zobaczyć, ile czasu zajmie przeczytanie artykułu, pozwalając im wybrać treści, które pasują do ich dostępnego czasu.

Najpierw kliknij na blok odpowiedzialny za wyświetlanie metadanych posta.

To jest część szablonu pojedynczego wpisu, która wyświetla informacje takie jak autor wpisu, kategorie, tagi i tak dalej.

Następnie kliknij ikonę „Dynamiczny tekst” na pasku narzędzi.

Tutaj musisz wybrać „Treść” w pierwszym menu rozwijanym i „Pozostały czas czytania (w minutach)” w drugim.

Po tym kliknij „Wstaw”.

Powinieneś teraz zobaczyć nowy tekst mówiący „Pozostało 0 minut” w metadanych posta. Możesz go dostosować do swoich upodobań.

W naszym przypadku zdecydowaliśmy się usunąć słowo „pozostałe”.

Po zakończeniu nie zapomnij kliknąć „Zapisz pracę”.

Krok 5: Podgląd wskaźników postępu czytania

Teraz, gdy skonfigurowałeś ustawienia paska postępu, możesz odwiedzić swój wpis na blogu, aby zobaczyć pasek w akcji.

Jeśli chcesz zobaczyć podgląd zamiast widzieć pasek na żywo na swojej stronie, możesz po prostu kliknąć przycisk „Podgląd” u dołu. Thrive Theme Builder pozwala na podgląd Twojej strony na komputerze, tablecie i telefonie komórkowym.

Śmiało dokonaj tylu zmian, ile potrzebujesz.

Oto jak wygląda nasz pasek postępu czytania:

Metoda 2: Dodaj pasek postępu czytania za pomocą darmowej wtyczki

Jeśli chcesz po prostu dodać prosty pasek postępu czytania do swoich postów WordPress za darmo, możesz użyć wtyczki Catch Scroll Progress Bar.

Ta wtyczka paska postępu czytania automatycznie wyświetli miernik postępu na Twoich stronach i postach, a Ty możesz łatwo dostosować go do swoich preferencji.

Najpierw zainstaluj wtyczkę w swoim panelu administracyjnym WordPress. Więcej informacji znajdziesz w naszym przewodniku dla początkujących na temat jak zainstalować wtyczkę WordPress.

Gdy to zrobisz, przejdź do Catch Scroll Progress Bar w swoim panelu WordPress. Zobaczysz teraz ustawienia paska postępu do skonfigurowania.

Dzięki temu wtyczce możesz zmienić pozycję paska postępu z góry na dół. Mimo to, możesz go po prostu zostawić w obecnej pozycji, jeśli wolisz standardową pozycję na górze.

Inną rzeczą, którą można dostosować, jest kolor tła i kolor pierwszego planu.

Kolor tła odnosi się do domyślnego koloru paska postępu, gdy czytelnik nie przewinął jeszcze strony. Tymczasem kolor pierwszego planu to kolor, który pojawi się, gdy czytelnik będzie przewijał stronę w dół.

Następnie jest krycie, które kontroluje przezroczystość kolorów tła i pierwszego planu. Zakres wynosi od 0 do 1, gdzie 1 oznacza krycie, a 0 oznacza przezroczystość lub niewidoczność.

Śmiało eksperymentuj z liczbami, aż znajdziesz pożądany poziom krycia.

Następnie możesz dostosować wysokość i promień zaokrąglenia paska postępu.

Jeśli chodzi o wysokość, stwierdziliśmy, że najlepsza liczba to od 1 do 8, ale nie więcej. W przeciwnym razie pasek postępu może wyglądać zbyt duży.

Promień zaokrąglenia określa, jak zaokrąglone wyglądają rogi paska postępu. Jeśli Ci się to nie podoba, możesz po prostu wpisać ‘0.’

Teraz ten wtyczka pozwala również zdecydować, w których szablonach ma być wyświetlany pasek postępu: na stronie głównej, stronie bloga, archiwach i kategoriach, i/lub pojedynczych postach lub stronach.

Zazwyczaj wystarczy dodać pasek postępu czytania do swoich postów na blogu WordPress. W tym przypadku wybraliśmy tylko „Pojedyncza strona/post” w ustawieniu „Wybierz warunek szablonu dla paska postępu”.

Sprawdziliśmy również opcję „Wpisy” w sekcji „Wybierz typ wpisu, do którego ma zostać zastosowany pasek postępu”, ponieważ chcemy, aby pasek pojawiał się tylko we wpisach na blogu.

Mając to na uwadze, możesz sprawdzić warunki, które najlepiej pasują do Twojej witryny.

Gdy będziesz zadowolony z ustawień paska postępu, kliknij „Zapisz zmiany”.

Teraz, jeśli podglądasz swój post na blogu na urządzeniu mobilnym lub komputerze, powinieneś zobaczyć pasek postępu.

Metoda 3: Dodaj pasek postępu czytania za pomocą kodu

Możesz również użyć niestandardowego kodu, aby dodać pasek postępu czytania do swojej witryny WordPress.

Często samouczki proszą o dodanie kodu bezpośrednio do pliku functions.php motywu. Jednak nie zalecamy tego, ponieważ najmniejszy błąd może zepsuć Twoją witrynę.

Zamiast tego zalecamy użycie wtyczki WPCode. Jest to najłatwiejszy i najbezpieczniejszy sposób na dodawanie niestandardowego kodu w WordPress bez konieczności edycji plików rdzennych WordPress.

Dokładnie przetestowaliśmy WPCode i uznaliśmy go za niezawodne i przyjazne dla początkujących rozwiązanie.

Zawiera wbudowaną bibliotekę gotowych fragmentów kodu, które możesz dodać do swojej witryny za pomocą kilku kliknięć, w tym jeden dla paska postępu czytania. Możesz zapoznać się z naszą pełną recenzją WPCode, aby dowiedzieć się więcej o jego funkcjach i dlaczego go polecamy.

Aby rozpocząć, musisz zainstalować i aktywować darmową wtyczkę WPCode. Jeśli potrzebujesz pomocy, zapoznaj się z naszym poradnikiem jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki przejdź do Fragmenty kodu » Biblioteka z panelu administracyjnego WordPress.

Stamtąd wyszukaj „Scroll Progress Bar” w bibliotece, najedź na niego kursorem myszy i kliknij przycisk „Użyj fragmentu”.

WPCode automatycznie doda kod za Ciebie.

W tle zostanie również wybrana dla Ciebie odpowiednia metoda wstawiania.

Następnie wystarczy przełączyć przełącznik z pozycji Nieaktywny na Aktywny.

Następnie kliknij przycisk 'Aktualizuj'.

Teraz możesz wyświetlić post na swoim blogu na swojej stronie internetowej.

Powinien teraz pojawić się prosty pasek postępu, wyglądający tak:

Dodatkowe wskazówki, jak utrzymać zaangażowanie czytelników Twojego bloga WordPress

Chcesz zamienić przypadkowych odwiedzających w lojalnych czytelników? Mamy dla Ciebie rozwiązanie!

Sprawdź te eksperckie samouczki WordPress pełne wskazówek, które utrzymają zaangażowanie Twoich odbiorców:

• Stylizuj każdy post WordPress inaczej, aby Twoje treści były atrakcyjne wizualnie.
• Twórz niestandardowe separatory kształtów, aby dzielić tekst i prowadzić czytelników przez treść.
• Dodaj emotikony, aby wyrazić swoją osobowość i dodać odrobinę zabawy do swojego bloga.
• Wyróżnij nowe wpisy dla powracających odwiedzających i spraw, by wracali po więcej.
• Podświetl tekst w swoich postach WordPress i podkreśl kluczowe punkty dla czytelników.
• Dodaj proste i eleganckie przypisy do swoich wpisów na blogu, aby zaprezentować swoje badania.
• Zaimponuj swoim odwiedzającym, pokazując obracające się opinie na swojej stronie WordPress.
• Dodaj narzędzie do zmiany rozmiaru czcionki do swojej witryny WordPress, aby zapewnić dostępność treści dla wszystkich.

Mamy nadzieję, że ten artykuł pomógł Ci dodać paski postępu czytania w WordPress. Możesz również zapoznać się z naszym kompletnym przewodnikiem na temat edycji strony WordPress oraz naszymi ekskluzywnymi wyborami najlepszych alternatyw dla Canva do grafiki stron internetowych.

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.