Как изменить размеры граватара

Продолжаю тему граватара. Когда установила его в Топ комментаторов и в название статьи, обратила внимание, что в комментариях граватар какой-то мелкий, невзрачный, а в виджете – хорошенький такой :).

Возник вопрос: почему? И второй вопрос: Что делать?

Обычным путем, через изменение стилей css, увеличить картинку в комментариях не получалось. Пришлось опять идти за подсказкой в Google.

И подсказка нашлась, даже не одна. Но с одной что-то не получилось, сейчас уже и не помню, что, а другая подошла.

Правда, у этого способа есть один, но ОЧЕНЬ большой минус: редактировать придется файл WordPress, а это значит, что при его обновлении все вернется «на круги своя» и придется проделывать эту манипуляцию снова.

Я решила сделать, а Вы – на Ваше усмотрение.

Итак, идем на хостинг, в корневую папку сайта. Ищем там папку wp-includes, а в ней файл comment-template.php.

Как я напоминаю в каждой статье: если приходится редактировать файлы темы, сначала создаем резервную копию этого файла, а потом уже рабочую. Я обычно редактирую файлы в редакторе Notepad++.

Сначала встроенным поиском (или с помощью горячих клавиш Ctrl+F) ищем текст «avatar_size». Мне выдало 5 строк с таким текстом. 4 из них не трогаем, нам нужна вот эта:

И конкретно, число 32. Это и есть заложенные в WordPress размеры граватара в комментариях. Меняем это число на другое (я поставила 64).

Сохраняем файл и снова загружаем на хостинг в ту же папку wp-includes. После обновления сайта увидим, что размеры картинки в комментариях изменились.

Как изменить форму граватара (как сделать круглый граватар)

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

Файл style.css находится в папке Вашей темы:

…wp-content → themes → Ваша тема.

Не буду повторяться, как именно нужно редактировать файл темы.

Я вставила 3 блока:

• Для виджета «Топ комментаторов»:

• Для заголовка статьи:

• Для комментариев:
  
  .comment-body img.avatar { float: left; border-radius: 32px; -webkit-border-radius: 32px; -moz-border-radius: 32px; -o-border-radius: 32px; -ms-border-radius: 32px; -khtml-border-radius: 32px; box-shadow:#777777 0px 2px 3px; -webkit-box-shadow:#777777 0px 2px 3px; -moz-box-shadow:#777777 0px 2px 3px; padding:3px; background:#ffffff; border-image:initial; border:1px solid #abcabc; margin-right: 10px; }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  .comment-body img.avatar { float: left; border-radius: 32px; -webkit-border-radius: 32px; -moz-border-radius: 32px; -o-border-radius: 32px; -ms-border-radius: 32px; -khtml-border-radius: 32px; box-shadow:#777777 0px 2px 3px; -webkit-box-shadow:#777777 0px 2px 3px; -moz-box-shadow:#777777 0px 2px 3px; padding:3px; background:#ffffff; border-image:initial; border:1px solid #abcabc; margin-right: 10px; }

Какие-то части кода повторяются, их можно было объединить, но я не стала, так нагляднее.

Небольшие пояснения по коду:

float: left; – означает, что граватар установлен слева, и текст идет следом за картинкой, а не ниже ее. Если Вы хотите установить граватар справа, соответственно пишите float: right;

width:40px; height:40px; – ширина и высота граватара.

padding:3px; margin-right: 10px; – это разные отступы. Если не устроит так, как получится, можно менять эти величины (подвигать туда-сюда).

К сожалению, у меня не сохранились ссылки на статьи, по которым я делала эти фишки. Снова перелопачивать поисковую выдачу Google мне не хочется. Если автор откликнется, я с удовольствием ссылку добавлю. Правда, я так понимаю, что это все перепечатывается многократно, и кто автор – поди догадайся…

ПРИМЕЧАНИЕ:

• 1-й блок кода (Для виджета «Топ комментаторов») Вам нужно вставлять, если только Вы вставляли этот виджет по моей статье:
• 2-й блок кода (Для заголовка статьи) Вам нужно вставлять, если у Вас уже установлен граватар в названии статьи (опять же по моей статье)
• 3-й блок должен подойти всем, но это не 100%-но, потому что в Вашей теме могут по-другому называться названия классов в кодах HTML.
• Если не будет получаться, пишите в комментариях, обязательно указав URL Вашего блога.

Сегодня мы с Вами научились, как изменить размер и форму граватара.

И, как обычно, в заключение – видеоролик:

Это тоже интересно: