Як зробити кнопку наверх з плагіном і без на WordPress?

Рекомендуємо офісні меблі недорого.

Вітаю вас шановні читачі. У цій статті я покажу вам, як зробити кнопку наверх, як у мене на блозі використовуючи простий плагін Scroll to Top Button або код JavaScript. Почнемо з того що кнопка наверх буде в першу чергу необхідна тим вебмайстрам, які пишуть досить-таки об’ємні пости а також використовують великі картинки в статтях.

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

Отже, спочатку я вам розповім, як поставити кнопку наверх через плагін, потім через код JavaScript а також як поставив не кнопку а красиву напис наверх також через код JavaScript.

) Викачуємо плагін і закачуємо його на блог, активуємо.

) В параметрах перейдіть у вкладку Scroll to Top, яка виділена червоним кольором. Тут настройки дуже прості. У першій формі вам потрібно вказати шлях до картинки, яка буде з’являтися праворуч, як правило, це картинка стрілки. Ось вам, до речі,, де досить багато красивих таких стрілок.

) Отже, коли ви оберете потрібну картинку, треба буде спочатку її трохи відформатувати, тобто зробити потрібного розміру. Для цього клікніть по зображенню лівою клавішею миші і виберіть відкрити за допомогою => Microsoft Office Picture Manager.

У програмі натискаємо «змінити малюнок» потім «змінити розмір» і тут робимо той розмір кнопки вгору, яка вас влаштує. Я особисто вам не рекомендую робити її більше ніж 100 × 100 точок (пікселів), так як у мене у самого кнопка коштує всього в 64 × 64.

) Ок тепер відкриваємо програму FTP і підключаємося до сайту. Тут треба вибрати, куди закачувати картинку. Я особисто вам рекомендую це зробити ось за такою адресою: http: // ваш сайт / wp-content / uploads /. Після того як закачаєте картинку, вставте цю адресу вище в «посилання до зображення кнопки».

Якщо у вас проблеми з цим можемо зробити ще простіше. Зайдіть в адмінку блогу, натисніть медіафайли, додати новий, і завантажте вашу картинку. Потім натисніть змінити і скопіюйте шлях кнопки, де написано «посилання на файл». Тепер йдемо в параметри, Scroll to Top і вставляємо, що скопіювали в «посилання до зображення кнопки».

) У вкладці «Швидкість гортання вгору (в мілісекундах):” ви можете вказати швидкість прокрутки. Чим менше число поставите, тим швидше буде прокручуватися сторінка. Особисто я поставив собі повільну прокрутку і прописав число 800.

) У вкладці «Після якого рядка кнопка повинна з’явитися:” ви можете вказати після якого відрізка відстані від верху блога повинна з’являтися кнопка і також зникати. Я тут поставив 350, але ви можете поставити і своє число. Ок, після всіх налаштувань натискаємо «зберегти» і дивимося, як у нас з’явилася справа гарна кнопка вгору.

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

Робимо кнопку вгору через код JavaScript.

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

) Отже, скачайте цей і розпакуйте його. Тут у нас лежить бібліотека top.js і кнопка вгору top, яка у нас буде відображатися на блозі.

) Закачайте файл top.js через програму FTP в корінь блогу. Це зазвичай папка httpdocs або public_html, www, domains. Потім закачайте картинку top за адресою http: // ваш сайт / wp-content / uploads /. Попереджаю, закачаєте картинку в інше місце, швидше за все не побачите її на блозі.

) В адмінці блогу перейдіть у «зовнішній вигляд», «редактор», «функції теми» (functions.php) і вставте ось цей код в самому кінці після відкриваючого тега <? Php і обновіть файл.

// smart jquery inclusion

if (! is_admin ()) {

 wp_deregister_script ( ‘jquery’);

 wp_register_script ( ‘jquery’, ( «http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js»), false);

 wp_enqueue_script ( ‘jquery’);

}

) Тепер перейдіть в «підвал» (footer.php) і вставте цей код в самому кінці перед закриває тегом </ body> або </ div> якщо немає тега </ body> і обновіть файл.

<a id = “toTop” href = “#”><img src = “http: // my sait.ru/images/top.gif” alt = “” align = “absmiddle” border = “0” /></ a>
<script type = “text / javascript” src = “http: //mysait/top.js”></ script><script type = “text / javascript”>// <! [CDATA [
$ (Function () {$ ( “# toTop”). ScrollToTop ();});
//]]></ script>

) Тепер зайдіть в файл «таблиця стилів» (style.css) і в самому кінці вставте цей код і обновіть файл.

#toTop {

text-align: center;

position: fixed;

bottom: 10px;

right: 10px;}

Тут до речі, ви можете налаштувати відступ в пікселях, праворуч, від блогу в right і знизу в bottom якщо що. Все оновлюємо сторінку блога і спостерігаємо, як з’явилася наша стрілочка.

Робимо красиву напис наверх через код JavaScript.

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

) Отже, скачайте цей і розпакуйте його. Тут у нас лежить бібліотека verx.js, яку треба закачати в корінь блогу, як в попередньому прикладі.

) Тепер зайдіть в адмінку блогу в зовнішній вигляд, редактор, «підвал» (footer.php) і вставте тут цей код в самому кінці перед закриває тегом </ body> або </ div> якщо немає тега </ body> і обновіть файл.

<a id = “toTop” href = “#”>наверх</ a><script type = “text / javascript” src = “http: //ваш_сайт.ru/verx.js”></ script><script type = “text / javascript”>// <! [CDATA [$ (function () {$ ( “# toTop”). ScrollToTop ();}); //]]></ script>

Тут до речі, можете змінити напис кнопки, якщо вона вам не подобається.

) Тепер зайдіть в файл «таблиця стилів» (style.css) і в самому кінці вставте цей код і обновіть файл.

#toTop {

width: 100px;

background: # f1f1f1;

border: 1px solid #cccccc;

text-align: center;

padding: 5px;

position: fixed;

bottom: 10px;

right: 10px;

cursor: pointer; color: # 666666;

text-decoration: none;}

Дивіться ось background це колір фону прописаного в коді. У кожного кольору є свій певний код, просто в пошуку Яндексі наберіть «код квітів» і Яндекс допоможе вам визначити код того кольору фону, який ви хочете бачити.

Border – це межа написи. Тут можете вказати її розмір в пікселях і колір. Що таке bottom і right я вам вже писав вище. Все інше ви також можете підкоригувати на свій смак.

Прибираємо задній фон стрілки (кнопки вгору), а також робимо її анимированной.

Якщо ви хочете зробити прозорий фон стрілки вам знадобиться програма Adobe Photoshop.

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

) Добре виберіть інструмент, який називається «швидке виділення», зверху поміняємо на плюсик як на картинці, і виділіть вашу стрілочку при цьому, не зачіпаючи задній фон. Ок тепер клацніть правою кнопкою на стрілку, і натискаємо «Скопіювати на новий шар».

) Перейдіть в праве міні меню, натисніть «шар» і або видаліть старий шари там, де у вас картинка з фоном, або просто біля нього натисніть на око.

) У лівому верхньому куті натисніть файл, зберегти як, і виберіть у вкладці тип файлів CompuServe GIF (*, GIF) і натисніть зберегти. Якщо збережете в іншому розширенні, то у вас не буде прозорого фону.

Ок тепер я розповіді вам, як її ще й оживити можна за допомогою програми Fanta Morph. Свій приклад я буду показувати на старій версії 3.0.

) Отже, відкривши програму перед вами, відразу ж вийде вікно з настройками, якщо цього не відбулося, натисніть верхньому лівому кутку «файли», «запустити майстер проектів». У вікні, натискаємо «вперед» і тут у вас буде 3 вибору, як анімувати свою кнопку.

) Якщо виберіть «Морфинг», то зможете зробити так, щоб дві різні стрілки (картинки) міняли один одного через певний час. «Багатогранний морфинг» робить те ж саме тільки більше ніж з двома зображеннями. І «деформація» оживляє картинку, як раз те, що ми з вами і виберемо. Натискаємо «вперед» вибираємо зображення стрілки, тиснемо знову «вперед» і так до «завершити проект».

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

)Тепер зайдіть в «файли», «настройки сторінки» і виберете в «формат експорту» GIF- Анімація. Тут до речі, натиснувши на «опцій» у вкладці «швидкість відео» можна вказати швидкість анімації. Чим більше число поставите, тим швидше буде анімація картинки. Особисто мені не треба було, щоб моя стрілка стукала як серце, тому я зробив її повільної, поставивши тут 7.

) Після того як налаштуєте швидкість натисніть «ок» а потім «експорт» і збережіть картинку. От і все. Через дану програму можна ще робити банери і навіть вставляти звук в них! Загалом, класна річ.

Ссылка на основную публикацию