WordPress

「この記事は約n分で読めます」をWordPressに追加する

  /

自動で追加する場合

functions.phpに以下を記載

function countdown($content){
        if ( !is_single() ) {
           // 個別ページ以外には表示しない
           return $content;
        }
	$count = round(mb_strlen(strip_tags($content)) / 600);
	return '<p>この記事は約 '.$count." 分で読めます。</p>".$content;
}
add_action('the_content','countdown');

挿入したい箇所がある場合

functions.phpに以下を追加

/** 読むのにかかる時間を表示 */
function my_reading_time(){
  global $post;

  /** 1分間に読める文字数の平均 */
  $per_min = 600;

  $content = $post->post_content;
  $count = mb_strlen(strip_tags($content));
  $mins = round($count / $per_min);
  $secs = round($count % $per_min / ($per_min / 60));

  echo"この記事は約{$mins}分{$secs}秒で読めます。";
}

使用する箇所で <?php my_reading_time();?> を記載

Javascriptで追加


<script>
<!--
  const MINUTE_READ_CHAR = 500; // 1分間に読める文字数(※1)
  
  var getElm       = document.getElementById('id_hoge');
  var strNoHtmlTag = '';
  var iReadTime    = '';
  var strSetHtml   = '';
  
  if(getElm != null){
    // htmlタグを排除して文字列だけを抜き出す(※2)
    strNoHtmlTag = getElm.innerHTML.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'');
    // 1分間に読める秒数に変換
    iReadTime = Math.floor( strNoHtmlTag.length / MINUTE_READ_CHAR );
    if( iReadTime == 0 ){
      // 1分未満の場合は1分に変更
      iReadTime = 1;
    }
    // タグ作成
    strSetHtml = '<span style="color: red;">この記事は約' + iReadTime + '分で読めます！</span>';
    // タグ埋め込み
    getElm.innerHTML= strSetHtml + getElm.innerHTML;
  }
//-->
</script>
<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 800;
var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var message = '<p>この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>';
$('.class_hoge').prepend(message);
}, false);
</script>
RELATED POST