![Кнопки "Поделиться" для мобильной версии сайта](https://hoboweb.ru/wp-content/uploads/2024/05/sharebutton-min.jpg)
В этой заметке покажу, как установить «липкие» кнопки «Поделиться» для мобильной версии сайта. Буду использовать HTML и CSS.
Для начала создаю в папке с рабочей темой сайта файл с названием mobile-floating-share-buttons.php. Содержимое этого файла должно быть таким:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="mobile-floating-share-buttons"> <a href="https://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow noindex"> <img src="https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-facebook-square1-256.png" alt="Facebook"> </a> <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow noindex"> <img src="https://cdn2.iconfinder.com/data/icons/2018-social-media-app-logos/1000/2018_social_media_popular_app_logo_twitter-256.png" alt="Twitter"> </a> <a href="https://vk.com/share.php?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow noindex"> <img src="https://cdn2.iconfinder.com/data/icons/2018-social-media-app-logos/1000/2018_social_media_popular_app_logo_vkontakte-256.png" alt="VK"> </a> <a href="https://connect.ok.ru/offer?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow noindex"> <img src="https://cdn3.iconfinder.com/data/icons/social-media-2169/24/social_media_social_media_logo_Odnoklassniki-256.png" alt="Odnoklassniki"> </a> <a href="whatsapp://send?text=<?php echo urlencode(get_the_title() . ' ' . get_permalink()); ?>" target="_blank" rel="nofollow noindex"> <img src="https://cdn3.iconfinder.com/data/icons/cute-flat-social-media-icons-3/512/whatsapp.png" alt="WhatsApp"> </a> <a href="tg://msg_url?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank" rel="nofollow noindex"> <img src="https://cdn-icons-png.flaticon.com/128/124/124019.png" alt="Telegram"> </a> <a href="viber://forward?text=<?php echo urlencode(get_the_title() . ' ' . get_permalink()); ?>" target="_blank" rel="nofollow noindex"> <img src="https://cdn3.iconfinder.com/data/icons/social-media-special/256/viber-256.png" alt="Viber"> </a> </div> |
Теперь подключаю этот файл, вставив в functions.php вот такой код:
1 2 3 4 5 |
function add_floating_share_buttons_mob() { include 'mobile-floating-share-buttons.php'; } add_action('wp_footer', 'add_floating_share_buttons_mob'); |
Далее, будет замечательно, если добавим к кнопкам стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.mobile-floating-share-buttons { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); z-index: 9999; } .mobile-floating-share-buttons a { margin: 5px; /*следующие 2 строки я добавил щас*/ width: 42px; height: 42px; } .mobile-floating-share-buttons img { width: 41px; height: 41px; } |
Чтобы адаптировать кнопки поделиться для мобильных устройств, использую медиа-запросы CSS. Например, можно добавить следующий код в конец файла стилей:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@media screen and (max-width: 767px) { .mobile-floating-share-buttons { display: flex; flex-wrap: wrap; justify-content: center; } .mobile-floating-share-buttons a { margin: 5px; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } .mobile-floating-share-buttons img { max-width: 100%; max-height: 100%; } } |
Этот код применяет стили к элементам с классом mobile-floating-share-buttons только на устройствах с шириной экрана до 767 пикселей. Он устанавливает свойство display в flex для контейнера кнопок, добавляет отступы и выравнивание для каждой кнопки. Кроме того, устанавливает максимальную ширину и высоту для изображений, чтобы они не выходили за пределы кнопок.
Благодаря этому, при просмотре мобильной версии сайта, посетители всегда будут видеть кнопки «Поделиться» в верхней части экрана мобильных устройств. Ранее для этого я использовал сторонний сервис, который с некоторых пор перестал работать в России.
Всем WEB!