Как создать кнопки «Поделиться» в WordPress без плагинов: пошаговый гайд

Почему стоит делать кнопки «Поделиться» вручную

Большинство готовых решений – плагины – удобно, но они добавляют лишний JavaScript, часто вызывают конфликты и замедляют загрузку. Создавая кнопку самостоятельно, вы получаете полный контроль над разметкой, SVG‑иконкой и SEO‑оптимизацией. Кроме того, такой подход упрощает аудит кода и повышает безопасность сайта Обновление WordPress: лучшие практики безопасности и автоматизации.

Подготовка SVG‑иконок

Для максимальной скорости и чистоты разметки используем векторные иконки. Вы можете взять готовые файлы из Font Awesome или создать собственные в Illustrator.

<svg class="share-icon" aria-hidden="true" viewBox="0 0 24 24">
  <path d="M18 2.01h-3c-1.1 0-2 .9-2 2v3c0 .55.45 1 1 1s1-.45 1-1V5h2v13h-2v-3c0-.55-.45-1-1-1s-1 .45-1 1v4c0 1.1.9 2 2 2h3c1.1 0 2-.9 2-2V4.01c0-1.1-.9-2-2-2z"/>
  <path d="M14 12l-1.41-1.41L8.83 14.34l-2.12-2.12L5 13l4 4 5-5z"/>
</svg>

Поместите SVG‑файлы в папку темы assets/svg/ и подключайте их через get_template_directory_uri() или инлайн‑кодом, как выше.

Добавление функции шаринга в functions.php

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

/**
 * Возвращает массив ссылок для шаринга.
 *
 * @param string $url   URL поста.
 * @param string $title Заголовок поста.
 * @return array
 */
function wpb_get_share_links( $url, $title ) {
    $encoded_url   = rawurlencode( $url );
    $encoded_title = rawurlencode( $title );

    return [
        'facebook' => "https://www.facebook.com/sharer/sharer.php?u={$encoded_url}",
        'twitter'  => "https://twitter.com/intent/tweet?text={$encoded_title}&url={$encoded_url}",
        'linkedin' => "https://www.linkedin.com/shareArticle?mini=true&url={$encoded_url}&title={$encoded_title}",
        'pinterest'=> "https://pinterest.com/pin/create/button/?url={$encoded_url}&description={$encoded_title}",
    ];
}

/**
 * Выводит готовый HTML‑блок с кнопками.
 */
function wpb_render_share_buttons() {
    if ( ! is_singular() ) return;
    $url   = get_permalink();
    $title = get_the_title();
    $links = wpb_get_share_links( $url, $title );
    echo '

‘; } /** * Возвращает SVG‑иконку сети. */ function wpb_get_svg_icon( $network ) { $svg_path = get_template_directory() . «/assets/svg/{$network}.svg»; if ( file_exists( $svg_path ) ) { return file_get_contents( $svg_path ); } return »; } // Хук для вывода после контента. add_action( ‘the_content’, function( $content ) { if ( is_singular( ‘post’ ) ) { ob_start(); wpb_render_share_buttons(); $buttons = ob_get_clean(); $content .= $buttons; } return $content; });

Функция wpb_get_svg_icon() читает SVG‑файлы из темы, поэтому добавьте файлы facebook.svg, twitter.svg и т.д. в assets/svg/.

Вывод кнопок в шаблоне

Если вам нужен более гибкий вывод, можно вызвать хелпер напрямую в нужном месте шаблона (например, в single.php).

<?php wpb_render_share_buttons(); ?>

Для тем, использующих блоки Gutenberg, создайте block на основе register_block_type() и вставьте туда вызов функции – но это уже отдельная тема.

Стилизация и адаптивность

Ниже пример базовых стилей. Они лёгкие, не требуют внешних библиотек и легко расширяются.

.wpb-share-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.wpb-share {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 4px;
    transition: background 0.3s, transform 0.2s;
}

.wpb-share:hover {
    background: #e2e2e2;
    transform: translateY(-2px);
}

.wpb-share svg {
    width: 20px;
    height: 20px;
    fill: #555;
}

/* Цвета под каждую сеть */
.wpb-facebook:hover svg { fill: #3b5998; }
.wpb-twitter  { background: #e8f5fd; }
.wpb-twitter:hover svg { fill: #1da1f2; }
.wpb-linkedin { background: #e8f0fe; }
.wpb-linkedin:hover svg { fill: #0077b5; }
.wpb-pinterest { background: #fdeef0; }
.wpb-pinterest:hover svg { fill: #bd081c; }

@media (max-width: 480px) {
    .wpb-share { width: 28px; height: 28px; }
    .wpb-share svg { width: 16px; height: 16px; }
}

Подключите стили в style.css темы или через wp_enqueue_style(). Если хотите ускорить загрузку, добавьте CSS‑инлайн в head – это особенно полезно для критических стилей.

Тестирование и отладка

После внедрения проверьте:

• Работоспособность каждой ссылки в разных браузерах.
• Отслеживание переходов через Google Analytics (добавьте utm_source к URL, если нужно).
• Влияние на скорость страницы: измерьте ускорение WordPress без плагинов с помощью PageSpeed Insights.

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

Поддержка будущих изменений

Когда появятся новые соцсети, достаточно добавить их в массив wpb_get_share_links() и разместить SVG‑файл. Такой модульный подход упрощает масштабирование и поддерживает чистоту кода, что особенно важно при переходе на Headless WordPress в 2026 году.

Итоги

Создание кнопок «Поделиться» без плагинов – быстрый способ улучшить производительность, безопасность и кастомизацию сайта. Вы получили готовый PHP‑хелпер, SVG‑иконки, стили и рекомендации по тестированию. Теперь ваш контент будет распространяться в соцсетях без лишних нагрузок.