Добавляем эффект затухания для последнего виджета в сайдбаре WordPress с jQuery

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

Ниже демонстрация того, как это всё будет выглядеть:

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

Шаг 1: Добавляем JavaScript для эффекта затухания (Fadein)

Прежде всего вам необходимо добавить код jQuery в вашу тему WordPress отдельным JavaScript файлом. Начните с создания пустого файла в текстовом редакторе типа Блокнот. Затем сохраните этот пустой файл под именем wpb_fadein_widget.js на вашем компьютере и вставьте в него следующий код, после чего сохраните изменения.

jQuery(document).ready(function($) {
/**
* Конфигурация
* Контейнер для вашего сайдбара, например aside, #sidebar и т.дд.
*/

var sidebarElement = $('div#secondary');


// Проверяем, существует ли сайдбар
if ($(sidebarElement).length > 0) {

// Получаем последний виджет в сайдбаре, а также его расположение на экране

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
	
// Скрываем последний виджет
$(lastWidget).hide();
	
// Проверяем, достигла ли прокрутка пользователя верхней точки последнего виджета и отображаем его
$(document).scroll(function() {

// Если виджет отобразился, прекращаем ненужную проверку.

if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;  
}
}
});
}
});

Самая важная строка в этом коде — var sidebarElement = $(‘div#secondary’);.

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

Это можно сделать, используя инструмент просмотра кода элемента в Google Chrome. Просто кликните правой кнопкой мыши на вашем сайдбаре в Google Chrome, затем выберите «Просмотр кода элемента».

В исходном коде вы увидите div, в который заключен ваш сайдбар. Например, в стандартной теме Twenty Twelve используется secondary, а Twenty Thirteen использует teritary в качестве ID для контейнера сайдбара. Вам необходимо заменить secondary на ID div’а, содержащего ваш сайдбар.

Затем вам необходимо воспользоваться FTP клиентом для загрузки этого файла в папку js в папке с вашей темой WordPress. Если в вашей теме нет папки js, тогда просто создайте ее путем нажатия правой кнопкой мыши и выбором «Создать новую директорию» (‘Create New Directory’) в вашем FTP клиенте.

Шаг 2: Подключаем JavaScript в тему WordPress

Теперь, когда ваш скрипт jQuery готов, пришло время добавить его в вашу темы. Мы будем использовать корректный способ добавления javascript в вашу тему, поэтому просто вставьте следующий код в файл functions.php вашей темы.

wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

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

Шаг 3: Делаем закрепленным последний виджет, после его затухания

Довольно востребованной является функция наряду с затуханием виджета — сделать последний виджет сайдбара «следящим» за пользователем по мере прокрутки страницы. Это называется плавающим или прилепленным виджетом.

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

.wpbstickywidget { 
position:fixed;
top:0px; 
}

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

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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