Як створити липкий заголовок у WordPress
Перш ніж перейти до того, як ми можемо створити липкий заголовок у WordPress, давайте спочатку зрозуміємо, що це таке та чому ми можемо їх використовувати. Закріплені елементи, або фіксовані елементи, — це особливі види елементів, які завжди залишаються видимими та не змінюють свого положення, коли користувач прокручує вгору або вниз. До цих елементів можна отримати доступ у будь-який час завдяки їх позиціонуванню, тому вони дуже корисні для меню чи інших параметрів навігації.
Ви хочете надати своїм користувачам якомога більше зручних опцій, щоб ваш вміст був легко доступним і зменшив розчарування користувачів. За допомогою липких елементів користувачі можуть швидко переходити з однієї сторінки вашого веб-сайту на іншу та знаходити саме те, що їм потрібно. Весь цей комфорт і простота використання означає, що ваш досвід роботи з користувачем буде набагато кращим, і ви матимете більше утримання користувачів.
Тепер ми розглянемо один із основних типів липких елементів, липкий заголовок, і чудовий інструмент, який допоможе нам легко створювати та налаштовувати ці елементи. Інструмент, про який йде мова, називається WP Sticky.
Окрім WP Sticky, існує багато різних способів створення липких заголовків. Ви навіть можете створити ці липкі елементи за допомогою чистого коду HTML і CSS, але це потребує певних технічних знань і займає багато часу. Цей плагін є набагато простішим вирішенням проблеми та надзвичайно зручним для початківців.
Перш ніж ми зможемо почати використовувати WP Sticky, ми повинні спочатку завантажити його та встановити плагін. Оскільки це дуже простий процес, ми не будемо витрачати на це час. Натомість перейдемо безпосередньо до створення нашого першого липкого заголовка.
Перше, що нам потрібно зробити, це увійти в розділ плагінів на панелі адміністратора WordPress; звідти виберіть WP Sticky Pro, а потім натисніть Налаштування.
Нас зустрінуть ці параметри, де нам потрібно буде вибрати Додати новий липкий елемент.
Після того, як це буде зроблено, ми побачимо новий запис на вкладці «Ваші липкі елементи» під назвою «Ліпкий елемент №1». Вітаємо, ви створили свій перший липкий елемент, але ще багато чого потрібно зробити, перш ніж у нас буде функціональний липкий заголовок. Як бачите, існує кілька різних категорій налаштувань для нашого липкого елемента.
Розглянемо їх детальніше.
Тут ми дамо назву нашому елементу та виберемо, що саме ми хочемо зробити липким.
По-перше, нам потрібно дати назву липкому елементу; у цьому випадку це буде Sticky Header.
Далі нам потрібно знайти та вибрати елемент, який ми хочемо зробити липким. Ми можемо досягти цього двома способами.
Візуальний вибір
Це більш зручний і простий варіант. Просто перейдіть у розділ «Основні» та виберіть опцію «Вибрати елемент».
Після того як ви це зробите, ваш веб-сайт відкриється разом із липким меню WP у верхній частині, сигналізуючи про те, що ви ввійшли до візуального вибору. Якщо ви наведете вказівник миші на деякі з елементів, ви помітите жовтуватий прямокутник з ламаною лінією, який візуалізує вибрану вами область. Натисніть на нього лівою кнопкою миші, щоб вибрати його.
Це поверне вас на сторінку налаштувань WP Sticky, де ви побачите унікальний ідентифікатор вибраного елемента. У нашому випадку це виглядає приблизно так.
Після цього натисніть кнопку «Зберегти зміни» у верхньому правому куті, і все готово.
Написання унікального ідентифікатора
Якщо ви віддаєте перевагу та знаєте унікальний ідентифікатор елемента, який хочете зробити липким, замість того, щоб візуально вибирати його, ви можете просто записати його унікальний ідентифікатор.
Візуальні параметри
Після того, як ми закінчили називати та вибирати наш елемент, настав час зробити його заголовком і налаштувати його. WP Sticky дає нам досить багато варіантів для цього.
Оскільки ми хочемо створити заголовок, ми залишимо цей параметр у стандартному стані, який є Top. Якщо ви передумаєте або вимоги зміняться, ви також можете вибрати опцію «Внизу».
Відстань між верхньою частиною сторінки та липким елементом
Іноді наші липкі елементи можуть наближатися до верхньої частини сторінки. Ми можемо виправити це вручну, ввівши кількість пікселів між верхньою частиною сторінки та нашим призначеним липким елементом.
За замовчуванням цей параметр не встановлено, оскільки більшість елементів буде правильно розміщено автоматично.
Перевірте панель інструментів адміністратора
Якщо на вашому веб-сайті є спеціальна панель інструментів адміністратора, вона може заважати вашому липкому заголовку. Якщо це так, все, що вам потрібно зробити, це позначити цей параметр, і проблему буде вирішено. WP Sticky автоматично розпізнає розмір панелі інструментів і реагує відповідно.
Іноді вам потрібно мати різну поведінку залежно від пристрою, який відвідувачі використовують для перегляду вашого веб-сайту. Можливо, вам не захочеться мати закріплений заголовок на мобільних пристроях. WP Sticky дає вам можливість вибрати, які категорії пристроїв матимуть закріплену поведінку. У нашому випадку ми відмовимося від малих і середніх пристроїв.
Інший випадок, коли може знадобитися деяка настройка вручну, це якщо є елементи, які з’являються над вашим липким заголовком. Щоб цього не сталося, вам потрібно буде збільшити Z-індекс вашого липкого заголовка.
Якщо ви не впевнені щодо значень Z-індексу елементів, які збігаються з вашим заголовком, введіть максимальне значення, 99999, і це вирішить проблему.
Ви можете використовувати два параметри ефекту. Зникає та ковзає вниз. Тепер те, який з них ви скористаєтеся, повністю залежить від ваших особистих уподобань і бажаного вигляду веб-сайту. Експериментуйте, поки не приймете рішення.
Ще одна візуальна настройка липкого елемента. Залежно від решти веб-сайту, за допомогою повзунка ми можемо зробити липкий елемент більш або менш прозорим.
Що станеться, якщо ви не хочете, щоб певні частини вашого веб-сайту мали закріплений заголовок? Що ж, цей повзунок дозволяє налаштувати початкову та кінцеву точки, де ваш липкий заголовок відображатиметься на вашому веб-сайті під час прокручування.
Колір фону
Що робити, якщо наш липкий елемент не так чітко видно? Плагін має опцію виділити його, надавши йому колір фону. Для цього натисніть кнопку, зображену нижче, і виберіть потрібний колір фону. Це так просто.
Якщо ви бажаєте внести ще більше змін у свій липкий елемент, які не охоплюються вищезгаданими параметрами, є поле, де ви можете додати налаштування за допомогою CSS. Одна важлива річ, про яку слід пам’ятати в цьому випадку, полягає в тому, що немає необхідності обертати стилі в селекторах. Вам не потрібно писати .classname{color:#FFF;}, натомість вам потрібно лише написати color:#FFF;
Ми залишимо це поле порожнім, оскільки більше не потрібно налаштовувати наш липкий демонстраційний заголовок.
Змінивши всі потрібні налаштування, не забудьте зберегти зміни. Зробивши це, ми можемо продовжити та натиснути кнопку Preview Sticky у верхньому правому куті, щоб переглянути зміни, які ми внесли на даний момент.
На закінчення
WP Sticky є чудовим доповненням до будь-якого веб-сайту, і це значно полегшує роботу розробника. Цей плагін настільки простий у використанні, але пропонує безліч детальних і глибоких параметрів налаштування, що гарантовано допоможе вам створити ідеальний липкий заголовок для вашого веб-сайту. Це чудова новина, оскільки закріплений заголовок може значно збільшити конверсію веб-сайту.
WP Sticky має версію Pro, яка включає всі вищезазначені опції та коштує 5,99 доларів США на місяць або 39 доларів США за довічну ліцензію. Для команд і агентств також пропонується кілька різних тарифних планів.
Валері Хенінгс
Валері Хенінгс — копірайтер і автор контенту, який спеціалізується на веденні примарних блогів, маркетингових кампаніях електронною поштою та сторінках продажу. Вона також любитель подорожей, печива з арахісовим маслом і собаки Мімі.