Cara Menampilkan Perkiraan Waktu Baca dan Jumlah Kata Postingan di Divi (dengan ReadingTime.js)
Diterbitkan: 2020-10-27Beberapa orang (termasuk saya) menghargai sedikit perhatian pada panjang posting blog atau, yang lebih penting, berapa banyak waktu yang dibutuhkan untuk membaca. Cara yang bagus untuk melakukannya adalah dengan menampilkan perkiraan waktu membaca dan/atau jumlah kata di bagian atas posting blog Anda. Anda melihat fitur ini di blog populer seperti medium.com. Itu tidak harus mengganggu atau mengalihkan perhatian pengguna untuk terlibat dengan konten. Tapi itu bisa menambahkan dorongan UX yang bagus bagi mereka yang menghabiskan banyak waktu melahap konten di web.
Dalam tutorial ini, kami akan menunjukkan kepada Anda cara cepat dan mudah untuk menambahkan perkiraan waktu membaca dan jumlah kata ke posting blog Divi Anda. Pustaka readingTime.js yang akan kita gunakan sederhana, ringan, dan mudah diterapkan di situs Divi Anda. Plus Anda dapat memiliki kontrol lebih besar atas gaya dan penempatan waktu membaca dan penempatan jumlah kata. Semua ini tanpa harus bergantung pada plugin lain!
Kami akan menambahkan perkiraan waktu membaca dan jumlah kata ke template posting blog menggunakan Divi Theme Builder. Jadi, setelah ditambahkan ke template, waktu membaca dan jumlah kata akan ditampilkan dengan baik di semua posting Anda di seluruh situs Anda.
Mari kita mulai.
Sneak Peek
Berikut ini sekilas waktu membaca dan jumlah kata yang akan kami tambahkan ke templat posting di Divi.
Unduh Tata Letaknya GRATIS
Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.
Unduh Gratis
Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Cara Mengunggah Template
Pergi ke Divi Theme Builder
Untuk mengunggah template, navigasikan ke Divi Theme Builder di bagian belakang situs WordPress Anda.
Unggah Templat Situs Web
Kemudian, di sudut kanan atas, Anda akan melihat ikon dengan dua panah. Klik pada ikon.
Arahkan ke tab impor, unggah file JSON yang dapat Anda unduh di posting ini, dan klik 'Impor Template Pembuat Tema Divi'.
Simpan Perubahan Pembuat Tema Divi
Setelah Anda mengunggah file, Anda akan melihat template baru dengan area tubuh baru yang telah ditetapkan ke Semua Postingan. Simpan perubahan Divi Theme Builder segera setelah Anda ingin template diaktifkan.
Mari kita ke tutorialnya agar kita bisa belajar membuat benda ini dari awal, ya?
Cara Menampilkan Perkiraan Waktu Membaca dan Jumlah Kata Postingan di Divi
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Navigasikan ke Pembuat Tema Divi
- Klik ikon portabilitas di kanan atas halaman.
- Pilih tab Impor di popup Portabilitas.
- Pilih/Impor File Template Postingan Konsultan Bisnis Divi (unduh di sini).
- Klik Tombol Impor
Setelah itu, Anda akan memiliki template posting yang siap untuk diedit.
Menambahkan Teks/HTML ke Template Posting
Untuk mengedit template postingan, klik ikon edit di area badan kustom.
Di editor tata letak pos, tambahkan baris satu kolom baru di bawah baris yang berisi data meta pos di bagian atas tata letak.
Setelah selesai, tambahkan modul teks ke baris baru.
Dalam pengaturan modul teks, rekatkan HTML berikut di dalam isi (menggunakan tab teks):
<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>
Yang penting untuk diingat adalah bahwa span tag dengan class “eta” pada akhirnya akan menampilkan perkiraan waktu membaca konten postingan. Dan tag span dengan class “word-count” akan menampilkan jumlah kata dari konten postingan.
Menata Teks Waktu Membaca
Di bawah tab desain, perbarui gaya teks sebagai berikut:
- Font Teks: Poppins
- Berat Font Teks: Tebal
- Gaya Font Teks: TT
- Warna Teks Teks: #ffffff
- Ukuran Teks Teks: 14px (desktop), 12px (ponsel)
- Spasi Huruf Teks: 2px
- Perataan Teks: tengah
Menata Baris
Setelah pengaturan teks selesai, buka pengaturan untuk baris dan perbarui yang berikut:
- Lebar Talang: 1
- Lebar: 100%
- Lebar Maks: 100%
Di Tab Lanjutan, perbarui posisi:
- Posisi: Absolut
- Lokasi: kiri bawah
Menambahkan Kode
Untuk menambahkan kode yang diperlukan untuk menghasilkan perkiraan waktu membaca dan jumlah kata, pertama, tambahkan modul kode di bawah modul teks.
Kami akan menggunakan perpustakaan readtime.js dengan beberapa kode khusus untuk menargetkan area konten posting kami, kelas target waktu membaca eta , dan kelas target jumlah kata word-count .
Rekatkan kode berikut di blok kode memastikan untuk membungkus kode dalam tag skrip :
(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'),
wordsPerMinute: 275,
lang: 'en',
});
});
})( jQuery );
Tentang Kode
Kelas target et_pb_post_content adalah apa yang digunakan untuk menunjuk area konten posting di Divi yang menyimpan konten posting sehingga kode mengetahui teks yang dibutuhkan untuk menghitung dan memperkirakan waktu membaca. Misalnya, jika Anda menggunakan tubuh sebagai target, kode akan menghitung semua konten/teks di seluruh halaman, bukan hanya konten artikel.
ReadingTimeTarget ditugaskan ke kelas eta yang sesuai dengan kelas yang kita tambahkan ke tag span di modul teks. Dan wordCountTarget ditugaskan ke kelas word-count yang kita tambahkan ke tag span lainnya di modul teks.
Juga, jangan ragu untuk memperbarui nilai kata per menit (saat ini 275) untuk mewakili apa yang menurut Anda seharusnya. Hal ini tentu saja akan mempengaruhi waktu membaca yang ditampilkan. Dari apa yang saya teliti, rata-rata orang dewasa membaca sekitar 300 kata per menit. Plus Anda selalu dapat memperbarui nilai bahasa juga. Misalnya, Anda dapat mengganti 'en' untuk 'fr' jika Anda ingin teks ditampilkan dalam bahasa Prancis). Untuk info lebih lanjut, Anda dapat melihat dokumentasi di github.
Simpan tata letak Template dan Pembuat Tema.
Kemudian, navigasikan ke Divi > Opsi Tema > Integrasi.
Kemudian tambahkan perpustakaan ke area header dengan tag skrip :
src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"
Seharusnya terlihat seperti ini…
Hasil Akhir
Sekarang yang perlu Anda lakukan adalah mengunjungi posting blog langsung di situs Anda untuk melihat perkiraan waktu membaca dan jumlah kata di bagian atas konten posting.
Pikiran Akhir
Menambahkan posting perkiraan waktu membaca dan jumlah kata ke posting blog Divi Anda ternyata sangat mudah. Plus, Anda dapat memilih di mana Anda ingin elemen ditampilkan pada templat posting Anda dan menatanya menggunakan pengaturan desain Divi bawaan. Mudah-mudahan, ini akan berguna!
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!