2020-11-10閱讀時間 5 分鐘

如何顯示WordPress文章閱讀時間?

很多人習慣利用零碎的時間閱讀文章,但閱讀前往往不知道整篇文章的長度及可能的資訊含量,最後因而陷入無法看完的窘境。對於讀者及作者來說,這都是一件十分可惜的事。因此,若能夠在閱讀前提供預估的文章閱讀時間,對提高讀者的閱讀體驗必能有所幫助。本文將說明標註文章閱讀時間的好處以及顯示WordPress文章閱讀時間的方法。

為什麼要顯示文章閱讀時間?

最近幾年,Medium在中文部落格圈逐漸受到重視,觀察其文章列表頁及文章頁就會發現在標題附近都有標示閱讀文章所需的時間。其他的平台或部落格有時也會採取相同的作法標明閱讀時間。事實上,看似簡單的作法,能夠為讀者及作者雙方帶來不少好處。

給予讀者閱讀文章所需時間的心理準備

如同前言所述,讀者有時是利用零碎的時間來閱讀文章,在這樣的情況下,可支配時間不多,且可能因其他因素而無法完整閱讀。若產生這樣結果,對讀者與作者來說,都是十分可惜的。因此,若讀者能夠在開始閱讀前得知所需花費的時間,則可以判斷可能的資訊量,做好心理準備並控制自己的閱讀速度,亦或選擇在其他適合時間閱讀文章。

給予作者評估文章長度的依據

根據Medium對文章長度的研究,可以得知讀者願意花費較多的時間來閱讀較長的文章,這個趨勢在閱讀時間7分鐘左右的文章達到高峰。也就是說,閱讀時間7分鐘左右的文章與讀者間有最佳互動。另外,研究結果同時也指出了,若文章長度持續增加,則讀者願意花費在閱讀上的時間也隨之減少。因此,若能估計出閱讀文章所需的時間,則有助於作者控制文章長度,增加讀者閱讀文章的意願。

如何顯示WordPress文章閱讀時間?

在寫這篇文章時,曾對幾個相關外掛做過測試。然而,大部分的外掛都只適用於英文等以字母表示為主的語言,對於中文來說,均無法直接使用。因此,目前僅能手動添加程式碼的方式來顯示文章閱讀時間。

本方法共包含以下兩個步驟,以下逐一說明。在執行時,建議使用子主題的function.php或是Code Snippetse外掛來添加程式碼,避免未來主題更新造成自訂程式碼遺失的風險。

步驟一:在function.php中添加計算文章閱讀時間的程式碼

在function.php中加入以下程式碼,透過mb_strlen函数計算文章內容的字數,再除以每分鐘平均閱讀400字,即可計算閱讀所需時間。最後,為了方便顯示,再加入add_shortcode函數,讓閱讀所需時間能夠以短碼的形式置入文章。

function reading_time() {
    $content = get_post_field( 'post_content', $post->ID );
    $str_mblen = mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($content))),'UTF-8');
    $readingtime = ceil($str_mblen / 400); //此處以每分鐘平均閱讀400字為例
    $totalreadingtime = "閱讀時間". " "  . $readingtime . " " . "分鐘";
    return $totalreadingtime;
}
add_shortcode( 'estimated_reading_time', 'reading_time' );

步驟二:在網站前端顯示文章閱讀時間

在步驟一中,已透過add_shortcode函數添加短碼,故可以在文章的任一位置插入以下短代碼來顯示文章閱讀時間。

[estimated_reading_time]

另外,因為在每一篇文章都插入短代碼是一件很麻煩的事,所以也可以透過在single.php中的適當位置加入以下程式碼的方式,一次性地為所有文章加入閱讀時間。

<?php echo reading_time(); ?>

結論

透過在WordPress文章中加入閱讀時間,有助於讀者在閱讀文章前做好心理準備,提高閱讀體驗;同時,也能給予作者評估文章長度的依據。雖然目前閱讀時間的相關外掛大都只支援英文等以字母表示為主的語言,但仍然可以採用手動添加程式碼的方式來為中文的WordPress網站的文章標註閱讀時間。

相關文章
WordPress是什麼?超過30%市佔率的內容管理系統(CMS)
3個停用WordPress外掛的方法
製作高效能WordPress網站的Oxygen Builder網站編輯器
客製化文章版面:結合CPT UI及ACF的Elementor Pro實作教學
Dynamic Content for Elementor外掛介紹及動態內容案例
5個好用的Elementor第三方延伸外掛
我不是機器人,在WordPress網站加入Google reCAPTCHA
5個好用的Contact Form 7延伸外掛

分享:
訂閱FirstHatch一起孵,聊聊有興趣的主題