Как добавить круглые иконки социальных сетей в WordPress с помощью CSS и плагинов

Автор: Ксения Новикова | Опубликовано: 15.04.2026

Социальные сети — важный канал взаимодействия с аудиторией на любом сайте, включая WordPress. Чтобы сделать блок с иконками соцсетей более привлекательным и современным, часто используют круглую форму иконок. В этой статье подробно разберём, как добавить круглые иконки социальных сетей на сайт WordPress с помощью нескольких методов: через CSS, готовые плагины и кастомный код. Также рассмотрим, как сделать иконки адаптивными и добавлять эффекты наведения.

Почему важны круглые иконки социальных сетей

Круглые иконки выглядят аккуратно и современно, они хорошо вписываются в дизайн большинства сайтов. Такая форма помогает визуально выделить кнопки социальных сетей, делая их более заметными для посетителей.

Кроме того, круглые иконки легче адаптировать под разные стили и темы WordPress, а также под разные размеры экранов — мобильные, планшеты и десктопы. Это повышает удобство использования сайта и способствует большему вовлечению пользователей.

Метод 1: Добавляем круглые иконки с помощью CSS на стандартные ссылки

Если у вас уже есть блок с иконками соцсетей в виде ссылок с изображениями или шрифтами иконок (например, Font Awesome), то можно добавить стиль, который сделает их круглыми. Предположим, что ваши иконки находятся в контейнере с классом .wpmark-social-icons.

CSS для круглых иконок

.wpmark-social-icons a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%; /* Делает иконки круглыми */
    text-align: center;
    background-color: #3b5998; /* Пример цвета для Facebook */
    color: #fff;
    margin: 0 5px;
    transition: background-color 0.3s ease;
}

.wpmark-social-icons a:hover {
    background-color: #2d4373;
}

В этом примере иконка будет квадратной 40x40 пикселей, с закруглением до круга. Вы можете менять background-color под нужные соцсети, либо использовать отдельные классы для каждой.

Пример HTML

<div class="wpmark-social-icons">
    <a href="https://facebook.com/ваш_аккаунт" class="facebook" target="_blank"><i class="fab fa-facebook-f"></i></a>
    <a href="https://twitter.com/ваш_аккаунт" class="twitter" target="_blank"><i class="fab fa-twitter"></i></a>
    <a href="https://instagram.com/ваш_аккаунт" class="instagram" target="_blank"><i class="fab fa-instagram"></i></a>
</div>

Для работы иконок понадобится подключить библиотеку Font Awesome (например, через wp_enqueue_style в functions.php), либо использовать SVG иконки.

Метод 2: Использование плагина WP Social Icons с поддержкой круглых иконок

Одним из удобных решений является плагин WP Social Icons от WPSHOP. Он позволяет быстро добавить иконки соцсетей с разными стилями, включая круглые иконки.

После установки и активации плагина:

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

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

Метод 3: Создание собственного плагина для круглых иконок социальных сетей в WordPress

Если вы хотите полный контроль и минимализм, можно написать небольшой плагин, который добавит на сайт круглые иконки соцсетей с кастомным CSS и шорткодом.

Пример кода плагина

<?php
/**
 * Plugin Name: WPMark Круглые Иконки Соцсетей
 * Description: Добавляет шорткод [wpmark_social_icons] для вывода круглых иконок соцсетей
 * Version: 1.0
 * Author: WPMark
 */

// Регистрируем шорткод
function wpmark_social_icons_shortcode() {
    $icons = [
        'facebook'  => 'https://facebook.com/ваш_аккаунт',
        'twitter'   => 'https://twitter.com/ваш_аккаунт',
        'instagram' => 'https://instagram.com/ваш_аккаунт',
    ];

    $output = '<div class="wpmark-social-icons">';
    foreach ($icons as $key => $url) {
        $output .= '<a href="'.esc_url($url).'" class="'.$key.'" target="_blank" rel="noopener">';
        $output .= '<i class="fab fa-'.$key.'"></i>';
        $output .= '</a>';
    }
    $output .= '</div>';

    return $output;
}
add_shortcode('wpmark_social_icons', 'wpmark_social_icons_shortcode');

// Добавляем CSS стили
function wpmark_social_icons_styles() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
    wp_add_inline_style('font-awesome', ".wpmark-social-icons a { display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; text-align: center; background-color: #3b5998; color: #fff; margin: 0 5px; transition: background-color 0.3s ease; } .wpmark-social-icons a:hover { background-color: #2d4373; } .wpmark-social-icons a.twitter { background-color: #1da1f2; } .wpmark-social-icons a.twitter:hover { background-color: #0d95e8; } .wpmark-social-icons a.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .wpmark-social-icons a.instagram:hover { opacity: 0.8; }");
}
add_action('wp_enqueue_scripts', 'wpmark_social_icons_styles');
?>

Этот код создаёт шорткод [wpmark_social_icons], который выводит три круглые иконки с цветами соцсетей и плавным изменением цвета при наведении.

Дополнительные советы по улучшению иконок соцсетей

Анимация и эффекты наведения

Для привлечения внимания можно добавить CSS-анимации при наведении, например, увеличение, вращение или смену цвета. Это делается с помощью transform и transition.

.wpmark-social-icons a:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

Адаптивность

Убедитесь, что иконки хорошо смотрятся на мобильных устройствах. Для этого можно использовать медиа-запросы:

@media (max-width: 480px) {
    .wpmark-social-icons a {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 0 3px;
    }
}

Оптимизация загрузки

Если вы используете библиотеку Font Awesome только для иконок соцсетей, можно подключить минимальный набор иконок или использовать SVG-спрайты. Это ускорит загрузку сайта и снизит нагрузку.

Заключение

Добавление круглых иконок социальных сетей на WordPress-сайт — несложная задача, которую можно решить разными способами: от простого CSS до создания собственного плагина. Если вы хотите быстро и без кода, используйте проверенные плагины, например WP Social Icons. Для более гибкой настройки отлично подходит написание собственного кода с использованием шорткодов и стилей.