Привет народ. Сегодня поговорим о том как немного украсить сайт на wordpress, а если конкретно то о том как добавить аватар в wordpress, и как красиво оформить аватар на wordpress.
Как обычно сначала дадим определение что такое аватар.
Аватар – это картинка, которая идентифицирует пользователя на сайте, может выводиться в комментариях, заметках,и других модулях на сайте.Как правило пользователь сам загружает на сайт аватар.
Что касается wordpress, то в wordpress есть несколько типов аватаров пользователей. Администратор сайта на wordpress имеет также возможность сгенерировать в автоматическом режиме,аватары для тех пользователей, которые не загрузили на сайт или блог свой аватар.
Наша любимая CMS wordpress поддерживает вывод аватаров, загруженных во всемирно известной системе глобально распознаваемых аватаров Gravatar.
Сервис Gravatar действует по принципу, когда пользователь один раз регистрируется в сервисе, добавляет аватарку один раз, после чего сервис делает привязку email с которого был зарегистрирован пользователь,к аватарке.
Предлагаю посмотреть все по шагам.
Добавление аватара в Gravatar.
1)Идем на сайт https://ru.gravatar.com/ Красной стрелочкой нужно ввести email, к которому будет в последующем привязан аватар пользователя.Введите свой email и нажмите на зеленую кнопочку “Get Your Gravatar”.
2)На следующей страничке, будет сообщение о том что Gravatar отправили письмо для подтверждения на email, перейдите в свою почту и нажмите на ссылочку активации аккаунта.
3)Введите свое имя в поле ввода помеченное оранжевой стрелочкой, и дважды пароль в поля помеченные красными стрелочками. Пароли должны быть одинаковыми.Нажмите на кнопку “Check” и убедитесь что пользователей зарегистрировавшихся с Вашим именем нет.А если есть пользователи с Вашим именем, придумайте имя еще раз.Поставьте галочку о том что Вы согласны с правилами сервиса Gravatar, после чего жмите кнопку “Регистрация”.
4)После регистрации в Gravatar появится ссылочка на которую нужно нажать, для добавления аватара к email.
5)Выбираем из какого источника необходимо добавить картинку, существует три варианта с жесткого диска, по адресу URL, и картинка загруженная ранее.Мы с Вами будем добавлять картинку с жесткого диска, а следовательно нажимайте кнопку отмеченную красной стрелочкой.Ну а если Вы уверены в своих силах можете попробовать и другие варианты.
6)Переходим к загрузке аватара с жесткого диска.Нажмите кнопку выберите файл, и выберите интересующую аватарку,после чего жмем “Дальше”.
7)На этом этапе мы можем изменить размер изображения.Для изменения размера нажмите на уголок пунктирной линии(указана стрелочкой на рисунке) и потяните по диагонали вниз или вверх.Все изменения в режиме реального времени видны в правой части в предварительном просмотре.После изменения размера жмем кнопку завершить.
8)Завершающий этап.Жмем на кнопочку отмеченную стрелочкой,что собственно будет означать что Ваш аватар разрешено показывать на сайтах с любой аудиторией.
На этом по добавлению аватара в сервис Gravatar все, теперь на всех блогах WordPress когда Вы будете указывать еmail, указанный в этом уроке выше,будет показываться Ваш аватар.
Настройка аватаров в wordpress.
Настройки аватар в wordpress находятся в пункте “Параметры”->“Обсуждения”и содержат в себе 3 пункта настройки.
1)Отображать или не отображать аватар на блоге или сайте.
2)Допустимый рейтинг для отображения.Это именно те рейтинги, что показаны на рисунке выше.
3)Настройка аватаров для пользователей не имеющих своего собственного аватара( не зарегистрированных в Gravatar).Вот в этом пункте как раз можно выбрать аватарку, которая будет генерироваться на основании введённого email. Если выбрать Wavatar, будут генерироваться прикольные мордочки.
Как красиво оформить аватар на wordpress?
После того как мы добавили аватар в Gravatar, и настроили вывод аватаров в wordpress, пришло время улучшить и красиво оформить аватарки на wordpress.
Я люблю к изображениям добавлять небольшую красивую рамку.Вот как на примере снизу:
Для того что бы также красиво оформить аватары на wordpress Вам необходимо подключиться через ftp к сайту.Открыть файл style.css и добавить вот этот стиль к классу ответственному за вывод аватарок на сайте.
А как это узнать?Очень просто в хроме нужно нажать правой кнопкой на аватарке на Вашем сайте, а дальше кнопочку “Просмотр кода элемента”
И посмотреть class который отвечает за аватар.
А с правой стороны, номер строчки и название файла в который нужно добавить код.
В моем случае нужно открыть файл style.css прокрутить до 1144 рядка, и добавить:
background: white; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; float: left; width: 50px; height: 50px; padding: 4px;
Надеюсь статья для Вас познавательна.
Кстати изменить внешний вид сайта очень легко, если знать основные свойства css.
Голосование.
Полезна ли данная статья для Вас?