Как добавить кнопку WhatsApp на WordPress

В репозитории плагинов WordPress существует большое количество решений, которые реализуют кнопку WhatsApp на WordPress. Подборку таких плагинов рассмотрим в следующих статьях. В этой статье мы реализуем плавающую кнопку WhatsApp без плагинов. Можно выделить несколько преимуществ такого подхода:

1. Бесплатное решение.
2. Полная кастомизация дизайна.
3. Простая реализация без лишней функциональной нагрузки.

Перед тем как приступить к реализации, рассмотрим, что в итоге у нас получится. Это будет плавающая кнопка с логотипом WhatsApp, при нажатии будет переходить на сайт ватсап или приложение (на смартфонах). Сделаем шаблон письма, которое автоматически будет добавлено в поле сообщения. Для привлечения внимания к кнопке, добавим ей анимацию. Пример кнопки вы видите прямо на этой странице в правом нижнем углу экрана ↘️

Что понадобится?

1. Редактор кода
2. FTP-доступ к файлам сайта
3. Начальные знания 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-клиенте.

1. CSS добавляется в файл стилей шаблона. Обычно это style.css в корневой папке шаблона или дополнительные файлы в папках assets или css.
2. PHP код добавляем в файл functions.php

После сохранения файлов, можно зайти на сайт и проверить.

• Готово! Теперь у вас есть кнопка для быстрой связи в WhatsApp.