Рубрики
WordPress

Как сделать кнопки «Поделится в социальных сетях» в WordPress: как добавить на сайт?

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

Есть три принципиально разных подхода — выбирай тот, что подходит под твою ситуацию.

Способ 1. Плагин (быстро, без кода)

Самый популярный вариант для большинства сайтов.

Лучшие плагины в 2026 году:

  • Social Snap — красивый дизайн, гибкие настройки, аналитика
  • Shared Counts — лёгкий, не грузит сайт, показывает счётчики
  • AddToAny — бесплатный, поддерживает 100+ сетей
  • Monarch (от Elegant Themes) — премиум, идеален если используешь Divi

Установка на примере AddToAny:

  1. Перейди в Плагины → Добавить новый
  2. Введи AddToAny в поиск, установи и активируй
  3. Открой Настройки → AddToAny
  4. Выбери нужные соцсети — перетащи иконки в активную зону
  5. Настрой позицию: до записи, после записи или плавающая панель
  6. Сохрани — кнопки появятся автоматически

Способ 2. Вручную через функции темы (без плагина)

Подходит если не хочешь лишних плагинов и умеешь немного работать с кодом.

Шаг 1. Создай функцию в functions.php

Открой Внешний вид → Редактор → functions.php (лучше через дочернюю тему):

function my_share_buttons() {
    global $post;
    
    $post_url   = urlencode( get_permalink( $post->ID ) );
    $post_title = urlencode( get_the_title( $post->ID ) );
    
    $vk        = 'https://vk.com/share.php?url=' . $post_url;
    $telegram  = 'https://t.me/share/url?url=' . $post_url . '&text=' . $post_title;
    $whatsapp  = 'https://wa.me/?text=' . $post_title . '%20' . $post_url;
    $twitter   = 'https://twitter.com/intent/tweet?url=' . $post_url . '&text=' . $post_title;
    
    $output  = '<div class="share-buttons">';
    $output .= '<span>Поделиться:</span>';
    $output .= '<a href="' . $vk       . '" target="_blank" rel="noopener">ВКонтакте</a>';
    $output .= '<a href="' . $telegram . '" target="_blank" rel="noopener">Telegram</a>';
    $output .= '<a href="' . $whatsapp . '" target="_blank" rel="noopener">WhatsApp</a>';
    $output .= '<a href="' . $twitter  . '" target="_blank" rel="noopener">X (Twitter)</a>';
    $output .= '</div>';
    
    return $output;
}

Шаг 2. Подключи к записям автоматически

function auto_share_buttons( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $content .= my_share_buttons();
    }
    return $content;
}
add_filter( 'the_content', 'auto_share_buttons' );

Шаг 3. Добавь стили в style.css

.share-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.share-buttons a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.2s;
}

.share-buttons a:hover { opacity: 0.85; }

/* Цвета под каждую соцсеть */
.share-buttons a:nth-child(2) { background: #0077ff; } /* ВК */
.share-buttons a:nth-child(3) { background: #229ED9; } /* Telegram */
.share-buttons a:nth-child(4) { background: #25D366; } /* WhatsApp */
.share-buttons a:nth-child(5) { background: #000000; } /* X */

Способ 3. Через шорткод (вставлять вручную в нужных местах)

Если не хочешь, чтобы кнопки были везде — только там, где ты сам вставишь:

add_shortcode( 'share_buttons', 'my_share_buttons' );

После этого в любом посте или странице пишешь:

[share_buttons]

Способ 4. Кнопки в Gutenberg-блоках (современный подход)

Если сайт на блочном редакторе, создай HTML-блок и вставь прямо туда:

<div style="display:flex; gap:10px; margin:20px 0;">
  <a href="https://t.me/share/url?url=ТВОЙ_URL" 
     style="background:#229ED9; color:#fff; padding:8px 16px; border-radius:6px; text-decoration:none;"
     target="_blank">Telegram</a>
  <a href="https://vk.com/share.php?url=ТВОЙ_URL"
     style="background:#0077ff; color:#fff; padding:8px 16px; border-radius:6px; text-decoration:none;"
     target="_blank">ВКонтакте</a>
</div>

Важные нюансы

МоментСовет
ПроизводительностьПлагины типа ShareThis загружают внешние скрипты — это замедляет сайт. Ручной способ быстрее.
СчётчикиСоцсети перестали открывать API счётчиков. Показывать реальное число шаров сложно — нужны платные сервисы.
rel=»noopener»Всегда добавляй к ссылкам с target="_blank" — это вопрос безопасности.
ВКонтакте vs FacebookДля СНГ-аудитории ВК и Telegram важнее Facebook. Расставляй приоритеты под свою аудиторию.
Мобильный видWhatsApp открывается в приложении на телефоне — это лучший вариант для мобильных пользователей.

Какой способ выбрать?

  • Новичок → AddToAny или Shared Counts
  • Нет лишних плагинов → ручной код через functions.php
  • Нужно только в паре мест → шорткод
  • Максимальная скорость сайта → чистый HTML без JS вообще

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *