Как создать красивую кнопку призыв к действию

Автор:
Nurlan Kemelbekov

Текстовые ссылки на страницах WordPress блога это неплохо, но чтобы по-настоящему выделить то, что читатели должны сделать после прочтения статьи, необходим призыв к действию — то есть, элемент предназначенный помочь читателю сделать следующий шаг (или действие).
Я просмотрел Интернет и нашел то, что искал, и это был Chris Coyier, который подтолкнул меня на верный путь. Для того, чтобы создать красивую кнопку  призыв к действию после прочтения статьи, нужно сделать следующее:

Создайте шорткод.
Прежде всего, мы собираемся создать шорткод, с несколькими переменными. Скопируйте следующий код в ваш плагин функциональности или functions.php файл сайта:

function action_button_shortcode( $atts ) {
extract( shortcode_atts(
array(
'title' => 'Title',
'subtitle' => 'Subtitle',
'url' => ''
),
$atts
));
return '<span class="action-button blue-button"><a href="' . $url . '">' . $title . '<span class="subtitle">' . $subtitle . '</span>' . '</a></span>';
}

add_shortcode( 'action-button', 'action_button_shortcode' );

Это создает шорткод с тремя переменными: заголовок, подзаголовок и URL назначения. Вот и все, что нужно сделать в этой части.

Стиль кнопки
Теперь мы собираемся задать некоторые стили для кнопки, чтобы заставить его выглядеть действительно шикарным. Я скопировал этот стиль непосредственно с оригинала учебника, но вы всегда можете настроить цвета, чтобы соответствовать дизайну вашего сайта. Вставьте этот код в нижней части файла style.css.

.action-button a:link, .action-button a:visited {
border-radius: 5px;
display: inline-block;
font: 700 16px Arial, Sans-Serif;
margin: 0 10px 20px 0;
-moz-border-radius: 5px;
padding: 14px 18px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
text-transform: uppercase;
-webkit-border-radius: 5px;
}

.action-button .subtitle {
display: block;
font: 400 11px Arial, Sans-Serif;
margin: 5px 0 0;
}

.blue-button a:link, .blue-button a:visited {
background-color: #5E9CB9;
background-image: -moz-linear-gradient(top, #5E9CB9, #4E7E95);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5E9CB9), to(#4E7E95));
color: #FFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5E9CB9', EndColorStr='#4E7E95')";
}

.blue-button a:hover {
background-color: #68A9C8;
background-image: -moz-linear-gradient(top, #68A9C8, #598EA8);
background-image: -webkit-gradient(linear, left top, left bottom, from(#68A9C8), to(#598EA8));
color: #FFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#68A9C8', EndColorStr='#598EA8')";
}

Сохраните этот файл и теперь мы готовы испытать его в действии.

Использование шорткода
При редактировании следующего поста, вы можете вставить кнопку призыв к действию с помощью короткого кода, как показано ниже:

[ action-button title=» Подписаться на Maks-1.com» subtitle=»Подпишитесь на наш RSS канал» url=»http://www.feedburner.com/feed» ]
И когда вы используете этот код, он будет выглядеть примерно так:
[action-button title=» Подписаться на Maks-1.com» subtitle=»Подпишитесь на наш RSS канал» url=»http://feeds.feedburner.com/maks-1/NbVr»]
Привлекает внимание, не так ли?  Теперь вы можете взять это и сделать кнопку призыва к действию самостоятельно согласно вашим собственным потребностям.

Кстати, кнопка призыв к действию, которую Вы видите выше, не фикция, а вполне рабочая ссылка и Вы могли бы действительно подписаться на RSS блога maks-1.com.




Вам также может понравиться:


Добавить комментарий

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

* Copy This Password *

* Type Or Paste Password Here *

три × пять =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!