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

Сделать такой блок очень легко, для этого мы будем использовать код HTML и CSS, а внутреннюю динамически изменяемую информацию, в зависимости от автора поста, сделаем с помощью стандартных тегов автора WordPress. Посмотреть все теги автора можно в кодексе WordPress здесь.

Делаем HTML-разметку для блока

Данный код должен быть размещен в основном цикле вывода ваших постов в анонсе или полной новости, в зависимости от того, где именно вы хотите выводить блок с авторской информацией.

<div id="article-author">
<div class="author">Автор статьи: Иван Иванов</div>
<div id="author-image">
<img src="/author-images/1.gif" alt="Об авторе"/>
</div>
<div id="author-text">
Здравствуйте! Меня зовут Иван Иванов и я рад вас приветствовать на своем блоге, который посвящен WordPress. Если вам понравились мои статьи, то вы можете подписаться на обновленние блога по RSS или в Twitter. Также добавляйте меня в Facebook и в FriendFeed.
</div>
<div class="post-counter">
Иван Иванов написал 12 статей.
</div>
</div>

Как видите,  в общий div-блок “article-author” входит div-блок “author”, который будет содержать заголовок автора поста, “author-image”, содержащий миниатюру изображения автора, в “author-text” будет выводиться основная авторская информация и, наконец, в ”post-counter” отобразим количество постов, написанных автором.

CSS для блока автора

#article-author {
float: left;
width: 560px;
margin-bottom: 20px;
border: 1px solid #d9d9d9;
background-color: #efefef;
padding: 10px;
}

#article-author a {
color: #56b0d8;
}

#article-author a:hover {
color: #000;
}

#author-image {
float: left;
height: 70px;
width: 70px;
border: 1px solid #d9d9d9;
background-color: #FFFFFF;
margin-right:10px;
padding:5px;
}

#author-text {
width: 560px;
}

.post-counter {
margin-top:15px;
}

.author {
color: #000000;
text-transform: capitalize;
font-weight: normal;
font-size: 14px;
letter-spacing: -1px;
margin-bottom: 10px;
}

Интегрируем первый тег автора

Для интеграции нам необходимо всего лишь заменить имя автора в HTML-разметке на специальный тег автора the_author_link ();. Этот тег будет показывать имя автора поста, которое в то же время будет являться и ссылкой на его сайт. Имя автора и адрес сайта задается в административной панели WordPress в разделе “Профиль”.

Теперь заменим имя автора в нашем HTML-блоке на тег the_author_link ();

результате, HTML-код блока примет следующий вид:

<div id="article-author">
<div class="author">Автор статьи: <?php the_author_link(); ?></div>
<div id="author-image">
<img src="/author-images/1.gif" alt="Об авторе"/>
</div>
<div id="author-text">
Здравствуйте! Меня зовут Иван Иванов и я рад вас приветствовать на своем блоге, который посвящен WordPress. Если вам понравились мои статьи, то вы можете подписаться на обновленние блога по RSS или в Twitter. Также добавляйте меня в Facebook и в FriendFeed.
</div>
<div class="post-counter">
<?php the_author_link(); ?> написал 12 статей.
</div>
</div>

Выводим миниатюру изображения автора

Теперь настало время добавить миниатюру нашего автора. Выбор и добавление миниатюры основано на присвоении каждому зарегистрированному пользователю блога идентификатора. Но для начала, так как у нас в CSS задан размер миниатюры 70 на 70 пикселей, создадим такую миниатюру, создадим папку, например в корневом каталоге и будем размещать там все миниатюры авторов постов. Обратите внимание, название графического файла будет числовым и соответствовать идентификатору автора. Чтобы узнать идентификатор пользователя, нужно в разделе “Записи” навести указатель мыши на имя автора и внизу появится ссылка с указанием его идентификатора на конце.

Таким образом, имя нашей графической миниатюры должно быть 1.gif или 1.png,  формат изображения вы вибираете сами. Вместо имени файла прописываем тег для идентификации изображения, соответствующее автору. DIV-блок, выводящий миниатюру теперь примет вид:

<div id="author-image">
<img src="/author-images/<?php the_author_ID(); ?>.gif" alt="Об авторе" />
</div>

Авторское резюме

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

Заметьте в данном поле можно вводить текст с элементами HTML-кода, поэтому можно с легкостью разместить активные ссылки на ваш сайт, портфолио, страницы в социальных сетях и т.д.

<div id="article-author">
<div class="author">Автор статьи: <?php the_author_link(); ?></div>
<div id="author-image">
<img src="/author-images/<?php the_author_ID();?>.gif" alt="Об авторе"/>
</div>
<div id="author-text">
<?php the_author_description();?>
</div>
<div class="post-counter"><?php the_author_link(); ?> написал 12 статей.</div>
</div>

Выводим количество опубликованных статей автора

Ну, и напоследок нам осталось вывести количество записей автора. Делается это с помощью тега the_author_posts();, который должен располагаться, впрочем как и весь наш код, внутри цикла Loop. Тег будет выводить только опубликованные автором статьи, при этом черновики и запланированные посты  не учитываются.

<div class="post-counter">
<?php the_author_link(); ?> написал <?php the_author_posts(); ?> статей.
</div>

Итоговый HTML-код, выводящий информационный блок об авторе поста будет выглядеть вот так:

<div id="article-author">
<div class="author">Автор статьи: <?php the_author_link(); ?></div>
<div id="author-image">
<img src="/author-images/<?php the_author_ID();?>.gif" alt="Об авторе" />
</div>
<div id="author-text">
<?php the_author_description();?>
</div>
<div class="post-counter">
<?php the_author_link(); ?> написал <?php the_author_posts(); ?> статей.
</div>
</div>

Можете менять стиль блока посредством CSS так, как вам нравится. Возможно, у вас получится какой-нибудь интересный вариант, которым можете поделится со всеми читателями.