установка и настройка плагина WP First Letter Avatar, устанавливающего пользователям аватары по первой букве их имени, аватар по первой букве

WP First Letter Avatar (Плагин кастомных аватарок)

Сегодня поговорим об очень интересном на мой взгляд плагине — WP First Letter Avatar. Он устанавливает в качестве аватара первую букву комментатора, если тот не имеет граватара. Такая фитча уже давно и плотно осела в gmail , telegram, mail.ru, yandex и т.д. А это между прочим мировые гиганты IT индустрии. Уж они то точно знают как лучше.

Сам по себе плагин не генерирует css как оформление, а всего лишь берет картинки из файла, что с одной стороны меньше грузит сервер, а с другой увеличивает вес страницы.

О плагине я узнал от коллеги по цеху – вордпресплагина. Он кстати разработал собственный набор (roboto и opensans), который на вид куда более привлекателен, нежели default.

Рассмотрим плагин и его установку:

WP First Letter Avatar (Плагин кастомных аватарок)

Автором плагина является: Dev49.net.

Рассматриваемая мной версия: 2.2.8 (опубликована 5 дней назад)

Совместим в wp 4.6 и выше.

Активных установок более 3000, а скачиваний почти 30 000.

Установка и настройка:

Скачиваем плагин
Как устанавливать вы уже в курсе, а если нет — советую ознакомиться и продолжить.

Настройка плагина прячется в «Настройки» — «WP First Letter Avatar».

WP First Letter Avatar (Плагин кастомных аватарок)

И это пожалуй первый попавшийся мне плагин в котором разбираться не нужно, т.к. всё на русском языке (с иностранным у меня дела обстоят туго):

WP First Letter Avatar (Плагин кастомных аватарок)

А если пролистать страницу ниже присутствует русскоязычная инструкция по настройке понятная даже ребенку.

WP First Letter Avatar (Плагин кастомных аватарок)

Нет смысла переписывать всё еще раз, поэтому поиграемся со стилями:

Первым делом я отыскал стилевой файл плагина, находящийся в директории с плагином в папке css и называющийся style.css:

WP First Letter Avatar (Плагин кастомных аватарок)

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

WP First Letter Avatar (Плагин кастомных аватарок)

Т.к. в этом файле используется только один стиль, остальные почти 100% будут находиться в стилевых файлах темы. Открыв просмотр кода (ctrl+shift+i) я выбрал курсор и нашел сначала в сгенерированном html файле названия классов, использованных для обрамления аватара. После я нашел их-же и в css файле моей темы.

WP First Letter Avatar (Плагин кастомных аватарок)

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

Пишем стили на условии: когда мышь вне аватара — он прозрачен на 10%, а при наведении спустя 0.1 секунду анимации — становится непрозрачным. Запутались? В коде это выглядит куда проще:

/* WP First Letter Avatar  */
.vcard .avatar {
    opacity: 0.9;
    -webkit-transition: opacity 0.1s linear;
     -moz-transition: opacity 0.1s linear;
       -o-transition: opacity 0.1s linear;
          transition: opacity 0.1s linear;

}
.vcard .avatar:hover {
    opacity: 1;
    -webkit-transition: opacity 0.1s linear;
     -moz-transition: opacity 0.1s linear;
       -o-transition: opacity 0.1s linear;
          transition: opacity 0.1s linear;
}

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

Конечный вариант:

WP First Letter Avatar (Плагин кастомных аватарок)

6 thoughts to “WP First Letter Avatar (Плагин кастомных аватарок)”

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

Ваш e-mail не будет опубликован.