Недавно один из наших пользователей спросил нас, как добавить эффект затухания для последнего виджета в боковой панели. Этот популярный эффект jQuery используется на многих известных сайтах и блогах. Когда пользователь прокручивает страницу вниз, последний виджет в боковой панели исчезает и становится видимым. Анимация делает виджет привлекательным и заметным, что значительно увеличивает количество переходов по ссылкам. В этой статье мы покажем вам, как приглушить последний виджет боковой панели в WordPress с помощью jQuery.
Ниже показано, как это будет выглядеть:
В этом руководстве, вы будете изменять файлы вашей темы. Перед дальнейшими действиями рекомендуется сделать резервную копию вашей темы.
Шаг 1: Добавление JavaScript для эффекта затухания
Сначала вам нужно добавить код jQuery в вашу тему WordPress в виде отдельного файла JavaScript. Начните с открытия пустого файла в текстовом редакторе, например, Блокноте. Далее сохраните этот пустой файл под именем wpb_fadein_widget.js на вашем рабочем столе и вставьте в него следующий код.
jQuery(document).ready(function($)) < /** * Configuration * The container for your sidebar e.g. aside, #sidebar etc. */ var sidebarElement = $('div#secondary'); // Check if the sidebar exists if ($(sidebarElement).length >0) < // Get the last widget in the sidebar, and its position on screen var widgetDisplayed = false; var lastWidget = $('.widget:last-child', $(sidebarElement)); var lastWidgetOffset = $(lastWidget).offset().top -100; // Hide the last widget $(lastWidget).hide(); // Check if user scroll have reached the top of the last widget and display it $(document).scroll(function() < // If the widget has been displayed, we don't need to keep doing a check. if (!widgetDisplayed) < if($(this).scrollTop() >lastWidgetOffset) < $(lastWidget).fadeIn('slow').addClass('wpbstickywidget'); widgetDisplayed = true; >> >); > >);
Самая важная строка в этом коде — var sidebarElement = $(‘div#secondary’); .
Это id div, содержащего вашу боковую панель. Поскольку каждая тема может использовать различные div контейнера боковой панели, вам необходимо узнать id контейнера, который ваша тема использует для боковой панели.
Вы можете узнать это с помощью инструмента inspect element в Google Chrome. Просто щелкните правой кнопкой мыши на боковой панели в Google Chrome, а затем выберите Inspect Element.
В исходном коде вы сможете увидеть ваш контейнер боковой панели div. Например, тема Twenty Twelve по умолчанию использует secondary, а Twenty Thirteen использует teritary в качестве ID для контейнера боковой панели. Вам нужно заменить secondary на ID вашего контейнера боковой панели div.
Далее вам нужно использовать FTP-клиент, чтобы загрузить этот файл в папку js в каталоге темы WordPress. Если в каталоге вашей темы нет папки js, то вам нужно создать ее, щелкнув правой кнопкой мыши и выбрав ‘Create New Directory’ в FTP-клиенте.
Шаг 2: Регистрация JavaScript в теме WordPress
Теперь, когда ваш скрипт jQuery готов, пришло время добавить его в вашу тему. Мы будем использовать правильный метод добавления javascript в вашей теме, поэтому просто вставьте следующий код в функции вашей темы.php файл.
wp_enqueue_script( 'stickywidget', get_template_directory_uri()) . 'https://cdn3.wpbeginner.com/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );
Вот и все, теперь вы можете добавить виджет в боковую панель, который вы хотите отобразить с эффектом fadein, а затем посетить свой сайт, чтобы увидеть его в действии.
Шаг 3: Делаем последний виджет липким после эффекта затухания
Часто желаемая функция с эффектом затухания — сделать так, чтобы последний виджет боковой панели прокручивался по мере того, как пользователь прокручивает страницу. Это называется плавающим виджетом или липким виджетом.
Если вы посмотрите на код jQuery выше, то заметите, что мы добавили CSS-класс wpbstickywidget к виджету после эффекта затухания. Вы можете использовать этот CSS класс, чтобы сделать ваш последний виджет липким после того, как он исчезнет. Все, что вам нужно сделать, это вставить этот CSS в таблицу стилей вашей темы.
.wpbstickywidget
Не стесняйтесь изменять CSS в соответствии с вашими потребностями. Вы можете изменить цвет фона или шрифты, чтобы сделать виджет еще более заметным. При желании можно даже добавить эффект плавной прокрутки к верху рядом с последним виджетом, что позволит пользователям быстро прокручивать страницу назад.
Надеемся, что эта статья помогла вам добавить эффект затухания к последнему виджету в боковой панели WordPress. Чтобы узнать больше о jQuery, посмотрите лучшие учебники по jQuery для WordPress.
Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для просмотра видеоуроков по WordPress. Вы также можете найти нас в Twitter и Google+.
Источник: www.wpbeginner.com