Bagaimana menambahkan informasi waktu membaca artikel di GeneratePress? Informasi waktu membaca bisa menjadi hal yang berguna ketika pengunjung membaca artikel.
Kalau Anda memperhatikan di beberapa artikel memiliki tampilan informasi “lama waktu membaca” atau “estimasi waktu baca”, hal ini bisa menjadi informasi yang berguna bagi pembaca. Bagaimana cara menambahkan informasi waktu membaca artikel di GeneratePress?
Seperti biasanya, saya akan memberikan dua cara berbeda yaitu dengan menggunakan plugin dan tanpa menggunakan plugin. Pilih mana yang menurut Anda mudah dan efektif.

Tanpa Plugin
Cara favorit saya adalah tanpa menggunakan plugin. Caranya juga sangat-sangat mudah dan simpel. Silahkan salin kode berikut di functions.php tema GeneratePress:
/**
* Estimasi Waktu Baca
*/
function tu_estimated_reading_time() {
$post = get_post();
$content = $post->post_content;
$wpm = 300; //
$clean_content = strip_shortcodes( $content );
$clean_content = strip_tags( $clean_content );
$word_count = str_word_count( $clean_content );
$time = ceil( $word_count / $wpm );
return $time . ' Menit';
}
add_filter( 'generate_post_date_output', function( $output ) {
$output .= '<div class="read-time">Waktu Baca: ' . tu_estimated_reading_time() . '</div>';
return $output;
} );
Kemudian lanjutkan dengan memasukkan kode berikut ke CSS:
/* Waktu Baca */
.read-time {
display: inline-block;
margin: 0.5em;
border-left: 1px solid #ddd;
padding-left: 10px;
margin-left: 10px;
border-right: 1px solid #ddd;
padding-right: 10px;
margin-right: 10px;
}
Setelah itu simpan dan selesai. Mudah sekali bukan? Jika tidak muncul, coba clear cache di plugin cache yang digunakan.
Atau jika Anda ingin menambahkan warna background pada bagian meta waktu baca gunakan CSS berikut dan silahkan sesuaikan sendiri kode warnanya.

/* Waktu Baca */
.read-time {
display: inline-block;
margin: 0.5em;
border-left: 1px solid #ddd;
padding-left: 10px;
margin-left: 10px;
border-right: 1px solid #ddd;
padding-right: 10px;
margin-right: 10px;
background-color: #C0C0C0;
}
Plugin
Jika Anda lebih merasa aman dengan menggunakan plugin, Anda bisa menggunakan plugin bernama Reading Time WP yang bisa diunduh gratis di repository WordPress. Hasilnya akan seperti berikut ini.

Tampilannya secara standar akan muncul di atas artikel, bukan pada bagian meta.
Jika ingin posisinya berada di bawah meta, Anda perlu sedikit melakukan modifikasi dengan mengaturnya melalui elements (cara ini hanya untuk pengguna GeneratePress Premium).
Langkah pertama pastikan semua pilihan di pengaturan plugin dinonaktifkan.

Salin kode berikut dan buatlah elements dengan nama bebas terserah Anda, kemudian paste kode ini.
[rt_reading_time label="Waktu Baca:" postfix="Menit" postfix_singular="minute"]
Pengaturan Elements.
- Hook: generate_after_entry_title
- Execute Shortcodes: √
- Display Rules: Pos | All Pos.

Dan hasilnya sepert berikut ini.

Baca juga: Menampilkan Iklan Adsense Sticky Footer di GeneratePress
Mudah sekali bukan? Informasi waktu membaca bisa menjadi informasi yang bermanfaat bagi pengunjung seperti memperkirakan berapa waktu lama yang dibutuhkan.
Jika artikel panjang dan membutuhkan waktu lama, pengunjung bisa menyimpan artikel tersebut untuk dibaca di waktu luang (bookmarks). Saya harap Anda tidak kesulitan menerapkan metode ini. Semoga bermanfaat.
Baca juga:
- Memperbaiki GeneratePress H1 Tag Missing
- Menampilkan Artikel di Halaman 404 GeneratePress
- Cara Menghilangkan Kolom URL di Komentar GeneratePress
- Cara Menampilkan Tanggal Pembaruan Artikel di GeneratePress.
kalau post metanya sudah dibuat element kusus bagaimana mas, cara input kode tersebut
Mas ada request dong cara show hide kolom komen kayak blog idnpure*com.
min cara buat sidebar kek website wpnesia.id gmna ya ?
Yang mana? Sidebar nya standar aja sepertinya.
yang kanan itu min,
iya memang yang kanan, tapi bisa lebih spesifik maksudnya seperti apa? Atau coba pelajari disini:
Modifikasi GeneratePress dengan CSS Khusus (CSS Tambahan)
Mas cara agar caption gambar di tengah gmna ya,,
Masukkan ini di CSS
/* Center Caption START */
.wp-block-image figcaption {
text-align: center;
}
Yang lebih lengkap disini gan:
https://www.wpnesia.id/css-tambahan-generatepress/