Круглі аватарки користувачів для WordPress-сайту

Круглі зображення зараз на хвилі. Але що ще крутіше — це, як на мене, круглі аватарки. Тож над цим ми й попрацюємо у цій статті.

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

Ось як виглядає звичайний аватар автора:

А ось як він виглядає після використання деякого простого CSS.

Як це завжди буває перед змінами теми, краще використовувати дочірню тему (або спеціальний блок 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%;
 }

Всі ці рядки з 50% – для підтримки різних браузерів. Дехто вважає, що в наш час вам потрібно лише межа-радіус: 50%; але якщо ви хочете бути впевненим на 100%, використовуйте весь цей код.

Збережіть файл. Має спрацювати.

Якщо не спрацювало.

Якщо цей код не спрацював, то, швидше за все, у вашій темі не використовується клас.аватарЯкщо справа в цьому, є кілька способів, як з'ясувати назву цього класу у вашій темі.

Ви можете пошукати у коді біля вашого аватара, щоб дізнатися ім'я класу. Chome і Firefox спрощують це завдання - просто клацніть по елементу (в даному випадку по аватару) і потім виберіть "Перевірити елементв контекстному меню.

Тепер можна вивчити CSS. Ось приклад, як це виглядає у Firefox. Для цього тесту я використав стандартну тему Twenty Twelve і, як виявилося, має інше ім'я класу. Нижче ви можете бачити, що ім'я класу тут не просто "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). Навіть якщо клас має іншу назву, дуже ймовірно, що вона містить слово "avatar".

Зверніть увагу: слово "avatar" може використовуватись у багатьох місцях. Продовжуйте шукати потрібний клас.

Те ж саме для коментарів

Звичайно, ви можете зробити такі аватари і у блоці коментарів. У цих аватарів можуть бути трохи інші назви класів, і це також доведеться пошукати. У моєму випадку при перевірці теми Twenty Twelve мені не вдалося легко знайти ім'я класу з правого клацання і перевірці елемента.

Я не експерт в CSS, так що можливо це просто мені не вдалося знайти, але я вирішив не втрачати часу і перейшов до пошуку слова "avatar" в CSS файлі. Я швидко знайшов блок.commentlist .avatar" у файлі. Підозрюючи, що це правильний стиль, я спробував - і спрацювало. Ось що я додав (зверніть увагу: тут не було тега "img")

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

Ось результат:

Зображення не відображаються?

У деяких може бути проблема серйозніша – зображення можуть взагалі не відображатися. Чому ж?

За промовчанням WordPress використовує для фотографій користувачів "gravatars". Якщо у вас його немає, ви можете отримати граватори (тобто аватари) на ваш сайт, зареєструвавшись на сайті gravatar.com з тією ж адресою, яку ви використовували для свого профілю.

Якщо ви зареєстровані на gravatar.com, але не бачите зображень, причини можуть бути такими:

• У вашій темі немає коду для відображення граваторів. У такому разі вам потрібно зв'язатися з автором вашої теми.
• Переконайтеся, що аватари включені на вашому сайті. Перейдіть до Параметри → Обговорення, прокрутіть вниз і переконайтеся, що відповідний блок вибраний (див. скріншот нижче).

Зверніть увагу: якщо ви використовуєте плагін для відображення аватарів користувачів та авторів, вам доведеться розібратися з CSS відповідного плагіна. При оновленні вашого плагіна зміни перезапишуться, тому вам доведеться їх повторити.

Джерело: wpmu.org

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/