Фіксована верхнє меню і плаваючий сайдбар в wordpress, створення, просування і заробіток на

Фіксована верхнє меню і плаваючий сайдбар в WordPress

Привіт, шановні Новомосковсктелі блогу KtoNaNovenkogo.ru. Це скоріше замітка для себе, щоб не забути, що саме робив, коли захочу все повернути назад. Почалося все з того, що один з Новомосковсктелей запропонував написати про плагін для WordPress під назвою Q2W3 Fixed Widget (Sticky Widget), який може зробити будь-який віджет в сайдбарі плаваючим або, іншими словами, фіксованим.

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

Навіщо фіксувати меню і робити плаваючий сайдбар

Як уже згадував, віджети в темі оформлення я відключив, бо не було в них особливої ​​потреби, а якщо вона все ж виникне, то весь цей функціонал можна буде реалізувати за допомогою функцій.

Суть в тому, що для використання плагіна Q2W3 Fixed Widget мені довелося б підключати віджети. Робити цього не хотілося, тим більше що деталі вже розтанули в пам'яті за давністю років. Та й взагалі, використання плагінів і віджетів, як мені здається, краще звести до мінімуму.

Якщо з WordPress плагінами на своєму блозі мені все ж миритися доводиться, бо без деяких з них працювати буде просто не можливо, то з віджетами я вирішив покінчити остаточно і безповоротно. Тому про настройку Q2W3 Fixed Widget можете почитати, наприклад, тут.

Як зафіксувати верхнє меню в WordPress

Я ж знайшов для себе рішення на цій ось сторінці - як зафіксувати блок або меню на сайті. Для використання даного способу обов'язково повинна бути підключена бібліотека jQuery. Як це зробити, детально описував в статті про використання Ajax (Аякс) для подгрузки контенту.

Якщо ви пам'ятаєте, то в статті про оптимізацію швидкості завантаження сторінок потрібно постаратися об'єднати всі CSS і JS в один загальний (в сенсі в два - один для стилів, а інший для скриптів). Ось, власне, в такий файлик я і додавав наведені трохи нижче рядки коду. Хоча можна їх додати і безпосередньо в Html код, оточивши тегами script. Наприклад, це можна зробити в шаблоні header.php всередині тегів head.

Реалізувати фіксацію верхнього меню можна і за допомогою чистого CSS - Position fixed нам на допомогу. Власне, тут теж використовується позиціонування за допомогою цього CSS властивості, але так само з'являється можливість почати відображати фіксоване меню не відразу, а через деякий час після початку прокрутки (на певній відстані від верху).

У моєму випадку код фіксації верхнього меню виглядає ось так:

Нагадую, що вставити цей фрагмент коду можна в:

1. Файлик з розширенням .js, який живе в папці з використовуваної вами темою оформлення (/ wp-content / themes / тема). Він вам підійде тільки в тому випадку, якщо для нього в файлі header.php прописана рядок подгрузки його разом з вебсторінки вашого сайту, яка може виглядати так:
2. Можна використовувати сам файл header.php, уклавши даний код між відкриває і закриває тегами head і обрамити його в теги script, наприклад, так:
3. Можна і в будь-яке інше місце прописати цей код в тегах script. Головне, щоб він довантажувати на потрібних сторінках блогу. Наприклад, можна в footer.php перед закриває тегом body.

На відміну від оригінального коду мені довелося ще додати 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:

Як в WordPress зробити плаваючий сайдбар без плагінів

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

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

Тому я просто взяв для створення нижнього блоку верхню частину свого основного сайдбара (в шаблоні sidebar.php), потім переніс з верхнього в нижній блок «Використовую для заробітку», ну і в кінці приліпив те, що в основному блоці було закінченням. Вийшло приблизно так:

Ну ось, тепер у мене блок «Використовую для заробітку» переїхав їх верхнього блоку сайдбара в нижній. Вийшло не фонтан, але для «времянки» зійде. Залишилося тільки все це в JS файлі оформити кодом і нижній блок почне плавати. JS код виглядає так:

Зверніть увагу, що замість .sidebar123 вам потрібно підставити свій клас або ID того зовнішнього контейнера, в якому живе ваш нижній блок сайдбара.

Код цей я не так щоб дуже сильно розумію (JS ​​не володію), але все працює. У всякому разі, частково. Коли ви задаєте фіксоване позиціювання, то звіт йде від верхньої лівої точки. Отже, за допомогою відступу зліва marginLeft: '760px' я розміщую цей блок якраз на рівень сайдбара (ціфірькі була отримана шляхом «проб і помилок»).

Значення top: '52px' задає відступ вже плаваючого блоку сайдбара від верхньої межі. Значення top echo ''. зустрічатимуться одиничні лапки, то їх потрібно буде екранувати. тобто поставити перед кожною з них зворотний слеш (\ ') без дужок, природно.

Загалом вийшло, як вийшло. Як це конкретно прикрутити до вашої теми, вам доведеться вирішувати самим - коли є час, то це навіть прикольно «поламати голову». Дякуємо.

Удачі вам! До швидких зустрічей на сторінках блогу KtoNaNovenkogo.ru

Чого ж дивуватися, але за дрібниці спасибі. Мені належить прикрутити один екземпляр такого чуда на сайт в чистому html без движка. Побробуйте розібрати саме стильові рішення. Скрипти страшенно не люблю, тому що не завжди вони бувають включені в браузерах. Оформлення тільки за допомогою CSS - це красиво 🙂

не зайва. Якраз виникало бажання утримати зрушений вниз до центру екрану блок на місці, тобто скролінг блоку не буден помітний 🙂

Це цікаве рішення, спасибі! Я як-раз на одному з сайтів збираюся перемістити меню вгору над шапкою і його фіксація думаю, буде дуже зручна, як відвідувачам, так і мені.

Цитата: "Значення top <2561 не понял до конца как работает."

Значення top - це відступ від верху вікна браузера при прокручуванні, коли починають діяти правила фіксації блоку.

Цитата: "Однак, у мене виникала проблема в тому випадку, якщо."

Тому і виникла проблема, що відступ top вказано постійним. Правила фіксації почали діяти раніше, ніж закінчилися вищі блоки, тому що загальна сума висот вищих блоків більше, ніж 2561 пікселів.

До речі, тут же є інформація про те, як "зупинити" блок внизу сайту на певній висоті. Є демонстрація та вихідні.

А ось за цим посиланням ще один оригінальний приклад того, як зроблений фіксований блок засобами js + jq, не вдаючись до плагінів. Причому відступ зверху обчислюється динамічно і, відповідно, працює на всіх сторінках (крім головної - там він не фіксований), незалежно від того, скільки блоків в сайдбарі знаходиться вище фіксованого блоку. Також є зупинка внизу сайту. А ще зникнення зайвих блоків при фіксації.

Загалом, дивіться, походіть по сторінках.