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

Автор: Алексей Комаров | Опубликовано: 20.12.2025

Добавление иконок социальных сетей на сайт WordPress — частая задача, которая помогает улучшить взаимодействие с пользователями и повысить вовлечённость. Многие используют готовые плагины, но иногда нужно легкое и гибкое решение без лишних зависимостей. В этой статье мы разберем, как добавить иконки социальных сетей в WordPress с помощью чистого кода, а также рассмотрим несколько полезных примеров и практических советов.

Почему стоит добавлять иконки социальных сетей вручную?

Использование готовых плагинов — удобно, но часто они нагружают сайт лишним кодом и стилями. Самостоятельная реализация:

Оптимизирует загрузку страниц, поскольку вы добавляете только необходимый код.
Позволяет легко кастомизировать внешний вид и поведение иконок.
Избавляет от риска конфликтов с другими плагинами и темами.
Даёт полный контроль над выводом и позицией иконок.

Для сайта wpicons.ru, который специализируется на иконках и графических элементах WordPress, такой подход особенно актуален и полезен.

Подготовка иконок социальных сетей: SVG или шрифты?

Для вывода иконок социальных сетей в WordPress обычно используют два варианта:

SVG иконки

SVG — отличный выбор для качественной иконографии. Они масштабируются без потери качества, легко стилизуются через CSS и не требуют загрузки дополнительных ресурсов с внешних сервисов. Вы можете хранить SVG прямо в теме или подключать из файлов.

Иконки из шрифтов (например, Font Awesome)

Шрифтовые иконки проще использовать, если вы хотите быстро добавить много иконок с готовыми стилями. Однако они требуют подключения шрифтов и могут влиять на скорость загрузки.

В нашем примере мы будем использовать SVG, чтобы иметь максимальную гибкость.

Добавляем иконки социальных сетей в меню WordPress с помощью кода

Одним из популярных мест для вывода иконок является меню сайта. Рассмотрим, как добавить иконки социальных сетей в кастомное меню WordPress с помощью функций темы.

Шаг 1. Добавляем функцию вывода иконок

Создайте функцию wpicons_add_social_icons, которая будет выводить иконки с ссылками на соцсети. Код помещаем в файл functions.php вашей темы:

function wpicons_add_social_icons() {
    $social_links = [
        'facebook' => 'https://facebook.com/yourpage',
        'twitter' => 'https://twitter.com/yourprofile',
        'instagram' => 'https://instagram.com/yourprofile',
        'linkedin' => 'https://linkedin.com/in/yourprofile'
    ];

    $icons_svg = [
        'facebook' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 8H7v4h2v12h5V12h3.642l.358-4H14V6.5c0-.966.784-1.5 1.5-1.5H17V1h-3c-3.309 0-5 1.791-5 5.5V8z" fill="#1877F2"/></svg>',
        'twitter' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23 3a10.9 10.9 0 01-3.14.86A4.48 4.48 0 0022.4.36a9.07 9.07 0 01-2.88 1.1A4.52 4.52 0 0016.67 0c-2.5 0-4.5 2-4.5 4.5 0 .35.04.7.1 1.03A12.8 12.8 0 013 1.67a4.48 4.48 0 001.4 6A4.52 4.52 0 012 6.7v.06c0 2.28 1.62 4.18 3.77 4.6a4.52 4.52 0 01-2.03.08 4.53 4.53 0 004.22 3.14A9.06 9.06 0 012 19.13a12.8 12.8 0 006.92 2.03c8.3 0 12.85-6.87 12.85-12.83 0-.2 0-.4-.02-.59A9.22 9.22 0 0023 3z" fill="#1DA1F2"/></svg>',
        'instagram' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 2C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h10c2.757 0 5-2.243 5-5V7c0-2.757-2.243-5-5-5H7zm5 3a5 5 0 110 10 5 5 0 010-10zm6.5-.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" stroke="#C13584" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
        'linkedin' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.98 3.5A2.5 2.5 0 002.5 6v12a2.5 2.5 0 002.48 2.5h14.04a2.5 2.5 0 002.48-2.5V6a2.5 2.5 0 00-2.48-2.5H4.98zm.02 4.5h3v9h-3v-9zm1.5-2a1.5 1.5 0 11-.001 3.001A1.5 1.5 0 016.5 6zM14 8c-1.254 0-1.877.688-2.206 1.172V8h-3v9h3v-5c0-.633.237-1.172 1.172-1.172.934 0 1.215.824 1.215 1.106v5.066h3v-5.5c0-2.633-1.402-3.5-3.381-3.5z" fill="#0A66C2"/></svg>'
    ];

    echo '<div class="wpicons-social-icons">';
    foreach ($social_links as $key => $url) {
        echo '<a href="' . esc_url($url) . '" target="_blank" rel="noopener noreferrer" class="wpicons-icon wpicons-icon-' . esc_attr($key) . '" aria-label="' . esc_attr(ucfirst($key)) . '">' . $icons_svg[$key] . '</a>';
    }
    echo '</div>';
}

Шаг 2. Выводим иконки в нужном месте

В шаблоне вашей темы (например, header.php или footer.php) добавьте вызов функции там, где хотите видеть иконки соцсетей:

<?php wpicons_add_social_icons(); ?>

Если нужно вывести иконки в меню, можно добавить фильтр wp_nav_menu_items и дописать иконки в конец или начало меню:

function wpicons_add_icons_to_menu($items, $args) {
    if ($args->theme_location == 'primary') { // замените на вашу локацию меню
        ob_start();
        wpicons_add_social_icons();
        $items .= ob_get_clean();
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'wpicons_add_icons_to_menu', 10, 2);

Стилизация иконок социальных сетей

Чтобы иконки выглядели аккуратно и гармонично, добавим базовые стили. В файл стилей вашей темы (style.css) добавьте:

.wpicons-social-icons {
    display: flex;
    gap: 15px;
    align-items: center;
}
.wpicons-social-icons a {
    display: inline-block;
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}
.wpicons-social-icons a:hover {
    transform: scale(1.2);
}
.wpicons-social-icons svg path {
    transition: fill 0.3s ease;
}
.wpicons-social-icons a:hover svg path {
    fill-opacity: 0.7;
}

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

Добавляем возможность настройки ссылок соцсетей из админки

Чтобы сделать решение более гибким, добавим в настройки темы поле для ввода URL социальных сетей. Для этого используем Customizer API.

Регистрация настроек в functions.php

function wpicons_customize_register($wp_customize) {
    $social_networks = ['facebook', 'twitter', 'instagram', 'linkedin'];

    $wp_customize->add_section('wpicons_social_section', [
        'title' => 'Социальные сети',
        'priority' => 30
    ]);

    foreach ($social_networks as $network) {
        $wp_customize->add_setting('wpicons_social_' . $network, [
            'default' => '',
            'sanitize_callback' => 'esc_url_raw'
        ]);

        $wp_customize->add_control('wpicons_social_' . $network, [
            'label' => ucfirst($network) . ' URL',
            'section' => 'wpicons_social_section',
            'type' => 'url'
        ]);
    }
}
add_action('customize_register', 'wpicons_customize_register');

Используем настройки в функции вывода иконок

function wpicons_add_social_icons() {
    $social_networks = ['facebook', 'twitter', 'instagram', 'linkedin'];
    $icons_svg = [ /* SVG код как выше */ ];

    echo '<div class="wpicons-social-icons">';
    foreach ($social_networks as $network) {
        $url = get_theme_mod('wpicons_social_' . $network);
        if ($url) {
            echo '<a href="' . esc_url($url) . '" target="_blank" rel="noopener noreferrer" class="wpicons-icon wpicons-icon-' . esc_attr($network) . '" aria-label="' . esc_attr(ucfirst($network)) . '">' . $icons_svg[$network] . '</a>';
        }
    }
    echo '</div>';
}

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

Использование плагинов для расширения возможностей

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

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

Вывод

Добавление иконок социальных сетей вручную — простой и гибкий способ повысить удобство сайта и его визуальную привлекательность. Используя SVG и кастомайзер, вы получаете легкую, быструю и настраиваемую систему, которая отлично вписывается в любую тему WordPress.