Как добавить аватарку к имени автора (данные Об Авторе) – в начале или финале статьи

Многие блогеры (в начале славных дел) запускают свой проект на бесплатных шаблонах, в которых, как известно, авторы тем не всегда снабжают код какими-то полезными примочкам.

Одна из таких примочек – аватарка, рядышком с именем автора поста. Или в начале статьи или, как теперь делают многие, в финале поста и к тому же с какими-то пояснениями об авторе.

Вот сегодня и расскажу о нескольких вариантах добавления аватарки к имени автора статьи: без плагинов!

Это полезно для тех администраторов сайтов, на площадке которых публикуются несколько авторов.

Занавес открывается:

 

как добавить аватарку к имени автора статьи – в начале статьи

 

 

 

 

 

 

 

 

А мы приступим:

 

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

 

 

<?php echo get_avatar( get_the_author_meta('user_email'), 42 ); ?>

 

 

42 (size) размер аватарки в px – пикселях (высота – height и ширина – width)

 

 

 

 

Также стилистику можно привязать посредством параметра 'extra_attr' – некоторые атрибуты тега img.

 

 

<?php echo get_avatar( $current_user->user_email, 42, '', '', array('class'=>'pull-left', 'extra_attr'=>'style="margin: 4px 0;"') ); ?>

 

 

 

С теоретической стороной в общих чертах разобрались.

 

 

Приступим к практической…

 

…где поступим несколько иначе… и к тому же, все стили css аватарки у нас будут располагаться как и надлежит – в файле стилей.

 

 

 

Вот такой код нужно поместить в соответствующий файл вашего шаблона. Обычно помещают в тот документ, который отвечает за обработку отдельной записи, или страницы.

 

Имена файлов могут быть различны: всё в зависимости от шаблона. Например: single.php

 

Строки кода помещать в оптимальное для вас место. Где-то рядом с функцией вывода имени автора поста:

<?php the_author() ?>.

 

 

<?php
echo '<span class="my-ava">';

echo get_avatar( get_the_author_meta('user_email'), 42 ); // 42 размер авы
echo '</span>';
?>

 

 

 

 

 

 

стили css для аватарки автора поста

 

 

.my-ava{margin:0 5px 0 0;float:left}

 

или:

 

.my-ava img{margin:0 5px 0 0;float:left}

 

 

 

Это @media стили – если хотите чтобы картинка авы не отображалась на маленьком экране телефона, к примеру: 780px.

 

 

@media only screen and (max-width:780px){.my-ava{display:none}}

 

 

Что-то типа как на скрине должно получиться: (я на тестовом сайте срисовывал картинки, так что на стили не обращайте внимания: у вас получится всё в соответствии с вашими требованиями)

 

 

 

 

 

 

как добавить аватарку к имени автора – в финале статьи

 

 

 

Вот такой код поместите в соответствующий файл:

 

 

<?php
echo '<span class="my-ava">';

echo get_avatar( get_the_author_meta('user_email'), 42 );
echo '<span class="postmesy">&nbsp;автор:&nbsp;'; the_author(); echo '&nbsp;в теме:&nbsp;'; the_category(', '); echo '</span>'; echo '<br />текст об авторе';
echo '</span>'; ?>

 

 

Советую прописывать приведённый выше код у себя в файле после функции the_content();, отвечающей за вывод контента: текста и прочего… Ищите где-то в серёдке документа…

 

 

Функции в строке кода возможно на своё усмотрение регулировать: или вовсе убрать ненужные. Или, например, при размещении аватарки и имени автора в конце статьи – в начале в этом случае мета убирают.

 

К тому же не забудьте организовать микроразметку в соответствии с тем, как у вас было ранее… Вот статья внедрения микроразметки на сайт с рубриками различной тематики: как вы знаете, для каждой тематики, существует соответствующая разметка.

 

 

 

В итоге проделанных работ – получится примерно так:

 

 

 

 

 

 

.postmesy – спан класс произвольный. Как правило используют класс из активного шаблона, чтоб ближе к стилистике, так сказать…

 

 

 

 

 

 

Если возникли вопросы по поводу вывода (привязки) аватара к имени автора статьи, милости прошу к комментариям…

 

 

На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 

Online консультация по настройкам и созданию сайтов на WordPress