Здравствуйте, сегодня поговорим о том как создать плавающие кнопки на своем сайте, которые придадут вашему сайту оригинальности.
Скачать исходники для статьи можно ниже
Для примера возьмем стандартную wordpress тему – Twenty Eleven.
Вот так будет выглядеть создаваемая нами кнопка:
Демо-пример можно посмотреть тут:
http://mnogoblog7.p.ht/
Приступим:
1. Заходим в файл стилей style.css – для этого входим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл style.css.
После в самый низ файла style.css вставим следующий код:
.add_comment {
display:block;
width:30px;
height:150px;
position:fixed;
left:0;
top:200px;
z-index: 99999;
}
Где:
width:30px; – ширина кнопки.
height:150px; – высота кнопки.
left:0; – отступ слева, если вы поменяете данную строчку на right:0; – то кнопка будет располагаться справа, также можно указать отступ в пикселях, например: left:20px;
top:200px; – верхний отступ.
z-index: 99999; – задает расположение элемента поверх всех остальных, например у картинки шапки в теме Twenty Eleven данный параметр имеет значение 9999 и если ваша кнопка будет иметь значение ниже данного параметра, то она будет располагаться под ней.
Также можно добавить строчку:
background:#2B96C6; – она задает фон кнопки, можно задать как цвет, так и картинку.
2. Заходим в файл header.php – – для этого входим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл header.php.
В нем сразу после тега body вставляем вывод нашей кнопки:
<a href="ссылка на открываемую страничку" class="add_comment">Текст кнопки</a>
Как видите это код обычной ссылки, только для нее задан особый класс –
class=”add_comment”, стиль оформления которого мы прописали в пункте 1 данной статьи.
3.Чтобы придать дизайн кнопке, нужно создать для нее изображение.
Можно скачать кнопку в интернете и подкорректировать ее в Photoshope (или другом графическом редакторе), как я и сделал для данной кнопки, незабываем, что размер кнопки мы задаем в файле стилей style.css (пункт 1 данной статьи), в данном примере она имеет размеры: 30*150 px, следовательно и изображение для кнопки должно быть 30*150 px.
У меня получилось следующее изображение:
Можете скачать ее и попробовать вставить ее к себе на сайт или на тестовый сайт на каком-нибудь бесплатном хостинге (я так пользуюсь hostinger.ru).
Теперь давайте привяжем данное изображение к кнопке, для этого изменим код вывода кнопки, который я предлагал в пункте 2 данной статьи, на следующий:
<a href="ссылка на открываемую страничку" class="add_comment"><img alt="buttons" src="https://mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>
Вот и готова наша кнопочка, осталось только добавить ссылку на нужную нам страничку, например так:
<a href="https://mnogoblog.ru/ob-avtore" class="add_comment"><img alt="buttons" src="https://mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>
Все готово!
PS: Как сделать, чтобы кнопка была не видна на конкретной страничке.
В файл header.php нужно прописать следующее.
В данном примере, кнопка будет не видна на записи с id=1 – как посмотреть какой id у записи? – достаточно в панели управления wordpress зайти в пункт “Записи”, подпункт “Все записи”, открыть в Редакторе нужную запись и в адресной строке браузера у вас отобразиться id записи, например, если в адресной строке видим следующее “https://mnogoblog.ru/wp-admin/post.php?post=1&action=edit”, соответственно id странички равен 1.
<?php
if(is_single(1)) {
// если запись имеет ID=1
include 'single-290.php';
} else {
?>
<a href="https://mnogoblog.ru/ob-avtore" class="add_comment"><img alt="buttons" src="https://mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>
<?php } ?>
Спасибо, очень понятная инструкция. А главное, полученная кнопка очень легко настраивается.
Спасибо, Константин! Хорошая статья с подробным описанием установки кнопок! Успехов Вам!
Константин! Так что, кнопочка только одна? А вот мне надо на главной странице сделать 5-7 таких кнопок. Куда всё это громоздить? Что – можно просто последовательно дать данные по каждой?
И вопрос по размерам. Мне очень не нравятся в Twenty Eleven большие поля и интервалы.
Могу ли я своей картинками-кнопками размерами с тот же заголовок, что-то около 1000 на 300 пикселей, перекрыть-заслонить основное поле, где располагаются записи с щедрыми «пазухами», где одиноко торчат строчки «дата», «комменты»?.. Или эти кнопки могут располагаться только на полях, ибо станут перекрывать другие страницы?
К слову, тема Twenty Eleven отличная, но НЕ ПОДСКАЖЕТЕ, как бы мне сразу на главной подать 7-8 картинок-афиш, какие я с нужным качеством делаю в «Фотошопе», с крохотным интервалом, чтобы заставить сполна работать площадь монитора при открытии, без прокруток, как одну броскую афишу, плакат с анонсами. Работая в такой связке с «Фотошопом», где сейчас можно применять почти все достижения вёрстки текста и картинок (разные шрифты, их размеры, рамки, эффекты…), тем самым достигая так желанную мне рациональность по использованию площади «первого кадра» своего сайта. Зашёл и всё работает: ёмкий заголовок, меню, каскад из 7-8 картинок-кнопок, интригующих и зовущих «читать далее», боковая колонка, где строчки-ссылки сделаны неплохо.
Сайт ваш понравился, всё чётко, внятно, без высокомерия «узкого профи», говорящего по-аглицки с могучим тамбовским акцентом. Всех вам благ!
Огромное спасибо! никогда не оставлял комменты.. но за это просто высшая похвала!! я 2 ночи просидел в поисках ответа! а тут все понятно для младенцев…. 2 минуты и готово! я аж подпрыгнул!
всех благ!
Огромное спасибо! Забякал себе кнопочку для перехода на скрытую страничку
Спасибо за статью! Вы очень помогли мне разобраться с этой загадочной кнопкой. В Вашем исполнении она оказалась совсем не загадочная. :) И это здорово. Далеко не каждый в состоянии так понятно объяснять неграмотным людям, как и что нужно сделать. Еще раз – большое спасибо!
Огромное Вам спасибо, Константин, за столь понятное объяснение как вставить боковую кнопку на страничку. Вы пишите очень полезные стаьи. Успехов и развития Вашему сайту!! Подпишусь на Ваши статьи)
Поучительная статья.. правда не до конца я разобрался в коде с расположением кнопки…
Спасибо за кнопку! С вашей помощью все оказалось проще, чем я думала.
Спасибо за статью!
Как теперь сделать, что бы эта кнопка не появлялась на той странице на которую ведет, а на всех остальных появлялась.
Дмитрий, ответил на ваш вопрос в конце статьи – в PS!
Спасибо за вопрос!
Спасибо за доступную инструкцию. Подскажите, а если есть необходимость добавить плавающую кнопку только на конкретные страницы – например, в описаниях конкретных товаров “Вернуться в каталог”? Как можно поступить в этом случае?