Кнопки на сайт без плагинов и скриптов

Несомненно дополнительные полезные кнопки на блоге wordpress увеличивают его привлекательность и удобство использования. Недавно задался целью сделать кнопки на блог wordpress  "Наверх", "Вниз", "Подписаться на RSS", "Подписаться на  e-mail", "Добавить в закладки" без использования плагинов и скриптов. Представленные в данной статье коды кнопок позволяют обходится без плагинов. Их можно использовать на любых сайтах, не только блогах wordpress. Но! В полном объёме со всеми эффектами эти коды будут работать только в  Opera и  Firefox. В  старых версиях Chrome не работают эффекты затеменения - это в общем некритично. В IE8 все эффекты и кнопочки работают, кроме кнопки добавления в закладки. Она просто не видна. Согласно статистике данный блог просматривают в браузере Google Chrome около 30% посетителей. Учитывайте статистику при установке кнопочек на сайт.

Через скрипт в данном наборе реализовано только добавление в избранное. Кнопочки можно видеть на моём блоге справа.

Так как этот способ не предусматривает использование плагинов, то придётся "поработать ручками" вставляя код. Проще всего добавить эти коды в header.php установленной темы. В этом случае Вы наверняка увидите эти кнопки на всех страницах Вашего блога. Но можно и добавлять отдельно в шаблон записи single.php и страницы page.php. Немного пофантазировав можно на разных страницах выводить различные кнопочки.

Если Вы внимательно посмотрите код, то увидите, что кнопочки "пристёгиваются" к краю экрана с помощью параметра

style="position: fixed; right: 0px; top: 260px

Именно он задаёт отступ от правой части экрана ( right ) 0 и сверху ( top ) 260 пикселей. Если хотите чтобы кнопки были у левого края экрана - поставьте left: 0px. Если Вас не устраивает такая величина отступа сверху, то можете исправить. Но учтите, что тогда необходимо будет подправить эти значения для каждой кнопки. Например, Вы выставляете отступ сверху 250 пикселей. Значит для каждой кнопки соответствующее значение нужно будет уменьшить на 10 пикселей. В каждой последующей кнопке значение  top  увеличивается на 34. Это связано с тем что высота иконки 32 плюс 2 пикселя отступа. Если Вы захотите поставить иконки другого размера, то придётся все эти величины пересчитывать. Ссылка на архив с иконками 32х32 и текстовый файл с кодом в конце статьи.

 Итак по порядку.

Кнопка Наверх

<a style="position: fixed; right: 0px; top: 260px;" title="Вверх" href="#"><img src="http://z-force.info/............/buttons/arrow-up32x32.png" alt="Вверх" width="" height="" align="" /></a>

Кнопка  Подписаться на RSS (у Вас адрес фида будет свой)

<a style="position: fixed; right: 0px; top: 294px;" title="Подписаться на мой фид" type="application/rss+xml" href="http://feeds.feedburner.com/z-force/VBoo" rel="alternate"><img style="border: 0;" src="http://z-force.info/................./buttons/feed-icon32x32.png" alt="" /></a>

Кнопка Подписаться на  e-mail (у Вас адрес подписки будет свой)

<a style="position: fixed; right: 0px; top: 326px;" title="Подписаться по Email" type="application/rss+xml" href="http://feedburner.google.com/fb/a/mailverify?uri=z-force/VBoo&amp;loc=ru_RU" rel="alternate"><img style="border: 0;" src="http://z-force.info/................../buttons/email2-32x32.png" alt="" /></a>

Кнопка  Добавить в закладки

<script type="text/javascript">// <![CDATA[
// Добавить в Избранное  function add_favorite(a) {    title=document.title;    url=document.location;    try {      // Internet Explorer      window.external.AddFavorite(url, title);    }    catch (e) {      try {        // Mozilla        window.sidebar.addPanel(title, url, "");      }      catch (e) {        // Opera        if (typeof(opera)=="object") {          a.rel="sidebar";          a.title=title;          a.url=url;          return true;        }        else {          // Unknown          alert('Нажмите Ctrl-D чтобы добавить страницу в закладки');        }      }    }    return false;  }
// ]]></script>

<a style="position: fixed; right: 0px; top: 360px;" title="Добавить в избранное" onclick="return add_favorite(this);" href="#"><img src="http://z-force.info/wp-content/uploads/buttons/Favorite32x32.png" alt="" width="" height="" /></a>

Кнопка Вниз

<a style="position: fixed; right: 0px; top: 394px;" title="Вниз" href="#down"><img src="http://z-force.info/................/buttons/arrow-down32x32.png" alt="Вниз" width="" height="" align="" /></a>

 Чтобы кнопка вниз работала, добавьте в footer.php перед закрывающим тегом body якорь

<a name="down"></a>

 Итак кнопочки мы установили. Теперь можно добавить эффекты при наведении мышью. Например чтобы при наведении кнопочки становились ярче, как бы светились. Для этого уже придётся редактировать style.php. Вставляем вот такой код:

/* для эффектов при наведении мышью*/
.button img {
  opacity:0.6;
  -moz-opacity:0.6;
  filter: alpha(opacity=60) black;
  -khtml-opacity: 0.6;
  }
  .button img:hover {
  opacity:1;
  -moz-opacity:1;
  filter: alpha(opacity=100) black;
  -khtml-opacity: 1;
  }
/*  */

 И каждый код кнопки облачить в тег div и присвоить соответствующий класс button .

<div class="button">КОД_КНОПКИ</div>

Архив иконок

Коды кнопок

По FTP загрузите  папку buttons, например в папку uploads, и поменяйте ссылки z-force.info на свои.

Конечно данный способ "ручной" и отнимет некоторое время, но зато позволяет полностью отказаться от использования плагинов, а значит уменьшить нагрузку на блог. В дальнейшем планирую расширять коллекцию кнопочек представленных здесь, так что следите за обновлениями статьи!

У этого способа есть один, довольно существенный недостаток. При просмотре сайта через мобильный браузер с телефона или смартфона кнопки расположены не у правого края экрана, а прямо посередине. Это легко проверить при заходе на сайт, например, через Opera mini. Вся дело в параметре position:fixed. Учитывая стремительное увеличение количества мобильных устройств следует задуматься об использовании такого метода. Единственная надежда на то, что разработчики "научат" понимать мобильные браузеры параметр position:fixed.

Вот и всё. Удачи!

14 комментариев к “Кнопки на сайт без плагинов и скриптов”

  1. Виктория

    Спасибо за статью. Все понятно. Вот только у меня почему-то когда не меняю ссылку на свой сайт (с Вашей ссылкой) все работает. А как только поменяю — картинка пропадает. И что не так — не пойму.

    1. Editor Автор сообщения

      Здравствуйте. Если Вы загрузили картинки на свой блог, то нужно прописать путь к ним. В моём примере это http://ВАШ САЙТ/wp-content/uploads/buttons. Посмотрите где они находятся у Вас. Иногда ( в зависимости от хостинга) при копировании файлам по-умолчанию присваиваются права доступа 600. А надо как минимум 644. Проверьте в FTP клиенте.

    1. Editor Автор сообщения

      Здравствуйте. Разбираюсь только в блогах wordpress, но данный код универсален. Это обыкновенный html который будет работать везде. Вот только куда вставлять его в Вашем случае не знаю.

    1. Editor Автор сообщения

      Поставил. Какой браузер? В IE6 их не видно, а, например, в IE8 видны все, кроме кнопочек вверх-вниз. В Хроме, например, не работают эффекты при наведении на кнопку. Пока занимаюсь этим вопросом.

  2. Лариса

    Здравствуйте! Интересная идея! А то такую кучу плагинов приходится ставить,а потом еще настраивать. Только с HTML дружба еще не совсем сложилась.Но буду пробовать. Спасибо!

    1. Editor Автор сообщения

      Да,надо. В примере кода есть фрагмент src=»http://z-force.info/……………../buttons/feed-icon32x32.png. Вот здесь надо указать путь к папке с картинкой. Естественно адрес будет начинаться не с z-force.info. Например так http://ВАШ_САЙТ/uploads/buttons/feed-icon32x32.png. И естественно права доступа к папке как минимум 755 и к картинке 644.

Оставьте ответ

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