Добавление иконок соцсетей на WordPress сайт
Добавить иконки соцсетей на WordPress сайт можно с помощью обычного виджета Text. Находим в кастомайзере виджет Text и добавляем его в первую колонку подвала сайта. Для вывода иконок соцсетей не стоит ставить дополнительный плагин. Поскольку данная задача решается просто. Вернее есть два варианта решения - совсем без кода и с минимальным кодом.
Вывод иконок в виде изображений
Вы находите изображения иконок соцсетей где-нибудь в Yandex или Google картинках и добавляете на сайт, как обычные картинки. Мне нравится брать иконки с сайта:
https://www.flaticon.com/
Находим через поиск иконки нужных соцсетей, выбираем размер (при необходимости редактируем цвет) и скачиваем их в формате PNG.
Загружаем иконки через Add media.
Чтобы иконки выстроились в строку, необходимо выделить каждую иконку и задать для нее обтекание слева.
Далее привязываем URL адреса ваших соцсетей к определенным иконкам. Кликаем по иконке и на панели с инструментами выбираем иконку карандашика.
Вы попадаете на страницу редактирования иконки. В поле Link To выбираем Custom URL и вставляем URL адрес вашей страницы в социальной сети. На всякий случай зададим для иконок CSS класс, возможно нам потребуется дополнительная стилизация иконок. По аналогии поступаем таким же образом и с остальными изображениями.
Наши кнопки соцсетей появилисьсь на сайте.
Вывод иконок через иконочный шрифт FontAwesome
Этот вариант немного сложнее и потребует от вас минимальных навыков работы с кодом. Раз нам предстоит писать HTML код, то добавлять нужно Custom HTML виджет.
Библиотека FontAwesome уже по умолчанию подключена к WordPress. Поэтому мы сразу переходим на сайт с иконочными шрифтами и забираем оттуда код иконок. Находим через поиск иконку фейсбука, выбираем желаемую форму (мне нравятся квадратные) и копируем код.
К полученному коду добавляем размер иконки, если вы хотите размер больше, чем дефолтный. Коды иконок остальных соцсетей можно не искать, а просто заменить слово facebook на другие соцсети.
<i class="fab fa-facebook-square fa-2x"></i>
<i class="fab fa-pinterest-square fa-2x"></i>
<i class="fab fa-twitter-square fa-2x"></i>
Далее оборачиваем теги i в ссылки, ведущие на ваши страницы соцсетей и вставляем этот блок кода в подготовленный виджет.
<a href="https://facebook.com/URL/"><i class="fab fa-facebook-square fa-2x"></i></a>
<a href="https://www.pinterest.com/URL/"><i class="fab fa-pinterest-square fa-2x"></i></a>
<a href="https://www.twitter.com/URL/"><i class="fab fa-twitter-square fa-2x"></i></a>
На этом все. Иконки вывелись на сайт. У последнего варианта добавления иконок есть ряд преимуществ. Во-первых, каждое обращение к базе данных для загрузки медиа - сколько-то замедляет работу сайта. Во-вторых, изменить форму, цвет или размер иконки намного проще через готовые классы FontAwesome, просто открыв для этого кастомайзер.
-
Создано 28.12.2020 10:46:21
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.