Кнопка наверх у вигляді картинки
- вступ
- Кнопка наверх у вигляді картинки, без плагіна
- Помістити потрібну картинку для кнопки на сайт
- Створити скрипт для роботи кнопки
- Вставити код кнопки «Вгору» в файл footer.php вашого шаблону
- Задати стиль CSS своєї створеної кнопки
вступ
Для початку зазначу, що є плагіни які створюють на сайті WordPress, кнопку «Вгору». Але в цій статті ми обійдемося без них. Також, варто зауважити, що деякі шаблони, зверстані вже з встановленою кнопкою «Вгору» або написом «Вгору», «Top». Зрозуміло, що дві кнопки «наверх» ставити нема чого, хоча і можливо.
Приклад кнопок можна забрати Кнопка наверх у вигляді картинки, без плагіна
Для установки кнопки «Вгору» потрібно зробити чотири нескладних кроку.
- Помістити потрібну картинку для кнопки, швидше за все стрілка, в каталог сайта;
- Створити скрипт для роботи кнопки;
- Вставити потрібний код в файл footer.php вашого шаблону;
- Задати стиль CSS, своєю створеної, кнопки.
Розберемо кожен крок докладно.
Помістити потрібну картинку для кнопки на сайт
- Підберіть на просторах Інтернет картинку, яка підійде для кнопки «Вгору». ( ТУТ і ТУТ два сайти з великою кількістю безкоштовних іконок png);
- Завантажте картинку до себе на сайт і відразу скопіюйте URL розміщеної картинки.
Створити скрипт для роботи кнопки
Працює кнопка наверх у вигляді картинки за допомогою скрипта. Скрипт приховує кнопку, якщо відвідувач знаходиться у верхній частині вікна, і плавно показує картинку при початку прокрутки сторінки вниз і знову приховує кнопку при поверненні наверх.
Для створення скрипта «мудрувати» нічого не потрібно. Просто в будь-якому текстовому редакторі створіть наступний файл. Це стислий скрипт:
$ (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 ();});- Далі. Збережіть його під ім'ям, наприклад, (toTop.js);
- Завантажте цей файл (toTop.js) в каталог сайта, наприклад, в каталог [wp-include] в папку [js];
- Запам'ятайте повний шлях до розміщеного файлу js. Наприклад: /ваш_сайт.ru/wp-includes/js/toTop/js.
- Каталог розміщення скрипта може бути будь-яким. Важливо правильно вказувати path до файлу скрипта.
Як працює скрипт можна прочитати в статті ТУТ .
Вставити код кнопки «Вгору» в файл footer.php вашого шаблону
Важливо! дотримуйтесь безпеку при редагуванні шаблону.
У коді, нижче, замініть адресу картинки і адреса скрипта на ваші адреси, зафіксовані в пунктах 1 і 2.
<a href="#" id="toTop"> <img src = "<span style =" color: # ff6600; "> Адреса / вашої / картинки з http </ span>" title = "Вгору" border = " 0 "align =" absmiddle "/> </a> <script src =" <span style = "color: # ff6600;"> http: // скрипта </ span> <span style = "color: # ff6600;" > Ваш сайт / wp-includes / js / toTop.js </ span> "type =" text / javascript "> </ script> <script type =" text / javascript "> $ (function () {$ (" # toTop "). scrollToTop ();}); </ Script>- Увійдіть в редактор вашого сайту;
- Відкрийте файл footer.php для редагування;
- Вставте код з вашими даними між тегами <body> </ body>, краще відразу перед закриває тегом </ body>, в файл footer.php;
- Не забуваємо зберегтися.
Задати стиль CSS своєї створеної кнопки
Пропоную наступний стиль для кнопки «Вгору»:
#toTop {width: 60px; background: none; border: none; text-align: center; padding: 5px; position: fixed; bottom: 10px; right: 10px; cursor: pointer; color: #ffffff; text-decoration: none;}- Цей код потрібно вставити в файл style.css в редакторі. (Зовнішній вигляд → Редактор). Вставте в розділ -Footer- файлу style.css або в кінець цього файлу.
- За допомогою коду CSS можна перемістити кнопку «Вгору» в будь-яке місце на сторінці сайту. Міняйте значення атрибутів, вставляйте нові атрибути і переміщайте кнопку по сторінці сайту.
Примітка: Якщо не розміщувати скрипт (toTop.js) в каталозі сайту, то кнопка все одно з'явиться. Тільки вона буде постійно видно, і при натисканні на неї буде перескакувати наверх, а не ковзати.
Можливі помилки: найбільш поширена помилка це неправильно зазначені шляху в коді до скрипта і до картинки.
На цьому все, Кнопка наверх у вигляді картинки встановлена.
© www.wordpress-abc.ru