Дане рішення кнопок підійде для будь-якого сайту, але на цьому сайті не використовується. У зв'язку зі зміною шаблону, відмовився від цих рішень. У шаблоні вже був вбудований даний функціонал. Якщо вирішите використовувати такі кнопки - підключайте за другим способом
Привіт всім! У продовженні рубрики "Блог без плагінів" привожу статтю по установці кнопок вгору-вниз. Навіщо? По-перше, як-то рубрика застоялася, давно туди не писав, а по-друге, раптом комусь знадобитися така штука. До того ж, привожу два способи: один досить рідкісний, а інший поширений. Є з чого вибрати.
Отже, два рішення для поліпшення юзабіліті вашого блогу. Зверніть увагу, що обидва ці рішення зараз працюють у мене на блозі. Спеціально так зробив, щоб показати як все це виглядає. Поспішайте дивитися, висіти буде не довго. Максимум пару-трійку днів.
Але, давайте по порядку.
спосіб перший
Рішення досить оригінальне. У ньому зображення кнопок складається з однієї картинки, яка автоматично ріжеться засобами CSS.
Вот такой вот код. Найкраще буде, якщо його додати в окремий файл і, зберігши його в форматі .js. скопіювати в файли блогу. Готовий файл можете завантажити вище (тільки не забудьте поміняти url картинки).
Установка на WordPress в кілька дій
Щоб все працювало необхідно провести кілька дій:
дія перша
Ось як це у мене виглядає
Але в WordPress скрипти краще підключати через файл functions.php. Ось таким чином
Вставте цей невеликий код в файл functions.php в самому низу файлу до значка?>
дія друга
Відкриваємо файл footer.php і перед закриває тегом / body вставляємо наш код
Знову ж таки, краще це робити по-іншому: скачайте исходник, розпакуйте його з архіву і завантажте в файли теми. Тепер залишилося тільки підключити наш скачаний файл
дія третя
Починаємо еквілібристику з картинками кнопок вгору і вниз.
Перш за все про зображення. Шляхом НЕ хитрих маніпуляцій і експериментів, я з'ясував, що картинка повинна бути квадратної. Тоді все встановлюється досить просто, а от з прямокутними картинками у мене не вийшло нічого. Не знаю чому, але відображалися вони криво.
Так що, картинка повинна бути квадратної - це головне.
Ось, будь ласка, вам для прикладу картинки розміром 30х30 пікселів:
Необхідно потрібну картинку скопіювати в файли блогу. Нічого складного, думаю впораєтеся.
дія четверта
Тепер необхідно прописати шлях до зображення. У мене цей шлях виглядає так
Тобто, шлях повинен виглядати так:
спосіб другий
Найпоширеніший варіант в Рунеті на сьогодні. Взято з сайту usefulscript.ru Дуже простий в установці та налаштування. Та й простіше він в установці - досить додати невелику функцію в файл functions.php
Залишилося тільки підібрати зображення для кнопок вгору-вниз, закинути їх у файли блогу і правильно прописати шлях до файлів. В іншому випадку - у вас буде завантажено мої кнопочки.
Можна ще прикрутити ефекти при наведенні на кнопку, але це вже кілька зайве.
От якось так. Вибирати вам, але мені більше друге рішення подобатися:
- присутній плавне прояв і прокрутка
- не залежить від розміру і конфігурації зображень кнопок
- елементарно налаштовується за допомогою стилів
- можна змінювати вид і швидкість прокрутки сторінок, хоча швидкість прокрутки і в першому рішенні можна налаштовувати
Ну що ж, усім удачі!
P.S. Якщо є питання, то пишіть, обов'язково постараюся допомогти ...
Підтримай проект Лайком