Фиксированный виджет WordPress без плагина

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

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

Плавающий виджет: варианты реализации

Мы уже касались темы сайтостроения в публикации Ошибка #1273 — Unknown collation: utf8mb4. Обновляем MySQL в Denwer. Та статья касалась исправления ошибок, текущий же топик посвящён созиданию.
Для начала определимся что мы будем принимать за плавающий виджет в контексте текущей публикации.

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

Можно выделить два способа фиксации виджета:

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

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

Если задать нужному виджету через файл стилей style.css параметр position: 'fixed', то виджет будет цепляться к верхней границе экрана как только мы откроем страницу сайта, что, в большинстве случаев, нас не устраивает. Поэтому мы воспользуемся средствами JavaScript, которые позволят нам включать параметр position со значением fixed ровно в тот момент, когда нам это нужно.

Фиксированный виджет без плагина на JavaScript

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

Простой способ узнать id элемента сайта - включить опцию Просмотреть код или Просмотреть код элемента в браузере. Сделать это можно как из контекстного меню, нажав в браузере правой кнопкой мыши, так и при помощи комбинации горячих клавиш.
К примеру, в браузере Google Chrome для просмотра кода нужно нажать сочетание клавиш Ctrl + Shift + I, а затем, чтобы перейти к детальной работе с элементами - сочетание Ctrl + Shift + C. В Opera можно сразу нажимать Ctrl + Shift + C.

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

<div id="search-header">

В примере выше search-header и есть искомый нами идентификатор.

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

$(window).scroll(function() {
var top = $(document).scrollTop();
var width = $( window ).width();
var heightsidebar = $("#text-2").outerHeight(true)+$("#text-3").outerHeight(true)+$("#masthead").outerHeight(true)+30;
if (top < heightsidebar || width < 768) $("#text-1").css('position', 'relative').stop();
else $("#text-1").css({top: '0px', position: 'fixed'}).fadeIn(1000); $("#text-1").width($("#text-2").width());
});

Расшифровка кода:

$(window).scroll(function()

//Задаём начало функции при каждом скроллинге страницы;

var top = $(document).scrollTop();

//Присваиваем параметру top значение, соответствующее количеству пикселей от верхней границы страницы до текущей позиции на экране;

var width = $( window ).width();

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

var heightsidebar =

//Присваиваем параметру heightsidebar значение, соответствующее сумме высот всех элементов, расположенных над плавающим виджетом;

$("#text-2").outerHeight(true) и $("#text-3").outerHeight(true)

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

$("#masthead").outerHeight(true)+30;

//Высота шапки сайта + 30 пикселей (px) верхнего отступа (данное значение подбирается индивидуально для каждой темы);

if (top < heightsidebar || width < 768) $("#text-1").css('position', 'relative').stop();

//Задаём условие: если величина скроллинга (top) меньше параметра суммы высот всех элементов над плавающим виджетом (heightsidebar) ИЛИ ширина экрана (width) меньше 768 px (задаём значение, ниже которого включается отображение мобильной версии сайта), тогда сохраняется исходная позиция элементов, функция не выполняется;

else $("#text-1").css({top: '0px', position: 'fixed'}).fadeIn(1000);

//В противном случае (величина скроллинга превысила сумму высот вычисляемых элементов, а ширина экрана больше 768 px) задаём для виджета с идентификатором text-1 верхний отступ равный нулю и останавливаем его движение, то есть, фиксируем виджет. Параметр fadeIn(1000) отвечает за скорость анимации, с этим значение тоже можно "поиграть";

$("#text-1").width($("#text-2").width()); });

//Данным фрагментом кода мы присваиваем динамическому виджету text-1 ширину, равную ширине статического виджета text-2, дабы избежать расползания элементов интерфейса за границы родительского контейнера при скроллинге страницы. Закрываем выполнение функции.

Теперь нам остаётся только подставить в js нужные значения идентификаторов и подключить данный код.
Подключить код можно разными способами:

• Создать отдельный файл с расширением *.js и подключить его в файле header.php после тэга строчкой:

  <script src="http://site.ru/wp-content/themes/my_theme/js/widget.js"></script>

  Разумеется, путь до файла и его название у вас будут своими. Файл в архиве можно скачать отсюда: widget. Не забудьте распаковать файл из архива, изменить значения параметров и сохранить внесённые изменения.
  

• Добавить при помощи текстового редактора вышеприведённый код к имеющемуся файлу js, который уже подключен в вашей теме, например, к файлу jQuery.js.
• Можно использовать любой другой удобный способ.

Очищаем кэш и обновляем страницу, либо просто жмём на клавиатуре Ctrl + F5. Проверяем работу фиксированного виджета.