Как отобразить предполагаемое время чтения и количество слов в Divi (с ReadingTime.js)

Некоторые люди (в том числе и я) ценят небольшое внимание к длине сообщения в блоге или, что более важно, к тому, сколько времени уйдет на его прочтение. Отличный способ сделать это - отобразить примерное время чтения и / или количество слов в верхней части сообщений в блоге. Вы видите эту функцию в популярных блогах, таких как medium.com. Он не должен быть навязчивым или отвлекать пользователя от взаимодействия с контентом. Но это может добавить хороший UX-импульс для тех, кто тратит много времени на просмотр контента в сети.

В этом уроке мы покажем вам быстрый и простой способ добавить расчетное время чтения и количество слов в ваши сообщения в блоге Divi. Библиотека readTime.js, которую мы собираемся использовать, проста, легка и легко реализуется на вашем сайте Divi. Кроме того, вы можете иметь больший контроль над стилем и размещением времени чтения и подсчета слов. И все это без использования другого плагина!

Мы добавим расчетное время чтения и количество слов в шаблон сообщения в блоге с помощью Divi Theme Builder. Итак, как только он будет добавлен в шаблон, время чтения и количество слов будут хорошо отображаться во всех ваших сообщениях на вашем сайте.

Давайте начнем.

Sneak Peek

Вот краткий обзор времени чтения и количества слов, которые мы добавим в шаблон сообщения в Divi.

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Как загрузить шаблон

Перейти в конструктор тем Divi

Чтобы загрузить шаблон, перейдите к Divi Theme Builder на бэкэнде вашего сайта WordPress.

Загрузить шаблон веб-сайта

Затем в правом верхнем углу вы увидите значок с двумя стрелками. Щелкните значок.

Перейдите на вкладку импорта, загрузите файл JSON, который вы смогли загрузить в этом посте, и нажмите «Импортировать шаблоны Divi Theme Builder».

Сохранить изменения Divi Theme Builder

После того, как вы загрузите файл, вы увидите новый шаблон с новой областью тела, которая была назначена для всех сообщений. Сохраните изменения Divi Theme Builder, как только захотите активировать шаблон.

Давайте перейдем к руководству, чтобы мы могли научиться создавать эту вещь с нуля, не так ли?

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

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Перейдите к конструктору тем Divi
2. Щелкните значок переносимости в правом верхнем углу страницы.
3. Выберите вкладку «Импорт» во всплывающем окне «Переносимость».
4. Выберите / импортируйте файл шаблона сообщения бизнес-консультанта Divi (скачать здесь).
5. Нажмите кнопку импорта.

После этого у вас будет готовый для редактирования шаблон сообщения.

Добавление текста / HTML в шаблон сообщения

Чтобы отредактировать шаблон сообщения, щелкните значок редактирования в настраиваемой области тела.

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

После этого добавьте текстовый модуль в новую строку.

В настройках текстового модуля вставьте следующий HTML-код внутри тела (используя текстовую вкладку):

<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>

Важно помнить, что тег span с классом «eta» в конечном итоге будет отображать предполагаемое время чтения содержимого сообщения. А тег span с классом «word-count» будет отображать количество слов в содержимом публикации.

Стилизация текста времени чтения

На вкладке дизайна обновите стили текста следующим образом:

• Шрифт текста: Поппинс
• Толщина шрифта текста: полужирный
• Стиль шрифта текста: TT
• Цвет текста текста: #ffffff
• Размер текста: 14 пикселей (рабочий стол), 12 пикселей (телефон)
• Расстояние между буквами текста: 2 пикселя
• Выравнивание текста: по центру

Стилизация строки

После завершения настройки текста откройте настройки для строки и обновите следующее:

• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

На вкладке Advanced обновите позицию:

• Позиция: Абсолютная
• Расположение: внизу слева

Добавление кода

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

Мы собираемся использовать библиотеку readtime.js с некоторым настраиваемым кодом для нацеливания на область содержимого нашего сообщения, целевой класс времени чтения eta и целевой класс подсчета слов word-count .

Вставьте следующий код в блок кода, убедившись, что код заключен в теги скрипта :

(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'), 
wordsPerMinute: 275,
lang: 'en',
});
}); 
})( jQuery );

О Кодексе

Целевой класс et_pb_post_content - это то, что используется для обозначения области содержимого сообщения в Divi, которая содержит содержимое сообщения, поэтому код знает текст, который ему нужен для подсчета и оценки времени чтения. Например, если вы использовали тело в качестве цели, код будет вычислять все содержимое / текст на всей странице, а не только содержимое статьи.

ReadTimeTarget назначается классу eta, который соответствует классу, который мы добавили в тег span в текстовом модуле. А wordCountTarget назначается классу подсчета слов, который мы добавляем к другому тегу span в текстовом модуле.

Кроме того, не стесняйтесь обновлять значение слов в минуту (в настоящее время 275), чтобы представить то, что, по вашему мнению, должно быть. Это, конечно, повлияет на отображаемое время чтения. Судя по моим исследованиям, средний взрослый человек читает около 300 слов в минуту. Кроме того, вы всегда можете обновить значение языка. Например, вы можете заменить «en» на «fr», если хотите, чтобы текст отображался на французском языке). Для получения дополнительной информации вы можете ознакомиться с документацией на github.

Сохраните макет шаблона и конструктор тем.

Затем перейдите в Divi> Параметры темы> Интеграции.

Затем добавьте библиотеку в область заголовка с помощью тегов скрипта :

src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"

Это должно выглядеть так…

Конечный результат

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

Последние мысли

Добавить сообщение о предполагаемом времени чтения и подсчете слов в сообщения блога Divi на удивление легко. Кроме того, вы можете выбрать, где вы хотите, чтобы элемент отображался в шаблоне сообщения, и стилизовать его, используя встроенные настройки дизайна Divi. Надеюсь, это пригодится!

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!