Как получить круглые аватары в WordPress

Автор:
Nurlan Kemelbekov

Круглые изображения стали очень распространенными в эти дни. Но еще больше — круглые аватары. Поэтому мы собираемся обсудить здесь, как получить круглые аватары в WordPress.

Прежде чем мы перейдем к коду, давайте взглянем на то, как наше аватар/Gravatar изображение изменится.

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

Хорошо, перейдите к файлу CSS и поместите следующее.

.avatar  {

float:right;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

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

Вы можете найти код аватара и определить имя класса. В Chrome и Firefox сделать это очень легко, нажав на элемент (аватара в данном случае) правой кнопкой мыши, а затем, выбрать пункт «Просмотр кода элемента».

Здесь, вы можете изучить CSS. Вот посмотрите, например, что можно посмотреть в Google Chrome. Вы можете увидеть ниже, как я нашел имя класса.
comment .avatar
Оказалось это «comment .avatar», а не просто «avatar».

После того, как я обнаружил класс, просто изменил название в коде выше на «comment .avatar”.
И вот, как это выглядит после нанесения стиля в файл CSS.
avatar.png
Если при проверке кода элемента появляется слишком много кода на пути к расшифровке, вы также могли бы легко найти имя «avatar» в таблице стилей. (Внешний вид> Редактор>Стили> style.css) Нажмите клавишу F3 и в поле поиска введите слово «avatar».  Даже если она имеет другое имя, есть хороший шанс, что слово » avatar» включено в нее.Редактор темы

И так, может быть, что это можно было бы найти и по другому, но вместо того, чтобы тратить много времени, я просто пошел в CSS файл и искал слово «avatar». Я быстро нашел раздел под названием «.comment .avatar» в файле css. Подумав, что это то, что мне нужно, я попытался, и это сработало. Вот то, что я добавил.

.commentlist .avatar {

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

Аватары не появляются?

Некоторые могут иметь такие проблемы, как отсутствие изображения, не показывает аватары вообще. Если это так, см. ниже.

По умолчанию, WordPress использует «Gravatars» для фотографий пользователей. Если Вы еще не сделали, можете получить Gravatars на вашем сайте, подписавшись на gravatar.com с тем же адресом электронной почты, который используете для вашего профиля.Gravatar.Com

Если Вы уже подписались на gravatar.com, но не видите изображения пользователя на своем сайте, это может быть из-за одной из следующих причин.

Тема сайта не содержит необходимый код для отображения Gravatars. Если это так, можете связаться с автором темы.

Кроме того, необходимо убедиться, что отображение аватара включены на сайте. Перейдите в раздел Настройки> Обсуждение, прокрутите вниз и убедитесь, что соответствующая ячейка отмечена. (См. изображение ниже.)Аватарка

Ну, вот и все. Надеюсь, что у Вас все получилось и теперь круглые аватары красуются на Вашем WordPress блоге.




Вам также может понравиться:


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

20 + четырнадцать =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!