Сегодня мы с вами установим кнопку “наверх” (думаю, кому-то пригодится из наших читателей). Признаюсь, давно не устанавливал эту кнопку, пришлось освежить в памяти: короче, подобрал, протестировал и даю рабочие варианты кнопок наверх без плагина(в мануале вы отыщете всё необходимое): плагины слишком тяжелы, а поэтому мы их по возможности не используем…
А и без них многое могём: требуется кнопка “наверх” – сегодня она у вас будет! Симпатичная и полностью подстраиваемая под ваш блог на WordPress.
Приступим: для начала определитесь как станете реализовывать идею вашей кнопочки вверх!? Предлагаю три варианта:
оптимальная установка кнопки скроллинга наверх без плагина
Дело в том, что можно располагать папки необходимые для работы кнопки независимо от шаблона (т.е вне его) таким образом при смене шаблона работоспособность кнопки останется с вами).
Я так не делаю, а располагаю всё внутри шаблона в соответствующих директориях. Для меня так логичнее. А посему в статье предлагаю именно этот вариант. Иной вывод кнопки-вверх делается чуть иначе, подробности ниже…
Итак: вам потребуется сама кнопочка (можете скачать у меня, ссылка также ниже). Далее подготовим все нужные папки и файлы.
В вашем шаблоне должна быть папка js (мы её создавали для реализации дополнительных кнопок в визуальный редактор WordPress TinyMCE ) Хотя сейчас большинство шаблонов пишется, конечно же, с папкой js (скажем так). Но если у вас её нет – создайте в корне шаблона и дайте имя js
.
Шаг первый:
…в папку js помещаем следующий документ. Этот файл (в купе с jquery-1.7.1.min.js) прячет кнопку “наверх” когда пользователь находится в самом верху сайта, и показывает её когда тот прокручивает страничку книзу…
…путь можете выстроить следующим образом:
ваш_домен.ru/wp-content/themes/ваша_тема/js/verh.js
набор для сайта кнопочка наверх
…имя документа verh.js
– обратите внимание, файл с расширением – js
. И как вы догадались, это ничто иное как JavaScript.
Значит так: можете всё это создавать сами (практики ради), а можете и просто скачать набор для кнопочки наверх ТУТ, и вам останется только разложить всю документацию в соответствующие разделы… И, конечно же, – поменять имена в некоторых строках.
Вот содержимое файла verh.js
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}
var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});
$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
Далее необходимо подключить библиотеку jQuery (это тем у кого она не подключена).
Здесь выбирайте способ: можно указать адреса библиотек Google, чтобы подгружать оттуда…
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
! но тогда вы будете зависеть от Гугл-а-а! …но от кого-то зависеть – плохо!?. Я подключаю библиотеку со своего сайта. А касаемо обновления – то их можно получить, загрузив через какое-то время новый скрипт внутрь документа jquery-1.7.1.min.js или поправить пути прописанных строчек (коли поменяются символы /например, будет вместо 1.7.1 что-нибуди типа 1.7.2…/) Хотя можно найти прямо jquery-1.7.2.min.js но она весит 250кб, а наша всего 95. Тем паче этот файл библиотеки нам нужен только для кнопочки. Самое то!
Скачать файл jquery-1.7.1.min.js
можно так:
переходим по ссылке https://code.jquery.com/jquery/
и…
(выбираете… скачиваете… /в своём браузере кликаете в меню “файл” и сохраняете/) – потом jquery-1.7.1.min.js помещаем в папку js.
С этим всё!
Помещаем в файл footer.php
следующий скрипт: он подключит файл verh.js и выведет на картинку сайта иконку самой кнопочки. Прописываем его прямо перед закрывающим тегом </body>
– фото.
<a id="verh" href="#" title="Вернуться наверх"><img src="/wp-content/themes/ваша_тема/images/verh.png" class="buttonup" /></a><script type="text/javascript" src="/wp-content/themes/ваша_тема/js/verh.js"></script><script type="text/javascript">// <![CDATA[
$(function() { $("#verh").scrollToTop(); });
// ]]></script>
Ну и теперь же закинем картинку кнопки в папку images
– имя кнопки: verh.png
. Для интереса можете проверить в скриптах как всё это подключается: пути-адреса и т.п.
Но коли хотите использовать подключение кнопки вне шаблона (выводите все эти необходимые для кнопки файлы в корень вашего сайта, меняя соответственно пути подключения кнопки ВВЕРХ в новых файлах.
И, конечно же, говорю всякий раз: заведите какой-то документ «запоминалку» всех совершаемых эксов с блогом. Пригодится:).
Ну и финальное – остаётся подключить в файле header.php
саму библиотеку. Итак:
открываем… и прямо перед закрывающим тегом </head>
прописываем строчку показанную ниже:
<script type="text/javascript" src="/wp-content/themes/ваша_тема/js/jquery-1.7.1.min.js"></script>
Должно получиться приблизительно как на фото (картинку кликать):
И – финал: скрипт css, который нужно поместить в самый конец файла style.css
.
#verh {
margin:0px 57px 150px;/*расположение кнопки*/
position:fixed; /*фиксирование кнопки*/
bottom:30px;
right:2px;
text-align:center;
text-decoration:none;
cursor:pointer;/*ладошка при наведении курсора*/
}
И – прозрачность иконки (сработает при прикосновении)…
.buttonup{
opacity:0.8;/*степень прозрачности*/
}
А вообще, смотрите по правильной отработке библиотек jquery вашей темой… и коли что-то не пшоло, меняйте версии подключаемых библтотек (но это если САМ скрипт у вас не был подключен по умолчанию) –
…сейчас (на момент написания статьи) вовсю используют библиотеку http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js
…посему предлагаю новый
современный способ реализации кнопки прокрутки наверх
В данном скрипте можно оставить всё как есть, т.е подгружать из самой библиотеки ГуглЪ.
<p id="back-top"><a href="#top"></a></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
});
</script>
нотация:
1100 – расстояние открутки вниз, после которого появляется кнопочка
400 – скорость прокрутки.
Но, что важно!
А можно и загрузить файл на сервер (в папку js в корне вашей темы) и тогда вы не будете зависеть от сторонних подгрузок. Это, естественно, более правильно!
Переходите… скачивайте… ТУТ (обратите внимание, вес всего-то 26кб).
И после заливки файла в корень вашей темы, заместо строки (в скрипте выше), пропишите эту:
<script type="text/javascript" src="/wp-content/themes/ваша_тема/js/jquery.min.js"></script>
<script>
Ну и как обычно, в файл CSS (style.css) пропишите следующий дизайнерский скрипт самой кнопочки вверх:
#back-top {
position: fixed;
bottom: 60px;
right: 3%;
}
#back-top a {
background: url(images/verh.png) no-repeat;
width: 60px;
height: 60px;
display: block;
margin-bottom: 7px;
}
#back-top a:hover {opacity:0.5}
Путь к кнопке и её имя прописывайте свои.
наилегчайший способ реализации в блоге кнопочки наверх
Способ три:
…таким способом (очень простым и лёгким) можно реализовать простенькую кнопочку в блоге на вордпресс: клик… и вы молниеносно “перемещаетесь” кверху странички.
Тут вся реализация идеи сводится к тому, что нужно открыть файл footer.php и прописать строку приведённую ниже.
Вся сложность в том, что вам лишь предстоит выбрать место помещения скриптовой строки в строках файла футер пчп, от этого будет зависеть географическое размещение кнопки в футере сайта (вот такой каламбур). Обратите внимание: в этом случае я поместил картинку в корень сайта.
И, как вы поняли, этот способ не нуждается более ни в каких скриптокодах).
<a href="#" title="Вернуться наверх" class="buttonup"><img src="https://mihalica.ru/verh.png"></a>
(фотку кликайте…))
Недостатки — резкое перемещение и, как говорят, «не круто».
Достоинство: лёгкость реализации. И лёгкость же использования (без библиотек)).
Важно знать: в зависимости от особенностей выбранной вами темы, некоторые варианты кнопок (их скриптов) станут конфликтовать с «родными» (темными js, коли таковые были) – на сайте могут исчезнуть какие-то красивости или удобства связанные с Ява скриптом… (а вот как всё это исправлять под свои требования, темы следующих статей).
Так что после установки кнопки вверх и её кода (библиотек jQuery), внимательно проверяйте правильность работы сайта в целом.
Мы идём вперёд, а не назад, вроде бы) а значит нужно помнить, что множество удобств навигации и т.п. должен включать в свой инструментарий браузер: мобильный или десктопный.
Посему админу важно не пересолить с прибабахами!
мораль сегодняшней темы:
…оптимальный интернет — это ни только всякое нагромождение дублей улучшалок, но и грамотность в использовании уже имеющихся возможностей в коробке WordPress…
…а юзерам правильно пользоваться браузером…
Выбор за вами товарищ админ! ))
…а впереди у нас с вами ещё множество утончённых) способов настройки нашего блога. А пока рекомендую ознакомиться с другими вариантами подключения всевозможного скрипта – я использую у себя такую кнопочку – плавный скроллинг якоря и пружинистой кнопки наверх
Online консультация по настройкам и созданию сайтов на WordPress
Условные теги: пример страницы пагинации – закрываем в noindex,follow
mihalica.ru !