Как добавить свои соц. сети в тему WordPress?

Бывало у вас (начинающих сайтоделов) такое: скачиваете тему и понимаете, самых популярных в России соц. сетей в ней нет? Сразу скажу, что добавить их не составит никакого труда. Вся процедура базируется на сочетании клавиш Ctrl + C и Ctrl + V.

Как добавить свои соц. сети в тему WordPress?

Пару слов о том, как реализуется добавление доп. опций в тему. Любая тема WordPress имеет в своем каталоге файл customizer.php или customizer-options.php, возможны и другие варианты, но они крайне редкие и слово customizer там обязательно присутствует.

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

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

  1. Найти все файлы, в названии которых так или иначе присутствует слово social.
  2. Добавить в настройках уже имеющиеся соц. Сети и посмотреть, как выглядит html который их выводит. Смотрите на структуру кода, классы css и title для ссылки. В теме, которую я использую в качестве примера это выглядит так:titlehtml

Далее начинается 2-ой этап нашей работы.

Изменения в файле customizer самые простые. Вам надо только найти участков отвечающий за опции соц. сетей.

Как добавить свои соц. сети в тему WordPress?

Скопировать существующий код, и вставить после всех доступных по дефолту. Изменить нужно название в квадратных скобках и id + label. Старайтесь не придумывать ничего своего, а просто использовать стандартные обозначения.

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

код в custom мой

Вот так вот выглядит добавление Вконтакте и Instagram.

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

Как же сделать так чтоб они появились? Для этого придётся отыскать наш файл social. В моем шаблоне код в нем выглядит так:

if ( get_theme_mod( 'vogue-social-email' ) ) :
echo '<a href="' . esc_url( 'mailto:' . antispambot( get_theme_mod( 'vogue-social-email' ), 1 ) ) . '" title="' . __( 'Send Us an Email', 'vogue' ) . '" class="header-social-icon social-email">'<i class="fa fa-envelope-o">'</i&gt'</a>';
endif;

Здесь меняем все тоже самое, что и в customizer + в теге <i> переписываем класс на: fa fa-название соц. сети. Если вдруг после этого соц сеть добавилась и в коде страницы она есть а значка нету, проверьте как точно пишется класс вашего ресурса. Проверить это не сложно, достаточно просто забить в поисковик fa fa-название соц. cети.

Добавить комментарий