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

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

Тема 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 нужно заменить на другой.

Вам помог ответ?
Похожие вопросы