Кнопка вверх на сайте с wordpress, варианты изготовления. Wordpress вверх кнопка
Как сделать кнопку "Вверх" на WordPress.
Добрый вечер! Развитие моего блога продолжается. И сегодня, он был дополнен не только очередным постом, но и довольно интересной примочкой в виде кнопки «Наверх».
Раньше я использовал плагин, наверное многие о нем были наслышаны — это Scroll to Top. Но около 2 лет он уже не обновлялся и на WordPress перестал работать. На смену ему я нашел не уступающий ему, а наоборот превосходящий по функциональности новый плагин Dynamic «To Top».
Его в основном применяют на длинных страницах, что бы быстро вернуться к началу.
Плагин имеет минимум настроек:
- Для мобильных браузеров данная кнопка может быть отключена.
- Есть настройки стилей кнопки. Можно изменить вид кнопки по своему вкусу.
- Можно выбрать в какой части экрана будет отображаться кнопка.
- Если выбрать текстовую версию в настройках, то вместо стрелки вверх можно написать любую надпись, к примеру «Наверх».
Минус данного плагина только в том, что он на Английском. Но разобраться в его на стройках совсем не сложно.
И так, что нам понадобиться сделать, что бы на нашем блоге появилась такая кнопка?
- Скачать сам плагин, вот отсюда.
- Установить плагин. Распаковываем архив с плагином и кидаем папку dynamic-to-top в (wp-content/plugins/) или заходим в админ панель Плагины->Добавить новый->Загрузить.
- Активируем плагин.
Готово!!! Плагин установлен. Можете зайти на свой блог и посмотреть как он работает.
Осталось только настроить его (хотя если вас устраивают стандартные настройки можете ничего не делать).
Настройки плагина Dynamic «To Top»
myworkpro.ru
1. Время прокрутки страницы вверх.
2. Отступ кнопки от начала страницы.
3. Я не совсем понял для чего это. Пускай будет in
4. Расположение кнопки (Справа вверху справа внизу, слева вверху слева внизу).
5. Можем отключить кнопку на мобильных браузерах.
6. Внешний вид вашей будущей кнопки.
myworkpro.ru
7. Если поставить галочку то кнопка будет текстовая то есть можно будет написать текст «НАВЕРХ«. Или не ставить галочку тогда ваша кнопка будет в виде стрелочки.
8. Текст кнопки.
9. Высота кнопки.
10. Ширина кнопки.
11. Размер шрифта
12. Цвет текста
13. Если поставить галочку то текст будет жирным.
14. Добавить тень в текст.
15. Цвет текста тени.
16. Цвет фона.
17. Цвет обводки кнопки.
18. Ширина обводки.
myworkpro.ru
На этом всё! Сложностей возникнуть не должно.
← Делаем форму обратной связи для WordPress. Плагин Contact Form 7. Вкладки для блога на WordPress. →
Нажимая на кнопку, я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности.
myworkpro.ru
Кнопка вверх как вконтакте на 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. Если в благодарность потыкаете по кнопочкам соц сетей, буду признателен!
pasagir.ru
Кнопка "Вверх" на Wordpress - плагин WPFront Scroll Top
После просмотра длинных статей, немного не удобно возвращаясь на верх страницы постоянно прокручивать. Есть множество разных плагинов для этой цели, но на мой взгляд WPFront Scroll Top самый удачный. Потому что поддерживает не только множество стандартных стрелок, но так же позволяет использовать свою картинку. Обо всем по порядку.
Общие настройки
Ну как это не логично, но для начала нужно его Включить. Поставив галочку.
Главные настройки приведены на скриншоте ниже. Благо, что плагин полностью переведен на русский язык с комментариями на каждую настройку. Один из ключевых пунктов это Скроллирование. Этот пункт указывает сколько нужно прокрутить чтобы появилась кнопка.
Так же можно настроить скрытие кнопки, либо поставить так чтобы она постоянно висела. Но это уже полностью на ваше усмотрение.
Так же дополнительным плюсом к плагину будет поддержка мобильных устройств. А именно настройка размеров при отображении на мобильных устройствах. А это далеко не все плагины поддерживают.
Расположение
Настройки расположения — всё по человечески. двигайте кнопку куда хотите — в любой угол и с любыми отступами от краев.
К тому же, должен добавить что, плагин не требует изменения шаблона темы, вставки специальных кодов или еще какой либо не нужной работы.
Настройка картинки WPFront Scroll Top
Тут я думаю, не будет сложно найти подходящую картинку для вашей кнопки на сайт. Такое разнообразие другие плагины не предоставляют, к сожалению.
Ну а если вам не понравились такие кнопки, то вы в любой момент можете загрузить свою картинку, либо настроить текстовую кнопку.
hi-blog.ru
Кнопка вверх на сайте с wordpress, варианты изготовления
Доброго времени суток! Когда-то давно меня кто-то просил рассказать, как я сделал себе кнопку вверх, но всё руки не доходили. Сегодня восполню этот пробел и расскажу, как устанавливается кнопка вверх на сайт с wordpress. Вернее, расскажу, как сделал я и ещё парочку методов, а вы уже сами решайте, что вам больше понравится.
Сама идея кнопки вверх для сайта пришла тогда, когда статьи стали длиннее и пришлось долго крутить колесо мыши, чтобы добраться к верхушке сайта. Стало мне просто влом, а каково вам, посетители? Вот кнопка вверх для моего wordpress сайта и появилась. Удобная штукенция – нажал наверх и сайт сам прокручивает себя к своей шапке!
Как сделать кнопку вверх для сайта на wordpress?
Чтобы обзавести свой блог или сайт таким мини-лифтом можно сделать проще, но чуточку затратнее с точки зрения нагрузки на движок, или сложнее с точки зрения установки, но легче для движка. Первый вариант это с помощью плагинов, а второй – это с помощью «метода научного тыка» через ковыряние в кодах сайта и встраивания в него тех самых функций «лифта». Теперь подробнее про оба способа. 
Самый элементарный способ, как найти нужный плагин – это в админке сайта, в меню Плагины, Добавить плагин, вставить фразу to top и нажать Искать плагины. Вывалится множество плагинов с похожими функциями и разными их реализациями на выходе – выбирайте любой, хоть китайский! Я свой выбор остановил на плагине Scroll to Top, который сейчас работает на моем сайте и на плагине Scroll to Top Button, который валяется, как запасной вариант. Оба плагина бесплатные и есть в свободном доступе.
Первый плагин, Scroll to Top, можно скачать либо с сайта разработчика, либо со страницы плагина wordpress.org. Скачали, установили, активировали – всё, как всегда. Появится менюшка Scroll to Top в Настройках админки. Там будет примерно такого вида поле:
Где нужно вписать вашу фразу для подъема наверх, ширину в пикселях, цвет текста и фона. Измерить ширину и определить цвета поможет замечательная программка fscapture 
. В итоге у вас получится маленькая появляющаяся кнопочка с вашей фразой, которая прокрутит сайт наверх при нажатии на неё.
Второй плагин, Scroll to Top Button, скачивается с сайта разработчика http://www.dynamicwp.net/plugins/scroll-to-top-plugin/ и оттуда по прямой ссылке http://www.dynamicwp.net/wp-content/files/scrolltotop.zip. После установки и активации появится пункт меню с таким же названием – Scroll to Top, так что, если установите одновременно оба плагина, то, смотрите, не запутайтесь! 
В настройках Scroll to Top Button будет примерно такое поле с уже несколько другими настройками.
Отличие в том, что сюда (там где «link to your to top button image») можно загрузить вашу собственную картинку кнопки вверх с изображением чего угодно, или нарисовать вообще что-то самостоятельно. Что выгодно, так как можно подобрать что-то под стиль сайта и его цветовую гамму. На просторах Интернета вариантов такой кнопки масса! Если ничего не загружать, то по умолчанию будет показываться стандартная стрелочка.
Поле «Scroll Speed (in milisecond)» отвечает за скорость движения сайта наверх и его плавность. Хотите быстро – ставьте мало, хотите медленно и чинно – ставьте побольше, будет плавный ход под стать лифту 
Пункт «The button appears after page scrolled down to line» отвечает за момент показа кнопки вверх при прокрутке сайта вниз – чем меньше число, тем раньше кнопка появится. Если ничего не напишете, то значения останутся по умолчанию. После настроек не забудьте нажать кнопку Сохранить изменения! По умолчанию отображается такая стрелочка в правом углу сайта. 
Теперь поговорим о более «продвинутом» способе реализации кнопки вверх на сайте – с помощью кодов. Вообще, нужно сказать, что плагины, это те же самые коды, которые просто упакованы так, чтобы их мог установить любой желающий – такая себе удобная пилюля для сайта – проглотил и готово! При установке они все равно встраивают свои функции на сайт. Но «голый» код хорош тем, что не дает лишней нагрузки на движок, а потому более рационален с точки зрения производительности. Потому считаю нужным о нем рассказать тоже.
Проще всего сделать прокрутку сайта вверх через такой html-код:
| <a href="http://ВАШ.САЙТ/#">Вверх</a> |
Записываете его куда-то в футер сайта, например, появится такая ссылка со словом Вверх (в этом случае), которая мгновенно перенесет вас к верхушке сайта. Проверил – работает, правда! Можно эту ссылку под картинку подставить – эффект будет тот же самый.
Если надумаете устанавливать кнопку вверх для wordpress без плагинов, то можете поискать в интернете, как это сделать, или посмотреть в этой статье, этой или этой. Но я пока не стал заморачиваться с кодами. Работает – и пусть работает! А пока оно работает, вы получите уведомление о выходе новых статей – мало-ли, может, пригодится! 
Как в анекдоте про программиста, знаете?
Подходит маленький сын к папе программисту и спрашивает: пап, а пап? А чего каждое утро солнышко встает и садится? Папа-программист, не отрываясь от компьютера, спрашивает: каждое утро? Сынок – ага! Встает и садится?! 
Ага! Подумал, потом говорит сыну: Так, сынок! Если работает, то не надо трогать!
Вот примерно и я так рассудил 
Короче, вы сами решайте, что вам подходит и какая кнопка вверх вам нравится.
А теперь гляньте на это зрелище – “подводный” трактор – такого я лично не видел! Но оно того стоит – факт! 
Пройдись по кнопочкам, расскажи о статье друзьям - это к деньгам!
Статьи по теме:
Меньше...
dengi-vseti.ru
