Jak wyświetlić szacowany czas czytania posta i liczbę słów w Divi (z ReadingTime.js)

Niektórzy ludzie (w tym ja) doceniają trochę informacji o długości posta na blogu lub, co ważniejsze, ile czasu zajmie przeczytanie. Świetnym sposobem na to jest wyświetlanie szacowanego czasu czytania i/lub liczby słów u góry postów na blogu. Ta funkcja jest widoczna na popularnych blogach, takich jak medium.com. Nie musi być nachalny ani odwracać uwagi użytkownika od angażowania się w treść. Ale może to dodać niezły wzrost UX tym, którzy spędzają dużo czasu na pożeraniu treści w sieci.

W tym samouczku pokażemy Ci szybki i łatwy sposób na dodanie szacowanego czasu czytania i liczby słów do postów na blogu Divi. Biblioteka readTime.js, której będziemy używać, jest prosta, lekka i łatwa do wdrożenia w witrynie Divi. Dodatkowo możesz mieć większą kontrolę nad stylem i rozmieszczeniem czasu czytania i rozmieszczeniem liczby słów. Wszystko to bez konieczności polegania na innej wtyczce!

Dodamy szacowany czas czytania i liczbę słów do szablonu postu na blogu za pomocą narzędzia Divi Theme Builder. Tak więc po dodaniu do szablonu czas czytania i liczba słów będą ładnie wyświetlane we wszystkich twoich postach w witrynie.

Zacznijmy.

zapowiedź

Oto krótkie spojrzenie na czas czytania i liczbę słów, które dodamy do szablonu posta w Divi.

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!

Jak przesłać szablon

Przejdź do kreatora motywów Divi

Aby przesłać szablon, przejdź do Divi Theme Builder na zapleczu swojej witryny WordPress.

Prześlij szablon strony internetowej

Następnie w prawym górnym rogu zobaczysz ikonę z dwiema strzałkami. Kliknij ikonę.

Przejdź do zakładki importu, prześlij plik JSON, który udało Ci się pobrać w tym poście, i kliknij „Importuj szablony Divi Theme Builder”.

Zapisz zmiany w kreatorze motywów Divi

Po przesłaniu pliku zauważysz nowy szablon z nowym obszarem treści, który został przypisany do wszystkich postów. Zapisz zmiany Divi Theme Builder, gdy tylko chcesz, aby szablon został aktywowany.

Przejdźmy do samouczka, abyśmy mogli nauczyć się budować tę rzecz od podstaw, dobrze?

Jak wyświetlić szacowany czas czytania posta i liczbę słów w Divi

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Przejdź do Kreatora motywów Divi
2. Kliknij ikonę przenoszenia w prawym górnym rogu strony.
3. Wybierz kartę Importuj w wyskakującym okienku Przenośność.
4. Wybierz/zaimportuj plik szablonu posta konsultanta Divi Business (pobierz tutaj).
5. Kliknij przycisk Importuj

Następnie będziesz mieć szablon posta gotowy do edycji.

Dodawanie tekstu/HTML do szablonu posta

Aby edytować szablon posta, kliknij ikonę edycji w niestandardowym obszarze treści.

W edytorze układu postu dodaj nowy jednokolumnowy wiersz pod wierszem zawierającym metadane posta w górnej sekcji układu.

Po zakończeniu dodaj moduł tekstowy do nowego wiersza.

W ustawieniach modułu tekstowego wklej następujący kod HTML wewnątrz ciała (za pomocą zakładki tekst):

<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>

Ważną rzeczą do zapamiętania jest to, że tag span z klasą „eta” ostatecznie wyświetli szacowany czas czytania treści posta. A tag span z klasą „liczba słów” wyświetli liczbę słów w treści posta.

Stylizowanie tekstu czasu czytania

Na karcie projektu zaktualizuj style tekstu w następujący sposób:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: pogrubiona
• Styl czcionki tekstu: TT
• Kolor tekstu: #ffffff
• Tekst Rozmiar tekstu: 14px (komputer), 12px (telefon)
• Odstępy między literami tekstu: 2px
• Wyrównanie tekstu: do środka

Stylizacja rzędu

Po zakończeniu ustawień tekstu otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

W zakładce Zaawansowane zaktualizuj pozycję:

• Pozycja: bezwzględna
• Lokalizacja: dolny lewy

Dodawanie kodu

Aby dodać niezbędny kod do wygenerowania szacowanego czasu czytania i liczby słów, najpierw dodaj moduł kodu pod modułem tekstowym.

Zamierzamy użyć biblioteki readtime.js z pewnym niestandardowym kodem, aby skierować nasz obszar treści posta, docelową klasę czasu czytania eta i liczbę słów docelową klasę liczba-słów .

Wklej następujący kod w bloku kodu, upewniając się, że kod został umieszczony w tagach skryptu :

(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'), 
wordsPerMinute: 275,
lang: 'en',
});
}); 
})( jQuery );

O kodeksie

Klasa docelowa et_pb_post_content służy do wyznaczania obszaru zawartości posta w Divi, który przechowuje treść posta, aby kod znał tekst, którego potrzebuje do zliczenia i oszacowania czasu czytania. Na przykład, jeśli użyjesz treści jako celu, kod obliczy całą treść/tekst na całej stronie, a nie tylko treść artykułu.

ReadTimeTarget jest przypisany do klasy eta, która odpowiada klasie, którą dodaliśmy do znacznika span w module tekstowym. A wordCountTarget jest przypisany do klasy liczenia słów, którą dodajemy do drugiego znacznika span w module tekstowym.

Możesz również zaktualizować wartość słów na minutę (obecnie 275), aby odzwierciedlić to, co Twoim zdaniem powinno być. To oczywiście wpłynie na wyświetlany czas czytania. Z tego, co zbadałem, przeciętny dorosły czyta około 300 słów na minutę. Dodatkowo zawsze możesz również zaktualizować wartość języka. Na przykład możesz zamienić „en” na „fr”, jeśli chcesz, aby tekst był wyświetlany w języku francuskim). Aby uzyskać więcej informacji, zapoznaj się z dokumentacją na github.

Zapisz układ szablonu i Kreator motywów.

Następnie przejdź do Divi> Opcje motywu> Integracje.

Następnie dodaj bibliotekę do obszaru nagłówka z tagami skryptu :

src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"

To powinno wyglądać tak…

Ostateczny wynik

Teraz wszystko, co musisz zrobić, to odwiedzić post na żywo na blogu w swojej witrynie, aby zobaczyć szacowany czas czytania i liczbę słów u góry treści posta.

Końcowe przemyślenia

Dodanie szacowanego czasu czytania i liczby słów do postów na blogu Divi jest zaskakująco łatwe. Dodatkowo możesz wybrać, gdzie element ma być wyświetlany w szablonie posta i stylizować go za pomocą wbudowanych ustawień projektu Divi. Mamy nadzieję, że to się przyda!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!