1. Плаваючий віджет за допомогою плагіна Q2W3 Fixed Widget (Sticky Widget)
2. Робимо плаваючий віджет без плагіна за допомогою JavaScript
3. Другий приклад плаваючого віджета за допомогою JavaScript

Привіт, шановні друзі і гості мого блогу! Сьогодні ми з вами повертаємося до вивчення і розуміння секретів движка WordPress. І дізнаємося ми сьогодні з вами про те, як можна зробити плаваючий віджет або по іншому плаваючий блок в сайдбарі на WordPress за допомогою плагіна Q2W3 Fixed Widget (Sticky Widget), а також без застосування плагінів.

Є такі гурмани, яким не дуже подобається використовувати зайві плагіни на своїх блогах і сайтах, нібито вони занадто гальмують движок WordPress.

Не знаю, у мене стоїть даний плагін і я задоволений ним і плаваючий віджет ніяк не відбивається на швидкості завантаження мого блогу.

Ну да ладно. Давайте перейдемо до справи і дізнаємося, як нам зробити плаваючий віджет у себе на блозі?

Переходимо до практики ...

Плаваючий віджет за допомогою плагіна Q2W3 Fixed Widget (Sticky Widget)

Ви напевно вже помітили, що у мене є на блозі плаваючий віджет. Справа в сайдбарі на моєму блозі Ви можете спостерігати, як при прокручуванні сторінки вниз деякі з віджетів зупиняються і завмирають на місці, ось це і є так званий «плаваючий блок» або «плаваючий віджет».

Для чого це потрібно? Так для того, для чого ми з вами і створювали наш блог взагалі. Для залучення уваги відвідувача до окремих, важливим на наш погляд розділах нашого блогу. Куди потрібно звернути особливу увагу наших з вами гостей.

Тепер давайте навчимося, як зробити цей плаваючий блок в сайдбарі за допомогою спеціального плагіна, який називається Q2W3 Fixed Widget (Sticky Widget). Він нам і допоможе в нашій справі.

Спочатку його потрібно завантажити . Це можна зробити ось тут, абсолютно безкоштовно. Потім встановити плагін Q2W3 Fixed Widget (Sticky Widget). Я думаю, що Ви вже вмієте це робити. Вам просто потрібно зайти в свою консоль блогу і вибрати вкладку «Модулі», потім «Додати новий» і «Завантажити». Потім виберіть свій скачаний плагін і клікніть на нього подвійним клацанням миші. Все, коли він встановиться. натисніть активувати і ваш новий плагін Q2W3 Fixed Widget (Sticky Widget) стане активним і буде готовий до його використання.

Після цього вам потрібно відкрити ваші віджети і вибрати з них який Ви будете робити плаваючим. Вибрали? Тепер відкрийте його і Ви побачите внизу новий напис «Зафіксувати віджет». Ставте тут галочку і все ваш обраний віджет перетвориться в «плаваючий блок»:

плаваючий блок

Перейдіть на свій блог і подивіться тепер, як працює плагін Q2W3 Fixed Widget (Sticky Widget). Він перетворив ваш обраний блок в «плаваючий віджет». Але не забудьте перед цим зберегти настройки в віджеті, натиснувши на кнопочку «Зберегти».

Ось ми з вами і навчилися як зробити плаваючий віджет на своєму блозі за допомогою плагіна Q2W3 Fixed Widget (Sticky Widget).

Робимо плаваючий віджет без плагіна за допомогою JavaScript

Це спеціально для гурманів, які уникають зайвих плагінів на своїх блогах і сайтах на WordPress.

Давайте зробимо плаваючий віджет за допомогою JavaScript, який буде також працювати як і з плагіном.

Для початку вам потрібно скопіювати даний код:

<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>

Тепер вставте його в файл footer.php своєю активною теми оформлення блогу перед закривається тегом </ body> в самому кінці.

Потім вам потрібно відкрити файл sidebar.php і вставити туди ось такий код:

<Div id = "disseo" class = "widget"> «ваш код, який потрібно рекламувати» </ div>

Це був один приклад. Тепер давайте розберемо ще один, який також буде виводити за допомогою JavaScript наш плаваючий віджет в сайдбарі.

Другий приклад плаваючого віджета за допомогою JavaScript

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

Для цього вам потрібно відкрити в своїй консолі вкладку «Зовнішній вигляд». Потім «Редактор» і там знайти файл style.css, де потрібно вставити в самому низу ось такий код:

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

Тепер вам потрібно відкрити файл header.php і перед закриттям тега </ head> вставити ось цей код:

<Script type = "text / javascript" src = "https://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>

І остання дія, яке потрібно вам зробити. Це увійти в консоль блогу в ваші віджети, відкрити потрібний вам, вставити ваш код реклами і ось такий ще код. Можна в кінці, а можна і спочатку, не важливо. Ось цей код:

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

Тепер все, можете перевірити ваш плаваючий віджет в сайдбарі на WordPress.

Ви хочете новий автомобіль за прийнятну ціну? Не знаєте, де знайти? Тоді подивіться ось тут: https://ironhorseru.blogspot.ru/2016/12/lifan-820.html . Вам точно сподобатися пропозицію!

Якщо вам сподобалася стаття? Поділіться нею зі своїми друзями і знайомими в соціальних мережах натиснувши на кнопочки нижче!

А якщо хочете бути завжди в курсі всіх нових подій на моєму блозі, то підпишіться на його поновлення!

Дякую за увагу!

Завжди Ваш Валерій Бородін