Как вывести кастомную соц. кнопку?

Чтобы вывести кастомную соц. кнопку после соц. кнопок, ссылки на которые добавлены в Внешний вид > Настроить > Модули > Социальные профили, установите и активируйте дочернюю тему отсюда.

Тема Reboot

В дочерней теме reboot_child создайте папку template-parts, а в ней папку blocks. Из темы Reboot скопируйте в неё файл social-links.php.

Тема Root

В дочерней теме root_child создайте папку template-parts. Из темы Root скопируйте в неё файл social-links.php.

Тема Bono

В дочерней теме bono_child создайте папку template-parts, а в ней папку blocks. Из темы Bono скопируйте в неё файл social-links.php.

Тема JournalX

В дочерней теме journalx_child создайте папку template, а в ней папку parts. Из темы JournalX скопируйте в неё файл social-links.php.

Тема Cook It

В дочерней теме cook_it_child создайте папку template-parts. Из родительской темы Cook It скопируйте в неё файл social-links.php.

Тема Yelly

В дочерней теме создайте папку template-parts, а в ней папку blocks. Из родительской темы скопируйте в неё файл social-links.php.

Затем откройте файл social-links.php в дочерней теме и перед кодом

    </div>
</div>

добавьте код

<span class="social-button social-button--custom js-link" data-href="Здесь вставьте ссылку на профиль нужной соц. сети" data-target="_blank"></span>

В Консоль > Медиафайлы загрузите логотип соц. кнопки. Для логотипа соц. кнопки рекомендуем использовать картинку 41х41 пиксель.

Затем в файл style.css дочерней темы добавьте код

/* Добавление логотипа кастомной соц. кнопки */
.social-button--custom:before {
  content: '';
  background: url(Здесь укажите путь к картинке логотипа нужной соц. сети) center no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

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

Тема WPCommunity

Чтобы вывести кастомную соц. кнопку в шапке сайта, перейдите в Внешний вид > Настроить > Структура > Шапка и в поле “HTML 1” добавьте следующий код:

<div class="header-social social-buttons">
<a class="social-profiles__item social-button social-button--custom" href="#" target="_blank" rel="noopener" style="--wpsc-social-button-bg:#4267B2"><span class="social-button__icon"></span></a>
</div>

В Консоль > Медиафайлы загрузите логотип соц. кнопки. Для логотипа соц. кнопки рекомендуем использовать картинку 20х20 пиксель.

Затем перейдите в Внешний вид > Настроить > Дополнительные стили и добавьте следующий код:

/* Добавление логотипа кастомной соц. кнопки */
.social-button--custom:before {
  content: '';
  background: url(Здесь укажите путь к картинке логотипа нужной соц. сети) center no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
}

.social-button--custom .social-button__icon {
  display: none;
}

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

Вам помог ответ?