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

Как работает модуль

У модуля есть общий список сервисов для шаринга. Для каждого сервиса можно:

выбрать сам сервис;
задать свой текст кнопки;
включить или отключить его отображение.

Когда кнопки выводятся на странице, модуль автоматически подставляет:

адрес текущей страницы;
заголовок текущей записи или страницы.

После этого для каждого выбранного сервиса формируется готовая кнопка «Поделиться».

Для обычных соцсетей и мессенджеров модуль создает ссылку на стандартный URL шаринга. Для специальных сервисов, например
copy_link или native_share, используется отдельная логика на JavaScript.

Где находятся настройки

Основные настройки модуля находятся здесь:

Внешний вид > Настроить > Модули > Поделиться

Заголовок

Настройка Заголовок задает заголовок блока с кнопками шаринга.

Этот заголовок используется:

в стандартном блоке записи перед комментариями;
в шорткоде — если вы не указали свой заголовок вручную.

Сервисы

В настройке
Сервисы вы собираете общий список сервисов, в которые посетители смогут делиться вашим контентом.

Для каждого элемента доступны такие поля:

Сервис — какой сервис использовать;
Подпись — текст на кнопке;
Включено — включена ли кнопка в общем списке.

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

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

Показывать подписи

Настройка Показывать подписи включает или отключает текст рядом с иконками кнопок.

Эта настройка влияет на стандартный вывод кнопок в теме. Если вы используете шорткод, для него это поведение можно переопределить отдельно.

Стандартный вывод в записи

По умолчанию тема выводит кнопки шаринга в шаблоне записи перед комментариями.

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

Если нужно скрыть этот блок сразу для всех записей, используйте путь:

Внешний вид > Настроить > Шаблоны > Запись > Скрытые элементы

Также блок можно скрыть отдельно для конкретной записи через ее метабокс Скрыть элементы.

Шорткод

Модуль поддерживает шорткод:

[social_share]

Его можно вставить:

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

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

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

Параметры шорткода

У шорткода есть такие параметры:

class — дополнительные CSS-классы для внешнего контейнера;
services — список сервисов через запятую, которые нужно вывести;
show_labels — показывать ли подписи рядом с иконками;
show_title — показывать ли заголовок блока;
title — свой текст заголовка;
url — вручную задать адрес для шаринга;
text — вручную задать текст для шаринга.

services

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

[social_share services="telegram,vk,whatsapp"]

Порядок сервисов в этом параметре будет таким же порядком вывода кнопок на странице.

Важно: параметр
services не создает новые кнопки сам по себе. Он может только выбрать и переупорядочить те сервисы, которые уже добавлены в
Сервисы.

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

show_labels

Параметр
show_labels включает или отключает подписи рядом с иконками только для этого конкретного шорткода.

[social_share show_labels="1"]

[social_share show_labels="0"]

show_title и title

Параметр show_title отвечает за показ заголовка блока, а
title позволяет задать свой текст.

[social_share show_title="1" title="Поделиться статьей"]

Если title не указан, будет использован заголовок из настроек модуля.

url и text

По умолчанию модуль сам берет адрес текущей страницы и ее заголовок.

Но если нужно поделиться не текущей страницей, а другим адресом, или передать свой текст, это можно сделать вручную:

[social_share url="https://example.com" text="Посмотрите эту страницу"]

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

Сервис
Системный шаринг использует встроенную возможность браузера делиться ссылками через системное меню. Технически это работает через Web Share API, то есть
navigator.share().

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

Как работает native_share

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

Вместо этого тема выводит кнопку, а при клике JavaScript вызывает системный диалог браузера.

В этот диалог передаются:

заголовок страницы;
текст для шаринга;
URL текущей страницы или адрес, переданный через шорткод.

Когда кнопка показывается

Кнопка Системный шаринг отображается только в тех браузерах, где действительно поддерживается
navigator.share() и страница открыта в безопасном контексте — обычно по https.

Если Web Share API недоступен, тема автоматически скрывает эту кнопку. Пользователь не увидит неработающий элемент.

Когда использовать native_share

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

Обычно ее используют не вместо обычных соцсетей, а вместе с ними. Тогда на поддерживаемых устройствах пользователь получает удобный системный шаринг, а в остальных случаях остаются привычные кнопки Telegram, VK, WhatsApp и других сервисов.

Поддерживаемые сервисы

По умолчанию модуль поддерживает такие сервисы:

telegram
vk
x
facebook
linkedin
pinterest
reddit
email
native_share
copy_link
whatsapp
ok

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

Хуки для разработчика

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

Это удобно, если нужно:

добавить новый сервис;
убрать ненужный;
изменить стандартные данные сервиса;
переопределить URL шаринга.

wpbox/social_share/networks — изменить полный список сервисов шаринга;
wpbox/social_share/network_choices — изменить упрощенный список сервисов для select-контролов;
wpbox/social_share/url — переопределить итоговый URL шаринга для конкретного сервиса.

Каждый сервис хранится в таком формате:

[
    'name' => '',
    'icon' => '',
    'icon_svg' => '',
    'color' => '',
]

Поле icon содержит имя иконки из класса Icons, а поле
icon_svg позволяет передать собственный inline SVG. При выводе приоритет всегда у icon_svg.

Добавить свой сервис

add_filter( 'wpbox/social_share/networks', function( $services ) {
    $services['mastodon'] = [
        'name'     => __( 'Mastodon', 'wpbox' ),
        'icon'     => 'brand-mastodon-regular',
        'icon_svg' => '',
        'color'    => '#6364ff',
    ];

    return $services;
} );

Убрать сервис

add_filter( 'wpbox/social_share/networks', function( $services ) {
    unset( $services['facebook'] );

    return $services;
} );

Переопределить URL шаринга

add_filter( 'wpbox/social_share/url', function( $url, $network, $context ) {
    if ( 'telegram' === $network ) {
        return 'https://t.me/share/url?url=' . rawurlencode( $context['url'] );
    }

    return $url;
}, 10, 3 );

CSS-переменные

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

--wpbox-social-share-gap: .75rem;
--wpbox-social-share-title-color: inherit;
--wpbox-social-share-links-gap: .5rem;
--wpbox-social-share-border-color: var(--wpbox-border-color);
--wpbox-social-share-border-radius: var(--wpbox-element-border-radius);
--wpbox-social-share-link-color: inherit;
--wpbox-social-share-link-padding-y: .5rem;
--wpbox-social-share-link-padding-x: .75rem;
--wpbox-social-share-icon-color: var(--wpbox-social-share-brand-color, currentColor);
--wpbox-social-share-placeholder-bg: rgba(33, 37, 41, .08);

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

Поделиться