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

Сегодня: 16.11.2018, Пятница

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

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

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

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

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

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

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

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

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

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

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

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

Фиксированный виджет без плагина на 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 после тэга <head> строчкой:
    <script src="http://site.ru/wp-content/themes/my_theme/js/widget.js"></script>

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

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

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



Добавить комментарий

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


  1. Alina

    Здравствуйте! Доброго времени суток! В этой статье я вам расскажу, как закрепить плавающий блок или как его еще называют виджет на движке WordPress с плагином и без при помощи кода JavaScript. Начнем с того что плавающий блок очень классная вещь, которая может вам помочь повысит ваш заработок на контекстной рекламе или увеличить количество подписчиков, так как перед посетителями все время будет маячить виджет с нужным вам содержанием, и они не смогут его просто так проигнорировать как обычную рекламу.