Здравствуйте дорогие друзья. Хочу поздравить вас с наступлением сентября, началом нового учебного года. А сегодня я расскажу, как сделать кнопку вверх для вашего сайта.

Кнопка вверх для сайта очень нужна в использовании, так как она помогает быстро вернуться к началу странице, что очень удобно для посетителей блога. Кстати, вы зарабатывали в казино 500$? Если нет, то почитайте эту статью основанную на личном опыте.

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

Но, с этой кнопкой красивее. Поэтому в этой статье я рассмотрю кучу способов, на ваш вкус и цвет. Кому-то нравится быстрая прокрутка, кому-то медленная. Некоторым по душе кнопка в виде картинки, а другим в виде надписи. Все эти способы я сегодня рассмотрю, так что читайте и наслаждайтесь, и конечно же учитесь.

В основном для работы нам понадобятся несколько файлов. Или это файл functions.php, или footer.php, header. Но, лучше всего вставлять какой-либо код в футер. Почему?

Потому, что когда робот приходит на сайт, то он начинает сканировать файл header, далее другие файлы. А footer находится в самом низу, и разместив код там, мы снизим нагрузку на наш блог. А если вы вообще не разбираетесь в коде, то мы установим плагин, который выводит кнопку наверх для блога.

Кнопка вверх с помощью плагина.

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

Итак, я думаю, что вы умеете устанавливать плагины на блог, раз уж интересуетесь такими вопросами. А значит, вам нужно установить на блог плагин, который называется «Scroll to Top». Скачать его можно тут. Скачиваете, распаковываете и закидываете к себе на хостинг. Так же можно устанавливать плагины через административную панель вашего блога.

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

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

Поэтому вам придется поискать именно такой плагин. Да и я с вами согласен, красивее, когда картинка, а не надпись.

Кнопка вверх без плагина.

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

Первый способ. Мы установим простой, обычный код. И кнопка наша будет тоже простой. Все, что вам нужно сделать, так это установить, приведенный ниже код в футер, перед закрывающемся тегом </body>

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

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

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

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

Эта надпись будет выглядеть намного лучше, чем в прошлом способе, потому что мы затронем файл css и пропишем в нем стили. Кстати, посмотрите, как она отображалась у меня на блоге, когда я его редактировал. Она была у меня еще с прямоугольной рамочкой .

Преступаем. Для начала скачайте этот архив. Когда его разархивируете, то увидите в нем два файла. Один это скрипт, а другой это картинка стрелки вверх. Ее в этом способе использовать не будем, но для другого может пригодиться. Значит так.

Файл со скриптом, нам нужно поместить в корневую папку нашего блога(public_html). То есть в самую главную папку, где находиться весь наш блог. После этого нужно скопировать приведенный ниже код в файл footer.php.

<noindex><a href="#" id="toTop">Наверх</a> <script src="http://ВАШ_САЙТ.ru/verx.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#toTop").scrollToTop(); }); </script></noindex>

ВНИМАНИЕ! Файл нужно вставить перед тегом </body>, как это уже и говорилось. Так же не забудьте поставить вместо ВАШ сайт, адрес своего сайта. 

Окей, можете нажать на сохранение. Кнопка должна появиться в нижнем левом углу(на сколько я помню), но мы это исправим. Для этого откройте файл css и в самый низ файла вставьте следующий код

#toTop {
 width: 100px;
 background: #000000;
 border: 1px solid #ffffff;
 text-align: center;
 padding: 5px;
 position: fixed;
 bottom: 30px;
 right: 10px;
 cursor: pointer;
 color: #cbeb9d;
 text-decoration: none;}

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

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

border — рамка у кнопки белого цвета, вы можете ее вообще убрать.

color — это цвет надписи.

right — на сколько кнопка будет сдвинута вправо

bottom — расстояние с низу.

Я думаю, что теперь все стало понятно. даже если не понятно, то измените что-нибудь в коде css и увидите, куда, что подвинется:). По секрету: "Я так всегда делаю;) Прошу внимания! Если у вас не отображается кнопка, значит вы сделали, что-то не так.

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

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

Итак, приступаем. Вам нужно будет скачать архив, в нем будет храниться 2 файла. Это картинка и сам файл с кодом. Мы будем выводить нашу кнопку с помощью jquery. Ах, да, архив можете скачать тут.

Файлы будут называться  top.js и top.gif. Первый файл нужно загрузить в корневой каталог вашего блога(public_html). А для картинки можете создать там же папку images, куда загрузить вашу картинку(для начала ту, которая прилагается вместе с файлом).

Обязательно правильно напишите пути к файлам. Путь к первому файлу:

• http://ваш сайт.ru/top.js

А путь к нашей картинке. Не забудьте запретить к индексации новую папку в robots.txt. Как запрещать файлы от индексации, я писал тут.

• http://ваш сайт.ru/images/top.gif

После этого обязательно сохраните резервные копии файлов: functions.php, footer.php и файл css. Просто не знающий человек может вставить код не туда, и начнутся проблемы. А если нет запасных файлов? Задумайтесь... Хотя, я покажу все просто и понятно, у вас не будет вопросов.

Теперь открываем файл functions.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'); }

Я вставил его в самый конец файла, перед закрывающимся тегом ?>. Вот как выглядит концовка моего файла

return $output;
}
// 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'); }
?>

Я думаю все просто и понятно. Теперь нам надо открыть файл footer.php и аналогичным образом вставить следующий код в конец блога. Только теперь перед закрывающемся тегом </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>

ВНИМАНИЕ! Обязательно вставьте свои ссылки, в место выделенных ссылок в коде. 

И последнее, что нам нужно сделать — это добавить стили в файл css. Добавлять нужно в самый конец файла. Не перед каким тегом, в самый конец!

#toTop {
width: 100px;
border: 0px solid #cccccc;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
color: #666666;
text-decoration: none;}
Делайте настройки под свой блог. Что за что отвечает, можете найти в интернете. Все, это было последнее действие, после которого можно смело идти на блог и смотреть, что у вас получилось. Если все нормально, то вы просто гений php:), если нет... Такого не будет.

Специально для вас, я создал видео урок, где показал, как вырезать картинку, как вставлять ее в другие картинки, редактировать, добавлять эффекты.

[youtube]VwB-muhYDvc&feature[/youtube]

На этом у меня все. Надеюсь, вы сделаете кнопку вверх и она будет помогать вашим читателям подняться к шапке вашего блога. Прошу оставить свой отзыв в комментариях. Хочу узнать, есть ли у вас эта кнопка и как вы ее делали.

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

Успехов вам и продвижения

С уважением, Фокеев Тимофей

15 комментариев на “Кнопка вверх для сайта. Как сделать?”