Menambahkan Informasi Waktu Membaca Artikel di GeneratePress

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.

Waktu Baca Artikel di GeneratePress
Waktu Baca Artikel di GeneratePress

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.

Menambahkan Waktu Baca dengan Plugin
Menambahkan background di meta
/* 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.

Menambahkan Waktu Baca dengan Plugin
Menambahkan Waktu Baca dengan Plugin

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.

Menambahkan Waktu Baca dengan Plugin
Nonaktifkan opsi plugin

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.
Menambahkan Waktu Baca dengan Plugin
Pengaturan Elements Waktu Baca

Dan hasilnya sepert berikut ini.

Menambahkan Waktu Baca dengan Plugin
Hasil dengan elements

Baca juga:

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.

Part-time blogger, content writer, WordPress enthusiast dan penikmat kopi. Lulusan Teknik Informatika yang berkecimpung di dunia internet sejak 2002.

7 pemikiran pada “Menambahkan Informasi Waktu Membaca Artikel di GeneratePress”

Tinggalkan komentar