Как создать полосу прогресса чтения для ваших сообщений в блоге Divi (без плагина)

Опубликовано: 2020-07-19

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

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

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

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

Sneak Peek

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

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

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

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

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

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

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

Чтобы импортировать макет раздела в свой конструктор тем Divi, перейдите в конструктор тем Divi.

Щелкните значок переносимости.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера.

Затем нажмите кнопку импорта.

После этого шаблон раздела появится в Divi Theme Builder.

Давайте перейдем к руководству, не так ли?

Часть 1: Импорт готовых шаблонов

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

ВАЖНО: лучше всего импортировать эти шаблоны на тестовый сайт, чтобы не испортить работающий сайт.

Импортировать шаблон веб-сайта по умолчанию

Во-первых, вам нужно будет загрузить Четвертый БЕСПЛАТНЫЙ пакет построителя тем для Divi. Затем разархивируйте файл.

На панели управления WordPress перейдите в Divi> Theme Builder. Затем щелкните значок переносимости в правом верхнем углу. Во всплывающем окне переносимости выберите вкладку импорта. Затем выберите JSON-файл шаблона веб-сайта по умолчанию из загруженной папки и нажмите кнопку импорта. Будет импортирован новый шаблон веб-сайта по умолчанию с глобальным верхним и нижним колонтитулами.

Импортируйте шаблон сообщения

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

Отключить глобальный заголовок шаблона сообщения

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

панель информации о динамическом посте divi

Теперь заголовок должен быть серым с надписью «Custom Header». Когда все будет готово, щелкните значок редактирования, чтобы отредактировать шаблон макета заголовка.

панель информации о динамическом посте divi

Разработка индикатора прогресса чтения

Добавление раздела и строки

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

Затем добавьте в раздел одну колонку.

Настройки раздела

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

  • Padding: 0px сверху, 0px снизу

Настройки строки

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

  • цвет фона: # 2b2b2b

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

  • Ширина желоба: 1
  • Ширина: 100%
  • Максимальная ширина: 100%
  • Padding: 0px сверху, 0px снизу

Создание полосы прокрутки с помощью модуля разделителя

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

Добавить модуль разделителя

Создайте новый разделительный модуль внутри столбца.

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

  • Показать разделитель: НЕТ
  • Цвет фонового градиента слева: # ff4349
  • Правый градиент фона: # fe7f47
  • Направление градиента: 90 градусов

На вкладке дизайна обновите высоту индикатора выполнения:

  • высота: 20 пикселей

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

  • Идентификатор CSS: scrollBar

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

Добавить метку счетчика процентов индикатора выполнения

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

Затем добавьте следующий HTML-код к содержимому тела: 

<p>Reading Progress: <span></span></p>

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

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

  • Шрифт текста: Heebo
  • Толщина шрифта текста: полужирный
  • Стиль шрифта текста: TT
  • Цвет текста текста: #ffffff
  • Размер текста текста: 13 пикселей
  • Расстояние между буквами текста: 3 пикселя
  • Высота текстовой строки: 1em

Затем немного обновите левый отступ:

  • отступ: 10 пикселей слева

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

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

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

  • Класс CSS: et-progress-label

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

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

Для этого добавьте новый модуль кода под текстовым модулем.

Затем вставьте следующий код: 

<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');   
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();          
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>

И на последнем шаге нам нужно задать нашему разделу фиксированное положение. Мы сохранили это напоследок, потому что это скроет раздел за вышеуказанными разделами, содержащими содержимое заголовка.

Откройте настройки раздела для раздела, содержащего индикатор выполнения, и обновите следующее:

  • Позиция: фиксированная
  • Индекс Z: 998

Затем откройте настройки верхнего раздела, содержащего содержимое заголовка, и обновите индекс Z следующим образом:

  • Индекс Z: 999

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

Не забудьте сохранить изменения.

Добавление селектора (класс CSS) в модуль содержимого сообщения в шаблоне области тела.

Прямо сейчас написан код для распознавания элемента с классом «et-post-content» в качестве основного содержимого сообщения.

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

Для этого откройте шаблон области тела шаблона сообщения в построителе тем.

Откройте настройки модуля содержимого публикации и добавьте следующий класс CSS:

  • Класс CSS: et-post-content

Затем сохраните изменения.

После этого сохраните изменения в макете и в построителе тем.

панель информации о динамическом посте divi

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

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

Использование шкалы прогресса чтения в шаблоне сообщения по умолчанию Divi (а не в пользовательском шаблоне)

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

Во-первых, убедитесь, что пользовательская область тела шаблона сообщения была удалена.

Затем откройте макет настраиваемого шаблона заголовка и обновите модуль кода, заменив эту строку кода…

 var $postContent = $('.et-post-content');

с этим…

 var $postContent = $('.entry-content');

Класс «entry-content» нацелен на div в шаблоне сообщения по умолчанию, который содержит содержимое сообщения в блоге (за исключением заголовка, избранного изображения, метаданных выше и комментариев ниже, которые могут исказить фактическую длину статьи).

Результат

Вот результат публикации с использованием шаблона сообщения по умолчанию.

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

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

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

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