Создание сайта от А до Я. Книга 4 - стр. 2

Находим плагин

Яндекс. Поделиться: https://wordpress.org/plugins/yandex-share/

Устанавливаем. Активируем.

Консоль/Настройки/Яндекс поделиться.

Добавляем иконки.

Тут же жмём Внешний вид/Иконки/Счётчик.

Сохранить.

В результате внизу каждой страницы имеем набор кнопок.

Однако, в Яндекс. Поделиться нет настроек размера иконок, что не всегда удобно для соблюдения условий адаптивности к различным устройствам.

Как увеличить кнопки Поделиться от Яндекса?

https://dolinacoda.ru/kak-uvelichit-knopki-podelitsya-ot-yandeksa/

Чтобы изменить размер кнопок, нужно понять, какой css класс отвечает за это. Кликаем по любой иконке правой кнопкой и нажимаем Исследовать элемент.

Видим в коде, что за размер иконок отвечает класс ya-share2__icon.

В других версиях темы класс может быть другим, например, у автора книги – это класс b-share-icon

service=«vkontakte»> b-share-icon b-share-icon_vkontakte»> 1  

Соответственно в кодах ниже ставим свой класс.

Как теперь изменить размер кнопок?

– Открываем Консоль/Внешний вид/Редактор/главный 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 можно как угодно перемещать, позиционировать, увеличивать и крутить кнопки от Яндекса, адаптировав их под ваш конкретный сайт.