Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

Круглые аватарки для WordPress-сайта

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

аватарки, круглые аватарки, настройка сайта, картинка профиля, css, хаки

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

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

avatarwp1

Но если вы примените определенный код простого CSS, то аватар будет выглядеть уже вот так:

аватарки, круглые аватарки

Ну что, нравится? Тогда давайте перейдем к делу и сделаем это на своем сайте. Вам нужно открыть файл стилей своей темы style.css (Внешний вид → Редактор → Стили – style.css) и далее найти строчку avatar img или что то подобное, после внести в код некоторые изменения:

.avatar img {

 -webkit-border-radius: 50%;

 -moz-border-radius: 50%;

 -ms-border-radius: 50%;

 -o-border-radius: 50%;

 border-radius: 50%;

 }

В коде используется несколько строк с 50% и это нужно для поддержки разных браузеров. Можно конечно использовать только команду border-radius: 50%; но если вы хотите быть уверенным, что ваш аватар будет выглядеть круглым в любом браузере, тогда используйте весь приведенный код.

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

Для этого поищите в коде, кликнув по изображению правой кнопкой мышки и далее в контекстном меню «Просмотреть код элемента». Например в теме моего блога имя класса не «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» в таблице стилей style.css может встречаться несколько раз, вам же необходимо найти нужный.

То же самое можете проделать для блока комментариев и сделать круглые аватарки и там. Но не забывайте, что и у этих аватаров могут быть отличия в названии классов и их тоже придется поискать и так же этот класс может встречаться в коде несколько раз, что разумеется приводит к поиску нужного. Возможен вариант отсутствия в названии тега «img», как в моей теме и код у меня получился вот такой:

.comment-author .avatar {

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

Примерно вот такой результат должен получиться у вас:

аватарки, круглые аватарки

Возможен вариант, что на вашем сайте вообще не отображаются изображения-аватарки. В WordPress для фото пользователей используется «gravatars» и если у вас его нет, то для получения граватара (аватара) на ваш сайт необходимо зарегистрироваться на сайте gravatar.com используя тот же адрес, что вы использовали для своего профиля.

Если же вы зарегистрированы и получили свой граватар, тогда возможны другие причины отсутствия изображений:

  • Отсутствие кода для отображения граватаров в вашей теме. Свяжитесь с автором вашей темы для исправления или поменяйте тему.
  • Если же код присутствует, то убедитесь что на вашем сайте аватары включены и настроены. Для этого перейдите в «Параметры → Обсуждение» и в самом низу страницы убедитесь, что блок включен (стоит галочка на отображении) и установите остальные настройки по своему вкусу.

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

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

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ