Jak zbudować pasek postępu czytania dla swoich postów na blogu Divi (bez wtyczki)

Dodanie paska postępu czytania (lub wskaźnika przewijania) do szablonu posta na blogu to inteligentny sposób na pokazanie postępu użytkownika w czytaniu danego artykułu. Pomysł polega na tym, aby u góry posta wyświetlić stały pasek postępu, który bezpośrednio koreluje z pozycją przewijania użytkownika na treści posta. Gdy użytkownik dotrze do artykułu, pasek postępu zaczyna się zapełniać. Gdy użytkownik dotrze do końca artykułu, pasek postępu jest zapełniony w 100%.

W tym samouczku pokażemy, jak utworzyć pasek postępu czytania dla postów na blogu Divi, który jest wystarczająco inteligentny, aby wiedzieć, kiedy użytkownik zaczyna i kończy (przewijając) rzeczywistą treść posta, a nie całą stronę. Zapewni to dokładniejsze wskazanie postępu czytania.

Pokażemy Ci, jak dodać ten pasek postępu czytania do domyślnego szablonu postu na blogu Divi lub niestandardowego szablonu posta za pomocą Kreatora motywów Divi.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku. Zwróć uwagę, jak pasek postępu jest zamocowany w górnej części szablonu posta. Pasek postępu zaczyna się zapełniać, gdy użytkownik dotrze do rzeczywistej treści posta/artykułu i kończy się, gdy użytkownik kończy treść posta.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ sekcji do Divi Theme Builder, przejdź do Divi Theme Builder.

Kliknij ikonę przenoszenia.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu szablon sekcji pojawi się w Divi Theme Builder.

Przejdźmy do samouczka, dobrze?

Część 1: Importowanie gotowych szablonów

W tym samouczku użyjemy kilku gotowych szablonów z naszego szóstego pakietu do tworzenia motywów. Zaimportujemy domyślny szablon witryny, który da nam działający globalny nagłówek, w którym dodamy pasek informacji o wpisie. I zamierzamy zaimportować szablon postu na blogu, aby przetestować nasze wyniki w poście na żywo.

WAŻNE: najlepiej byłoby zaimportować te szablony w witrynie testowej, aby nie zepsuć działającej witryny.

Importuj domyślny szablon strony internetowej

Najpierw musisz pobrać czwarty DARMOWY pakiet Theme Builder Pack dla Divi. Następnie rozpakuj plik.

Z pulpitu nawigacyjnego WordPress przejdź do Divi> Kreator motywów. Następnie kliknij ikonę przenoszenia w prawym górnym rogu. W wyskakującym okienku przenoszenia wybierz kartę importu. Następnie wybierz domyślny plik JSON szablonu strony internetowej z pobranego folderu i kliknij przycisk importu. Spowoduje to zaimportowanie nowego domyślnego szablonu witryny z globalnym nagłówkiem i stopką.

Importuj szablon posta

Powtórz ten proces, aby zaimportować szablon posta z tego samego pobranego folderu. Otwórz wyskakujące okienko przenoszenia, wybierz plik json szablonu posta i kliknij przycisk importu. Dzięki temu otrzymasz szablon wpisu przypisany do wszystkich wpisów w Twojej witrynie wraz z domyślnym nagłówkiem i stopką.

Wyłącz globalne w nagłówku szablonu posta

Zamierzamy dodać nasz dynamiczny pasek informacyjny posta do nagłówka szablonu posta. Ponieważ jednak chcemy, aby pasek informacyjny posta znajdował się tylko w szablonie posta, musimy wyłączyć globalne w nagłówku, aby nasz pasek nie był dodawany do wszystkich nagłówków w całej witrynie. Aby wyłączyć globalne w globalnym nagłówku, otwórz menu ustawień w globalnym nagłówku i wybierz "Wyłącz globalne".

Teraz nagłówek powinien być szary z etykietą „Custom Header”. Po zakończeniu kliknij ikonę edycji, aby edytować szablon układu nagłówka.

Projektowanie paska postępu czytania

Dodawanie sekcji i wiersza

W edytorze układu nagłówka utwórz nową zwykłą sekcję pod bieżącą sekcją zawierającą nagłówek.

Następnie dodaj do sekcji jedną kolumnę.

Ustawienia sekcji

Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

• Padding: 0px na górze, 0px na dole

Ustawienia wiersza

Po dodaniu ustawień sekcji otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• kolor tła: #2b2b2b

Na karcie projekt zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%
• Padding: 0px na górze, 0px na dole

Tworzenie paska przewijania z modułem dzielnika

Pasek postępu będzie stopniowo powiększał się, aby zająć pusty pojemnik/wiersz. Aby to zbudować, użyjemy modułu dzielnika z niestandardowym kolorem tła. Po zaprojektowaniu dzielnika stylizowanego tak, jak chcemy, aby wyglądał pasek postępu, dodamy kod niezbędny do zwiększenia szerokości dzielnika we właściwym czasie podczas przewijania strony.

Dodaj moduł dzielnika

Utwórz nowy moduł rozdzielający wewnątrz kolumny.

Następnie wyłącz widoczność przegrody. Zamiast tego dodamy kolor tła, który będzie służył jako kolor paska postępu. Zaktualizuj następujące elementy:

• Pokaż dzielnik: NIE
• Kolor lewego gradientu tła: #ff4349
• Prawy gradient tła: #fe7f47
• Kierunek gradientu: 90 stopni

Na karcie projektu zaktualizuj wysokość paska postępu:

• wysokość: 20px

Na karcie Zaawansowane nadaj separatorowi niestandardowy identyfikator CSS w następujący sposób:

• Identyfikator CSS: pasek przewijania

Będziemy tego potrzebować, aby później kierować pasek przewijania dla funkcjonalności z jQuery.

Dodaj etykietę licznika procentowego paska postępu

Aby dodać etykietę licznika procentowego paska postępu, dodaj moduł tekstowy poniżej modułu dzielnika.

Następnie dodaj następujący kod HTML do treści treści:

<p>Reading Progress: <span></span></p>

Znaczniki span są tutaj ważne, ponieważ użyjemy jQuery do wypełnienia znaczników span licznikiem procentowym.

Na karcie projekt zaktualizuj następujące elementy:

• Czcionka tekstu: Heebo
• Grubość czcionki tekstu: pogrubiona
• Styl czcionki tekstu: TT
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 13px
• Odstępy między literami tekstu: 3px
• Wysokość linii tekstu: 1em

Następnie zaktualizuj nieco lewą wyściółkę:

• dopełnienie: pozostało 10px

W zakładce Zaawansowane nadaj modułowi tekstowemu pozycję bezwzględną na środku kolumny/wiersza. Zapewni to, że nie zajmie on rzeczywistego miejsca w dokumencie i pozostanie wyśrodkowany w pionie na pasku.

• Pozycja: bezwzględna
• Lokalizacja: Lewy środek

Zanim opuścisz moduł tekstowy, dodaj klasę CSS, abyśmy mogli kierować ją naszym kodem jQuery.

• Klasa CSS: et-progress-label

Dodawanie kodu jQuery

Aby nadać pasek postępu magiczną funkcjonalność, jakiej potrzebuje, musimy dodać niezbędny kod jQuery.

Aby to zrobić, dodaj nowy moduł kodu pod modułem tekstowym.

Następnie wklej następujący kod:

<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');   
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();          
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>    

W ostatnim kroku musimy nadać naszej sekcji stałą pozycję. Zapisaliśmy to na koniec, ponieważ spowoduje to ukrycie sekcji za powyższymi sekcjami zawierającymi treść nagłówka.

Otwórz ustawienia sekcji dla sekcji zawierającej pasek postępu i zaktualizuj następujące elementy:

• Pozycja: Naprawiono
• Indeks Z: 998

Następnie otwórz ustawienia górnej sekcji zawierającej zawartość nagłówka i zaktualizuj indeks Z w następujący sposób:

• Indeks Z: 999

Teraz pasek postępu będzie początkowo ukryty za górną częścią nagłówka. Następnie, gdy użytkownik przewinie post w dół, zobaczysz go naprawione na górze strony.

Nie zapomnij zapisać zmian.

Dodanie selektora (klasa CSS) do modułu treści posta w szablonie obszaru ciała.

W tej chwili jest napisany kod, który rozpoznaje element z klasą „et-post-content” jako główną treść posta.

Ponieważ używamy niestandardowego szablonu dla treści postu, musimy zastosować tę klasę CSS do modułu treści posta szablonu, aby nasz kod mógł odpowiednio obliczyć postęp czytania, gdy użytkownik przewija post w dół.

Aby to zrobić, otwórz szablon obszaru treści szablonu posta w konstruktorze motywów.

Otwórz ustawienia modułu treści posta i dodaj następującą klasę CSS:

• Klasa CSS: et-post-content

Następnie zapisz zmiany.

Po zakończeniu zapisz zmiany w układzie i kreatorze motywów.

Ostateczny wynik

Aby zobaczyć wynik w akcji, otwórz post na żywo w swojej witrynie. Upewnij się, że post ma wystarczająco dużo treści, aby można było przewinąć stronę w dół.

Korzystanie z paska postępu czytania w domyślnym szablonie wiadomości Divi (nie w szablonie niestandardowym)

Jeśli nie używasz niestandardowego szablonu treści dla posta i chcesz dodać pasek postępu czytania do domyślnego szablonu postu na blogu w Divi, wystarczy, że zaktualizujesz pojedynczą klasę CSS w kodzie.

Najpierw upewnij się, że niestandardowy obszar treści szablonu posta został usunięty.

Następnie otwórz niestandardowy układ szablonu nagłówka i zaktualizuj moduł kodu, zastępując ten wiersz kodu…

 var $postContent = $('.et-post-content');

z tym…

 var $postContent = $('.entry-content');

Klasa „entry-content” będzie kierowana na element div w domyślnym szablonie posta, który zawiera treść posta na blogu (z wyłączeniem tytułu, wyróżnionego obrazu, metadanych powyżej i komentarzy poniżej, które zniekształciłyby rzeczywistą długość artykułu).

Wynik

Oto wynik posta przy użyciu domyślnego szablonu posta.

Końcowe przemyślenia

Ten pasek postępu czytania jest o wiele mądrzejszy niż typowy wskaźnik przewijania, który pokazuje postęp przewijania całej strony/dokumentu. Ten pasek wskazuje tylko rzeczywistą treść posta, którą użytkownik będzie czytał, dając dokładny obraz postępu czytania. To jest świetne dla tych blogów, które mają zwykle długie teksty i komentarze. Świetnie bym też pracowała w przypadku kursów online, aby dać tym studentom dodatkową motywację do kontynuowania nauki!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!