Всем привет дорогие пользователи. Как-то давно я Вам рассказывал про то, как можно установить граватар (аватар) на WordPress. Так вот, стандартные аватарки пользователей в WordPress, имеют форму квадрата, но в последнее время мода пошла на круглые аватарки в своих блогах и сайтах, поэтому в данной статье мы рассмотрим, как можно быстро и просто сделать круглые аватарки на своем WordPress-сайте.

Для этих целей Вам необходимо просто будет добавить небольшой css-код в файл стилей (style.css) и посмотреть на изменения.

Для начала давайте вспомним, как у нас выглядят аватарки по умолчанию:

А вот что будет после того, как мы применим небольшой CSS-код для получения круглых аватарок:

Мы будем добавлять обычный CSS-код, поэтому, если Вы не уверены в своих действиях, Вам следует сделать копию файла style.css. Теперь нам необходимо открыть файл стилей style.css, это можно сделать через консоль администратора (Внешний вид-Редактор-Стили-style.css), либо же скачать его при помощи ФТП, с Вашего хостинга. Затем Вы открываете его и вносите следующий код:

Исходный код

.avatar img {
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 -o-border-radius: 50%;
 border-radius: 50%;
 }

После чего Вы сохраняете файл и заменяете его на сервере. У многих должна появиться круглая аватарка, но не у всех. Если у Вас не получилось, то значит идем дальше.

Если же вдруг у Вас не сработал данный способ, то, скорее всего Ваша тема WordPress не использует класс avatar для стилей. Для того чтобы у Вас все заработало, необходимо определить, какой класс используется у Вас для аватаров, в Вашей теме. Для этого необходимо в браузере открыть Ваш сайт и нажать правой кнопкой мыши по аватару, после чего из контекстного меню выбрать пункт Посмотреть код элемента (в большинстве браузерах). В показанном коде необходимо найти класс, который использует Ваша тема для стилизации и вывода аватаров.

Отсюда можно сделать вывод, что здесь используется класс author-avatar, значит наш код преобразуется в следующий вид:

Исходный код

.author-avatar img {
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 -o-border-radius: 50%;
 border-radius: 50%;
 }

То есть, мы только лишь поменяли название класса и все. Здесь самое главное и самая проблема состоит в том, что если у Вас не используется класс avatar, то правильно найти тот класс, который присутствует в Вашей теме.

Круглые аватары в комментариях

Мы с Вами рассмотрели, как сделать круглый аватар для администратора, который может выводиться в блоке автора WordPress. А теперь мы рассмотрим, как можно сделать круглый аватар для всех, кто оставляет комментарии. Смысл остается тот же самым, Вам необходимо найти класс стилей, который используется для аватара в комментариях. После того, как это сделаете, просто добавить код в style.css:

Исходный код

.commentlist .avatar {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}

Результат будет таким же:

Если не отображаются изображения

Бывает такое, что у Вас изображения аватаров вообще могут не отображаться на сайте. Это может быть связано по не скольким причинам. Если Вы используете граватар на своем сайте, то могут быть следующие причины, почему не отображается граватар:

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

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