Добавление информационного блока об авторе поста

Добавление информационного блока об авторе поста

4.8/5 - (5 голосов)

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

Сделать такой блок очень легко, для этого мы будем использовать код 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 так, как вам нравится. Возможно, у вас получится какой-нибудь интересный вариант, которым можете поделится со всеми читателями.

Добавление информационного блока об авторе поста: 16 комментариев

  1. Благо я на блоге один,))). Хотя ВП 3+ поддерживает многоавторство, правда не так подробно.
    Спасибо за подробное описание такого инструмента.

  2. олеся, обязательно заполню раздел “Об авторе”. Блог пока еще совсем молодой, поэтому некоторые моменты мог и упустить.

  3. Здравствуйте Вадим!
    А у меня проблема наоборот:)
    Начал делать сайт для работы на движке WP, взял новую тему. В конце всех постов выводится какая-то информация об авторе (обо мне) с фотографией с таким текстом: “This information box about the author only appears if the author has biographical information. Otherwise there is not author box shown. Follow YOOtheme on Twitter or read the blog.”
    Мне это не надо, но где это можно убрать – я не понимаю. Нашел файл с таким текстов внутри – wp-content\install.php. Удалил его, но все осталось. Ладно бы хоть на русском было бы:)
    Может, подскажите, как это можно убрать?
    С уважением. Дмитрий

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

  4. Благодарю за ответ. Вчера вечером, после упорных размышлений, все-таки сам вспомнил про “Ваш профиль” и все сделал.. Заодно и себя про другому обозвал:)

  5. привет всем. я понимаю, что статья не про это была, но я так и не нашёл путного ответа на мой вопрос: как поменять имя автора статьи. просто я опубликовал статью, а потом захотел, чтобы владел статьёй тот, про кого она была написана. скажите пожалуйста, как это сделать?

  6. Имея права администратора, вы можете изменять профиль любого пользователя в административной части wordpress.

  7. Добрый день!
    В блоке Автор статьи: , слово “статьи” с маленькой буквы, а выводится с большой 🙂 Как исправить и в чем баг?

  8. Значит вашему блоку, в который заключена фраза “Автор статьи” задано свойство text-transform:capitalize в CSS, которое делает первую букву в каждом слове заглавной.

  9. День добрый!
    Проблема такая: Нужно вывести подобную визитку вне цикла, а функция the_author_link() работает только в пределах цикла(((( Не подскажите, чем заменить эту функцию ??

  10. Здравствуйте. А почему вам надо вывести тег the_author_link() вне цикла? Если тег выводить вне цикла, то ссылка на статьи автора не будет работать.

  11. Дело в том, что не только ссылка не работает, но и автора не подставляет.(( Задача стояла следующая, необходимо вывести полный путь к странице автора, т.е mosayt/author/nic_avtora/ , в админке в настройках профиля. дополнительные поля выводил с помощью плагина, хотел к нему прикрутить вывод данного сообщения )) как то не получилось ))) пришлось отказаться от плагина , доп поля прописать в functions php и пришлось править, что особо не хотелось, файл user-edit далее через функцию /author/nickname); ?> вывел то что надо.
    Но все таки хотелось найти более простой путь. Спасибо

  12. Вадим спасибо за статью, есть чему поучиться! Теперь буду на своих более грамотно использовать информацию об авторе.

  13. А возможно сделать так, что бы это всё выводилось лишь для некоторых авторов?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *