С сегодняшнем wordpress уроке я расскажу вам о том, как можно легко и быстро сделать кнопку ” Наверх ” у себя на сайте.
Все делается довольно примитивно! И так, начинаем..
Хочу сразу сказать, что для оптимизации и ускорения работы сайта мы обойдемся без использования плагинов!
Первым делом скачиваем Этот архив – в нем находятся три файла:
Первый файл – это картинка наверх (top.gif);
Второй и третий файл – это два бонуса (зеленая и синяя кнопка).
Разархивируем Zip архив и зальем один из файлов (картинку) в корень сайта. (хотя можно и в любое другое место)
У меня она располагаются по следующему адресу:
http://sergey-oganesyan.ru/top.gif
Теперь заходим в админку блога :: Дизайн :: Редактор , выбираем footer.php (нижняя часть сайта) и помещаем вот этот код между тегами <body> </body> (для поиска по странице нажмите Ctrl + F);
<noindex><a href="#" id="toTop"><img src="http://ваш сайт.ru/top.gif" />
Внимание: http://ваш сайт.ru/ – замените на адрес вашего сайта;
После этого обновляем шаблон и переходим к файлу шаблона под названием style.css (Список стилей) и в самый низ добавляем этот код:
#toTop {
width: 100px;
background: #ededed;
border: 0px solid #cccccc;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
}
Обновляем шаблон.
При желании, вы можете изменит стиль вашей кнопки:
width: – ширина кнопка в пикселях;
background: – цвет фона;
border: толщина и цвет рамки;
text-align: выравнивание текста (стандартно – по центру);
padding: отступ (в пикселях)
position: – позиция (стандартно – фиксированная);
bottom: 10px;
right: – отступ от правого края;
Все, кнопка должна появиться, но может быть так, что сразу она не будет отображаться, поэтому я рекомендую закрыть ваш браузер, почистить кэш и потом снова запустить.
На этом все, подписывайтесь на обновления, с вами был Виталий Admin. До новых встреч!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.
Все можно сделать гораздо проще. Просто вставляем в нужное место такую хеш-ссылку, где прописываем путь к нашей картинке:
Спасибо, возьму на заметку, а как будет происходить подъем вверх, резко или плавно?
Будет резко. Во всяком случае у меня так было.
А мне так даже больше нравится – экономия времени.
Добрый день! спасибо за полезную инструкцию, сделала кнопочку, только не могу разобраться в коде – что изменить, чтобы она была не справа, как у вас и как у меня сейчас, а слева? Заранее спасибо за ответ!
Здравствуйте! Для этого просто замените это: #toTop { width: 100px; background: #ededed; border: 0px solid #cccccc; text-align: center; padding: 5px; position: fixed; bottom: 10px; right: 10px; cursor: pointer; color: #666666; text-decoration: none;} На это: #toTop { width: 100px; background: #ededed; border: 0px solid #cccccc; text-align: center; padding: 5px; position: fixed; bottom: 10px; left: 10px; cursor: pointer; color: #666666; text-decoration: none;} Это ток кусочек кода, который ранее вы вставляли в файл style.css (Список стилей). Если есть вопросы на счет позиции кнопки вверх, например, как её сделать чуть левее или выше, пишите.
Поставил себе всетаки с плагином. Быстро и удобно. Только поиенял картинку. Не нравилось, что кнопка не исчезает в верхнем положении страницы.
А мне как-то так нравится, да и то, что не исчезает тоже ничего – дизайну не вредит.
проблема в том, что если нахожусь не на главной странице, не только вверх поднимает, но и возвращает на главную, что не есть хорошо:-(
Всё..уже разобрался, просто id=”toTop”> стояло в конце
Виталий, вот вы всё описываете, а где у вас на сайте это можно посмотреть? Ведь кнопочки у вас я не вижу?
Все верно, именно такой, как в статье, кнопочки нет.
Виталий, извините, не досмотрела до самого конца страницу. Кнопочка есть, только она сливается с фоном.
Кнопочка есть, но эта не та кнопка, которая описана в статье. Раньше была такая кнопочка, но потом сменил дизайн.