В репозитории плагинов WordPress существует большое количество решений, которые реализуют кнопку WhatsApp на WordPress. Подборку таких плагинов рассмотрим в следующих статьях. В этой статье мы реализуем плавающую кнопку WhatsApp без плагинов. Можно выделить несколько преимуществ такого подхода:
- Бесплатное решение.
- Полная кастомизация дизайна.
- Простая реализация без лишней функциональной нагрузки.
Перед тем как приступить к реализации, рассмотрим, что в итоге у нас получится. Это будет плавающая кнопка с логотипом WhatsApp, при нажатии будет переходить на сайт ватсап или приложение (на смартфонах). Сделаем шаблон письма, которое автоматически будет добавлено в поле сообщения. Для привлечения внимания к кнопке, добавим ей анимацию. Пример кнопки вы видите прямо на этой странице в правом нижнем углу экрана ↘️
Что понадобится?
- Редактор кода
- FTP-доступ к файлам сайта
- Начальные знания PHP и умение скопировать и вставить готовый код 😊
Шаг 1.
Ссылка на чат в WhatsApp
Мы воспользуемся функцией WhatsApp «Прямая связь». Она позволяет начать общение с пользователем, даже если его нет в ваших контактах. Чтобы функция заработала, нужно сгенерировать ссылку. Ссылка содержит номер телефона, и, необязательный параметр – текст сообщения. Этот текст будет автоматически вставлен в поле сообщения.
Чтобы получить ссылку, можете воспользоваться генератором:
Шаг 2.
Дизайн кнопки Ватсап
Мы сделаем круглую кнопку с логотипом WhatsApp. Его можно добавить несколькими способами. В нашей реализации будет в формате svg. Также можно использовать иконочный шрифт (FontAwesome, Dashicons или другой), если он подключен к вашему сайту.
Логотип в формате svg можете скачать по ссылке.
Шаг 3.
HTML-код кнопки
Кнопка WhatsApp — это ссылка с адресом, который вы сгенерировали выше.
В зависимости от того, какой вид иконки вы будете использовать, получится разный код.
Если это svg, то необходимо загрузить svg иконку в папку /images
вашей темы (или дочерней темы). Код получится такой:
<a href="https://wa.me/+79171234567" target="_blank" class="whatsapp-sticky" title="Напишите нам в WhatsApp">
<span class="whatsapp-sticky-icon"><?php echo get_stylesheet_directory_uri() . '/images/whatsapp-logo-white.svg' ?></span>
</a>
Если использовать иконку от FontAwesome, получится так:
<a href="https://wa.me/+79171234567" target="_blank" class="whatsapp-sticky" title="Напишите нам в WhatsApp">
<span class="whatsapp-sticky-icon"><i class="fa-brands fa-whatsapp"></i></span>
</a>
Не забудьте заменить https://wa.me/+79171234567
ссылкой, которую сгенерировали выше.
Шаг 4.
CSS стили
Добавляем кнопке стили. Во-первых, она должна плавать по краю экрана, во-вторых, она должна быть адаптивная и хорошо выглядеть на всех экранах. Чтобы привлечь внимание к кнопке, добавим ей анимацию.
.whatsapp-sticky {
position: fixed;
right: 20px;
bottom: 20px;
background-color: #25d466;
height: 60px;
width: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 576px) {
.whatsapp-sticky {
height: 70px;
width: 70px;
right: 40px;
bottom: 40px;
}
}
.whatsapp-sticky:hover {
background-color: #4ce684;
}
.whatsapp-sticky:after,
.whatsapp-sticky:before {
content: "";
position: absolute;
width: calc(100% + 24px);
height: calc(100% + 24px);
background-color: #25d466;
opacity: 0;
border-radius: 50%;
z-index: -1;
transform: scale(0);
animation-name: wave;
animation-duration: 2700ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.whatsapp-sticky:before {
animation-delay: 500ms;
}
.whatsapp-sticky-icon {
height: 50%;
width: 50%;
}
.whatsapp-sticky-icon img {
height: 100%;
width: 100%;
}
@keyframes wave {
0% {
transform: scale(0);
opacity: 0;
}
90% {
opacity: 0.6;
}
100% {
transform: scale(1);
opacity: 0;
}
}
Для мобильной версии (строки 14-21)
немного уменьшили размер кнопки и отступ от краев окна, чтобы кнопка не перекрывала содержимое сайта.
Шаг 5.
PHP-код кнопки
Для добавления кода кнопки на страницы сайта воспользуемся хук-событием wp_footer
. К хуку прикрепим функцию add_whatsapp_sticky_button
.
<?php
add_action('wp_footer', 'add_whatsapp_sticky_button');
function add_whatsapp_sticky_button() { ?>
<a href="https://wa.me/+79171234567" target="_blank" class="whatsapp-sticky" title="Напишите нам в WhatsApp">
<span class="whatsapp-sticky-icon"><img src="<?php echo get_stylesheet_directory_uri() . '/images/whatsapp-logo-white.svg' ?>" /></span>
</a>
<?php }
Данный код сработает только при условии, что функция
wp_footer
вызвана в файле footer.php.
Шаг 6.
Добавляем весь код на сайт
Важно! Если вы регулярно обновляете шаблон, то все манипуляции необходимо проводить в дочерней теме.
У нас есть весь необходимый код, и его нужно добавить в файлы сайта.
Откройте папку с вашей темой в FTP-клиенте.
- CSS добавляется в файл стилей шаблона. Обычно это
style.css
в корневой папке шаблона или дополнительные файлы в папкахassets
илиcss
. - PHP код добавляем в файл
functions.php
После сохранения файлов, можно зайти на сайт и проверить.
- Готово! Теперь у вас есть кнопка для быстрой связи в WhatsApp.