- ♦ Як встановлюється кнопка вгору без плагінів
- ♦ Кнопка прокрутки для сайту за допомогою плагінів
- »Smooth Scroll Up
- »JQuery Smooth Scroll
- »WPFront Scroll Top
- »Scroll Back To Top
Мода додавати на сторінки блогу WordPress спеціальної кнопки «вгору» або «вack to top», при натисканні на яку сторінка прокручується до початку, з'явилася і існує в середовищі вебмайстрів ось уже кілька років. Як правило, цю кнопку розміщують в нижній частині сайту, або вона з'являється автоматично після прокрутки сторінки на певну відстань вниз. Характерний приклад - соціальна мережа vk.com. Там при прокручуванні сторінки вниз з'являється смужка, при кліці по якій відбувається практично миттєве переміщення нагору.
Багато веб-майстри в своїх статтях пишуть, що наявність кнопки наверх істотно покращує юзабіліті сайту і, відповідно, більш престижний виглядає в очах пошукових систем. Правда це чи ні, можна дізнатися тільки встановивши таку функцію на своєму блозі / сайті.
Якщо говорити про просте сайті або блозі, то кнопка прокрутки додається лише в тому випадку, коли сторінка має занадто великий довжиною і прокручувати її вгору в ручному режимі не дуже зручно. І якщо вирішите, що така функція вкрай необхідна вашому сайту, можете скористатися кількома способами установки кнопок, огляд яких буде представлений в даній статті.
♦ Як встановлюється кнопка вгору без плагінів
Не знаю як ви ставитеся до використання плагінів на блозі WordPress, але я, від наявності їх у великій кількості, м'яко кажучи не в захваті. То вони дуже громіздкі і вантажать блог, то вони конфліктують з іншими плагінами, то видають якісь помилки з якими доводиться потім розбиратися і виправляти, що забирає і без того дорогоцінний час, сили і нерви. І якщо вони вас дратують також як і мене, то наступні кілька способів встановити кнопку наверх для сайту будуть дуже до речі.
1.) Цей метод відніме у вас максимум 5 хвилин. Переходьте на сайт Scrolltotop.com (це не реф. Посилання) ⇒ вибираєте вподобану кнопку-картинку ⇒ поруч з нею копіюєте код ⇒ і вставляєте в footer.php перед закриває тегом (/ body) ⇒ зберігаєте зміни ⇒ відкриваєте свій сайт в браузері і милуєтеся виконаною роботою.
Хочу попередити, що в скопійованому коді є зовнішнє посилання на сайт Scrolltotop.com, яку можете безболісно видалити і це ніяк не вплине на роботу скрипта. Залиште, наприклад, тільки такий код:
<Script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </ script>
<Script src = "http://arrow.scrolltotop.com/arrow34.js"> </ script>
За безпеку скопійованого скрипта можете не переживати. Він не заподіє шкоди вашому сайту (перевіряв), так як працює за тим-же принципом, що і встановлюються багатьма коди лічильників відвідувань або кнопок соціальних мереж на зразок сервісу Share.pluso.ru. Але так як скрипт виконує функцію імпорту кнопки з стороннього сервера, це може трохи вплинути на час завантаження вашого сайту. Спробуйте, якщо не влаштує цей варіант, переходите до наступного.
2.) Цей спосіб можна розділити на 3 елементи - установка кнопки вгору (Back to top) за допомогою Html і CSS, з застосуванням Javascript, з використанням JQuery. Але зазвичай, всі ці елементи використовуються спільно.
⊗ Кнопка прокрутки HTML і CSS (статична кнопка)
- Для початку, створіть свою картинку для кнопки в фотошоп або скопіюйте вподобану в інтернеті.
- Потім, створіть папку в корені wordpress (де знаходяться папки «wp-includes», «wp-admin», «wp-content») і назвіть її, наприклад - «img».
- Дайте ім'я зображенні (наприклад naverx.png) і помістіть її в цю папку.
- Далі, представлений нижче код, потрібно вставити в тіло тега <body> (в wordpress шаблоні цей тег знаходиться в файлах header.php і footer.php. Я вставляв в футер), але постаратися при цьому, не потрапити всередину який-небудь функції .
<Div id = "go_up" style = "display: block;">
<a href="#"> <img src = "http://site.com/img/naverx.png" alt = "наверх" /> </a> </ div>
- І на завершення, домен сайту в рядку http://site.com/img/naverx.png, не забудьте поміняти на свій.
Далі, щоб мати можливість надавати кнопці стиль і індивідуальність, вниз файлу Style.css додайте ці параметри:
#go_up {
position: fixed;
width: 50px;
height: 50px;
bottom: 160px;
right: 200px;
cursor: pointer;
}
Відредагуйте цей стиль під свій сайт, збережіть зміни і спробуйте натиснути на кнопку. Вона вже повинна працювати. Але якщо вас не влаштовує її статичність - доведеться попрацювати з JQuery і JavaScript.
⊗ Javascript (поява і приховування кнопки)
Для того, щоб кнопка з'являлася і зникала при прокручуванні сторінки, потрібно до представленого вище Html, додати наступний код скрипта.
<Script>
$ (Function () {$. Fn.scrollToTop = function () {$ (this) .hide (). RemoveAttr ( "href"); if ($ (window) .scrollTop ()> = "300") {$ (this) .fadeIn ( "slow")} var scrollDiv = $ (this); $ (window) .scroll (function () {if ($ (window) .scrollTop () <= "350") {$ (scrollDiv ) .fadeOut ( "slow")} else {$ (scrollDiv) .fadeIn ( "slow")}});
$ (This) .click (function () {$ ( "html, body"). Animate ({scrollTop: 0}, "slow")})}});
$ (Function () {$ ( "# go_up"). ScrollToTop ();}); </ script>
Але якщо у вашого шаблону є окрема папка в якій зберігаються JavaScript, можете вставити цей скрипт там, або створити новий файл, наприклад myback-top.js. В цьому випадку вам не знадобляться відкриває і закриває теги сценарію.
У мене на блозі це реалізовано саме так, а підключено до шаблону все в тому ж файлі футер.php через таку строчку коду:
<Script src = "http: //домен.info/wp-content/themes/названіе теми / js /
myback-top.js "> </ script>
На додаток до цього скрипту, хотілося б пояснити деякі функції, які можете редагувати на свій розсуд, а саме:
- if ($ (window) .scrollTop ()> = "300" (відстань від верху сайту в 300рх. Коли з'явиться кнопка.)
- if ($ (window) .scrollTop () <= "350" (час повернення сторінки вгору в 350 мілісекунд.)
⊗ JQuery
Без JQuery, вищепредставленими код, працювати не буде. Тому, перш за все, потрібно перевірити чи використовується JQuery на вашому блозі WordPress. Зробити це можна дуже легко.
Якщо використовуєте браузер Chrome або Mozilla Firefox, на будь-якій сторінці вашого сайту натисніть клавіші Ctrl + U, на сторінці натискаєте Ctrl + F і напишіть в формі, що з'явилася пошуку слово «jquery.» Якщо пошук не дав результату, додайте розташований нижче код безпосередньо перед закриває тегом (/ body).
<Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </ script>
Цей стислий і оптимізований скрипт буде виконувати свою функцію на стороні хостингу google-бібліотек, що дозволяє завжди мати останні версії.
Якщо ж пошук знайшов на вашому блозі бібліотеку JQuery - цей пункт можна ігнорувати і не морочити собі голову.
Для цікавих можу додати, що цю бібліотеку можна підключити до свого шаблоном локально, через ваш хостинг, щоб мати можливість керувати цим файлом, але за умови, що розбираєтеся в Яваскрипт. Для цього потрібно:
- Створити папку JS в вашому шаблоні. (Можете створити і в корені блогу, головне потім правильно прописати шлях до файлу при підключенні)
- Створити в цій папці файл з назвою jquery.min.js
- Перейти за цим посиланням https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js, скопіювати весь код і вставити в створений
файл jquery.min.js і зберегти.
- За допомогою ftp завантажувача Filezilla або Total Commander завантажити папку з файлом в свій шаблон або в корінь Вордпресс.
- Залежно від того де ви розташували папку з файлом, в Footer.php потрібно викликати роботу цього скрипта. (Дії аналогічні тим, коли я описував підключення myback-top.js)
♦ Кнопка прокрутки для сайту за допомогою плагінів
Для движка WordPress на даний момент розроблено кілька плагінів для вертикальної прокрутки. Всі вони діють приблизно за однаковим принципом - в нижній частині сторінки створюється спеціальна кнопка з текстом або картинкою, яка і відповідає за прокрутку. Однак всі ці плагіни відрізняються один від одного по функціоналу, налаштувань і деяким іншим параметрам.
»Smooth Scroll Up
Даний інструмент має досить непоганим набором налаштувань. Перш за все, ви можете вибрати, що саме буде відображено на місці елемента, що відповідає за прокрутку сторінки - звичайний текст, кнопка або довільна картинка. Також можна вибрати одне з трьох місць для розміщення елементу прокрутки - по центру, праворуч або ліворуч. На кнопці можна розмістити абсолютно будь-який текст. Можна розмістити кнопку не в самому низу сторінки, а на певній відстані від її верху (при прокручуванні вниз кнопка буде автоматично притискатися до унизу).
Також ви можете задати анімацію при прокручуванні. Доступно два варіанти анімації - звичайна і з затемненням. Після встановлення плагіну можна приховати цю кнопку на головній сторінці блогу, а також на сторінках версії блогу для мобільних пристроїв. Завантажити Smooth Scroll Up можна ось звідси - https://Wordpress.org/plugins/smooth-scroll-up. На даний момент плагін викачаний більше 40 тисяч раз. Підтримувані версії движка - з 3.2 до 4.1.
»JQuery Smooth Scroll
Це набагато простіший в плані налаштувань і функціоналу плагін. Тут взагалі немає нічого зайвого. Відразу після установки jQuery Smooth Scroll почне працювати (можна взагалі не вносити ніяких змін в налаштування). Кнопка прокрутки називається «Back to top». Вона буде розташована в нижньому кутку кожної сторінки блогу.
Сама прокрутка сторінки є трохи більш плавною, ніж в Smooth Scroll Up. Внести якісь зміни в функціонал або роботу плагіна можна тільки за допомогою редагування CSS або JS-коду. Посилання на плагін - https://Wordpress.org/plugins/jquery-smooth-scroll. На даний момент він викачаний близько 50 тисяч разів. Підтримувані версії движка WordPress - з 3.1 до 4.0.
»WPFront Scroll Top
Дуже якісний плагін з великою кількістю налаштувань. Зокрема, можна вибрати тип елемента для прокрутки - кнопка, текст, картинка (яка може бути завантажена вами безпосередньо з комп'ютера). Можна активувати елемент швидкої прокрутки на мобільній версії сайту, відключити або включити його для якихось певних сторінок / розділів.
Крім того, можна налаштувати розміри кнопки, ступінь її прозорості, швидкість прокрутки. Можна прописати власні правила CSS для зовнішнього оформлення даного елемента, задати відступи і т.д.
Завантажити WPFront Scroll Top можна ось тут - https://Wordpress.org/plugins/wpfront-scroll-top. На даний момент плагін викачаний близько 18 тисяч разів. Підтримувані версії движка - з 3.0 до 4.0.
»Scroll Back To Top
Досить простий плагін, який починає працювати відразу після своєї активації (кнопка прокрутки автоматично з'явиться в нижній частині сторінки). Однак тут є і настройки, в які при необхідності можна внести зміни. Зокрема, можна задати ширину і висоту кнопки, основний і фоновий колір, ступінь прозорості, радіус заокруглення, положення на сторінці, вирівнювання по вертикалі, відступи.
Можна вибрати для кнопки один із заздалегідь підготовлених розробниками значків (або вписати сюди якийсь свій текст). Також можна вибрати розмір Ця позначка. Посилання для скачування Scroll Back To Top - https://Wordpress.org/plugins/scroll-back-to-top. На даний момент плагін викачаний близько 19 тисяч разів. Підтримувані версії движка - з 3.0 до 3.9.2.
Висновок.
Як ви здогадуєтеся, способів і варіантів встановити кнопку вгору на сайті без плагінів, існує не мало. Описати їх все просто не реально, тому я запропонував вам ті способи які випробував сам і які підійшли мого блогу.
Через деякий час спробую підкоригувати CSS і JavaScript для того, щоб стрілка на кнопці переверталася і скролінг відбувався не тільки вгору, але і вниз. Думаю напишу про це ще одну статтю.
Всього доброго. Успіху і терпіння !!
З величезним повагою, Vladimir Zadorozhnyuk
