как сделать кнопку «Наверх» на Вордпресс
Добрый вечер! Многие меня спрашивают как по почте, так и в комментариях, как сделать кнопку “Вверх” в WordPress. На всех моих блогах он был “вшит” в тему или в данном случае на этом новом шаблоне я попросил верстальщика “прикрепить” кнопку наверх рядом с счетчиком подписчиков.
Обычно такие кнопки вставляют через скрипты, но, скажу честно, я вообще в них не разбираюсь, поэтому я не могу вам рассказать, как сделать кнопку “Наверх” через них. Думаю, многие, как и я, не сильны в скриптах, ну сложно это, ничего с этим не поделаешь. Что же тогда делать? Я нашел выход, поставил кнопку “Вверх” на один из своих блогов на WordPress через плагин Scroll to Top.
Как выглядит эта кнопка “Наверх” Вы можете посмотреть на моем блоге про коктейли (просто прокрутите вниз и увидите кнопку в правой части). Вам понравилась эта кнопка? Хотите такую же? Нет проблем, читаем урок дальше, тратим свои 5 минут и все готово :).
Как сделать кнопку “Вверх” в WordPress
- Устанавливаем плагин Scroll to Top.
- Кнопка уже работает. Вы же можете покопаться в настройках плагина (изменить скорость прокрутки и т.п.): админка WordPress –> Параметры –> Scroll to Top.
- Вот и все :). Плагин настроен, работает отлично, если Вам вдруг не нравится кнопка, то можете скачать другую (их в интернете полно), залить ее к себе на блог и просто в настройках плагина прописать полный путь до картинки:
На сегодня все, а завтра же, в пятницу, вас, мои друзья, ждет классный сюрприз, я уверен, вам понравится :). Жду вас в гости, постараюсь о сюрпризе рассказать днем, может даже утром, а то мне как-то не терпится :).
До скорой встречи!
Подпишитесь на бесплатные уроки
Понравился урок? Вы не хотите пропускать новые бесплатные уроки по созданию, раскрутке и монетизации блога? Тогда подпишитесь на RSS или на электронный ящик в форме выше и получайте новые уроки мгновенно! Также можете следить за мной в Twitter.
Кнопка Вверх в WordPress
Всем привет!
У вас есть на сайте кнопка вверх WordPress для плавной прокрутки страницы на верх? Ещё не установили? Давайте не откладывайте установку волшебной кнопки на потом, ведь с кнопкой вверх на сайте очень удобно, особенно вашим посетителям. Без неё ну ни как, меня просто бесит когда на сайте её нет. Приходится колёсико крутить для того, чтобы вернуться к началу страницы. Плохо, очень плохо без кнопочки. Надо веб-мастерам больше заботится о своих посетителях. Дамы и господа, будьте внимательней к своим читателям, а то потеряете их навсегда.
Сегодня я познакомлю вас с лучшими плагинами с помощью которых вы сможете установить кнопку Back to top на свой сайт или блог. Плагины подобраны по наибольшему скачиванию модулей пользователями платформы WP. Напомню, все плагины можно установить стандартным способом, из админки, через поиск и загрузчик плагинов. Скачивать ни чего не надо. Установил, активировал, настроил и всё.
Первым у нас пойдёт простой плагин jQuery Smooth Scroll
Данный плагин автоматически добавляет кнопку вверх, после установки и активации модуля. Кнопка вверх появится в правом нижнем углу сайта. Как говорится, установил и забыл. Установили плагин уже более 50 700 раз.
Следующий легкий плагин Smooth Scroll Up — плавная прокрутка вверх
Легкий плагин Smooth Scroll Up
Плагин Smooth Scroll Up имеет минимальные настройки. Такие как: выбор разных элементов для кнопки вверх.
Плагин на русском языке, так, что проблем с настройками кнопки вверх у вас не возникнет.
Плагин WPFront Scroll Top
Данный плагин имеет больше настроек и главное, очень большой выбор иконок (изображений) самой кнопки. А так же можно обойтись и без картинки
И сами изображения кнопок, есть из чего выбрать. Даже, если вам не подходит ни одна картинка кнопки на верх, можно указать ссылку на своё изображение кнопочки
Правда, плагин на английском языке, но Google переведёт.
Плагин Scroll Back To Top
Модуль Scroll Back To Top также имеет ряд настроек и выбора как будет выглядеть кнопка на верх
Вот пожалуй и всё. По моему достаточно плагинов с помощью которых вы сможете установить кнопку вверх на сайт ВордПресс. Выбор за вами, дорогие друзья. Надеюсь вам пригодится данный обзор. Удачи и до встречи.
Кнопка вверх как вконтакте на WordPress
Кнопка вверх не только интересный элемент дизайна, но и важный момент юзабилити! Недавно я решил сделать кнопку вверх, но хотел именно как Вконтакте. В сети ничего не смог найти и решил экспериментировать сам. Готовый вариант кнопки вверх как Вконтакте, вы можете наблюдать на этом блоге в левой части экрана (моя гордость!). Сегодня я поделюсь с вами результатами своего эксперимента и вы сможете сделать у себя на блоге такую же кнопку!
Итак, для создания кнопки вверх на сайте WordPress нам понадобится 1 плагин и немного исправлений в CSS стилях. А теперь ближе к теме и поехали.
1. Плагин, который нам нужен, называется Scroll to Top Button, его вы можете установить через стандартный установщик Вордпресса. Устанавливаем, в настройках все оставляем стандартно.
2. Теперь когда мы установили плагин, нам нужно его подогнать по CSS стилям, чтобы он выглядел как Вконтакте.
Для этого, нам нужно зайти в файл CSS плагина, через FTP или через файловый менеджер вашего хостера и открываем файл style.css, он находится по адресу /ВАШ_САЙТ.РУ/public_html/wp-content/plugins/scroll-to-top-button/assets/css.
Вот как должен выглядеть стиль .scroll-top-inner (просто замените имеющийся у вас код, начиная с .scroll-top-inner и до закрывающей скобки })
Стили для кнопки вверх как Вконтакте
.scroll-top-inner {
z-index: 9999;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
opacity: 0.15;
width: 5%;
height: 100%;
display: inline;
position: fixed;
cursor: pointer;
margin: 0 auto;
left: 0px;
bottom: 7px;
background: #000;
border: 1px solid #fff;
Для тех, кто немного понимает в CSS, можно код и поднастроить под себя:
1. width: 5% — ширина кнопки «вверх», занимает 5% от страницы.
2. height: 100% — высота кнопки «вверх» на всю высоту страницы.
3. left: 0 — обозначает, что кнопка будет пришита к левому краю вплотную, по умолчанию стоит right — то есть прижата вправо.
4. opacity: 0.15 — прозрачность кнопки. Чем выше значение, тем меньше прозрачность.
Это основное. С остальным экспериментируйте. Но в общем-то в таком виде кнопка вверх как Вконтакте и будет выглядеть. При этом она обеспечивает плавную прокрутку и радует глаз!
Вот что получилось у меня. Сделал все по написанной мною выше инструкции.
Кнопка вверх настройки по умолчаниюКнопка вверх как ВконтактеНадеюсь, что урок «Как сделать кнопку вверх как Вконтакте на вордпресс» получился простым и доступным. Сам не люблю много копаться в коде, но в данном случае, без этого не обойтись, придется немного повозиться. Удачи!
Если есть какие-то вопросы — с радостью отвечу в комментариях.
p.s. Честно, как от сердца отрываю! Уж такая красивая кнопочка получилась! Пользуйтесь с удовольствием!
p.s.p.s. Если в благодарность потыкаете по кнопочкам соц сетей, буду признателен!
Буду рад видеть среди моих подписчиков!
- ВКонтакте большое активное комьюнити
- Инстаграм жизнь вебмастера, конференции, размышления о заработке в интернете.
Подпишись на Пасажира, будет интересно!
Email*
Подписаться
Вордпресс — кнопка вверх — поставил плагин
Недавно просматривал статистику в Яндекс.метрике, и увидел странный факт в вебвизоре — многие читатели предпочитают пролистывать страницу наверх, когда им надо вернуться в ее начало, не кнопочкой «Home», а верхней стрелочкой на полосе прокрутки, колесиком мышки, или PgUp. Тем не менее, наверх хотят попасть многие. Не использовать кнопку Home — право каждого, однако, хотелось помочь всем вам, уважаемые читатели, поэтому решил прикрутить модную сейчас на многих сайтах стрелочку «вверх» (ну или «наверх», как многие пишут в поисковиках). Можно это очень просто сделать, чуток подредактировав тему, но лень — наше все, поэтому предпочел сделать это плагином, немного о котором сейчас и расскажу.
Тем не менее, быстро не получилось, поскольку опять же — плагинов, реализующих это — как обычно, вагон и маленькая тележка. Эх, долго я, в результате, выбирал самый лучший плагин, выводящий кнопку, ну или стрелочку вверх. Хотя от него мне необходимо было всего пять основных фич:
- возможность прямо из админки управлять местоположением кнопки вверх
- возможность прямо из админки задать скорость прокрутки страницы вверх
- возможность прямо из админки установить, на сколько строк или пикселей, опустившись вниз по странице, она бы появлялась
- чтобы в неактивном состоянии (без наведения курсора мышки) она была бы максимально затемнена, и особо не отсвечивала, тем самым — особо не отвлекая внимание
- ну и самое главное — возможность загрузить свою стрелочку, чтобы она гармонировала с дизайном сайта
После рассмотрения порядка 15 плагинов (всех их описывать не буду, в английской версии, хотя и буквально в двух словах — это уже было сделано здесь), в финале соревнования остались плагины ScrollTo Top и Dynamic «To Top» Plugin.
Dynamic «To Top» Plugin при всех своих замечательных особенностях, включающих уже более 130 тысяч загрузок (что нам кагбэ говорит о том, что он уже оттестирован всеми вдоль и поперек), и возможности установить в настройках, выводить ли эту кнопку на мобильных устройствах, или нет — не отвечал пятому пункту моих требований, и предлагал возможность установить только свою стрелочку, и по всякому ее редактировать. Во всяком случае — про загрузку чего-то своего я ничего не нашел ни в описании, ни в интернете. Если кто его пользует, и я не прав — отпишите, пожалуйста, в комментах. Ну а для мобильных устройств — я наоборот, полагаю, что это просто необходимейшая опция, учитывая, что ни полос прокрутки, ни кнопки Home там нет. Да, конечно, оно неплохо крутится и пальцем — но тем не менее.
ScrollTo Top имеет всего 16 тысяч с хвостиком загрузок (впрочем — это второй результат из всех плагинов) — однако удовлетворял всем моим требованиям, описанным выше — местоположение стрелки, скорость возврата, затенение, вывод не сразу, а с указанного места, загрузка своей, ну и плюс — он более регулярно обновляется, и более актуален на дату написания этой заметки. Использовав любезно предоставленные здесь стрелочки, я чуток подредактировал и загрузил одну из них прямо из админки. Как мне кажется, получилось неплохо, хотя если опустить страницу до самого конца — стрелочку не видно на пестром фоне. Можно, конечно, в настройках поднять ее повыше — но тогда, в случае, если читатель находится в середине страницы — это будет не так эстетично — наблюдать ее парящей в 100 пикселях от нижнего края экрана.
Во всяком случае — я надеюсь, что теперь всем будет немного удобнее использовать этот сайт.
Upd. К сожалению, этот плагин пришлось отключить, т.к. при последней атаке ботов на проект оказалось, что он требует очень много памяти. Пока посещаемость до 2 тысяч уников в сутки — работает хорошо, но при массовых атаках или появлении ссылок с популярных ресурсов — слишком сильно грузит сайт (добавил и в комменты).
При поиске по отзывам — еще был этот неплох. Но я не анализировал, на сколько грузит сайт он, поэтому гарантировать ничего не могу — с тех пор посещаемости свыше 2000 уников в сутки еще не случалось, а на полутора тысячах — работает адекватно.
Тем не менее, себе его я поставил, и именно его стрелочку вы можете лицезреть, если промотаете ниже 1100 пикселей от начала страницы. Все, что мне требовалось — управлять местоположением стрелки, скоростью прокрутки, временем появления, затемнения и его процента, возможностью отключать на мобильных устройствах и при нахождении в админке, через сколько скрывать, выбора текста или рисунка, выбором своего рисунка — все есть. Впрочем, выбор своего рисунка даже не потребовался, т.к. набор предлагаемых стрелок настолько велик (минимум 54 штуки), что если не выпендриваться, то вполне можно подобрать стрелку из имеющихся в наборе к цветовой гамме своего сайта — что я и сделал.
1