Здравствуйте, уважаемые читатели.В этой статье я расскажу вам, как установить кнопку “вверх” для блога WordPress. Сделать эту кнопочку можно двумя способами. Первый способ заключается в установке специального плагина. А второй, в изменении php кода в файлах вашей активной темы.
По большому счету, можно с легкостью обойтись и без этой кнопки. Эта кнопка уже у вас есть на клавиатуре, называется она “home” . Нажав которую, вы быстро переместитесь на начало страницы.
Многие веб-мастера устанавливают на свой сайт эту кнопку. Кто-то ставит ее для более удобной навигации пользователей по сайту, а для кого-то, это неотъемлемая часть дизайна.
1.Установка кнопки при помощи плагина.
Самый простой способ сделать кнопку вверх, это установить и активировать плагин. Скачать его можно с официального хранилища плагинов на сайте wordpress.org. Я рекомендую качать плагины только оттуда, так у вас будет меньше шансов заразить свой сайт вирусом.
Есть много плагинов которые позволяют добавить кнопку наверх, но я решил в качестве примера выбрать плагин Scroll Back To Top. Скачайте его, загрузите и активируйте.
Плагин имеет целый ряд настроек. Но всё трогать не обязательно. Достаточно настроить расположение и вид кнопки.
Как вы видите, нет ничего сложного в том, чтобы подключить кнопку наверх при помощи плагина, скачал, активировал и все работает. Куда еще проще? Но на самом деле не все так хорошо, как выглядит на первый взгляд. Дело в том, что с каждым установленным плагином, ваш WordPress становится более толстым и тормозным, что не есть хорошо. Поэтому многие опытные блогеры, при любой возможности стараются не пользоваться плагинами, а править код на прямую.
2.Установка кнопки вверх без плагина.
Сразу предупреждаю, прежде чем вы будете редактировать файлы шаблона, сделайте резервную копию сайта, чтобы потом не было мучительно больно.
После того как вы это сделаете, скачайте скрипт и изображение кнопки, и приступайте к делу.
[note] Скачать архив. [/note]
Распакованные файлы можно поместить куда душе угодно. Давайте, к примеру, создадим в корневой директории вашего блога папку top, и перенесем их туда.
[tip] Путь к папке с блогом, должен выглядеть примерно так: /domains/ваш_сайт/public_html/ . Хотя в зависимости от хостинга, он может несколько отличаться. [/tip]
Теперь откройте редактором notepad++, файл footer.php который находится в папке с темой, и добавьте в него следующий код:
<a id="toTop" href="#"><img src="https://ваш_сайт.ru/top/verx.png" alt="up" align="right" border="0" /></a><script type="text/javascript" src="https://ваш_сайт.ru/top/verx.js"></script><script type="text/javascript">// <![CDATA[
$(function() {
$("#toTop").scrollToTop();
});
// ]]></script>
Код необходимо вставить между тегами <body></body>. Не забудьте его подправить, указав доменное имя сайта.
Следующий файл, в котором нам необходимо внести изменения, это function.php. Сразу после открывающегося элемента <?php вставьте этот код:
// smart jquery inclusion
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');
}
Теперь осталось внести изменения в файл style.css. Этот файл, также находится в папке с темой. Откройте его, и в самом конце, добавьте этот код:
@media only screen and (min-device-width: 1200px) {
#toTop {
position: fixed;
bottom: 20px;
margin-left: 15px;
cursor: pointer;
opacity:0.7; }}
Если вы хотите поменять оформление кнопки, то вам необходимо подправить этот код, на свое усмотрение.
