Примерное время чтения статьи: 3 способа как установить на сайт

Время на чтение: 3 минут(ы)

Примерное время чтения

Примерное время чтения статьи даст понять вашему посетителю, сколько времени уйдет на изучение проблемы, раскрываемой на странице вашего сайта. Конечно, вручную засечь время нереально и прописать к каждому посту. Да, в этом и нет необходимости, так как время вычисляется в зависимости от количества знаков в статье. Для вордпресс разработаны специальные плагины, да и путем внедрения кода вы можете без труда настроить полезный виджет. Для Blogger вам нужно будет прописываться специальный скрипт (читайте внизу данной статьи).

Время чтения статьи на вордпресс

Плагины

Как я уже говорила, что приблизительное время чтения можно задать каждому посту при помощи специального плагина. Этот плагин носит название Reading Time WP. Установка плагина стандартна: находим через поиск плагинов в админке вордпресс по названию, устанавливаем и активируем.

Настройки плагина вы найдете по пути: Настройки -> Reading Time WP.

Настройки wp time reading

Здесь вы можете применить свои настройки. Обновите изменения. Всё готово, отсчет примерного времени на чтение внедрен. Вы увидите его под заголовком каждой записи вашего сайта.

Если вы не хотите отображать время возле каждой записи, то вы можете отключить эту функцию в настройках, а там где это вам необходимо вставить, используя шоткоды.

Это наиболее популярный плагин для данной задачи, но вы можете также попробовать другие - Reading Time или Insert Estimated Reading Time.

Установка с помощью кода

Скопируйте код ниже и вставьте его в нижнюю часть function.php:

/** * Приблизительное время на чтение WordPress * * @return string */ function bv2_get_post_reading_time() { $words_per_minutes = 250; $content_text = is_single() ? get_the_content() : get_post(get_the_ID())->post_content; $minutes = round(count(preg_split('/\s/', $content_text)) / $words_per_minutes); if( $minutes == 0 ) { return '<span title="'. __('Время прочтения', 'bologerv2').'">читать меньше минуты</span>'; } else { return '<span title="'. __('Время прочтения', 'bologerv2') .'">' . $minutes . ' мин чтения</span>'; } }

Теперь отрезок кода <?= bv2_get_post_reading_time() ?> вставьте в single.php  или content.php в то место, где вы хотите видеть отображения затраченного времени.

Как добавить подсчет времени на Blogger

  1. Сохраните резервную копию шаблона вашего блога,
  2. Перейдите в редактор кода Темы (Админпанель -> Тема -> три вертикальные точки -> Изменить HTML,
  3. Найдите в коде темы тег </head> и вставьте перед ним:

    <script type='text/javascript'>//<![CDATA[     if (typeof(jQuery) == 'undefined') {  //output the script (load it from google api)  document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}        //]]>        </script>

  4. Найдите тег </body> и вставьте перед ним:

    //<![CDATA[
    ;(function(a){a.fn.readingTime=function(r){if(!this.length){return this}var h={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:true,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null};var i=this;var c=a(this);i.settings=a.extend({},h,r);var e=i.settings.readingTimeTarget;var d=i.settings.wordCountTarget;var k=i.settings.wordsPerMinute;var p=i.settings.round;var b=i.settings.lang;var l=i.settings.lessThanAMinuteString;var o=i.settings.prependTimeString;var f=i.settings.prependWordString;var g=i.settings.remotePath;var n=i.settings.remoteTarget;if(b=="it"){var m=l||"Meno di un minuto";var q="mins"}else{if(b=="fr"){var m=l||"Moins d'une minute";var q="мин"}else{if(b=="de"){var m=l||"Weniger als eine Minute";var q="мин"}else{if(b=="es"){var m=l||"Menos de un minuto";var q="мин"}else{if(b=="nl"){var m=l||"Minder dan een minuut";var q="mins"}else{var m=l||"< 1 Min";var q="мин"}}}}}var j=function(y){var v=y.trim().split(/\s+/g).length;var u=k/60;var s=v/u;if(p===true){var x=Math.round(s/60)}else{var x=Math.floor(s/60)}var w=Math.round(s-x*60);if(p===true){if(x>0){a(e).text(o+x+" "+q)}else{a(e).text(o+m)}}else{var t=x+":"+w;a(e).text(o+t)}if(d!==""&&d!==undefined){a(d).text(f+v)}};c.each(function(){if(g!=null&&n!=null){a.get(g,function(s){j(a("<div>").html(s).find(n).text())})}else{j(c.text())}})}})(jQuery);
    //]]>
    </script>
    <script type='text/javascript'>
    $(function() {
    $(&#39;.post-body&#39;).readingTime();
    });
    </script>

  5. Найдите в шаблоне вашего блога строчку <div class='post-header-line-1'> или <div class='post-body-container'> (у вас могут быть другие строчки, а также код <div class='post-header-line-1'> встречаться несколько раз, нужно найти правильное место вставки). И добавьте после этой строчки код:

    <span id="etawrap" class='eta'/>

  6. Сохраните изменения. Если все сделано правильно, то после заголовком у вас будет отображаться время, затраченное на изучение статьи.

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *