/**
* Плавающие кнопки мессенджеров для WordPress
*/
define('MESSENGER_WHATSAPP_LINK', 'https://wa.me/7777777?text=Здравствуйте. Пишу с сайта domen.ru');
define('MESSENGER_TELEGRAM_LINK', 'tg://resolve?domain=nickname&text=');
define('MESSENGER_MAX_LINK', 'https://max.ru/u/link');
define('MESSENGER_PHONE_NUMBER', '89998887766');
add_action('wp_footer', 'add_messenger_buttons');
function add_messenger_buttons() {
$phone_number = MESSENGER_PHONE_NUMBER;
$phone_link = 'tel:' . preg_replace('/[^0-9+]/', '', $phone_number);
?>
<style>
.messenger-buttons {
position: fixed;
bottom: 60px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
}
.messenger-button {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.2s ease;
cursor: pointer;
text-decoration: none;
position: relative;
}
.messenger-button:hover {
transform: scale(1.05);
}
.messenger-button svg {
width: 28px;
height: 28px;
}
.messenger-button.telegram {
background: #37AEE2;
}
.messenger-button.whatsapp {
background: #25D366;
}
.messenger-button.max {
background: linear-gradient(90deg, #5a8cff -16.1%, #43d6ff 16.36%, #8f3fff 76.63%);
color: white;
}
.messenger-button.max svg {
width: 24px;
height: 24px;
}
.messenger-button.phone {
background: #34b7f1;
}
/* Стили тултипа - только для ширины >= 769px */
@media (min-width: 769px) {
.messenger-button.phone .tooltip {
visibility: hidden;
opacity: 0;
background-color: #1a1a1a;
color: #fff;
text-align: center;
border-radius: 8px;
padding: 8px 16px;
position: absolute;
z-index: 10000;
right: 70px;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
font-weight: 500;
transition: opacity 0.2s ease, visibility 0.2s ease;
pointer-events: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.messenger-button.phone .tooltip::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -6px;
border-width: 6px;
border-style: solid;
border-color: transparent transparent transparent #1a1a1a;
}
.messenger-button.phone.tooltip-active .tooltip {
visibility: visible;
opacity: 1;
}
}
/* На мобильных тултип скрыт полностью */
@media (max-width: 768px) {
.messenger-button.phone .tooltip {
display: none;
}
}
@media (max-width: 768px) {
.messenger-buttons {
bottom: 45px;
right: 15px;
}
.messenger-button {
width: 50px;
height: 50px;
}
.messenger-button svg {
width: 24px;
height: 24px;
}
.messenger-button.max svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 480px) {
.messenger-buttons {
bottom: 30px;
right: 10px;
gap: 8px;
}
}
</style>
<div class="messenger-buttons">
<!-- Телефон -->
<a href="<?php echo esc_attr($phone_link); ?>"
class="messenger-button phone"
data-phone-number="<?php echo esc_attr($phone_number); ?>"
title="Показать номер">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="28" height="28">
<path d="M20 15.5c-1.2 0-2.4-.2-3.6-.6-.3-.1-.7 0-.9.3l-2.2 2.2c-2.8-1.4-5.1-3.8-6.6-6.6l2.2-2.2c.3-.3.4-.7.2-1-.3-1.1-.5-2.3-.5-3.5 0-.6-.4-1-1-1H4c-.6 0-1 .4-1 1 0 9.4 7.6 17 17 17 .6 0 1-.4 1-1v-3.5c0-.6-.4-1-1-1z"/>
</svg>
<span class="tooltip"><?php echo esc_html($phone_number); ?></span>
</a>
<!-- Max -->
<a href="<?php echo esc_attr(MESSENGER_MAX_LINK); ?>"
target="_blank"
rel="noopener noreferrer"
class="messenger-button max"
title="Написать в Max">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" fill="none">
<path fill="currentColor" fill-rule="evenodd" d="M21.47 41.88c-4.11 0-6.02-.6-9.34-3-2.1 2.7-8.75 4.81-9.04 1.2 0-2.71-.6-5-1.28-7.5C1 29.5.08 26.07.08 21.1.08 9.23 9.82.3 21.36.3c11.55 0 20.6 9.37 20.6 20.91a20.6 20.6 0 0 1-20.49 20.67Zm.17-31.32c-5.62-.29-10 3.6-10.97 9.7-.8 5.05.62 11.2 1.83 11.52.58.14 2.04-1.04 2.95-1.95a10.4 10.4 0 0 0 5.08 1.81 10.7 10.7 0 0 0 11.19-9.97 10.7 10.7 0 0 0-10.08-11.1Z" clip-rule="evenodd"></path>
</svg>
</a>
<!-- Telegram -->
<a href="<?php echo esc_attr(MESSENGER_TELEGRAM_LINK); ?>"
target="_blank"
rel="noopener noreferrer"
class="messenger-button telegram"
title="Написать в Telegram">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="28" height="28">
<path fill="#FFFFFF" d="M89.442,11.418c-12.533,5.19-66.27,27.449-81.118,33.516c-9.958,3.886-4.129,7.529-4.129,7.529s8.5,2.914,15.786,5.1c7.286,2.186,11.172-0.243,11.172-0.243l34.244-23.073c12.143-8.257,9.229-1.457,6.315,1.457c-6.315,6.315-16.758,16.272-25.501,24.287c-3.886,3.4-1.943,6.315-0.243,7.772c6.315,5.343,23.558,16.272,24.53,17.001c5.131,3.632,15.223,8.861,16.758-2.186c0,0,6.072-38.13,6.072-38.13c1.943-12.872,3.886-24.773,4.129-28.173C98.185,8.018,89.442,11.418,89.442,11.418z"/>
</svg>
</a>
<!-- WhatsApp -->
<a href="<?php echo esc_url(MESSENGER_WHATSAPP_LINK); ?>"
target="_blank"
rel="noopener noreferrer"
class="messenger-button whatsapp"
title="Написать в WhatsApp">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="28" height="28">
<path d="M16.6 14c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1-.2.2-.6.8-.8 1-.1.2-.3.2-.5.1-.7-.3-1.4-.7-2-1.2-.5-.5-1-1.1-1.4-1.7-.1-.2 0-.4.1-.5.1-.1.2-.3.4-.4.1-.1.2-.3.2-.4.1-.1.1-.3 0-.4-.1-.1-.6-1.3-.8-1.8-.1-.7-.3-.7-.5-.7h-.5c-.2 0-.5.2-.6.3-.6.6-.9 1.3-.9 2.1.1.9.4 1.8 1 2.6 1.1 1.6 2.5 2.9 4.2 3.7.5.2.9.4 1.4.5.5.2 1 .2 1.6.1.7-.1 1.3-.6 1.7-1.2.2-.4.2-.8.1-1.2l-.4-.2m2.5-9.1C15.2 1 8.9 1 5 4.9c-3.2 3.2-3.8 8.1-1.6 12L2 22l5.3-1.4c1.5.8 3.1 1.2 4.7 1.2 5.5 0 9.9-4.4 9.9-9.9.1-2.6-1-5.1-2.8-7m-2.7 14c-1.3.8-2.8 1.3-4.4 1.3-1.5 0-2.9-.4-4.2-1.1l-.3-.2-3.1.8.8-3-.2-.3c-2.4-4-1.2-9 2.7-11.5S16.6 3.7 19 7.5c2.4 3.9 1.3 9-2.6 11.4"/>
</svg>
</a>
</div>
<script>
(function() {
var phoneButton = document.querySelector('.messenger-button.phone');
if (!phoneButton) return;
var isDesktop = window.innerWidth >= 769;
if (isDesktop) {
phoneButton.setAttribute('href', '#');
phoneButton.addEventListener('click', function(e) {
e.preventDefault();
phoneButton.classList.toggle('tooltip-active');
});
document.addEventListener('click', function(e) {
if (!phoneButton.contains(e.target)) {
phoneButton.classList.remove('tooltip-active');
}
});
}
})();
</script>
<?php
}
@seomur
Это сайт с моими заметками по wordpress и woocommerce