Как вывести время чтения статьи WordPress: 3 разных способа

Когда посетитель только заходит на сайт, имеется максимальный шанс, что он закроет страницу. Удержать его помогают различные приемы. Один из них — отображение среднего времени прочтения материала. В посте расскажу, как вывести время чтения статьи WordPress самостоятельно на любом сайте.

Как считается показатель времени чтения?

Под средним временем на чтение понимается оценка того, сколько минут потребуется обычному пользователю, чтобы прочитать материал от начала до конца. Данный показатель легко рассчитать по формуле: общее количество слов в материале разделить на среднюю скорость чтения.

Согласно исследованиям, взрослый носитель русского языка в среднем успевает прочитать за 1 минуту от 120 до 180 слов. Это значение варьируется от сложности материала.

Для чего нужно указывать время прочтения статьи на сайте?

Показывая посетителям тайминг на чтение, можно улучшить пользовательский опыт и повысить вовлеченность аудитории, что позитивно скажется в целом на ресурсе.

Несколько прямых и косвенных преимуществ от этого:

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

Снижение показателя отказов и повышение вовлеченности. Если на портале размещены небольшие статьи, которые можно прочитать за 3-5 минут, то с высокой долей вероятности пользователь задержится на это время, чтобы получить ответ на свой вопрос.

Улучшение позиций в поисковых системах. Поведенческие факторы существенно влияют на позиции сайта в Google и Яндекс, особенно по среднечастотным и высокочастотным запросам. Как отмечалось выше, вывод времени на чтение в ряде случаев позволяет удержать посетителя.

Как отобразить время на чтение статьи в WordPress плагином

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

Помните, что любой дополнительный плагин нагружает проект.

Reading Time & Progress Bar

Reading Time & Progress Bar является одним из самых функциональных полностью бесплатных плагинов для добавления тайминга в материалы на сайте. Помимо вывода сведений о нужном количестве минут на изучение материала, он также позволяет добавить прогресс-бар для читателя.

После установки расширения в меню панели администратора появится одноименный пункт. По нажатию на него откроются настройки, достаточно простые и мощные.

Интересные особенности плагина:

Можно выбрать типы материалов, где нужно выводить время на прочтение и прогресс бар. Поддерживаются не только стандартные таксономии, но и созданные другими плагинами, темой или пользователями.

Задается количество слов на чтение в минуту. При этом в общем подсчете могут учитываться слова из комментариев на странице или из описаний изображений.

Есть детальная настройка стиля, а также можно использовать кастомный CSS.

Прогресс-бар включается и отключается отдельно от времени на чтение. Он тоже полностью настраиваемый: от цвета до расположения, плюс есть несколько заготовленных стилей.

Расширение удобное, но для работы с ним потребуется знание английского языка, поскольку оно не русифицировано.

Read Meter – Reading Time & Progress Bar

Еще одно полностью бесплатное дополнение для ВП сайта — Read Meter. Удобный и быстрый плагин включает в себя как отображение времени для чтения, так и вывод прогресс-бара.

У модуля Read Meter очень простые настройки, что является одновременно плюсом и минусом данного решения. В опциях достаточно указать скорость чтения, отметить тип постов для вывода информации и настроить типографику.

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

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

Reading Time WP

Вывести примерное количество минут на прочтение материала можно при помощи Reading Time WP. Это расширение на русском языке, что упрощает его настройку и не требует затрат ресурсов на перевод.

Все настройки стандартные. Из интересной особенности конкретно этого расширения могу отметить работу шорткода. Он имеет несколько параметров, в том числе взаимодействует с атрибутом post_id. В специфических ситуациях, когда на одной из страниц нужно вывести время для чтения другой страницы (например, при создании виджета), эту особенность удобно использовать.

По плагину Reading Time WP я встречал сугубо положительные отзывы от вебмастеров. Авторы выпускают обновления расширения только для соответствия его актуальным версиям WordPress и PHP, никаких апдейтов с новым функционалом не выходит.

Worth The Read

Расширение Worth The Read содержит функции вывода времени на чтение, а также может быть использовано для добавления индикатора прогресса. Этот плагин отличается широкими настройками.

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

Также интересной особенностью данной разработки являются 2 метода подсчета:

С учетом пробелов — хорошо подходит для латиницы и кириллицы.
Без учета пробелов — удобно использовать для других языков.

Данный модуль достаточно функциональный, и с ним добавить в WordPress приблизительное время на чтение не составит труда. Например, можно задать среднее количество изображений на минуту просмотра страницы, чтобы в общем тайминге учитывались картинки.

Worth The Read не переведен на русский язык. Потребуется знание английского, чтобы работать с ним.

Arabic & English Estimated Reading Time

Простое расширение Arabic & English Estimated Reading Time практически не имеет настроек. Оно хорошо подойдет, если стоит вопрос, как показать разное время для чтения на сайте, который имеет версии на арабском и английском языках.

Это расширение подготовлено для работы сразу с двумя языками. В опциях задается разное количество слов к прочтению для каждого из языков.

Модуль полностью бесплатный, в нем нет платных дополнительных опций.

Как в Вордпресс добавить время чтения с помощью кода

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

Преимущества такого метода перед плагинами:

Есть возможность полностью проконтролировать код, тем самым минимизируя риски «сломать» сайт или получить уязвимость на нем с установленным плагином.

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

Удобно настраивать с нуля стили отображения.

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

function getWordCount($content) {
   return str_word_count(strip_tags($content));
}
 
function calculateReadingTime($content, $readingSpeed = 120) {
   $wordCount = getWordCount($content);
   return ceil($wordCount / $readingSpeed);
}
 
function displayReadingTime($content) {
   if (is_single()) {
      $readingTime = calculateReadingTime($content);
      return sprintf('<p class=”reading-time”>Среднее время на прочтение: %d мин.</p>', $readingTime) . $content;
   }
   return $content;
}
 
add_filter('the_content', 'displayReadingTime');

Небольшие пояснения к коду:

Функция getWordCount нужна, чтобы определить количество слов в тексте. В подсчете не учитываются HTML-теги и знаки препинания, только целые слова.
Функция calculateReadingTime подсчитывает среднее время на прочтение текста. В переменной $readingSpeed указывается количество слов для прочтения в минуту. Рекомендую задавать значение от 120 до 180 в зависимости от типа контента на сайте. Чтобы число было всегда целым, результат округляется в большую сторону при помощи ceil.
Функция displayReadingTime добавляет текст с информацией о времени чтения. В моем примере тайминг выводится только в постах благодаря условной функции is_single. Эту проверку можно расширить или убрать, если требуется выводить информацию на страницах, в архивах или других типах таксономий.

Как это работает:

Когда пользователь открывает пост, код очищает все HTML-теги из статьи и считает количество слов в ней.
Далее по простой формуле «количество слов / скорость чтения» высчитывается время и округляется в большую сторону до целого числа.
Полученное значение выводится перед публикацией с текстовым сопровождением.

В коде можно увидеть класс reading-time для блока с информацией о времени чтения. Используйте его, чтобы задать стили, отредактировав css-файл используемой темы. Например, на одном из сайтов я использую следующие стили, которые вы можете взять за основу для своего проекта:

.reading-time {
   background-color: #f5f5f5;
   border-left: 4px solid #0073aa;
   padding: 10px 15px;
   margin-bottom: 20px;
   font-size: 16px;
   color: #333;
   font-weight: bold;
   border-radius: 5px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

Шаблоны со встроенной опцией вывода времени чтения

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

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

Подробнее про возможности Reboot в обзоре на нашем сайте

В кастомайзере Reboot при настройке блока «Запись» можно установить галочку «Время чтения».

После этого в мета-информации перед началом статьи будут выводиться сведения о времени на прочтение. Цифра отобразится в аккуратном блоке рядом с другими данными материала, возле значка часов.

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

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

Подобным образом в нее внедрены и другие полезные компоненты, среди которых: оглавление, контактная форма, социальные кнопки, HTML-карта сайта и пр.

Скидка на Reboot

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

Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.