Как добавить больше социальных иконок в верхний и нижний колонтитулы Divi

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

Как добавить больше иконок социальных сетей в Divi
  • Facebook
  • Twitter
  • Pinterest
  • Gmail
  • VKontakte
Вверху
Как добавить больше иконок социальных сетей в Divi
  • Facebook
  • Twitter
  • Pinterest
  • Gmail
  • VKontakte
Снизу

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

Facebook
Twitter
Google+
Instagram
RSS

Чтобы добавить эти значки, перейдите в Dashobard> Divi> Theme Options

  • Facebook
  • Twitter
  • Pinterest
  • Gmail
  • VKontakte

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

Перейдите с помощью файлового менеджера FTP или cPanel в корневую папку WordPress и скопируйте следующий файл: wp-content \ themes \ Divi \ includes \ social_icons.php

Перейдите в папку дочерней темы, создайте новую папку и назовите ее: includes
Скопируйте файл social_icons.php внутри этой папки и откройте его в редакторе.

В конце файла перед тегом </ul> вставьте следующий код: 

<li class="et-social-icon et-social-myspace">
    <a href="https://myspace.com/elegantthemes/‎" class="icon">
        <span><?php esc_html_e( 'MySpace', 'Divi' ); ?></span>
    </a>
</li>


Замените myspace и MySpace новым именем социальной сети и замените ссылку.

В Divi уже установлены значки для следующих социальных сетей, поэтому вам не нужно беспокоиться о файле значка / изображения, если ваша новая социальная сеть находится в следующем списке, все, что вам нужно сделать, это скопировать имя:

pinterest
linkedin
tumblr
skype
flikr
myspace
dribbble
youtube
vimeo майнкрафт

Как добавить больше иконок социальных сетей в Divi
  • Facebook
  • Twitter
  • Pinterest
  • Gmail
  • VKontakte

Если вашей новой социальной сети нет в списке, используйте вместо нее следующий код:

<li class="et-social-icon et-social-myspace">
    <a href="https://myspace.com/elegantthemes/‎" class="icon">
    <img src="https://site.com/icon.png" alt="myspace">
        <span><?php esc_html_e( 'MySpace', 'Divi' ); ?></span>
    </a>
</li>


И снова замените myspace , замените URL-адрес учетной записи и URL-адрес изображения.

Обязательно загрузите изображение того же размера / стиля, что и другие значки.

Как добавить иконки в футер без дочерней темы

Так как социальная сеть Google+ не так давно прекратила свое существование, но во многих темах WordPress все еще есть для нее местечко, то почему бы не воспользоваться этим обстоятельством.

Достаточно просто заменить иконку Google+ и поставить ссылку на нужную нам социальную сеть в настойках темы Divi. Для этого нужно загрузить на сайт иконку нужно размера и внести в поле «Пользовательский CSS» небольшой код:

#main-footer .et-social-google-plus a.icon:before{
font-family:arial !important;
content:url("ссылка на новую иконку") !important;
}

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

#main-footer .et-social-google-plus a.icon:before{
font-family:arial !important;
/*вставляем просто букву В вместо иконки Вконтакте*/
content:"B" !important;
}
/*выравниваем ее расположение*/
@media all and (max-width: 480px) {
.et_contact_bottom_container {
    float: none;
    display: block;
}
button.et_pb_contact_submit.et_pb_button {
    display: block;
    margin-top: 10px;
}
.et_pb_contact_right {
    display: block;
    margin-top: 10px;
    text-align: center;
}
}

Давайте дружить

Pin It on Pinterest

Share This