Шаг №45.Создаем аватар пользователя для WordPress.

Привет народ. Сегодня поговорим о том как немного украсить сайт на wordpress, а если конкретно то о том как добавить аватар в wordpress, и как красиво оформить аватар на wordpress.

Как обычно сначала дадим определение что такое аватар.

Аватар – это картинка, которая идентифицирует пользователя на сайте, может выводиться в комментариях, заметках,и других модулях на сайте.Как правило пользователь сам загружает на сайт аватар.

Что касается wordpress, то в wordpress есть несколько типов аватаров пользователей. Администратор сайта на wordpress имеет также возможность сгенерировать в автоматическом режиме,аватары для тех пользователей, которые не загрузили на сайт или блог свой аватар.

Наша любимая CMS wordpress поддерживает вывод аватаров, загруженных во всемирно известной системе глобально распознаваемых аватаров Gravatar.

Сервис Gravatar действует по принципу, когда пользователь один раз регистрируется в сервисе, добавляет аватарку один раз, после чего сервис делает привязку email с которого был зарегистрирован пользователь,к аватарке.

Предлагаю посмотреть все по шагам.

Добавление аватара в Gravatar.

1)Идем на сайт https://ru.gravatar.com/ Красной стрелочкой нужно ввести email, к которому будет в последующем привязан аватар пользователя.Введите свой email и нажмите на зеленую кнопочку “Get Your Gravatar”.

Добавление аватар в wordpress

2)На следующей страничке, будет сообщение о том что Gravatar отправили письмо для подтверждения на email, перейдите в свою почту и нажмите на ссылочку активации аккаунта.
Регистрация в Gravatar
3)Введите свое имя в поле ввода помеченное оранжевой стрелочкой, и дважды пароль в поля помеченные красными стрелочками. Пароли должны быть одинаковыми.Нажмите на кнопку “Check” и убедитесь что пользователей зарегистрировавшихся с Вашим именем нет.А если есть пользователи с Вашим именем, придумайте имя еще раз.Поставьте галочку о том что Вы согласны с правилами сервиса Gravatar, после чего жмите кнопку “Регистрация”.

Создаем аватарку для wordpress

4)После регистрации в Gravatar появится ссылочка на которую нужно нажать, для добавления аватара к email.

Аватарки в wordpress

5)Выбираем из какого источника необходимо добавить картинку, существует три варианта с жесткого диска, по адресу URL, и картинка загруженная ранее.Мы с Вами будем добавлять картинку с жесткого диска, а следовательно нажимайте кнопку отмеченную красной стрелочкой.Ну а если Вы уверены в своих силах можете попробовать и другие варианты.

Выбор изображения для аватара

6)Переходим к загрузке аватара с жесткого диска.Нажмите кнопку выберите файл, и выберите интересующую аватарку,после чего жмем “Дальше”.

Аватарки в wordpress

7)На этом этапе мы можем изменить размер изображения.Для изменения размера нажмите на уголок пунктирной линии(указана стрелочкой на рисунке) и потяните по диагонали вниз или вверх.Все изменения в режиме реального времени видны в правой части в предварительном просмотре.После изменения размера жмем кнопку завершить.

Аватар wordpress

8)Завершающий этап.Жмем на кнопочку отмеченную стрелочкой,что собственно будет означать что Ваш аватар разрешено показывать на сайтах с любой аудиторией.

Рейтинг аватар

На этом по добавлению аватара в сервис Gravatar все, теперь на всех блогах WordPress когда Вы будете указывать еmail, указанный в этом уроке выше,будет показываться Ваш аватар.

Настройка аватаров в wordpress.

Настройки аватар в wordpress находятся в пункте “Параметры”->“Обсуждения”и содержат в себе 3 пункта настройки.

1)Отображать или не отображать аватар на блоге или сайте.

Настройка аватаров в wordpress.

2)Допустимый рейтинг для отображения.Это именно те рейтинги, что показаны на рисунке выше.

Настройка аватаров в wordpress.

3)Настройка аватаров для пользователей не имеющих своего собственного аватара( не зарегистрированных в Gravatar).Вот в этом пункте как раз можно выбрать аватарку, которая будет генерироваться на основании введённого email. Если выбрать Wavatar, будут генерироваться прикольные мордочки.

Настройка аватаров в wordpress.

Как красиво оформить аватар на wordpress?

После того как мы добавили аватар в Gravatar, и настроили вывод аватаров в wordpress, пришло время улучшить и красиво оформить аватарки на wordpress.

Я люблю к изображениям добавлять небольшую красивую рамку.Вот как на примере снизу:

Как красиво оформить аватар на wordpress?

Для того что бы также красиво оформить аватары на wordpress Вам необходимо подключиться через ftp к сайту.Открыть файл style.css и добавить вот этот стиль к классу ответственному за вывод аватарок на сайте.

А как это узнать?Очень просто в хроме нужно нажать правой кнопкой на аватарке на Вашем сайте, а дальше кнопочку “Просмотр кода элемента”

Как красиво оформить аватар на wordpress?

И посмотреть class который отвечает за аватар.

Как красиво оформить аватар на wordpress?

А с правой стороны, номер строчки и название файла в который нужно добавить код.Как красиво оформить аватар на wordpress?

В моем случае нужно открыть файл style.css прокрутить до 1144 рядка, и добавить:

background: white;
 
border-right: 1px solid #CCC;
 
border-bottom: 1px solid #CCC;
 
float: left;
 
width: 50px;
 
height: 50px;
 
padding: 4px;

Надеюсь статья для Вас познавательна.

Кстати изменить внешний вид сайта очень легко, если знать основные свойства css.

Голосование.

Полезна ли данная статья для Вас?

  • ильдар

    помню как я постоянно удивлялся. когда писал комментарии к блогам откуда у меня постоянно такая аватарка(которая щас стоит), она меня преследует?! а потом вспомнил что на сайте граватар зарегался и поставил себе такую))

    • http://fotokarapuz.ru ФотоКарапуз

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

  • http://novtrail.ru Полина

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

    • http://wpcreate.ru Артем Петрусенко

      Да, с рамочкой очень симпатично аватар смотрится, если сразу не получится установить, обращайтесь за помощью.

  • http://seokos.ru Томский школьник

    О, хоть что то новенькое) Всмысле про Gravatar пишет каждый второй, а вот как оформить никто. Ретвитну статью, она этого достойна 🙂

    • http://wpcreate.ru Артем Петрусенко

      Спасибо за ретвит!

  • http://susku.pusku.ru Александр

    Big thx!

  • http://lalaki.ru ОКСАНА

    Артем, добрый день!У меня два сайта. есть граватар, который высвечивается на двух сайтах. Что нужно сделать, чтобы мой граватар не показывался на втором сайте? заранее спасибо за ответ.

    • http://wpcreate.ru Артем Петрусенко

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

    • http://alsway.ru/ Евгений

      Только что решал ту же проблему. Оказалось нужно сменить e-mail адрес в настройках профиля (кнопка в правом верхнем углу админ-панели ВП).

  • Герман

    Спасибо Вам за уроки. 🙂 У меня возникла проблема с аватарой, в настройка граватара выбрана категория G, на сайте в настройках тоже. При наведении курсора на профиль в панели WordPress отображается мой граватар, но в комментариях почему-то нет, показывается стандартный символ граватара. В чем может быть проблема? 🙁

    • http://wpcreate.ru Артем Петрусенко

      Может в настройках шаблона что то не так?

      • Герман

        Да, наверное. Проблему не решил, зато нашел плагин User Avatar, это даже лучше граватара 🙂

  • http://wpnice.ru/ Dmitry

    C граватарами все понятно, спасибо. Но мне вот всегда было интересно — можно ли подменить стандартные наборы аватарок в wordpress. Там же есть Wavatar, Identicon и прочие. Вот как создать такой набор но только свой? Может плагин такой есть?

  • http://vkussnyshka.ru Валерий

    Спасибо за информацию, возьму на заметку

  • http://строим Вадим

    Добрый день Артем. Хороший блог у вас )
    Если вам не сложно, скажите — с граватарами все ясно. А где стоит или как встроить код, чтобы аватар вообще выводился в комменты? Темой видимо не предусмотрен вывод аватара. Буду весьма благодарен за помощь

  • Андрей

    Спасибо

  • pasha

    альтернатива !!!
    ищем в файлах index.php, page.php, archive.php, single.php такую вещь либо что то связаное с аватаром и меняем на у меня работает!!!

  • http://oda-kulinarii.ru/blog/ Алена

    Артем, спасибо за статью. Не подскажите вот что: если установлен шаблон и в комментариях вообще не отображается окошко аватарки, получается оно в самом шаблоне не предусмотрено. И если это так, как сделать так, чтобы аватарки в комментариях все таки отображались?
    Заранее благодарна.

  • http://vse-v-sonnike.ru Валентина

    Спасибо за полезную информацию

  • http://ncuxolog.astrakraft.ru/ Светлана

    Артем, добрый день. Как долго надо ждать письмо на почту с ссылкой?

  • http://vseobloge.ru Владимир Вонлайнер

    Спасибо, Ваша статья мне тоже помогла. 🙂

    • http://kylinarka.com Татьяна

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

      • http://wpcreate.ru Артем Петрусенко

        Зайти на сервис граватар, и там изменить аватарку.

  • http://otpusk-zdorovo.ru Пенькова Наталья

    А у меня такая проблемка. Почему в комментариях на моем сайте (я админ) не отображается мой граватар? На других сайтах — пожалуйста! Чужие граватары на моем сайте — легко… В чем может быть прикол?

    • http://wpcreate.ru Артем Петрусенко

      Наталья, email адрес на который зарегистрирован сайт должен быть добавлен в аккаунт Gravatar 😉

      • http://www.otpusk-zdorovo.ru/ Наталья

        Адрес добавлен. Правда, как дополнительный, а не основной. Так ведь тоже должно работать? Иначе зачем его вводить?

  • http://photo-drive.ru/wordpress/ land_driver

    Спасибо, получилось!

  • http://00x.su/ Агент 00x

    Мне больше плагином Simple Avatars по душе, вроде как оттуда тоже должно выводить в других местах. Мне просто лень регистрироватся на лишнем сайте.

  • http://perekrestki-gekaty.ru/ Юлия

    А у меня такой вопрос: почему на моем сайте, аватарки отображаются с ошибкой? Если человек, который оставил комментарий, не зарегистрирован в системе граватар, то вместо аватарки появляется изображение «треснутого рисунка». В консоли (параметры-обсуждение) все настроено нормально. И, отображение аватара отмечено, и рисунок выбран. Но вот такой косяк. Пыталась отредактировать код аватара, прямо со страницы — не сохраняется. SOS!

    • http://wpcreate.ru Артем Петрусенко

      Скорее всего неправильно указан путь к стандартным картинкам.

      • http://perekrestki-gekaty.ru/ Юлия

        Это я понимаю. Но фишка в том, что путь ведет на сайт граватара. Видимо, ссылка сгенерирована автоматически. Я заходила на сайт знакомой, просматривала код картинок у неё (там нет моих проблем) и прописала «правильный» адрес ведущий на граватар. Все получилось, но сохранить изменения в коде страницы я не смогла, и после обновления страницы «брак» вернулся. Поэтому, я прошу вас Артем: может вы в двух словах сможете мне объяснить, как сохранить изменения в коде? Я умная, мне долго объяснять не надо! 😳 🙄

        • http://wpcreate.ru Артем Петрусенко

          Юлия, насколько я понял, то у Вас проблема со стандартными аватарами на сайте.
          Вот мой вариант решения этой проблемой:
          1)Подключитесь по ftp к сайту.
          2)Перейдите в папку, где лежит Ваш шаблон, и найдите в ней файл functions.php , если его нет, то нужно создать и добавить такие строки:

              function newgravatar ($avatar_defaults) {
              $myavatar = get_bloginfo('template_directory') . '/image/no_image.png';
              $avatar_defaults[$myavatar] = "new_avatar";
              return $avatar_defaults;
              }
              add_filter( 'avatar_defaults', 'newgravatar' );

          Хочу уточнить что этот код, должен быть расположен между этими открывающими и закрывающими тегами:

          <?php 
           
          ?>

          3)В папку image, которая находится в папке с шаблоном нужно добавить файл no_image.png (картинка которая будет отображаться по умолчанию.

          Пробуйте! 😉

  • http://www.Samoylova-Olga.ru Ольга

    Здравствуйте, Артём! Помогите, пожалуйста, разрешить мне одну проблему, а заключается она вот в чём: при регистрации на Gravatar.com я написала другой emai, не такой как на моём сайте, а этот email просто добавила позже, т.к. менять первоначальный, как я понимаю, там нельзя. Теперь мой аватар отображается на всех сайтах, где я оставляю комментарии, но только ни на моём сайте. Что делать? Может быть, какой-то плагин есть для аватара. Спасибо.

  • http://www.krasbaks.ru Rencontrez

    С удовольствием бы установил вид аватаров как у вас. Просто уже боязно лесть в CSS… 💡

  • http://leinfo.ru Alex

    Хорошая статья, спасибо. Только зарегался а аватара нет.

    • http://leinfo.ru Alex

      уже есть)))

  • Юрий

    Спасибо!

  • http://zdravienetbolezni.ru/ Ильгиз

    Интересная статья)

  • Яна

    Эта статья уже не актуальна, сейчас нет регистрации применяются только плагины

    • http://marta-style.by Таня

      Прикольно!

      • bardts

        Плагины для чого именно?