Круглі аватарки користувачів для 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% – для підтримки різних браузерів. Дехто вважає, що в наш час вам потрібно лише border-radius: 50%; але якщо ви хочете бути впевненим на 100%, використовуйте весь цей код.

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

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

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

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

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