Социальные профили

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

Вы один раз добавляете Telegram, VK, YouTube, сайт и другие ссылки, а затем используете их в разных частях темы: например, в шапке сайта или внутри страниц через шорткод.

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

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

Модуль хранит единый список социальных профилей сайта.

Для каждого профиля можно:

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

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

в элементе Социальный в конструкторе шапки;
через отдельный шорткод [social_profiles].

Для каждого сервиса обычно используется своя встроенная иконка. Если у сервиса задано поле
icon_svg, сначала будет использована именно эта SVG-иконка. Если SVG не задан, модуль возьмет стандартную иконку темы. Если иконки для сервиса нет совсем, будет показана запасная иконка от сервиса
Сайт.

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

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

Внешний вид > Настроить > Модули > Социальные профили

Профили

В разделе Профили вы создаете общий список всех социальных профилей сайта.

У каждого профиля есть такие поля:

Сервис — какую соцсеть или сервис представляет профиль;
Подпись — текст рядом с иконкой или название профиля;
URL профиля — ссылка на страницу профиля;
Включено — нужно ли показывать этот профиль в стандартных местах темы.

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

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

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

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

Она влияет на стандартный вывод профилей в теме, например в шапке сайта. Для шорткода это поведение можно отдельно переопределить параметром
show_labels.

Модуль уже подключен к элементу Социальный в конструкторе шапки.

Чтобы вывести социальные профили в шапке:

Откройте Внешний вид > Настроить > Шапка.
Добавьте элемент Социальный в нужную строку и колонку.
Сохраните настройки.

Если вы открыли кастомайзер, но еще не добавили ни одного профиля, в превью шапки будет показан блок-заглушка. Это сделано для того, чтобы элемент было удобно увидеть и переместить в конструкторе.

Шорткод

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

[social_profiles]

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

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

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

У шорткода есть 3 основных параметра:

class — добавляет CSS-классы для внешнего контейнера;
profiles — позволяет вывести только выбранные сервисы;
show_labels — включает или отключает подписи рядом с иконками.

class

Параметр
class нужен, если вы хотите добавить собственный CSS-класс и затем оформить блок через стили.

[social_profiles class="my-socials"]

profiles

Параметр profiles позволяет вывести не весь список, а только нужные сервисы.

[social_profiles profiles="telegram,vk,youtube"]

Порядок сервисов в параметре определяет порядок их вывода на странице.

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

show_labels

Параметр show_labels управляет показом подписей только для конкретного шорткода.

[social_profiles show_labels="1"]

[social_profiles show_labels="0"]

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

Примеры использования

Показать все активные профили

[social_profiles]

Показать только выбранные сервисы

[social_profiles profiles="telegram,site"]

Показать скрытый профиль вручную

[social_profiles profiles="telegram,github"]

Это удобно, если профиль github скрыт в общем списке, но должен отображаться в конкретном месте сайта.

Показать профили с подписями

[social_profiles profiles="telegram,vk" show_labels="1"]

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

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

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

Доступны такие фильтры:

wpbox/social_profiles/networks — изменяет полный список сервисов;
wpbox/social_profiles/network_choices — изменяет упрощенный список сервисов для выпадающих списков в настройках.

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

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

Что означают поля:

name — название сервиса;
icon — имя иконки из класса Icons;
icon_svg — свой inline SVG-код иконки;
color — фирменный цвет сервиса.

Если задано поле icon_svg, при выводе в первую очередь используется оно. Если
icon_svg пустое, используется
icon. Если не заполнены оба поля, модуль покажет fallback-иконку сервиса Сайт.

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

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

    return $services;
} );

Убрать стандартный сервис

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

    return $services;
} );

Задать свой SVG

add_filter( 'wpbox/social_profiles/networks', function( $services ) {
    $services['site']['icon_svg'] = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2..." fill="currentColor"/></svg>';

    return $services;
} );

Чтобы SVG-иконка корректно меняла цвет под оформление сервиса, внутри SVG лучше использовать
fill="currentColor" или stroke="currentColor".

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

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

--wpbox-social-profiles-gap: .625rem;
--wpbox-social-profiles-link-size: 2.75rem;
--wpbox-social-profiles-link-padding-x: .875rem;
--wpbox-social-profiles-border-radius: var(--wpbox-element-border-radius);
--wpbox-social-profiles-link-bg: rgba(33, 37, 41, .06);
--wpbox-social-profiles-link-border-color: rgba(33, 37, 41, .12);
--wpbox-social-profiles-link-color: var(--wpbox-text-color);
--wpbox-social-profiles-icon-color: var(--wpbox-social-profiles-brand-color, currentColor);
--wpbox-social-profiles-icon-hover-color: var(--wpbox-social-profiles-link-hover-color);
--wpbox-social-profiles-link-hover-bg: var(--wpbox-social-profiles-brand-color, var(--wpbox-primary-color));
--wpbox-social-profiles-link-hover-color: var(--wpbox-button-primary-color, #fff);
--wpbox-social-profiles-placeholder-bg: rgba(33, 37, 41, .08);

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