8 лучших WordPress плагинов с прогресс-баром при чтении

Прогресс бар для WordPress

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

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

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

Что такое прогресс-бар для чтения?

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

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

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

Прогресс-бар при чтении на сайте

Вы можете экспериментировать с различными вариантами размещения прогресс-баров в зависимости от особенностей WordPress шаблона, который стоит на вашем сайте.

Зачем добавлять прогресс-бар чтения в WordPress?

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

Сначала давайте поговорим о пользовательском опыте в целом.

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

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

Когда посетители уже начали читать, индикатор прогресса также может побудить их дочитать статью до конца. Например, если посетитель уже потребил 80% контента на странице, он захочет дочитать последние 20%.

Такое улучшение пользовательского опыта может положительно сказаться на двух ключевых поведенческих показателях:

  • Время пребывания на странице — поощряя читателей дочитать пост до конца, можно увеличить время, проведенное на странице.
  • Показатель отказов — увеличивая время, которое посетители проводят на странице, вы повышаете вероятность того, что они продолжат взаимодействие с вашим сайтом (возможно, прочитав еще один пост), что способствует снижению показателей отказов.

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

8 лучших WordPress плагинов прогресс-баров при чтении

В этом посте мы собрали 8 лучших WordPress вариантов плагинов с прогресс-барами для чтения, 6 из которых являются совершенно бесплатными. А 2 оставшихся доступны по цене и добавляют дополнительную гибкость, которую вы не найдете в большинстве free-аналогов.

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

Read Meter

Модуль Read Meter от создателей Astra

Read Meter — плагин прогресс-бара от Brainstorm Force, той же команды, что создала популярный WordPress шаблон Astra.

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

Преимущества Read Meter:
Размещение сверху или снизу экрана пользователя.
Можно внедрить прогресс-бар только для определенных типов постов (включая пользовательские типы).
Автоматическое добавление предполагаемого времени чтения в различные части поста (например, под заголовком) или размещение вручную с помощью шорткода.
Настраиваемые цвета и стили каждого элемента под дизайн сайта.

Reading progressbar

Бесплатный Reading progressbar

Наряду с Read Meter, Reading progressbar является еще одним из самых популярных плагинов для читательских прогресс-баров на WordPress.org. Но, в отличие от предыдущего, этот инструмент не умеет добавлять на страницу предполагаемое время чтения.

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

Преимущества Reading progressbar:
Гибкое позиционирование — можно автоматически прикрепить прогресс-бар к верхней или нижней части страницы.
Есть опция пользовательского размещения, которая позволяет прикрепить индикатор чтения к любому CSS-элементу. Например, под навигационным меню липкого заголовка, а не только в самом верху страницы.
Полностью настраиваемый дизайн — можно изменить высоту и цвета прогресс-бара, чтобы он соответствовал стилистке вашего сайта.
Настройка параметров таргетинга — вывод блока только на определенных шаблонах и/или типах постов.

Worth the Read

Широкофункциональный прогресс бар Worth the Read

Worth the Read — один из самых гибких по настройкам плагинов WordPress для создания прогресс-баров. Отличный вариант, если предыдущие решения показались вам слишком ограниченными по функционалу.

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

Преимущества Worth the Read:
Горизонтальное (сверху или снизу экрана) или вертикальное (слева или справа) размещение. Вертикальный вариант позиционирования уникален, так как большинство других плагинов его не поддерживают.
Таргетинг по типу поста — включение полосы прогресса только на определенных страницах.
Таргетинг по типу устройства — есть возможность отключить индикатор чтения для мобильных устройств, планшетов или настольных компьютеров.
Прогресс чтения для комментариев — опция может быть полезна, если у вас есть активные разделы с большим количеством полезных комментариев.
Поддержка сайтов на языках RTL — один из немногих плагинов, который имеет такой функционал.
Параметры стилей — есть настройки цветов, толщины индикатора, непрозрачности и так далее. Можно даже использовать отдельный цвет для обозначения начала блока с комментариями на шкале прогресса.
Расчетное время чтения — внедряется в макет автоматически или вручную с помощью шорткода.

Catch Scroll Progress Bar

Настройки Catch Scroll Progress Bar

Плагин Catch Scroll Progress Bar — еще один легкий WordPress модуль для добавления простого прогресс-бара на ваш сайт. В нем есть только минимальные базовые опции, необходимые для размещения и оформления шкалы прогресса чтения.

Преимущества Catch Scroll Progress Bar:
Прикрепление прогресс-бара сверху или снизу экрана.
Точечный таргетинг по типу поста.
Таргетинг по типу страницы в шаблоне. Например, можно добавить индикатор чтения только в одиночные посты, но не на страницы с архивами.
Опции с настройками цвета, прозрачности и высоты прогресс-бара.

WP Reading Progress

WP Reading Progress для прогресса в записях

WP Reading Progress — еще один бесплатный плагин по созданию прогресс-баров, который доступен в официальном репозитории WordPress.

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

Преимущества WP Reading Progress:
Гибкое позиционирование — автоматически фиксируйте полосу с индикацией процесса чтения к верхней или нижней части страницы. Или можете вручную прикрепить его к любому CSS-селектору.
Таргет на тип поста — включайте прогресс-бар только в определенные постах. Также есть возможность включить/отключить его на страницах категорий.
Настройки стилей — задавайте цвет и толщину прогресс-бара. Но помните, что можете выбрать только один цвет, и в плагине нет опций для установки процента прозрачности.

Reading Time

Reading Time с большим количеством тем

Reading Time — первый плагин прогресс-бара в нашем списке WordPress решений, который поставляется только в премиум-версии. Но у него вполне доступная цена с пожизненными обновлениями через торговую площадку CodeCanyon от Envato.

Есть две основные причины, по которым вы можете предпочесть Reading Time бесплатным альтернативам:

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

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

Вы также получаете все стандартные функции, которые вы ожидаете от плагина:

  • Гибкое позиционирование — помимо автоматического размещения сверху или снизу, можно внедрить пользовательское позиционирование и прикрепить прогресс-бар к любому CSS-селектору.
  • Параметры цветов, стилей и высоты блока с индикацией прогресса чтения.

Reading Position Indicator

Премиум модуль Reading Position

Reading Position Indicator — еще один легкий бесплатный плагин для работы с прогресс-барами из репозитория WordPress.org.

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

Преимущества Reading Position Indicator:
Размещение сверху или снизу. Привязки к CSS-селектору, но можно добавить смещение.
Таргетирование по типам страниц и постов.
Готовые стилевые настройки для сплошного или градиентного цвета, а также опции, задающие толщину прогресс-бара.

ReBar

ReBar прогресс

ReBar — это еще один премиум-плагин для движка WordPress, который продается через торговую площадку CodeCanyon от Envato.

Как и в случае с Reading Time, в нем есть несколько уникальных премиальных опций:

8+ предустановленных стилевых решений с уникальным дизайном, который выходит за рамки сплошных цветных заливок, таких как пластик, градиенты, iOS-стиль и другие.

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

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

Еще примечательные особенности плагина:

  • Горизонтальное и вертикальное размещение.
  • Настраиваемые стили для цвета, высоты и ширины прогресс-бара.
  • Поддержка языков RTL.

На этом мы завершаем нашу подборку из 8 лучших плагинов WordPress с панелями прогресса чтения.

  • Из самых простых бесплатных вариантов добавления базового функционала вы можете рассмотреть такие плагины, как Read Meter или Reading progressbar.
  • Если хотите получить максимум возможностей для настройки бесплатно, вам стоит ознакомиться с Worth the Read, так как он включает в себя ряд уникальных опций.
  • Нет желания ограничиваться сплошной заливкой прогресс-бара? Тогда рассмотрите платные варианты — Reading Time или ReBar.

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

Рейтинг
( Пока оценок нет )
Александр/ автор статьи

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

Загрузка ...
Шаблоны для WordPress