Прогресс-бар — отличный способ улучшить пользовательский опыт на вашем сайте, предоставляя читателям визуальный индикатор их продвижения по посту.
Хотите добавить такой функционал для чтения на свой WordPress сайт? Есть масса отличных бесплатных или доступных плагинов, которые помогут вам добавить прогресс-бар и подогнать его дизайн к остальным элементам вашего онлайн-проекта.
Ниже расскажем о каждом плагине, а также о том, как работают прогресс-бары и почему они могут быть полезны для вашего сайта.
Что такое прогресс-бар для чтения?
Как следует из названия, прогресс-бар позволяет посетителям вашего веб-сайта видеть, как далеко они продвинулись по содержанию поста.
Как правило, это горизонтальная полоса, которая располагается в верхней или нижней части страницы. По мере того как читатель прокручивает контент, полоса будет менять цвет и заливку, наглядно показывая, сколько еще осталось до конца.
Помимо горизонтального элемента, некоторые WordPress плагины также позволяют создать вертикальный прогресс-бар слева или справа от контента. В этих случаях она выглядит почти как полоса прокрутки. Но ключевое отличие в том, что полоса прогресса будет основываться на длине фактического ценного содержимого. Тогда как вертикальный скролл в браузере производит расчет на основе полной длины страницы.
Вы можете экспериментировать с различными вариантами размещения прогресс-баров в зависимости от особенностей WordPress шаблона, который стоит на вашем сайте.
Зачем добавлять прогресс-бар чтения в WordPress?
На самом деле, индикатор прогресса чтения — отличный способ улучшить юзабилити и пользовательский опыт на вашем онлайн-ресурсе, что может оказать непосредственное влияние на такие важные показатели, как время пребывания на странице и показатель отказов.
Сначала давайте поговорим о пользовательском опыте в целом.
Большинство людей хотят знать, во что они ввязываются, прежде чем потратить время на ваш пост. Будет ли это 5-минутная статья, которую они смогут прочитать в перерыве между делами, или это будет длинная 20-минутная статья, которая потребует серьезной концентрации внимания?
Перед началом чтения прогресс-бар дает читателям представление о том, чего ожидать от вашего поста. Некоторые сайты в дополнение к индикатору прогресса добавляют примерное время чтения, которое также поддерживают некоторые из плагинов в нашей подборке.
Когда посетители уже начали читать, индикатор прогресса также может побудить их дочитать статью до конца. Например, если посетитель уже потребил 80% контента на странице, он захочет дочитать последние 20%.
Такое улучшение пользовательского опыта может положительно сказаться на двух ключевых поведенческих показателях:
- Время пребывания на странице — поощряя читателей дочитать пост до конца, можно увеличить время, проведенное на странице.
- Показатель отказов — увеличивая время, которое посетители проводят на странице, вы повышаете вероятность того, что они продолжат взаимодействие с вашим сайтом (возможно, прочитав еще один пост), что способствует снижению показателей отказов.
Если сочетать прогресс-бары на WordPress с другими тактиками повышения удобства для пользователей, такими как качественная навигация и грамотное использование пагинации, можно существенно улучшить поведенческие метрики на сайте и заполучить преданную читательскую аудиторию.
8 лучших WordPress плагинов прогресс-баров при чтении
В этом посте мы собрали 8 лучших WordPress вариантов плагинов с прогресс-барами для чтения, 6 из которых являются совершенно бесплатными. А 2 оставшихся доступны по цене и добавляют дополнительную гибкость, которую вы не найдете в большинстве free-аналогов.
Они позволят внедрить в ваш макет индикаторы прогресса чтения, основанные на длине содержимого страницы. И главное — работают практически с любой ВордПресс темой.
Read Meter
Read Meter — плагин прогресс-бара от Brainstorm Force, той же команды, что создала популярный WordPress шаблон Astra.
Позволяет автоматически добавлять полосу прогресса чтения, которая размещается в самом верху или внизу страницы. Вместе с индикатором также можно отображать предполагаемое время чтения поста.
Reading progressbar
Наряду с Read Meter, Reading progressbar является еще одним из самых популярных плагинов для читательских прогресс-баров на WordPress.org. Но, в отличие от предыдущего, этот инструмент не умеет добавлять на страницу предполагаемое время чтения.
Зато имеет дополнительную гибкость в выборе целей, которой нет у Read Meter. Например, вы можете настроить вывод индикатора чтения не только для конкретных типов постов, но и для определенных шаблонов.
Worth the Read
Worth the Read — один из самых гибких по настройкам плагинов WordPress для создания прогресс-баров. Отличный вариант, если предыдущие решения показались вам слишком ограниченными по функционалу.
Включает несколько уникальных опций по размещению и таргетингу, которых нет в других плагинах, а также некоторые другие уникальные «фишки». При желании в нем также можно добавить примерное время чтения.
Catch Scroll Progress Bar
Плагин Catch Scroll Progress Bar — еще один легкий WordPress модуль для добавления простого прогресс-бара на ваш сайт. В нем есть только минимальные базовые опции, необходимые для размещения и оформления шкалы прогресса чтения.
WP Reading Progress
WP Reading Progress — еще один бесплатный плагин по созданию прогресс-баров, который доступен в официальном репозитории WordPress.
Как и предыдущая утилита, предоставляет лишь минимальные настройки. Но для большинства владельцев сайтов этого более чем достаточно.
Reading Time
Reading Time — первый плагин прогресс-бара в нашем списке WordPress решений, который поставляется только в премиум-версии. Но у него вполне доступная цена с пожизненными обновлениями через торговую площадку CodeCanyon от Envato.
Есть две основные причины, по которым вы можете предпочесть Reading Time бесплатным альтернативам:
8+ предустановленных уникальных стилей, которых так не хватает во free-плагинах. Например, можно использовать вертикальные полосы вместо сплошной заливки внутри прогресс-бара (чем-то напоминает индикацию заряда батареи в телефоне).
Расширенные правила таргетирования — кроме стандартных настроек по типам постов и страниц шаблона, доступны настройки по ролям пользователей, URL, устройствам и т.д.
Вы также получаете все стандартные функции, которые вы ожидаете от плагина:
- Гибкое позиционирование — помимо автоматического размещения сверху или снизу, можно внедрить пользовательское позиционирование и прикрепить прогресс-бар к любому CSS-селектору.
- Параметры цветов, стилей и высоты блока с индикацией прогресса чтения.
Reading Position Indicator
Reading Position Indicator — еще один легкий бесплатный плагин для работы с прогресс-барами из репозитория WordPress.org.
В нем нет большого количества настроек, но есть одна уникальная возможность: он позволяет внедрить пользовательский градиент для полосы чтения (в дополнение к сплошному цвету).
ReBar
ReBar — это еще один премиум-плагин для движка WordPress, который продается через торговую площадку CodeCanyon от Envato.
Как и в случае с Reading Time, в нем есть несколько уникальных премиальных опций:
8+ предустановленных стилевых решений с уникальным дизайном, который выходит за рамки сплошных цветных заливок, таких как пластик, градиенты, iOS-стиль и другие.
Расширенные правила таргетинга — по типам постов, пользовательским ролям, URL, устройствам и т.д.
Поддержка бесконечного скролла — отличный вариант для сайтов на шаблонах с такой опцией. Можно задать область прокрутки на основе CSS-селекторов, что позволит генерировать уникальный прогресс-бар для каждого следующего поста, подгружаемого на той же странице.
Еще примечательные особенности плагина:
- Горизонтальное и вертикальное размещение.
- Настраиваемые стили для цвета, высоты и ширины прогресс-бара.
- Поддержка языков RTL.
На этом мы завершаем нашу подборку из 8 лучших плагинов WordPress с панелями прогресса чтения.
- Из самых простых бесплатных вариантов добавления базового функционала вы можете рассмотреть такие плагины, как Read Meter или Reading progressbar.
- Если хотите получить максимум возможностей для настройки бесплатно, вам стоит ознакомиться с Worth the Read, так как он включает в себя ряд уникальных опций.
- Нет желания ограничиваться сплошной заливкой прогресс-бара? Тогда рассмотрите платные варианты — Reading Time или ReBar.
У каждого из плагинов в нашем списке есть своя уникальная изюминка, поэтому стоит изучить их все, чтобы найти вариант, который подойдет именно вам.