ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

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

.

go-up_blueДоброго времени суток друзья!
В сегодняшнем уроке мы с Вами поговорим как же можно добавить кнопку вверх для нашего сайта, на движке WordPress, без плагинов. На данный сайт-saytjstroi.ru,  добавил данную кнопочку возврата к верху страницы, только сегодня по многочисленным просьбам своих читателей. И теперь задумался, почему же я не сделал данное действие раньше, ведь данная кнопка устанавливается очень быстро и просто и делает наш блог более удобным повышая уровень навигации и соответствено юзабилити блога. Проделав несколько простых действий вы сделайте свой сайт приятным для своих читателей, улучшив его навигацию.
Что же эта за кнопка такая и что она делает???
Для того чтобы выяснить это, откройте любую страницу моего сайта, например ЭТУ. Используя колесико мышки прокрутите текст статьи вниз, и в нижнем правом углу, вы сможете наблюдать зеленую (по желанию можно выбрать другой цвет ) стрелочку, нажав на которую вы вернетесь в самое начало данного поста. Данная кнопка подходит для сайтов с длинными развернутыми статьями или же блогов на которых оставляют очень много комментариев. Прочитал статью или комментарий, нажал на зеленую стрелочку и мгновенно вернулся в начало статьи.
Установка данной кнопки состоит из нескольких простых шагов. Буду расписывать все по порядку.

Качаем архив кнопки вверх

Разархивируем данный архив на наш компьютер. Внутри архива мы увидим 2 папки:
arrow.js
arrows.png
Теперь при помощи программы FileZilla, соединимся с нашим сайтом. О том как использовать программу для FTP-доступа FileZilla читайте тут!
Заходим в корень нашего сайта, открываем папку wp-includes и затем в папку js, закидываем файл arrow.js!Таким образом путь к файлу arrow.js, будет таким: корень сайта/wp-includes/js!
Теперь в корне сайта нам следует создать новый каталог с именем  img (если он уже иметься, то этот шаг мы пропускаем ) . В папку img мы закидываем файл arrows.png! Путь к файлу arrows.png будет следующим: корень сайта/img!
Обратите внимание что папка img обязательно должна распологатся в той же директорий что и папка wp-includes, которая как правило расположена в корне сайта.
Идем далее.
При помощи встроенного редактора WordPress открываем файл header.php  (заголовок, шапка сайта ) и находим тег

Перед ним необходимо добавить следующий php код:


Не забываем прописать адрес вашего сайта и сохранить изменения.
Теперь таким же образом открываем файл footer.php (подвал сайта ) и перед тегом

,вставляем следующий код:

 


Сохраняем изменения.

Далее переходим к заключительному действию. Открываем при помощи редактора WordPress файл style.css (таблица стилей) и в самом низу прописываем следующий код:

Прописываем адрес нашего сайта и сохраняем изменения.
Также обратите внимание на строчку:
left:90%; — используя разные значения, вы можете сделать данную кнопку в левой части вашего сайта, для этого прописываем 0%!
Все готово, любуемся результатом.
Если вас не устраивает зеленая стрелочка, вы можете легко найти другое изображение и заменить файл arrows.png !
На этом все ! Возникнут вопросы или проблемы с кодировкой, задавайте вопросы в комментариях, буду рад помочь вам советом.
БЕРЕГИТЕ СЕБЯ!




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

4 комментариев к записи Кнопка вверх для сайта без плагина

  • Егор сказал:

    Не пойму почему вылазиет в конце ссылки на главной странице сайта ( /# ) после подключения скрипта. Да и у тебя тоже вылезла решетка, после нажатия кнопки. Это окончание твоей ссылки. ( plagina.html# ) только у тебя mtp слеша))).

    где-то ошибка.

    • Виктор сказал:

      Нашел причину ошибки.Скоро исправлю и отпишу тебе на почту как это сделать!

  • Наталья сказал:

    Виктор, доброго дня!

    Всё делаю по инструкции, не появляется кнопка.

    Ранее делала с помощью других скриптов, тоже не получалось.

    Кеш чистила, открывала в разных браузерах, не в этом дело.

    В чем может быть проблема?

    • Виктор сказал:

      Проверил скрипт работоспособный. Рекомендую воспользоваться плагином!

Добавить комментарий

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