Здрастуйте, шановні читачі блогу . Це скоріше замітка для себе, щоб не забути, що саме робив, коли захочу все повернути назад. Почалося все з того, що один з читачів запропонував написати про плагін для WordPress під назвою Q2W3 Fixed Widget (Sticky Widget), який може зробити будь віджет в сайдбарі плаваючим або, іншими словами, фіксованим.
Тобто прокручуючи сторінку ви побачите, що основна частина сайдбара піде вгору, але ось той віджет, що буде розташований в самому низу, залишиться в області перегляду, як би далеко ви не просувалися вниз по тексту. Відразу обмовлюся, що розміщувати контекстну рекламу подібним чином заборонено і за це можуть покарати (як з’ясувалося в коментарях — РМЯ це допускає, а Адсенс забороняє так робити).
Плагін чудовий, але віджети у мене в темі відключені, тому я вирішив цю задачу за допомогою декількох рядків джавскрипт коду, які знайшов на просторах інтернету.
У підсумку моє верхнє меню зафіксовано в самому верху області перегляду по суті для цього досить було тільки CSS коду, але ми легких шляхів не шукаємо), а нижня частина сайдбара фіксується у верхній правій частині екрана, коли ви дійдете до неї при прокручуванні сторінки. Чи буде з цього толк не знаю, але рішення дійсно просте.
Навіщо фіксувати меню і робити плаваючий сайдбар
Навіщо фіксувати верхнє меню, запитаєте ви? Ну, загалом-то, це невеликий експеримент на тему поліпшення поведінкових характеристик. Чисто гіпотетично можна припустити, що це може викликати збільшення числа переглянутих сторінок і часу, проведеного користувачем на сайті.
З іншого боку, зайва настирливість подібної фіксованої панелі може викликати негативну реакцію читачів, тому питання корисності цього дійства залишається відкритим. Треба буде подивитися на результат після тижня використання — якщо меню перестане бути фіксованим (прибитим до верхнього краю області перегляду), то значить експеримент не вдався. На всякий випадок зроблю скріншот, як все це було.
Плаваючий ж сайдбар в WordPress роблять трохи з іншої причини — привернути більше уваги до чого-небудь. В принципі, тут можете вставити список рубрик, та список популярних або останніх постів, що знову ж таки буде намагатися служити завданню поліпшення поведінкових. Але найчастіше в такий плаваючий блок поміщають рекламу (контекстну не можна, як я вже згадував), що чисто гіпотетично має підвищити дохід вебмастера. Подивимося на результат через тиждень.
Отже, почнемо з плагіна Q2W3 Fixed Віджет, який ви можете завантажити за наведеною посиланням або ж просто набрати його назву в адмінці WordPress (вкладка Плагіни — Додати новий) і встановити без всяких зайвих маніпуляцій. Працює він досить просто і найбільш наочний спосіб це побачити полягає в перегляді семисекундного ролика:
«alt=»»>
Як вже згадував, віджети у темі оформлення я відключив, бо не було в них особливої потреби, а якщо вона все ж виникне, то весь цей функціонал можна буде реалізувати з допомогою функцій.
Наприклад, ось так можна організувати виведення останніх п’яти (число в коді можна змінювати) коментарів (цифра 60 задає кількість символів повідомлення, яке буде відображатися, щоб не захаращувати сайдбар повними тестами):
Правда вам ще знадобитися файлик від однойменного плагіна simple_recent_comments.zip, який належить витягти з наведеного архіву і кинути в папку з використовуваної вами темою (/wp-content/themes/тема)
А так можна вивести в сайдбарі список п’яти останніх постів, опублікованих у вас на блозі (цифирьку можна змінювати):
Суть в тому, що для використання плагіна Q2W3 Fixed Widget мені довелося б підключати віджети. Робити цього не хотілося, тим більше що деталі вже розтанули в пам’яті за давністю років. Та й взагалі, використання плагінів і віджетів, як мені здається, краще звести до мінімуму.
Якщо з WordPress плагінами на своєму блозі мені все ж доводиться миритися, бо без деяких з них працювати буде просто не можливо, то з віджетами я вирішив покінчити остаточно і безповоротно. Тому про налаштування Q2W3 Fixed Widget можете почитати, наприклад, тут.
Як зафіксувати верхнє меню в WordPress
Я ж знайшов для себе рішення в мережі. Для використання даного способу обов’язково повинна бути підключена бібліотека jQuery. Як це зробити, детально описував у статті про використання Ajax (Аякс) для завантаження контенту.
Якщо ви пам’ятаєте, то в статті про оптимізацію швидкості завантаження сторінок потрібно постаратися об’єднати всі CSS і JS в один загальний (в сенсі в два — один для стилів, а інший для скриптів). Ось, власне, в такий файлик я і додавав трохи нижче наведені рядки коду. Хоча їх можна додати і безпосередньо в Html-код, оточивши тегами script. Наприклад, це можна зробити в шаблоні header.php всередині тегів head.
Реалізувати фіксацію верхнього меню можна і з допомогою чистого CSS — Position fixed нам в допомогу. Власне, тут теж використовується позиціонування за допомогою цього CSS властивості, але так само з’являється можливість почати відображати фіксоване меню не відразу, а через деякий час після початку прокручування (на певній відстані від верху).
В моєму випадку код фіксації верхнього меню виглядає ось так:
$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 10) $(«#navi»).css({top: ‘0’, position: ‘relative’});
else $(«#navi»).css({top: ‘0px’, width: ‘100%’, position: ‘fixed’});
});
});
Нагадую, що вставити цей фрагмент коду можна в:
$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 10) $(«#navi»).css({top: ‘0’, position: ‘relative’});
else $(«#navi»).css({top: ‘0px’, width: ‘100%’, position: ‘fixed’});
});
});
Тепер звернемося безпосередньо до цього коду. Виходить, що через 10 пікселів від верху відносне позиціонування змінюється фіксованим (див. статтю за наведеною трохи вище лінком). Якщо необхідно, то в рядку else значення top можна вибрати не нуль, і тоді фіксоване у верхній частині меню буде відступати від верхнього краю області перегляду на дане значення пікселів (по-моєму, це зайве).
На відміну від оригінального коду мені довелося ще додати width: ‘100%’, бо в іншому разі розмір меню по ширині зменшувався, що псувало всю картину.
Тепер найголовніше — цей код у вас працювати не буде (швидше за все). Чому? Можливо тому, що у вас використовуються інші класи або ID для завдання положення верхнього меню CSS код. Розумієте про що я? Якщо ні, то вам слід пробігтися по статті про селектори класів (class) і Id, та й взагалі подивитися одним оком на справочник CSS для початківців.
Дивіться, для наочності я наведу Html код, за допомогою якого формується верхнє меню в моєму шаблон WordPress блогу (живе він у мене в файлику header.php з папки з темою оформлення):
У вас, швидше за все, у шаблоні виведення пунктів меню буде заданий за допомогою, наприклад, ось такий конструкції (функції), але це не суть важливо.
Функція wp_list_pages, звичайно ж, гарна (дозволяє налаштувати сортування, вказати винятки тощо), але краще все робити вручну через звичайний Html, як показано вище. ІМХО.
Тут важливо вловити те, що все це укладено в контейнери div, і самий верхній з них має атрибут id=»navi». Ось до нього ми і будемо чіплятися. Бачите в наведеному вище JS коді два рази зустрічається #navi? Вам потрібно буде там проставити замість #navi свій ID (або клас, який, як ви пам’ятаєте, записується не через ґрати, а через крапку, наприклад, так: .menu).
Ось після цього у вас меню має зафіксуватися у верхньому положенні при прокручуванні сторінки на певне число пікселів. У мене, правда, виникла проблема з тим, що це саме меню не завжди виявлялося поверх тих елементів сторінки, над якими воно проплывало.
Це, погодьтеся, не є добре. Тому довелося залізти трохи в CSS код і додати правило z-index зі значенням 1000 id селектора #navi:
#navi{background:#03658e url(https:///wp-content/themes/Organic/images/spriteme2.png) repeat-x;background-position:0px -10px;height:31px;z-index:1000}
Справа в тому, що коли ви ставите за допомогою Position один з трьох видів позиціонування, то даний елемент перестає взаємодіяти зі звичайними елементами Html коду. Але от з іншими такими ж спозиционированными він буде конкурувати за місце «під або над». z-index:1000 дозволяє розташувати наше меню свідомо вище всіх інших блоків. Подробиці читайте у наведеній трохи вище статті.
Як WordPress зробити плаваючий сайдбар без плагінів
Описаним нижче способом можна змусити плавати (або іншими словами, фіксуватися в певному місці області перегляду) як весь сайдбар, так і його частина. Якщо ця область у вас зовсім невелика і вміщується на одному екрані (навіть портативного пристрою), то можна весь його змусити плавати.
Але найчастіше це не так, і плавати можна буде змусити нижню частину. Якщо сайдбар, як у моєму випадку, представляє з себе нероздільний моноліт, то можна буде плаваючий блок створити самим, використовуючи закладені в використовуваної вами теми оформлення принципи і розмістити його нижче основного.
Все це я робив швидко і не особливо обтяжуючи себе розкошами і пошуком оптимального рішення, бо зі свого багатого досвіду експериментів виніс закономірність, що чим більше ти покладаєш надії на якусь задумку, тим менше ймовірність того, що вона «вистрілить». Ну і, навпаки. Загалом, морочитися поки не було сенсу, бо ймовірність того, що все це приживеться, не так вже й велика.
Тому я просто взяв для створення нижнього блоку верхню частину свого основного сайдбара (в шаблоні sidebar.php), потім переніс з верхнього в нижній блок «Використовую для заробітку», ну і в кінці приліпив те, що в основному блоці було закінченням. Вийшло приблизно так:
Використовую для заробітку
Ну ось, тепер у мене блок «Використовую для заробітку» переїхав їх верхнього блоку сайдбара в нижній. Вийшло не фонтан, але для «времянки» зійде. Залишилося тільки все це в JS файлику оформити кодом і нижній блок почне плавати. JS код виглядає так:
$(document).ready(function(){
var br = $.browser;
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top 7))) {
$(«.sidebar123»).css({top: ’52px’, position: ‘fixed’, marginLeft: ‘760px’});
} else if ((br.msie) && (br.version <= 7)) {
$(«.sidebar123»).css({top: ’52px’, position: ‘fixed’, marginLeft: ’25px’});
}
});
});
Зверніть увагу, що замість .sidebar123 вам потрібно підставити свій клас або ID того зовнішнього контейнера, в якому живе ваш нижній блок сайдбара.
Цей Код я не так щоб дуже сильно розумію (JS не володію), але все працює. Принаймні, частково. Коли ви задаєте фіксоване позиціонування, то звіт йде від верхньої лівої точки. Отже, з допомогою відступу ліворуч marginLeft: ‘760px’ я розміщую цей блок якраз на рівень сайдбара (цифирьки була отримана шляхом «проб і помилок»).
Значення top: ’52px’ задає відступ вже плаваючого блоку сайдбара від верхньої межі. Значення top < 2561 не зрозумів до кінця, як працює.
Однак, у мене виникала проблема в тому випадку, якщо загальна висота основного сайдбара була менше висоти області з контентом. Така штука вилазила, наприклад, при перегляді архіву рубрик:
C точки зору CSS я розумію чому так відбувається, але от думати над виправленням було лінь. Довелося просто відмовитися від показу цього плаваючого блоку сайдбара на таких сторінках (він там і не потрібен).
Для цього в файл sidebar.php я додав умова виведення цього блоку тільки в статтях і на головній з допомогою умов is_single () і is_home ():
‘;}
?>
Зверніть увагу, що якщо в коді, укладеному в echo «, будуть зустрічатися одиночні лапки, то їх потрібно буде екранувати, тобто поставити перед кожною з них зворотний слеш (\’) без дужок, природно.
В загальному вийшло, як вийшло. Як це конкретно прикрутити до вашої теми, вам доведеться вирішувати самим — коли є час, то це навіть прикольно «поламати голову». Спасибі.
Удачі вам! До зустрічей на сторінках блогу
