Блог Алексея Гончарова
Не пропустите новые статьи!

Новые статьи блога на Ваш e-mail:

Канал блога на YouTube
Где в мире читают блог
Архивы
Волшебная кнопка

Кнопка вверх на сайте с wordpress, варианты изготовления

кнопка вверхДоброго времени суток! Когда-то давно меня кто-то просил рассказать, как я сделал себе кнопку вверх, но всё руки не доходили. Сегодня восполню этот пробел и расскажу, как устанавливается кнопка вверх на сайт с wordpress. Вернее, расскажу, как сделал я и ещё парочку методов, а вы уже сами решайте, что вам больше понравится.

Сама идея кнопки вверх для сайта пришла тогда, когда статьи стали длиннее и пришлось долго крутить колесо мыши, чтобы добраться к верхушке сайта. Стало мне просто влом, а каково вам, посетители? Вот кнопка вверх для моего wordpress сайта и появилась. Удобная штукенция – нажал наверх и сайт сам прокручивает себя к своей шапке!

Как сделать кнопку вверх для сайта на wordpress?

Чтобы обзавести свой блог или сайт таким мини-лифтом можно сделать проще, но чуточку затратнее с точки зрения нагрузки на движок, или сложнее с точки зрения установки, но легче для движка. Первый вариант это с помощью плагинов, а второй – это с помощью «метода научного тыка» через ковыряние в кодах сайта и встраивания в него тех самых функций «лифта». Теперь подробнее про оба способа. B-)

Самый элементарный способ, как найти нужный плагин – это в админке сайта, в меню      Плагины, Добавить плагин, вставить фразу to top и нажать Искать плагины. Вывалится множество плагинов с похожими функциями и разными их реализациями на выходе – выбирайте любой, хоть китайский! Я свой выбор остановил на плагине Scroll to Top, который сейчас работает на моем сайте и на плагине Scroll to Top Button, который валяется, как запасной вариант. Оба плагина бесплатные и есть в свободном доступе.

Первый плагин, Scroll to Top, можно скачать либо с сайта разработчика, либо со страницы плагина wordpress.org. Скачали, установили, активировали – всё, как всегда. Появится менюшка Scroll to Top в Настройках админки. Там будет примерно такого вида поле:

кнопка вверх для сайта - Scroll to Top

Где нужно вписать вашу фразу для подъема наверх, ширину в пикселях, цвет текста и фона. Измерить ширину и определить цвета поможет замечательная программка fscapture  *klass* . В итоге у вас получится маленькая появляющаяся кнопочка с вашей фразой, которая прокрутит сайт наверх при нажатии на неё.

Второй плагин, 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, так что, если установите одновременно оба плагина, то, смотрите, не запутайтесь! *hi-hi*

В настройках Scroll to Top Button будет примерно такое поле с уже несколько другими настройками.

кнопка вверх для сайта - Scroll to Top Button

Отличие в том, что сюда (там где «link to your to top button image») можно загрузить вашу собственную картинку кнопки вверх с изображением чего угодно, или нарисовать вообще что-то самостоятельно. Что выгодно, так как можно подобрать что-то под стиль сайта и его цветовую гамму. На просторах Интернета вариантов такой кнопки масса! Если ничего не загружать, то по умолчанию будет показываться стандартная стрелочка.

Поле «Scroll Speed (in milisecond)» отвечает за скорость движения сайта наверх и его плавность. Хотите быстро – ставьте мало, хотите медленно и чинно – ставьте побольше, будет плавный ход под стать лифту  *happy*

Пункт «The button appears after page scrolled down to line» отвечает за момент показа кнопки вверх при прокрутке сайта вниз – чем меньше число, тем раньше кнопка появится. Если ничего не напишете, то значения останутся по умолчанию. После настроек не забудьте нажать кнопку Сохранить изменения! По умолчанию отображается такая стрелочка в правом углу сайта. кнопка вверх - стрелка

Теперь поговорим о более «продвинутом» способе реализации кнопки вверх на сайте – с помощью кодов. Вообще, нужно сказать, что плагины, это те же самые коды, которые просто упакованы так, чтобы их мог установить любой желающий – такая себе удобная пилюля для сайта – проглотил и готово! При установке они все равно встраивают свои функции на сайт. Но «голый» код хорош тем, что не дает лишней нагрузки на движок, а потому более рационален с точки зрения производительности. Потому считаю нужным о нем рассказать тоже.

Проще всего сделать прокрутку сайта вверх через такой html-код:

<a href="http://ВАШ.САЙТ/#">Вверх</a>

Записываете его куда-то в футер сайта, например, появится такая ссылка со словом Вверх (в этом случае), которая мгновенно перенесет вас к верхушке сайта. Проверил – работает, правда! Можно эту ссылку под картинку подставить – эффект будет тот же самый.


Если надумаете устанавливать кнопку вверх для wordpress без плагинов, то можете поискать в интернете, как это сделать, или посмотреть в этой статье, этой или этой. Но я пока не стал заморачиваться с кодами. Работает – и пусть работает! А пока оно работает, вы получите уведомление о выходе новых статей – мало-ли, может, пригодится!  ;)

Как в анекдоте про программиста, знаете? ;)

Подходит маленький сын к папе программисту и спрашивает: пап, а пап? А чего каждое утро солнышко встает и садится? Папа-программист, не отрываясь от компьютера, спрашивает: каждое утро? Сынок – ага! Встает и садится?! :shock: Ага! Подумал, потом говорит сыну: Так, сынок! Если работает, то не надо трогать!

Вот примерно и я так рассудил :-))

Короче, вы сами решайте, что вам подходит и какая кнопка вверх вам нравится.

А теперь гляньте на это зрелище – “подводный” трактор – такого я лично не видел! Но оно того стоит – факт! *kruto*

Пройдись по кнопочкам, расскажи о статье друзьям - это к деньгам!

Новые статьи блога на Ваш e-mail:

4 комментария: Кнопка вверх на сайте с wordpress, варианты изготовления

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

:) 
*hi* 
;) 
:-( 
:good: 
:aga: 
*blush* 
:negative: 
:yahoo: 
B-) 
*bravo* 
*klass* 
:shock: 
:-)) 
Больше смайлов!..
 
Обменник.ws » Автоматический обмен Webmoney