Ответ
Добавление кнопки «наверх» на WordPress блоге Опции темы
Старый 13.07.2013, 20:19
  #1
dangerous
 
Аватар для dangerous
Регистрация: 30.05.2011
Сообщений: 486

Добавление кнопки «наверх» на WordPress блоге





Приветствую, уважаемые форумчане. С этого дня, я продолжаю писать статьи на форум. И сегодня я буду рассказывать о добавлении удобной кнопки «наверх» на блог WordPress. Эта модификация позволит посетителям вашего сайта быстро перемещаться к началу страницы без использования прокрутки. Рассмотрим различные способы для добавления кнопки. Самым главным способом, как возможно многие знают – это плагин Scroll to Top. Благодаря нему, можно без особых усилий добавить ту самую кнопку «наверх» на блог. Ещё один неплохой, даже лучший плагин для добавления кнопки – это Dynamic “To Top”. Собственно эти плагины мы и рассмотрим, а также научимся добавлять кнопку «наверх» без использования плагинов. Кажется, что плагины – удобно, несомненно. Но! Почти любой плагин – это лишняя нагрузка, хоть и незначительная + к этому, замедление работы сайта. По этому в некоторых случаях лучше воздержаться от плагинов.

Добавление кнопки «наверх» с помощью плагина Scroll to Top




Если вы не хотите копаться в коде шаблона, то вам лучше всего загрузить плагин под названием ScrolltoTop. Установка кнопки данным способом ничем не отличается от установки плагина. Достаточно зайти в админ-панель вашего блога, перейти в раздел “Плагины”, нажать на кнопку загрузки нового. Скачать Scroll to Top можно на сайте Wordpress.org, осуществив поиск в соответствующем разделе. Следующим шагом будет загрузка плагина. Делается это с помощью TotalCommander, WinSCP или через оболочку хостинга. Вам понадобится FTP-аккаунт, который можно создать в Cpanel или другой админ-панели.

Второй метод, самый простой - можно напрямую загрузить плагин из вашей админки. Для этого, как и сказал, переходим в раздел “Плагины” – “Добавить новый”, вписываем название плагина (Scroll to Top) и нажимаем “Поиск плагинов”:





Первый способ я чего написал, что возможно, вы когда-нибудь столкнетесь с тем, что на официальном сайте, нужного плагина не будет, а будет где-нибудь в сети на стороннем сайте. В итоге придётся использовать первый метод или же ещё один вариант – в разделе “Плагины” - “Добавить новый”, переходим во вкладку “Загрузить”, выбираем скачанный плагин и нажимаем “Установить”.





Scroll to Top имеет свои настройки. Вы легко можете изменить вид кнопки, если загрузите свое изображение через раздел «Медиафайлы». Есть еще пара настроек, позволяющих поменять имя кнопки. Допустим, вы хотите видеть на кнопке надпись не «Scroll to Top», а просто «вверх» или «наверх». Это легко осуществимо. Для этого перейдём в раздел “Параметры” – “Scroll to Top”.





Как видим, здесь всё совсем легко. Настройки минимальны, только необходимые.
  1. Enable – здесь можно выбрать включить или отключить плагин. То есть отображать или нет саму кнопку.
  2. Text – в этом поле находится сам текст, отображаемый на кнопке.




  3. Width – это ширина кнопки.
  4. Text Color – в этом поле задаётся цвет самого текста. То есть надписи - Scroll to Top.
  5. BackGround Color – это цвет фона.
Плагин весит 11 КБ и не несет никакой нагрузки даже на самый слабый сервер. Так что, по поводу того, что я писал выше о нагрузке – это не про этот плагин. Можем его смело ставить.


Добавление кнопки «наверх» с помощью плагина Dynamic "To Top"





В этом плагине уже более привычная круглая кнопка с правого бока, по сравнению как было по центру прямоугольная кнопка у плагина Scroll to Top. Всё же отметил бы данный плагин первым и более лучшим. Хотя, каждому своё. Во-первых, дизайн кнопки более красивший. Во-вторых, настроек гораздо больше. Ну и, в-третьих, кнопка справа. По-моему, кнопка справа более привлекательней и удобней, нежели по центру.

Ну и опять же по настройкам. Вы можете настроить время прокрутки. То есть, за какое количество времени осуществлять прокрутку вверх. Для того, чтобы быстрее проходила прокрутка, в настройках плагина выбираем пункт “Scroll time”. В нём указываем, чем меньше мили секунд, тем быстрее будет прокрутка вверх. Чем больше, соответственно дольше.

Position – где будет находиться кнопка. По стандарту справа. Но вы можете поставить и слева. Также есть возможность поставить снизу или сверху. То есть вверху правого/левого бока или же внизу.

Помимо простой кнопки с логотипом стрелки, можно выбрать и текстовую версию. Для этого ставим галочку в поле “Text version” и прописываем в поле ниже название, которое будет отображаться на кнопке.




  • Top/bottom padding – высота кнопки.
  • Sides padding – ширина кнопки.
  • Font size – размер текста на кнопке.
  • Text color – цвет текста на кнопке.
  • Bold Text – выделение текста жирным.
  • Text shadow – тени для текста.
  • Text shadow color – цвет тени.
  • Background color – цвет фона.
  • Border color – цвет обводки кнопки.
  • Border width – ширина обводки.
  • Border radius – радиус округления кнопки. Опустив до 0, можно убрать округление, тем самым, сделать кнопку прямоугольной.
  • Shadow – тень самой кнопки.

Также имеются и другие плагины для добавления кнопки, например “RRF Scroll To Top”. Вы можете посмотреть полный список, прописав в поиске плагинов данное значение - “To Top”.

«Наверх» без плагина

Но существует и другой путь, в котором можно обойти использование плагинов. Главным плюсом здесь является то, что обновлять ничего будет не нужно, а работоспособность ни разу не нарушится. Первым делом вам нужно создать в корне сайта папку, название может быть любым. Далее создаем файл up.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")})}});
Как Вы могли догадаться, файл нужно закинуть в созданную папку. Туда же загрузим файл up.png. Он должен быть небольшого размера, буквально 40х40 пикселей.

Второй шаг. Начинаем редактировать footer.php или так называемый «подвал». Туда добавляем следующий кусок кода:

<a id="toTop" href="#">
<img alt="" src="http://rebill.me/scrolltotop/up.png" border="0" /></a></pre>
<pre lang="php" line="1"><script type="text/javascript" src="http://rebill.me/scrolltotop/up.js"></script>
<script type="text/javascript">
 $(function() { $("#toTop").scrollToTop(); });</script>
Примечание. Замените rebill.me на свое доменное имя, иначе работать скрипт не будет. Вставлять скрипт нужно после закрывающего тега </body>.

Теперь вы можете создать плавное появление и исчезновение кнопки, если отредактируете functions.php. В конце файла нужно просто вставить следующее:

if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery',
(&quot;http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;), false);
wp_enqueue_script('jquery');}
Отредактируйте заодно и style.css, чтобы придать вашей кнопке достойный вид. С этой целью находим указанный файл и вставляем в его конец данный код:

#toTop {
width:50px;
border:0px solid #cccccc;
text-align:center;
padding:5px;
position:fixed;
bottom: 10px;
right:10px;
cursor:pointer;
color:#666666;
text-decoration:none}
На этом у меня всё. Теперь вы можете по своему усмотрению менять изображение на любое другое, а также заниматься редактированием параметров в style.css. Единственным минусом тут будет удаление кнопки, вам придется делать все с точностью наоборот, удаляя кусочки кода из файлов, хотя это не проблема - Ctrl+F рулит.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Каким фо вы пользуетесь на вашем Wordpress блоге? opop Файлообмен 6 04.04.2013 16:20
Добавление кнопок соц сетей на свой сайт 0pium Статьи 0 25.12.2012 00:22
Добавление ещё одного фо на свой рес Гермес Файлообмен 7 04.12.2012 16:34
Создание сайта на WordPress Incanta Статьи 31 27.07.2012 07:54
Лавка WordPress кудесника Dr.Bot Работа 18 22.07.2012 19:40

Метки
wordpress, блог, добавление кнопки, как добавить кнопку, мануал, наверх


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 22:28. Часовой пояс GMT +3.