Кнопка вверх для сайта|блога на WordPress!

Доброго времени суток, дорогие друзья и читатели — Sozdaiblog.ru!

Тема сегодняшней статьи — кнопка вверх для сайта или блога на WordPress!».

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

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

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

Вот и я решил обзавестись этим чудом навигации.

Не поверите друзья, но провозился я с ней шесть часов!

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

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

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

Кнопка вверх для сайта или блога на WordPress.

Вообще, различных вариантов для решения данной задумки достаточно много. Можно просто поставить специальный плагин – «Scroll Up», но каждый установленный плагин нагружает наш движок и замедляет загрузку сайта.

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

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

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

Затем, распаковываем скаченный архив в удобное для Вас место. В этом архиве находится картинка кнопки вверх, специальный файл (скрипт) и серый квадрат (подложка под кнопку).

Теперь распакованный архив, нужно загрузить в корневую папку Вашего ресурса.

Говоря по-простому, Вы должны запихнуть папку с файлами туда, где находятся все файлы Вашего блога или сайта.

У меня получился вот такой путь:

• /domains/Имя сайта/arrowup

Запихиваем мы эти файлы при помощи ftp-клиента.

Если Вы не знаете, как это делается, то обязательно прочитайте мой посты:

• Как настроить ftp-клиент.

• Как установить WordPress на хостинг.

• Как установить плагин WordPress.

Далее, нужно внести изменения в один из файлов Вашего ресурса под названием – header.php.

Зайти в него можно либо => Панель администратора => Внешний вид => Редактор и в правой колонке находите -  header.php.

Или через ftp-клиент, вот по такому пути:

• /domains/Имя сайта/wp-content/themes/Ваша тема/header.php.

Открываете его любым редактором, обычно я открываю при помощи – Notepad++.

И перед закрывающим тегом </head>, вставляем следующий код:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="https://Ваш сайт/arrowup/jqueryarrow.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
    $.autoScroll({
        scrollDuration: 2000,
        showDuration: 400,
        hideDuration: 300
    });
});
// ]]></script>

Это мы с Вами подключили специальный скрипт, под названием – Jquery.

Теперь всё по той же схеме открываем файл — style.css и в самом конце прописываем вот такой код:

.scroll-to-top-button{background:  url(https://Имя сайта/arrowup/Upload-icon.png) center center no-repeat;

width: 32px;

height: 32px;

color: #fff;

font-family: verdana;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-o-border-radius:5px;

cursor: pointer;

padding: 15px;

margin: 20px;

}?

Вот, практически и всё.

Открываете Ваш сайт, обновляетесь и наблюдаете в правом верхнем углу кнопку вверх, в виде синенькой стрелочки.

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

Ещё, Вам потребуется в файле style.css, в загруженном нами коде найти строчку:

• background:  url (http://Имя сайта/arrowup/Upload-icon.png) center center no-repeat;

и в ней поменять путь к картинке.

То есть заменить — Upload-icon.png, на название новой картинки.

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

Если остались вопросы по установке кнопки вверх, то задавайте их в комментариях!

На этом всё. До следующих статей...

С уважением, Денис Черников!