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

Приветствую Вас, и сегодня хочу поговорить о том, как сделать кнопку вверх на сайте wordpress. Функция полезная для длинных статей, с помощью которой при нажатии на кнопку «Вверх» страница поднимется к шапке сайта. Что в свою очередь происходит облегчение передвижения по сайту.

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

Давайте рассмотрим два способа решения проблемы:

  1. Как сделать кнопку вверх на сайте wordpress с помощью плагина

  2. Как сделать кнопку вверх на сайте wordpress в html

Как сделать кнопку вверх на сайте wordpress с помощью плагина

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

  • WP Scroll To Top

  • Scroll to Top

  • Dynamic To Top

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

нашли

установили

активировали

Сложного ни чего нету, можно посмотреть пример на плагине Q2W3 Fixed Widget.

Как сделать кнопку вверх на сайте wordpress с помощью скрипта

Создаем анимированную иконку «Вверх» с помощью фотошопа

Напишу, как создал кнопку «Вверх» на своем примере. Для начала нашёл картинку на просторах интернета, благо их там много. Изменил цвет, подкорректировал, т.е. одним словом сделал её уникальной. Всю работу производил в Adobe photoshop cs6 на русском языке. И так открываем картинку через фотошоп. Далее выбираем инструмент «Волшебная палочка»(2) с помощью которой наводим на тот цвет, который хотим поменять. После выделения участка для смены цвета, выбираем кисть (3) и меняем цвет (5) и производим смену цвета нашего участка с помощи кисти(3). Чтобы написать текст на картинке используйте инструмент «Горизонтальный текст»(4).

Как сделать кнопку вверх на сайте wordpress с помощью скрипта

Перед тем как сохранить рисунок, выделяем белый фон(2) рисунка инструментом «Волшебная палочка»(1). В правом углу в панели инструментов находим вкладку «Слои»(3) и нажимаем иконку(4) два раза мышкой, а после на кнопку «delete» на клавиатуре.

Создаем анимированную иконку «Вверх» с помощью фотошопа

Фон нашей кнопки получится прозрачным. Всё это сохраняется в формате PNG.

По такому алгоритму я создал две кнопки следующего вида 50*50 пикселей каждая.

Кнопка Вверх

Далее в фотошопе нажимаем на вкладку «Файл – Создать». Создаем новый размер 300*300 пикселей, фон – прозрачный.

в фотошопе нажимаем на вкладку «Файл – Создать».

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

работа в фотошопе

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

фотошоп

Скрипт кнопки «Вверх» и работа с менеджером файлов на хостинге

Для работы с кодом рекомендую бесплатный редактор NotePad++. Скачать JScript (.js) с плавной прокруткой кнопки «Вверх» можно в конце статьи. Далее переходим на хостинг, как это сделать читаем следующую статью на примере Офферхост. Переходим в файловый менеджер и в папку images копируем наш созданный рисунок для кнопки display.png.

Менеджер файлов /www/Ваш сайт/wp-content/themes/Ваша тема/images/ display.png

Далее в папку js копируем скаченный файл display.js.

Менеджер файлов /www/Ваш сайт /wp-content/themes/ Ваша тема /js/display.js

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

Доработка footer.php в консоле сайта на WordPress

Перед тем, как будете работать с кодом, необходимо обязательно создать резервную копию сайта, как это сделать читаем здесь или делаем копию хотя бы того документа, с которым будете работать. Итак, переходим «Консоль» — «Внешний вид» — «Редактор» — «Подвал (footer.php)».

И перед тегом </body> вставляем код(4), скачать который можно будет в конце статьи:

Подвал сайта

Добавляем стиль для кнопки «Вверх»

Переходим в таблицу стилей (style.css) и добавляем следующие стили.

Добавляем стиль для кнопки «Вверх»

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

P.S. На этом всё,  мы узнали, как сделать кнопку вверх на сайте wordPress. Если у вас остались вопросы, добро пожаловать в комментарии.


С уважением, Николай Епишин.


Спасибо, что поделились статьей в социальных сетях и поддержали блог!!!


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

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