http://n-wp.ru/22680 (http://n-wp.ru/22680)
Плагин Яндекс. Поделиться позволяет выбрать необходимые вам кнопки социальных сервисов и оформление блока. Наиболее интересным представляется вид блока кнопок в виде счётчика – на кнопках отображается количество человек, отправивших ссылку на просматриваемую страницу, в разные социальные сервисы.
Находим плагин
Яндекс. Поделиться: https://wordpress.org/plugins/yandex-share/ (https://wordpress.org/plugins/yandex-share/)
Устанавливаем. Активируем.
Консоль/Настройки/Яндекс поделиться.
Добавляем иконки.
Тут же жмём Внешний вид/Иконки/Счётчик.
Сохранить.
В результате внизу каждой страницы имеем набор кнопок.
Однако, в Яндекс. Поделиться нет настроек размера иконок, что не всегда удобно для соблюдения условий адаптивности к различным устройствам.
Как увеличить кнопки Поделиться от Яндекса?
https://dolinacoda.ru/kak-uvelichit-knopki-podelitsya-ot-yandeksa/ (https://dolinacoda.ru/kak-uvelichit-knopki-podelitsya-ot-yandeksa/)
Чтобы изменить размер кнопок, нужно понять, какой css класс отвечает за это. Кликаем по любой иконке правой кнопкой и нажимаем Исследовать элемент.
Видим в коде, что за размер иконок отвечает класс ya-share2__icon.
В других версиях темы класс может быть другим, например, у автора книги – это класс b-share-icon
service=«vkontakte»> <span class=«b-share-icon b-share-icon_vkontakte»> </span> <span class=«b-share-counter»> 1 </span> </a>
Соответственно в кодах ниже ставим свой класс.
Как теперь изменить размер кнопок?
– Открываем Консоль/Внешний вид/Редактор/главный css-файл вашего сайта, обычно называется style. css или main. css.
– Вставляем туда сразу после вступительного комментария такой код:
– ya-share2__icon {
– width: Npx! important;
– height: Npx! important;
– background-size: Npx Npx! important;
– }
Все N нужно заменить на числа – сколько именно пикселей размером вы хотите сделать иконки. По умолчанию средние иконки от Яндекса имеют ширину 24 пикселя и такую же высоту, а размер фона 24?24. Как видите, все 4 значения должны быть одинаковыми, если вы хотите сохранить иконки в их текущем виде.
Ключевое слово! important нужно для того, чтобы точно перебить стили, поставленные по умолчанию. Теперь пробую сделать большие иконки:
ya-share2__icon {
width: 36px! important;
height: 36px! important;
background-size: 36px 36px! important;
}
Кнопки у вас должны получиться большихразмеров.
Другие манипуляции
Если иконки со счетчиками, то вам также придется увеличивать размер шрифта числа в счетчике. Делается это так же – исследуем блок, определяем, какой класс отвечает за размер шрифта и переопределяем для него стили.
ya-share2__counter {
font-size: 18px! important;
line-height: 36px! important;
}
Вот, изначальные значения были 12 пикселей (размер шрифта) и 24 пикселя (высота строки). Мы их увеличили пропорционально иконкам.
Заодно покажем, как добавить кнопкам отступы.
ya-share2 {margin: 20px 0;}
ya-share2 это как раз общий контейнер для кнопок. Отступы будут добавлены сверху и снизу по 20 пикселей. А вообще, как вы поняли, зная css можно как угодно перемещать, позиционировать, увеличивать и крутить кнопки от Яндекса, адаптировав их под ваш конкретный сайт.
Ну а если вам вообще нужен полностью уникальный дизайн ваших соц. кнопок, можете почитать эту статью https://dolinacoda.ru/kak-dobavit-na-sajt-knopki-sotsialnyh-setej/ (https://dolinacoda.ru/kak-dobavit-na-sajt-knopki-sotsialnyh-setej/) там написано про один из сервисов, который предлагает такую возможность.
Примечание: Иногда, чтобы увеличить кнопки, достаточно ввести код:
.b-share-icon {margin: 36px 50px;}
Получился вот такой результат:
Сервис Share42. Установки кнопок социальных сетей:
В этом варианте кнопки социальных сетей мы будем создавать с помощью сервиса Share42
