Как сделать плавающий виджет с плагином и без на WordPress?

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

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

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

Я покажу вам три практических примера, как это можно сделать. Вам останется только выбрать тот способ, который будет наиболее удобен для вас.

Делаем плавающий блок виджет через плагин Q2W3 Fixed Widget.

1) Скачиваем плагин тут или с официально сайта автора и закачиваем его на блог, активируем.

2) В админке блога переходим во «внешний вид» «Фикс виджеты». Тут мы с вами разберем пару настроек, которые и так понятны.

Верхний отступ — тут вы указываете отступ от верха сайта, измеряющийся в пикселях, где виджет должен остановиться при прокрутке вверх не врезавшись в шапку блога (вверх сайта). Тут вам нужно самому измерить высоту от верха вашего блога до блока с виджетами. Рекомендую тут поставить  число от 10 до 20. Если хотите чтобы плавающий блок был прям посередине справа, то поставьте тут 200.

Нижний отступ — тут тоже самое только это относится к подвалу блога (нижней части сайта). Тут лучше поставить 0, если вы настроили верхний отступ.

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

Автоматически исправлять id виджетов – тут поставьте галочку, так как у многих шаблоны тем, увы, кривые.

Вкл. jQuery (window).load () – тут поставьте галочку,  если у вас не работает плагин и конфликтует с библиотекой Query, то есть со скриптами. Все остальное можно не рассматривать.

3) Теперь вам осталось только зайти во «внешний вид» «виджеты», открыть нужный виджет и внизу его поставить галочку, где написано «зафиксировать виджет».  Вот и все теперь у вас присутствует плавающий блок на сайте. Рекомендую закреплять именно последний виджет, так как если этого не сделать он будет наезжать на другие виджеты, и это будет смотреться не очень красиво.

плагин Q2W3 Fixed Widget

Если у вас ничего не получилось, то есть не работает плагин, то значит у вас кривая тема оформления. Рекомендую обратиться к автору плагина по тому или иному вопросу.

Делаем плавающий блок виджет через JavaScript на WordPress.

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

1Итак, зайдите во «внешний вид» «редактор» «подвал» (footer.php) и вставьте тут этот код в самом конце перед закрывающим тэгом </body> или </div> если нет тега </body>, и обновите файл.

<script type="text/javascript">// <![CDATA[
if (typeof(jQuery) == 'function') {
$j = jQuery.noConflict();
var $float_block = $j('#disseo');
var $float_bottom = $j('#footer');
var sdb_float_fixtop = 5;
var float_bottom_limit = $float_bottom.offset().top-20;
setTimeout(function(){ float_bottom_limit = $float_bottom.offset().top-20; }, 2000); // Пересчитаем спустя время
var float_top_init = $float_block.offset().top;
var sdb_float_position = $float_block.position();
var float_block_height = $float_block.height()+sdb_float_fixtop;
var sdb_move_last = false;
var float_lift = 0; // поднимает блок, когда он упирается во float_bottom
var float_lift_complete = false;
$j(window).bind('scroll resize', function () {
if (float_bottom_limit - float_top_init - float_block_height < 100) return; var sdb_move = ($j(window).scrollTop() > float_top_init - sdb_float_fixtop);
if (sdb_move) {
float_lift = float_bottom_limit - $j(window).scrollTop() - (float_block_height-sdb_float_fixtop);
if (float_lift < 0) { $float_block.css('top', float_lift); float_lift_complete = true; }
// когда поднимать не надо, устанавливается начальное значение верхнего отступа
else if (float_lift_complete) { $float_block.css('top', sdb_float_fixtop); float_lift_complete = false; }
}
if (sdb_move_last != sdb_move) {
sdb_move_last = sdb_move;
if (sdb_move) {
$float_block.css({'position':'fixed', 'top':sdb_float_fixtop});
} else { $float_block.css('position', 'static'); }
}
});
$j(window).scroll();
}
// ]]></script>

2) Теперь зайдите в «боковая колонка» (sidebar.php) и в самом конце вставьте этот код:

<div id="disseo" class="widget">«код»</div>

Смотрите вместо надписи «код» вставьте ваш код рекламы или подписной формы, или все что захотите и обновите файл. Вот и все.

Второй способ как сделать плавающий блок виджет через JavaScript.

Если у вас что-то не получилось в предыдущем примере, предлагаю опробовать этот метод. В отличие от предыдущего примера ваш блок будет не скользить, а растягиваться, догоняя своего посетителя, то есть он будет немного подскакивать вверх-вниз при прокрутки.

1) Зайдите во «внешний вид» «редактор» в файле «таблица стилей» (style.css) и добавьте данный код практически в самом внизу там, где у вас начинаются строки кода с символа # и заканчивается }.

#fixed {background: #FFF; padding: 18px 5px 20px;}

способ как сделать плавающий блок виджет через JavaScript.

2) Теперь зайдите во внешний вид, редактор в файл «заголовок» (header.php) и вставьте тут этот код перед закрывающемся тегом </head> и обновите файл.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>// если уже подключен скрипт в шаблоне, то повторно не надо
<script type="text/javascript">
$(function () {
var offset = $(«#fixed»).offset ();
var topPadding = 10;
$(window).scroll (function () {
if ($(window).scrollTop () > offset.top) {
$(«#fixed»).stop ().animate ({marginTop: $(window).scrollTop () — offset.top + topPadding});
}
else {$(«#fixed»).stop ().animate ({marginTop: 0});};});
});
</script>

3) Ок, теперь просто заходим в наш вииджет и вставляем в него, например код рекламы и в конце или в начале его вставляем этот код и нажимаем сохранить.

<div align='center' id="fixed">

Надеюсь, что данная статья вам помогла, так как я лично все скрипты проверял. Напоследок хочу сказать, что лучше не размещайте рекламу от Google в такой плавающий блок, так как это противоречит их правилам и за это можно получить бан аккаунта. В таком случае заработанные вами деньги вам не выплатят, так как там минимальный вывод средств 100$, то есть 3тыс руб.

Похожие публикаций:

Популярный плагин кэширования WordPress - Hyper Cache
Плагин всплывающей формы авторизации - Login box
Как можно усовершенствовать комментарии WordPress для полноценного общения?

Поделиться с друзьями и коллегами.

Система Orphus
  1. Татьяна:

    Получилось сразу. Очень легко.

    Здорово!

  2. Петр Иванов:

    Здравствуйте, Максим! Подскажите пожалуйста, не возникало ли у вас проблем со стилями или еще чем-то после использования вашего скрипта?

    Дело в том, что я пошагово выполнял все инструкции из вашего урока. Начал со второго скрипта — не получилось. Установил плагин — тоже не вышло. А с первым скриптом плавающий виджет получился, но так как выглядит не очень привлекательно — я все почистил. И здесь я обнаружил проблему — нижняя часть моего сайта изменила цвет с темного на светлый, что не очень красиво смотрится!

    Перекопал все, что мог и style.css и screen.css и footer и header, но так ничего и не получилось.

    Возможно, вы сможете мне помочь? И вернуть все как было до экспериментов с плавающим виджетом.

    PS. Есть подозрение, что изменения внес плагин или java скрипты.

    Заранее благодарен!

    • Макс:

      Здравствуйте.

      Если хотите все вернуть вам достаточно скачать тужу самую тему, что у вас стой, но сначала надо удалить старую или поменять ее на другую временную.

      А вообще вы наверно просто убрали не весь код или случайно удалил вместе с ним и свой из темы оформления.

      Если не поможет пришлите адрес вашего сайта посмотрю.

  3. Петр Иванов:

    Спасибо за ответ!

    Но, дело в том, что этот шаблон я дотачивал под себя.

    Восстановление style.css, screen.css, footer, header из базы бэкапа также ни к чему не привело.

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

    Решил попробовать изменить шаблон, но на это нужно время...

  4. Петр Иванов:

    Спасибо! Проблему решил!

  5. Компьютерная помощь:

    Спасибо за понятную статью и полезный плагин, все очень просто, остался доволен! 😉

  6. Oleg:

    Спасибо, интересный скрипт. Можно ли в этот скрипт добавить параметр duration, скорость анимации? И, если у меня 2 плавающих блока #fixed и #fixed2 надо ли подключать полностью 2 скрипта, или можно как то прописать их в одном скрипте?

    • Макс:

      Про параметр duration не знаю так как код не мой.

      Просто прописываете в файле footer.php или header.php код скрипта и добавляете в два виджета дополнительный код для того чтобы заработал скрипт.

  7. Татьяна:

    Здравствуйте! Сделала фиксированный виджет через JavaScript по первому способу. Возникли следующие проблемы. Когда появляется примерно половина виджета, он вдруг подскакивает вверх, перекрывая предыдущий, ну а после этого уже висит на месте, как положено. Потом еще заметила, что перестали переключаться вкладки комментариев.

    Может подскажете, в чем проблема? А каким способом у Вас зафиксирован виджет?

    • Макс:

      Здравствуйте. А вы точно последний виджет сделали плавающим, если нет то понятно почему он наезжает на другие. У меня тоже подрыгивал виджет при прокрутке, но только со вторым кодом. Если что у меня через плагин все сделано.

  8. Татьяна:

    Да, абсолютно точно, последний. Я его код вставила в файле sidebar1.php перед последним .

    А плагин у меня почему-то перестал работать, хотя раньше работал. Пробовала отключать по одному другие плагины (мало ли, конфликтуют), но он все равно не заработал.

    • Макс:

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

  9. Татьяна:

    Вспомнить, к сожалению, этот момент не могу, потому что заметила это не сразу 🙁

    • Макс:

      Я нашел ответ на вашу проблему. Читайте тут http://www.q2w3.ru/2012/12/12/4827/ почему плагин не работает и как его починить, там же сможете задать свои вопросы в случае чего. Как я понял у вас скорее всего отсутствуют уникальные идентификаторы в виджетах то есть ID.

  10. Татьяна:

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

  11. Татьяна:

    Разобралась я! Заработал плагин. Оказывается, у меня подгружалась старая версия jQuery, а он работает с версией не ниже 1.7. Это я там в комментах нашла. Исправила версию на новую, и все замечательно работает 🙂

  12. Сергей:

    Здравствуйте! Подскажите пожалуйста, у меня панель виджетов выглядит так: http://pixs.ru/showimage/srinvidzhe_9142117_13253253.png

    а должна так, http://pixs.ru/showimage/Vidzhetihj_3345604_13253267.jpg

    Как исправить?

  13. артем:

    здравствуйте. правильно ли я понимаю, что прилипающий виджет можно реализовать лишь тот, который стоит в сайдбаре в самом низу? просто я хотел сделать прилипшим виджет подписки, но он у меня стоит в самом верху. сделал все по инструкции и стало 2 подписки — вверху и в самом низу.

    • Макс:

      Привет. Нет можно любой виджет прилепить.

      Уберите верхнею или нижнюю подписку.

      Нижний виджет закрепляют затем чтобы он не наезжал на верхние.

  14. Максим:

    Спасибо. Попробую установить скриптом. 😉

  15. Евграфий Петрович:

    Спасибо! Выбрал вариант «через javascript», заработало, но не сразу. Оказывается, для него требуется подключить библиотеку jquery (случайно догадался). Так что неплохо было бы указать на это в статье

  16. Сталекс:

    Валерий, спасибо за рекомендацию. Не во всех темах предусмотрен плавающий виджет. Я себе поставил плагин Q2W3, хорошее расширение для моей темы.

Прокомментировать

Максим Вячеславович – автор блога firstprize.ru, вольный SEO специалист, вебмастер, Web-разработчик на WordPress и человек-оркестр с опытом в некоторых других областях. Личное кредо — хочешь сделать что-нибудь хорошо, сделай это сам. В моменты особого вдохновения создаю видеоклипы и ковыряюсь в кодах. Основные профессиональные инструменты —Dreamweaver, Adobe Photoshop, Site-аuditor. Спасибо за внимание, заходите снова!