Кнопка вгору для сайту на WordPress

Вітаю читачів мого блогу!

У цій статті я розповім як зробити кнопку вгору для сайту на WordPress. Дана кнопка потрібна для зручності переміщення в самий верх сайту з будь-якої (крім верхнього, зрозуміло) точки, і якщо стаття об’ємна і до неї написано безліч коментарів, то після прочитання всього цього для переходу наверх буде достатньо всього лише натиснути на цю кнопку.

Насправді, як і у випадку з створенням карти сайту WordPress, існує два способи створення кнопки вгору для сайту, а саме легкий, з використанням плагіна, і більш складний — без використання такого. Ми в цій статті розглянемо обидва.

Отже, почнемо з першого способу.

Створення кнопки вгору для сайту WordPress плагіном

Для цього скористаємося плагіном Scroll to Top. Завантажуємо його, встановлюємо:

Кнопка вгору для сайту на WordPress

Активуємо:

Кнопка вгору для сайту на WordPress

Далі йдемо в адмін-панелі в розділ Параметри → Scroll to Top:

Кнопка вгору для сайту на WordPress

Доступні наступні налаштування плагіна:

Кнопка вгору для сайту на WordPress

  • Enable — дозволити/заборонити показ кнопки;
  • Text — текст, вказаний в кнопці;
  • Width — ширина кнопки;
  • Text Color — колір тексту усередині кнопки;
  • BackGround Color — колір тла кнопки.

Наводжу в приклад свої робочі параметри:

Кнопка вгору для сайту на WordPress

Тепер на своєму сайті або в своєму блозі ви можете спостерігати в нижній центральній частині вікна кнопку з вашої написом:

Кнопка вгору для сайту на WordPress

Дана кнопка з’являється при прокручуванні сторінки вниз, і при натисканні на неї відбувається плавне переміщення в самий верх сайту до його шапці.

На цьому створення кнопки вгору для сайту плагіном успішно завершено.

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

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

Читайте також:  Як вибрати чоловічу сумку

Кнопка вгору для сайту WordPress без плагіна

Для створення кнопки вгору для сайту WordPress з плавною прокруткою без використання плагіна нам знадобиться файл із зображенням кнопки (стрілки), файл jquery.js зі скриптом плавної прокрутки, код для вставки у файл header.php і налаштування стилів CSS.

Тепер розберемо докладніше. Картинку стрілки можна знайти в інтернеті або намалювати самому. Я пропоную вам завантажити архів, в якому знаходиться файл із зображенням стрілки, використовуваний в моєму блозі, а також файл jquery.js.

Після скачування даного архіву створіть в корені сайту з допомогою FTP-клієнта (як налаштувати FTP-клієнт читайте тут) каталог scroll і розпакуйте в нього вміст скачаного архіву.

Тепер потрібно підключити скрипт Jquery, для чого додамо перед закриваючим тегом </head> файлу header.php з вашого шаблону WordPress наступний код (зробити це можна за допомогою текстового редактора, рекомендую використовувати notepad++):

1
2
3
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script><script type=”text/javascript” src=”http://ваш сайт/scroll/jquery.js”></script><script type=”text/javascript”>// <![CDATA[
$(document).ready(function(){ $.autoScroll({ scrollDuration: 600, showDuration: 400, hideDuration: 300 }); });
// ]]></script>

Залишилося налаштувати стилі CSS відображення нашої кнопки, для чого за допомогою того ж notepad++ додаємо в кінець файлу style.css шаблону даний код:

1
2
3
4
5
6
7
8
9
10
.scroll-to-top-button {
background: url(https://ваш сайт/scroll/strelka.png) center center no-repeat;
width: 80px;
height: 80px;
color: #fff;
cursor: pointer;
position: fixed;
bottom: auto;
right: 50px;
}

Не забудьте скрізь (в обох кодах) замінити фразу ваш сайт на ім’я вашого сайту/блогу (в моєму випадку expromtom.ru). Якщо положення стрілки на екрані вас не влаштує, то можете експериментувати зі стилями CSS.

Читайте також:  Електрична газонокосарка Bosch Rotak 320: характеристики, пристрій, фото

На цьому створення кнопки вгору для сайту WordPress без плагіна завершено!

Таким чином, в даній статті ми розглянули два способи реалізації кнопки вгору для WordPress: з використання плагіна і без. Обов’язково зробіть собі цю кнопку на своєму сайті/блозі, відвідувачі будуть вам вдячні!

Сподіваюся інформація була для вас корисною, підписуйтесь на оновлення мого блогу, щоб не пропустити появу нових статей!

Оцініть статтю
Настанова - Корисні поради
×
Тисни «Подобається», щоб читати нас на Facebook
Спасибі, я вже з Вами!