Плавающий виджет без плагина и с плагином Q2W3 Fixed

Опубликовано: 01.09.2018

Приветствую Вас на блоге!

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

Как зафиксировать блок в боковой колонке (виджет в сайдбаре)

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

Расскажу о двух способах: первый с плагином, а второй без, с помощью кода. Если один не понравиться, то можно выбрать другой. У виджета, который плывет за Вашим посетителем, пока он читает, много преимуществ!

Когда я вижу, что за мной движется, что-то полезное и красивое, то обязательно нажимаю по нему. Думаю, что эта штука работает не только на мне. Кстати с помощью этого виджета, я увеличил число подписчиков на блог в 3 раза. Узнайте, как этого можно добиться в этой статье .

У кого есть счетчик «Яндекс метрика»? Раньше он у меня стоял, в веб-визоре наблюдал за поведением моих читателей. Блоки, которые расположены в сайдбаре, посетители вообще почти не замечали. Если часть сайдбара будет плыть за пользователем, пока он будет читать, то он по любому обратит на него внимание, кликнет или подпишется. Подписывайтесь на мои обновления .

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

Специальном плагине + настройках Специальном скрипте + настройках

ПЛАВАЮЩИЙ БЛОК С ПЛАГИНОМ Q2W3 FIXED WIDGET

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

После того, как активировали, заходите в админ панель своего блога по адресу/wp-admim и заходите на вкладку «Внешний вид». Видите там, появилось «Фикс виджеты»? Вот это и есть настройки плагина. Мы с Вами разберем их по частям, то есть узнаем, что к чему.

Первоначально идет верхний отступ. Здесь необходимо указать, сколько нужно отступить от верхней части страницы. Там все измеряется в пикселях, чтобы при прокрутке движущаяся панелька не врубилась в header, то есть шапку блога. Измерять Вам придется самим. Могу сказать только примерно, ставьте от 10 до 20 px. Вторая строка – нижний отступ. Тут все то же самое, только нужно ставить отступ от низа, то есть размер в пикселах от подвала (footer). Если верхний отступ уже настроен, то ставьте 0 и идем дальше. Походу третья строка – нужно указать ширину браузера. Этот функционал нужно настроить для людей, которые заходят в интернет с мобильных телефонов. В наше время это очень важно, так как через телефон заходит очень много людей на блоги и сайты! Ставьте 800. Поставьте галочку против следующей строки – исправлять id виджетов. Эта функция нужна для кривых шаблонов. Следующая строка не так важна, но если Q2W3 Fixed Widget конфликтует с библиотекой Query или плагин вообще идет в отказ от работы, то поставьте галочку напротив «Вкл. jQuery (window).load ()».

Последний шаг в настройке. Зайдите на вкладку виджеты, перенесите нужный, вставьте в него подготовленный код. Внизу поставьте галочку «Зафиксировать». Вот и все готово! Плагин теперь будет работать как часы. Если уже решили, какой плавающий блок ставить, то рекомендую размещать его ниже всех остальных, чтобы он не закрывал собой другие. Перейдем к джава скрипту? Тогда поехали.

ПЛАВАЮЩИЙ БЛОК НА JAVASCRIPT

Этот способ избавит Вас от плагина, который может замедлять загрузку страницы или записей блога. Дальше мы будем использовать соединение через FTP. Кто не знает, как пользоваться FTP или просто не любит им пользоваться, может зайти на вкладку админ панели блога «Внешний вид/редактор» и там найти файл footer.php вместе с sidebar.php. Эти два файла нам понадобятся! Ну а для FTP соединения: заходите в корень движка WordPress , двигайтесь по такому адресу:

wp-admin/themes/название темы

Найдите файл footer.php. Перед закрывающим тегом </body> вставьте script, который нужно скачать здесь. После того, как вставите, не забудьте сохранить изменения. Почти все! Нам нужен файл sidebar.php. Открывайте его и там где хотите видеть свой плавающий виджет, вставьте следующий код:

С уважением, веб-студия Алексея Кобзарева.