Как сделать кнопку наверх с плагином и без на WordPress?

Приветствую вас уважаемые читатели. В этой статье я покажу вам, как сделать кнопку наверх, как у меня на блоге используя простой плагин Scroll to Top Button или код JavaScript. Начнем с того что кнопка наверх будет в первую очередь необходима тем вебмастерам, которые пишут довольно-таки объемные посты а также используют большие картинки в статьях.

Чтобы не утруждать своих посетителей снова и снова долго прокручивать колесиком вверх была придумана кнопка наверх, которая быстро прокрутит страницу за них, тем самым позволив им, перейти на другие интересующие их страницы. А это в свою очередь повышает поведенческие факторы, которые ой как трудно поднять, так что для многих сайтов данная кнопка будет жизненно необходима.

Итак, сначала я вам расскажу, как поставить кнопку наверх через плагин, потом через код JavaScript а также как поставить не кнопку а красивую надпись наверх также через код JavaScript.

 

Делаем кнопку наверх через плагин Scroll to Top Button.

1) Скачиваем плагин здесь и закачиваем его на блог, активируем.

2) В параметрах перейдите во вкладку Scroll to Top, которая выделена красным цветом. Тут настройки очень простые. В первой форме вам нужно указать путь до картинки, которая будет появляться справа, как правило, это картинка стрелки. Вот вам, кстати, архив, где достаточно много красивых таких стрелок.

3) Итак, когда вы выберите нужную картинку, надо будет сначала ее немного отформатировать, то есть сделать нужного размера. Для этого кликните по изображению левой клавишей мыши и выберите открыть с помощью => Microsoft Office Picture Manager.

Как сделать кнопку наверх с плагином и без на WordPress?

В программе нажимаем «изменить рисунок» потом «изменить размер» и тут делаем тот размер кнопки вверх, которая вас устроит. Я лично вам не рекомендую делать ее больше чем 100×100 точек (пикселей), так как у меня у самого кнопка стоит всего в 64×64.

4) Ок теперь открываем программу FTP и подключаемся к сайту. Тут надо выбрать, куда закачивать картинку. Я лично вам рекомендую это сделать вот по такому адресу: http://ваш сайт/wp-content/uploads/. После того как закачаете картинку, вставьте данный адрес выше в «ссылка к изображению кнопки».

Если у вас проблемы с этим можем поступить еще проще. Зайдите в админку блога, нажмите медиафайлы, добавить новый, и загрузите вашу картинку. Потом нажмите изменить и скопируйте путь кнопки, где написано  «ссылка на файл». Теперь идем в параметры, Scroll to Top и вставляем, что скопировали в  «ссылка к изображению кнопки».

5) Во вкладке «Скорость пролистывания вверх (в миллисекундах):» вы можете указать скорость прокрутки. Чем меньше число поставите, тем быстрее будет прокручиваться страница. Лично я поставил себе медленную прокрутку и прописал число 800.

6) Во вкладке «После какой строки кнопка должна появиться:» вы можете указать после какого отрезка расстояния от верха блога должна появляться кнопка и также исчезать. Я тут поставил 350, но вы можете поставить и свое число. Ок, после всех настроек нажимаем «сохранить» и смотрим, как у нас появилась справа красивая кнопка вверх.

Также хочу вам подметить, что мы все это делали в старой версии плагина и если вы его обновите вы не смежите поставить свою стрелку, и у вас выйдут совсем другие настройки. В них вы просто сможете выбрать светлый или темный фон кнопки, а также ее размер. Кнопка по правде так себе, так что не рекомендую обновлять плагин.

 

Делаем кнопку вверх через код JavaScript.

Несмотря на то, что данный метод позволяет не использовать плагин, тем самым не замедляя блог, у него есть маленький недостаток. В коде скрипта нельзя регулировать скорость прокрутки, а также ее появления, то есть она будет у вас справа постоянно.

1) Итак, скачайте этот архив и распакуйте его. Тут у нас лежит библиотека top.js и кнопка вверх top, которая у нас будет отображаться на блоге.

2) Закачайте файл top.js через программу FTP в корень блога. Это обычно папка httpdocs или public_html, www, domains. Потом закачайте картинку top по адресу http://ваш сайт/wp-content/uploads/. Предупреждаю, закачаете картинку в другое место, скорее всего не увидите ее на блоге.

3) В админке блога перейдите во «внешний вид», «редактор», «функции темы» (functions.php) и вставьте вот этот код в самом конце после открывающего тега <?php  и обновите файл.

// smart jquery inclusion

if (!is_admin ()) {

 wp_deregister_script ('jquery');

 wp_register_script ('jquery', («http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js»), false);

 wp_enqueue_script ('jquery');

}

4) Теперь перейдите в «подвал» (footer.php) и вставьте этот код в самом конце перед закрывающим тэгом </body> или </div> если нету тега </body> и обновите файл.

<a id="toTop" href="#"><img src="http://my sait.ru/images/top.gif" alt="« align=»absmiddle" border="0" /></a>
<script type="text/javascript" src="http://mysait/top.js"></script><script type="text/javascript">// <![CDATA[
$(function() { $("#toTop").scrollToTop(); });
// ]]></script>

5) Теперь зайдите в файл «таблица стилей» (style.css) и в самом конце вставьте этот код и обновите файл.

#toTop {

text-align: center;

position: fixed;

bottom: 10px;

right: 10px;}

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

 

Делаем красивую надпись наверх через код JavaScript.

Тут я, по сути, вам поведаю тот же способ, что и рассказал выше, только на этот раз это будет не кнопка, а красивая надпись наверх.

1) Итак, скачайте этот архив и распакуйте его. Тут у нас лежит библиотека verx.js, которую надо закачать в корень блога, как в предыдущем примере.

2) Теперь зайдите в админку блога во внешний вид, редактор, «подвал» (footer.php) и вставьте тут этот код в самом конце перед закрывающим тэгом </body> или </div> если нету тега </body> и обновите файл.

<a id="toTop" href="#">Наверх</a><script type="text/javascript" src="http://ваш_сайт.ru/verx.js"></script><script type="text/javascript">// <![CDATA[ $(function() { $("#toTop").scrollToTop(); }); // ]]></script>

Тут кстати, можете изменить надпись кнопки, если она вам не нравится.

3) Теперь зайдите в файл «таблица стилей» (style.css) и в самом конце вставьте этот код и обновите файл.

#toTop {

width: 100px;

background: #f1f1f1;

border: 1px solid #cccccc;

text-align: center;

padding: 5px;

position: fixed;

bottom: 10px;

right: 10px;

cursor: pointer; color: #666666;

text-decoration: none;}

Смотрите вот background это цвет фона прописанного в коде. У каждого цвета есть свой определенный код, просто в поиске Яндексе наберите «код цветов» и Яндекс поможет вам определить код того цвета фона, который вы хотите видеть.

код цветов

Border – это граница надписи. Тут можете указать ее размер в пикселях и цвет. Что такое bottom и right я вам уже писал выше. Все остальное вы также можете подкорректировать на свой вкус.

 

Убираем задний фон стрелки (кнопки вверх), а также делаем ее анимированной.

Если вы хотите сделать прозрачный фон стрелки вам понадобится программа Adobe Photoshop.

1) Сначала выберите картинку стрелки и нажмите открыть с помощью => Photoshop. Если у вас нет такого, то жмите выбрать программу, и ищите в какой папке на компьютере лежит у вас данная программа. Или просто зайдите в программу Photoshop  и нажмите левом верхнем углу файл, открыть и выберете картинку.

2) Хорошо выберите инструмент, который называется «быстрое выделение», сверху поменяем на плюсик как на картинке, и выделите вашу стрелочку при этом, не затрагивая задний фон. Ок теперь кликнете правой кнопкой на стрелку, и нажимаем «Скопировать на новый слой».

Как сделать кнопку наверх с плагином и без на WordPress?

4) Перейдите в правое мини меню, нажмите «слой» и либо удалите старый слои там, где у вас картинка с фоном, либо просто возле него нажмите на глаз.

5) В левом верхнем углу нажмите файл, сохранить как, и выберите во вкладке тип файлов CompuServe GIF (*,GIF) и нажмите сохранить. Если сохраните в другом расширении, то у вас не будет прозрачного фона.

Как сделать кнопку наверх с плагином и без на WordPress?

 

Ок теперь я рассказу вам, как ее еще и оживить можно с помощью программы Fanta Morph. Свой пример я буду показывать на старой версии 3.0.

1) Итак, открыв программу перед вами, сразу же выйдет окно с настройками, если этого не произошло, нажмите верхнем левом углу «файлы», «запустить мастер проектов». В открывшемся окне нажимаем «вперед» и тут у вас будет 3 выбора, как анимировать свою кнопку.

2) Если выберите «Морфинг», то сможете сделать так, чтобы две разные стрелки (картинки) меняли друг друга через определенное время. «Многогранный морфинг» делает тоже самое только больше чем с двумя изображениями. И «деформация» оживляет картинку, как раз то, что мы с вами и выберем. Нажимаем «вперед» выбираем изображение стрелки, жмем снова «вперед» и так до «завершить проект».

3) Затем вам нужно в первом меню изображение расставить точки, откуда будет начинаться движение, а во втором, где оно будет заканчиваться. Просто в первом меню расставьте точки, как у меня на картинке, а во втором поставьте их также, но только на  один миллиметр выше.

программа Fanta Morph

4)Теперь зайдите в «файлы», «настройки страницы» и выберете в «формат экспорта»  GIF- Анимация. Тут кстати, нажав на «опций» во вкладке «скорость видео» можно указать скорость анимации. Чем больше число поставите, тем быстрее будет анимация картинки. Лично мне не надо было, чтобы моя стрелка стучала как сердце, поэтому я сделал ее медленной, поставив тут 7.

5) После того как настроите скорость нажмите «ок» а потом «экспорт» и сохраните картинку. Вот и все. Через данную программку можно еще делать баннеры и даже вставлять звук в них! В общем, классная вещь.

Похожие публикаций:

Плагин статистических виджетов - Widget Logic
Популярный плагин кэширования WordPress - Hyper Cache
Плагин всплывающей формы авторизации - Login box

Поделиться с друзьями и коллегами.

Система Orphus
  1. Екатерина:

    Давно искала возможность установить себе такую кнопку!

Прокомментировать

Сергей Журавлев – автор блога firstprize.ru, вольный SEO специалист, вебмастер, Web-разработчик на WordPress и человек-оркестр с опытом в некоторых других областях. Личное кредо — хочешь сделать что-нибудь хорошо, сделай это сам. В моменты особого вдохновения создаю видеоклипы и ковыряюсь в кодах. Основные профессиональные инструменты —Dreamweaver, Adobe Photoshop, Site-аuditor. Спасибо за внимание, заходите снова!