WordPress. Как добавить значки для ссылок на социальные сети (если они представлены текстом)

Из этого туториала Вы узнаете, как добавить значки для ссылок на социальные сети в WordPress (если они представлены текстом по умолчанию).

WordPress. Как добавить значки для ссылок на социальные сети (если они представлены текстом)

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

Это может казаться реальной проблемой, если Вы не знаете, что нужно сделать. По этому, мы рады представить Вам этот туториал.

Для того чтобы добавить значки для ссылок на социальные сети вашего сайта WordPress, следуйте таким инструкциям:

Добавление значков FontAwesome:

1. Во-первых, Вам нужно добавить значки. Это можно сделать при помощи правил css. Для того чтобы добавить правила, войдите в вашу админ панель WordPress и перейдите на вкладку Внешний вид (Appearance) -> Редактор (Editor). Откройте файл style.css и прокрутите в конец файла.

2. Вам нужно создать правила, в которых используются селекторы названий ссылок на социальные сети и css-элемент ::before. Правила должны выглядеть следующим образом:

   [title="facebook"]::before {
     content: "" !important;
     font-family: FontAwesome !important;
     font-size: 40px !important;
   }
   

   В » » свойства content: Вам нужно вставить значок FontAwesome. Для того чтобы это сделать, Вам нужно найти, скопировать и вставить значок из Списка значков FontAwesome 3.2.1 в » «. (Обратите внимание, что Вам нужно скопировать сам значок, а не код для него):

   

   В этом правиле Вы можете также задать размер шрифта для значков. Например, мы задали размер шрифта — 40px при помощи свойства css font-size: 40px !important;.

3. Теперь Вам нужно создать правила для остальных ссылок на социальные сети, которые используются в шаблоне. Скопируйте и вставьте правило столько раз, сколько нужно, и измените название ссылки на социальные сети в селекторе [title=»facebook»]. Затем, скопируйте и вставьте нужные значки из Списка значков FontAwesome 3.2.1 в content: «» !important;. В результате, правила будут выглядеть следующим образом:

   [title="twitter"]::before {
     content: "" !important;
     font-family: FontAwesome !important;
   font-size: 40px !important;
   }
   
   [title="instagram"]::before {
     content: "" !important;
     font-family: FontAwesome !important;
   font-size: 0px !important;
   }
   
   [title="google"]::before {
     content: "" !important;
     font-family: FontAwesome !important;
   font-size: 40px !important;
   }
   

4. Закончив редактирование правил, нажмите на кнопку Обновить файл (Update File), для того чтобы сохранить изменения:

   

Удаление текста социальных ссылок

1. Откройте файл static-social-networks.php во вкладке Внешний вид (Appearance) -> Редактор (Editor) в вашей админ панели WordPress.

2. При помощи сочетания клавиш Ctrl + F найдите следующую строку кода (ближе к концу содержимого файла):

   echo $social_networks[$i];
   

   

3. Удалите эту строку.

4. Нажмите на кнопку Обновить файл (Update File), для того чтобы сохранить изменения.

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

Теперь Вы знаете, как добавить значки для ссылок на социальные сети в WordPress (если они представлены текстом по умолчанию).

Вы можете также ознакомиться с детальным видео-туториалом ниже:

WordPress. Как добавить значки для ссылок на социальные сети (если они представлены текстом)