Вордпрес як настроїти положення кнопки вгору. Кнопка Вгору для WordPress – швидкий перехід на початок сторінки

Вітаю, друзі! У цій статті хочу показати Вам як можна зробити кнопку «Вгору» на сайті. Така кнопка буде корисною на сайтах з довгими статтями або сторінками. При натисканні на кнопку «Вгору» — сторінка повернеться до головного меню (шапці сайту).

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

Найледачі можуть створити таку кнопку за допомогою багатьох плагінів, наприклад Scroll to Top або WP Scroll To Top 😉

Згадати як можна знайти та встановити плагін Ви можете в одному з .

Встановити кнопку можна дуже просто, лише за кілька простих кроків.

1. Відкрийте файл function.php.

Відкрити function.php можна двома способами:

• Відкрити за допомогою текстового редактора у кореневій папці вашої теми
• Перейти до Зовнішній вигляд -> Редактор і вибрати для редакції Опції теми (functions.php)

2. Скопіюйте та вставте код нижче в самому низу, перед закриваючим тегом ?> .

Gif" />"; ) add_action("wp_head", "back_to_top_style"); function back_to_top_style() ( echo " #totop ( cursor:pointer; position: fixed; right: 30px; bottom: 30px; display: none; outline: none; ) "; ) add_action("wp_footer", "back_to_top_ function back_to_top_script() ( echo " jQuery(document).ready(function($)( $(window).scroll(function ()) ( if ($(this).scrollTop() > 400) $("#totop") .fadeIn(); else $("#totop").fadeOut();); $("#totop"). ), 800);

3. Збережіть зміни та милуйтеся створеною вами кнопкою «Вгору» .

А зараз, передбачаючи Ваші питання, постараюся заздалегідь відповісти на них!

І так, у цьому прикладі ми поставили зображення на кнопку. Для того, щоб прибрати зображення і поставити текст, замініть у коді нашого прикладу рядок 3 на:

Echo "Вгору";

Для того щоб замінити зображення кнопки - замініть посилання на потрібне зображення в рядку 3.

Кнопка буде відображатися тоді, коли на сторінці ми опустимося більше 400 пікселів вниз від шапки сайту, і буде ховатися, якщо ми піднімемося вище. Змінити висоту при якій кнопка буде з'являтися досить легко, для цього потрібно замінити значення 400 на потрібну вам висоту в цьому рядку коду:

If ($(this).scrollTop() > 400)

Якщо у вас щось не вийшло, сміливо пишіть у коментарях! А якщо вийшло — поділіться враженнями 🙂

Вітаю, друзі! У цій статті я хочу показати Вам як можна зробити кнопку "Вгору" на сайті. Така кнопка буде корисною на сайтах з довгими статтями або сторінками. При натисканні на кнопку "Вгору" - сторінка повернеться до головного меню (шапці сайту). Зазвичай для встановлення такої кнопки всі хочуть скачати якнайшвидше плагін і особливо не морочаться, але я не думаю що потрібно захаращувати сайт купою непотрібних плагінів, коли можна все зробити дуже легко і просто без використання плагінів. Найледачі можуть створити таку кнопку за допомогою багатьох плагінів, наприклад Scroll to Top або WP Scroll To Top ;) Згадати…

Все, що потрібно від вебмайстра - це щоб його сайт був зручним, щоб користування ним не викликало депресію у відвідувачів, і шаблон не заважав користувачам спокійно вивчати матеріали ресурсу. Якщо ви будете використовувати не змінену тему Вордпрес, швидше за все, вам не вдасться зробити зручний сайт, оскільки за замовчуванням кнопки для WordPress не встановлюються – їх потрібно додатково завантажувати та активувати. Адже щоб користувач міг зручно читати статті та гортати вміст, на сайті обов'язково має бути кнопка "Вгору".

Кнопка "Вгору" - це невеликий значок-стрілочка, при натисканні на який сторінка швидко прокручується вгору.

Таким чином, якщо користувач почав читати статтю або вирішив подивитися, що пишуть у коментарях, йому не доведеться потім мучитися з прокруткою сайту вгору. Замість використання стандартного прокручування браузера, він натисне на іконку кнопки “Вгору”, і плавно перенесеться до початку сторінки. Це дуже зручно і практично є обов'язковою умовою для будь-якого "довгого" (якщо сторінки ресурсу такої довжини, що їх доводиться прокручувати) сайту. У цій статті будуть розглянуті плагіни для додавання кнопки "Вгору".

jQuery Smooth Scroll – це зручний та швидкий модуль для активації кнопки “Вгору” на сайті. Щоб додати на ресурсі таку кнопку, достатньо завантажити та встановити плагін. Відразу після активації збоку сторінок з'являється невелика кнопка, що плаває. З нею читати довгі статті та гортати сторінку буде набагато простіше. Кнопка має стильний дизайн і не загубиться на тлі шаблону Вордпрес.

А якщо ви знаєте особливості CSS мови програмування, то зможете самостійно налаштувати кнопку "Вгору" на власний розсуд. Загалом, плагіну jQuery Smooth Scroll достатньо, щоб задовольнити потреби більшості вебмайстрів, але далі буде розглянуто ще кілька популярних інструментів на випадок, якщо цей модуль у вас не спрацює.

Далі слідує не менш популярний плагін Smooth Scroll Up - це гранично простий і зрозумілий інструмент, що за лічені хвилини дозволить створити іконку "Наверх" в бічній частині сайту. Хоча в модулі немає безлічі налаштувань, він дуже функціональний. Далі вказані основні особливості плагіна Smooth Scroll Up:

• можна вибирати між різними типами елемента “Вгору” (текст із посиланням, значок, зображення тощо);
• елемент прокручування вгору можна вибирати самостійно із власної колекції;
• можна додавати свій коментар біля кнопки прокручування вгору;
• розташування елемента на сайті регулюється (якщо вона потрібна, тільки щоб зручно читати сторінку, краще розміщувати в правій частині, але плагін дозволяє розташувати її в лівій стороні, і по центру);
• можна додавати винятки для відображення в різних частинах сайту (вимкнути відображення кнопки “Вгору” на головній або дезактивувати на будь-якій іншій сторінці);
• модуль працює і на мобільних версіях сайту (за потребою, для телефону кнопку "Вгору" можна забрати);
• є анімації для прокручування (slide і fade, або без анімаційного ефекту);
• можна вказати відстань, після якої кнопка "Вгору" з'явиться (так зручніше читати, адже елемент не буде безглуздо з'являтися відразу після заходу на сайт, а відобразитися тільки в потрібний момент);
• у кнопку “Вгору” можна закласти посилання для відкриття сторінки у новій вкладці;
• можна додати власні параметри CSS для елемента.

Цей плагін відмінно підійде для тих, хто не хоче самостійно думати над тим, якою буде кнопка. Якщо ви просто хочете, що користувачам було простіше читати та переглядати матеріали, і при цьому мати цікаву кнопку прокручування, то WPFront Scroll Top – саме те, що вам потрібно. Модуль містить велику колекцію готових іконок. А якщо не хочете розводити увагу користувача іконкою "Далі", то можете просто додати текст для прокручування без зображення.

Плагін WPFront Scroll Top легко встановлюється на двигун Вордпрес. Він містить безліч налаштувань, таких як:

• активація/дезактивація кнопки;
• розмір ікон;
• ступінь прозорості;
• швидкість прокручування;
• додавання автоматичного приховування кнопки через задану кількість секунд;
• пропис тега Alt для елемента;
• колір та фонове оформлення тексту кнопки (головне – щоб читати напис було зручно, він має бути виразним).

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

Далі ще один плагін, який покращить "юзабіліті" вашого ресурсу - інструмент Scroll Back To Top. Він також містить безліч параметрів налаштування. Ви зможете у будь-який момент деактивувати елемент, зробити його непрозорим або створити прев'ю іконки. Розмір та колір елемента легко регулюються. Можна настроювати відстань від "топу" сайту, після проходження якого з'являється кнопка. Розташування елемента у лівій, правій частині та посередині сторінки.

Плагін Scroll Back To Top не містить великої кількості типів ікон. Усього їх близько 10. За потребою можна відключити іконку і залишити лише текст (“Далі”, “Вгору” тощо). Розмір іконок регулюється за спеціальною шкалою від одного до шести. Для активації індивідуального стилю параметрами елемента є пункт “Extra CSS” для додавання власного дизайну.

Це англійський модуль для розміщення кнопки "Вгору" практично в будь-якому положенні на сайті. З ним читати і гортати сторінку буде простіше, адже кнопка може бути розміщена в одному з чотирьох положень. Плагін налаштовується англійською мовою. Кнопка може бути активована/вимкнена для мобільної версії ресурсу. Швидкість прокручування регулюється.

Що цікаво, плагін Dynamic To Top Plugin працює з кешуванням, тому постійні користувачі зможуть читати ваші пости і прокручувати сторінки без зволікань роботи браузера. Модуль чудово відображається на комп'ютерах нового і старого покоління.

Далі слідує Skysa Scroll-to-Top App - плагін, який абсолютно не схожий на своїх конкурентів. Ви не просто додасте за допомогою нього кнопку "Вгору", але й зможете скористатися цим інструментом для створення цілого бару віджетів. Наприклад, можна додати плаваючий блок із голосуваннями, кнопками соціальних мереж та елементом прокручування сторінки. А щоб плагін не гальмував роботу сайту, він працює із кешем браузерів. Можливості даного модуля практично не обмежені - ви навіть зможете додати посилання в бар з кнопкою прокручування.

Завантажити один із зазначених доповнень – це нічого не варте для вас. Проте для сайту це принесе величезну користь. Кнопки “Далі”, “Нагору”, “Назад” тощо значно полегшать життя відвідувачам ресурсу. Повірте, вони будуть вдячні! А разом з ними – і пошукові машини, оскільки чим сайт зручніший, тим вищі його позиції у пошуку.

Багато хто хоче мати на своєму сайті кнопку «Вгору». Це така стрілка, яка дозволяє користувачеві піднятися на початок wordpress сайту одним кліком.

Особисто я вважаю, що подібні речі потрібні лише в тому випадку, якщо пости на сайті дуже довгі. Адже відвідувачеві буде незручно постійно користуватися повзунком чи мишкою! При такому розкладі справ кнопка «Вгору» для WordPress просто необхідна!

Реалізувати цей задум можна за допомогою. Я пропоную лише один, і зараз поясню чому.

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

Йдеться про плагін для кнопки Вгору - ToTop Link. Завантажити його можна через офіційний пошуковий рядок плагінів у WordPress-адмінці. (Якщо не знаєте, як це зробити – пишіть у коментарях, допоможу).

Дивно, що цей набір характеристик немає у багатьох розробках. Проте добре, що хоч одна людина зробила плагін кнопки «Вгору» для сайту WordPress з гнучкими налаштуваннями.

Всім привіт! Коли цей блог тільки починав існування, я навіть не замислювався про таку зручну функцію, як прокручування сторінки вгору однією кнопкою. Але коли з'явилися об'ємні статті, я зрозумів, що такої кнопки не вистачає. Кому сподобається скролити назад нагору всю статтю? Зробити кнопку "вгору" виявилося зовсім нескладно. Тут є два варіанти: перший – використовувати готові скрипти, другий – завантажити плагін. Але про все по порядку.

Спочатку я зробив статичну кнопку у підвалі сайту. Це було просте зображення стрілки із посиланням. Тобто виходило так, що при натисканні, сторінка моментально стрибала вгору, а до адреси сайту додавали грати. Це, звичайно, далеко не найкращий спосіб, але виглядала кнопочка приємно, піднімала вгору, значить і функцію свою виконувала. Девіз програміста: «Працює – не чіпай!»

Однак, через деякий час, я дійшов висновку, що без плаваючої кнопки все ж таки не обійтися. Тим більше, я бачив такі кнопки «вгору» на багатьох авторитетних (і не дуже) сайтах. Так переглядати матеріал набагато зручніше, один клік по кнопці і сторінка моментально піднімається назад вгору. А юзабілі – важливий чинник у дизайні будь-яких сайтів.

Як я вже казав, кнопку "вгору" на сайт можна додати за допомогою скриптів, з використанням CSS та jQuery. На багатьох сайтах саме так вона й реалізована. Але для WordPress є простіший спосіб — плагін Scroll To Up. У ньому є різні кнопки "вгору" у вже готових варіаціях. Люблю зручність сайту на WordPress - можна знайти плагіни для чого завгодно!

Завантажуємо Scroll To Up, за допомогою якого ми і додамо цю кнопку вгору, через консоль WordPress, потім заходимо в налаштування. Бачимо кілька вкладок.


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

Якщо жодна із запропонованих кнопок вам не подобається, можна вказати шлях на будь-яку картинку у вкладці Your Own Image.

В інших вкладках задається колір фону, розмір та колір шрифту, стиль. Кожна вкладка відповідає певному типу кнопки. Як бачите, налаштувати кнопку так, щоб вона ідеально підходила до вашого сайту легко. Все досить просто та зрозуміло.

Я навіть заліз у код самого плагіна і закруглив краї кнопки, щоб вона гармонійно виглядала з моїм дизайном, та й сайт став гарнішим. Покопавшись у коді, над кнопками можна знущатися як завгодно. Звичайно, ніхто не забороняє використовувати скрипти і для WordPress, але плагін набагато легший у освоєнні.

Як шкода, що немає такої функції управління своїм сайтом: ткнув, і сторінки самі полізли вгору до топ пошукової видачі

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

Ось такі web-ресурси і отримують вагому перевагу не тільки у вигляді зростаючої цільової аудиторії, але і у вигляді трафіку з пошукових систем, що збільшується, так як пошуковики приділяють величезну увагу поведінці користувачів (про вплив поведінкових факторів). Навіщо це я все говорю? А все до того, що дрібниць у просуванні сайту немає, хоч би як банально це звучало.

Наприклад, та сама кнопка вгору (вгору) для сайту . Здавалося б, дрібниця, недостойна уваги, але вона робить свій внесок у підвищення юзабіліті сайту. Якщо ще не здогадалися, про що мова, зверніть увагу, як на моєму блозі при прокручуванні сторінки вниз з'являється праворуч кнопка у вигляді стрілки, спрямованої вгору, при натисканні на яку можна повернутися назад у верхнє положення.

Тепер розберемо докладніше, як можна реалізувати наш задум, причому запропоную кілька варіантів, кожен із яких має свої плюси. Для початку хотілося б відзначити, що для користувачів вже давно існує можливість швидко прокручувати будь-яку сторінку, причому практично у будь-якому браузері. Для цього достатньо скористатися кнопками "Page Up" та "Page Down" на клавіатурі комп'ютера.

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

Спочатку хочу запропонувати іконку нагору просту і без вишукувань, встановити яку можна просто без проблем. Для цього необхідно відкрити на редагування файл footer.php теми WordPress, який, як відомо, відповідає за відображення у браузері нижньої частини web-сторінки, яка називається футером (або підвалом). Перед закриваючим тегом body треба вставити такий код:

Нагадаю, що редагувати файли найзручніше за допомогою notepad plus plus (про це чудовому HTML, PHP і CSS редактору докладніше). Для того, щоб визначити місце розташування та вид значка «Вгору», задамо властивості CSS для відповідного ідентифікатора (id) gotop:

#gotop ( position: fixed; bottom: 60px; margin-left: 1170px; border: 2px solid #BBB9C0; text-align: center; color: #4F487E;

Копіюємо та заносимо ці властивості у файл style.css теми WordPress(). В результаті в правому нижньому кутку має з'явитися зображення кнопки «Вгору», яке матиме такий вигляд:

Можна застосовувати для цих цілей вже вбудовані аналогічні інструменти у всіх інших популярних браузерах: Opera (про цей браузер докладніше), Internet Explorer (про браузера IE), Google Chrome (про Хром стаття). Щоб підняти саму картинку, скажімо, вгору, потрібно збільшити значення властивості bottom, щоб змістити ліворуч, необхідно зменшити параметр CSS властивості margin-left. Ну, і таке інше.

Тепер ускладнимо завдання. У наведеному вище варіанті простої кнопки нагору вона буде видно весь час і при натисканні на неї web-сторінка сайту миттєво повертається у верхнє положення. Але можна зробити так, що у верхньому положенні сторінки сайту зображення «кнопки нагору» буде невидимим і з'явиться лише при прокручуванні веб-сторінки вниз на певну відстань. Крім усього іншого, можна забезпечити плавне прокручування. Яскраво та зі смаком.

Причому для реалізації цього варіанта створення кнопки нагору всі запропоновані способи, які мені вдалося виявити в інтернеті, передбачають використання бібліотеки jQuery, до якої необхідно підключитися. З деяких причин мені хотілося цього уникнути і зрештою знайшов бажаний спосіб вирішення цієї проблеми. Відомий адмін WP-Kama запропонував свій код на JavaScript, який дає можливість здійснити плавне прокручування веб-сторінки сайту вгору і поява-зникнення самої «кнопки вгору» без використання jQuery. Попередньо необхідно створити на сервері файл із розширенням.js (наприклад, totop.js) і вставити в нього наступний шматок:

(function() ( function $(id)( return document.getElementById(id); ) function goTop(acceleration, time) ( acceleration = acceleration || 0.1; time = time || 12; var dx = 0; var dy = 0; var bx = 0; var by = 0; var wy = 0; ; ) if (document.body) ( bx = document.body.scrollLeft || 0; by = document.body.scrollTop || 0; ) var wx = window.scrollX || 0; 0; var x = Math.max(wx, Math.max(bx, dx)); (Math.floor(x / speed), Math.floor(y / speed)); if(x > 0 || y > 0) ")" window.setTimeout(invokeFunction, time); ) return false; ) //* function scrollTop()( var el = $("gotop"); scrollTop); smoothopaque(el, 0, 100, 1); ) ) else el.style.display="none"; return false; ) // Плавна зміна прозорості function smoothopaque(el, startop, endop, inc)( op = startop; // Встановлюємо прозорість setopacity(el, op); // Починаємо зміну прозорості setTimeout(slowopacity, 1); function slowopacity()( if(startop endop)( setTimeout(slowopacity, 1); ) ) setopacity(el, op); ); // установка opacity function setopacity(el, opacity)( el.style.opacity = (opacity/100); el.style.filter = "alpha(opacity=" + opacity + ")"; ); if (window.addEventListener)( window.addEventListener("scroll", scrollTop, false); window.addEventListener("load", scrollTop, false); ) else if (window.attachEvent)( window.attachEvent("ons scrollTop); window.attachEvent("onload", scrollTop); ) window["top"] = (); window["top"]["goTop"] = goTop; ))();

Швидше за все, у кореневій папці вашого блогу або web-сайту на хостингу (найчастіше це public_html) є директорія js із файлами JavaScript. Там і створюєте файл totop.js за допомогою згаданої мною програми notepad++, вставивши в нього цей код. Таким чином, повний шлях до свіжоспеченого файлу у мене вийшов таким:

/themes/cloudy/js/totop.js">

Тепер потрібно створити зображення для "кнопки вгору". Для цього можна використовувати будь-який графічний редактор, включаючи переглядач фотографій FastStone Image Viewer (про цю цікаву програму детальний мануал). Також можна використовувати для цієї мети, наприклад, Fotoshop, у тому числі версію онлайн додатків, яких в інтернеті чимало.

Розумію, що в деяких недосвідчених читачів можуть виникнути деякі складнощі при бажанні отримати гарну кнопку нагору, яка ще й вписалася в дизайн. Тому в одній із найближчих публікацій приділю на цей час і докладно поясню, як я створив подібну іконку у вигляді стрілки вгору для свого блогу в онлайн Фотошопі. Поки ж уявляю готовий результат у вигляді спрайту, що включає два малюнки:

Поясню коротко, що об'єднання фонових картинок сайту в спрайти (по англ. sprite - фея, привид) дає можливість скоротити кількість http запитів, тим самим внести певний внесок у шляхетну справу зменшення навантаження на сервер. В даному випадку створення спрайту з двох стрілок забезпечує зміну виду зображення при підведенні до нього курсору мишки, тобто виникає анімаційний ефект.

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

Отже, вважатимемо, що малюнок стрілки «вгору» готовий (до речі, стрілку можна замінити іншу картинку, наприклад, у вигляді гарної кнопки). Далі завантажуємо зображення на сервер знову ж таки в корінь сайту (зазвичай там вже є папка IMAGES). Для цих цілей раджу використовувати програму FileZilla (пост про цього ФТП клієнта), який дуже зручний при переміщенні та роботі із зображеннями, або інший подібний софт. У мене абсолютний шлях до зображення із двома стрілками вийшов наступним:

/images/totop.png

Однак для url картинки, яка виводиться за допомогою засобів CSS, можна використовувати і відносний шлях:

/images/totop.png

Використовуйте як абсолютну, так і відносну адресу, різниці немає. Майте на увазі, що у вас повний URL може бути іншим. Уважно досліджуйте вкладеність папок, які визначають зміст шляху. Наступним кроком відкриваємо файл footer.php і вставляємо в нього в кінець перед закриваючим тегом body таку конструкцію:

Не забудьте замість «шлях_до_файлу» вставити послідовність усіх папок, які визначають URL-адресу саме для вашого проекту. І останній крок. Потрібно визначити стилі CSS, які потрібно внести у файл style.css теми Вордпрес. Пропоную свій варіант:

#gotop ( position: fixed; bottom: 60px; width: 56px; height: 96px; margin-left: 1170px; background: url(шлях_до_файлу/totop.png) no-repeat 0 0; )

І тут при описі властивості background не забудьте як значення url вказати шлях до файлу totop.png (абсолютний або відносний). Майте на увазі, що абсолютний шлях повинен починатися з http://. Для того, щоб забезпечити зміну виду кнопки при підведенні до неї курсора, пропишемо ще одну умову в той же файл style.css:

#gotop:hover ( background: url(/шлях_до_файлу/totop.png) no-repeat -56px 0; )

Але останнє правило CSS потрібно вносити лише у випадку, якщо ви вирішили використати спрайт. У разі одинарного зображення його не треба прописувати. Тепер при прокручуванні сторінки вниз кнопка вгору поступово з'являтиметься, при наведенні на неї курсора змінюватиме свій вигляд (крім випадку, коли завантажена одиночна картинка) і після натискання на неї веб-сторінка повертатиметься у верхнє положення, причому прокрутка буде плавна. На закінчення трохи музичної ностальгії: