Май
19

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

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

Информационный блок автора поста в WordPress

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

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

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

<div id="article-author">
<div class="author">Автор статьи: Иван Иванов</div>
<div id="author-image">
<img src="http://wordpressadmin.ru/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="http://wordpressadmin.ru/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="http://www.wordpressadmin.ru/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="http://wordpressadmin.ru/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="http://wordpressadmin.ru/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 так, как вам нравится. Возможно, у вас получится какой-нибудь интересный вариант, которым можете поделится со всеми читателями.

VN:F [1.9.16_1159]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.16_1159]
Rating: +1 (from 1 vote)

Понравилась статья? Поделитесь ею в социальных сервисах!

Подпишитесь на обновление блога!

Ваш e-mail:

Понравилась статья? Вы не хотите пропускать новые статьи, посвященные Wordpress? Тогда подпишитесь на RSS или на электронный ящик и получайте новые статьи мгновенно! Также можете следить за мной в Twitter.

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

  • Нет аватара
    pavka 20.05.2011 в 01:27

    у меня изначально был многоавторным, потом остался я один)

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    олеся 21.05.2011 в 20:39

    Супер! Теперь осталось заполнить раздел “Об авторе” http://wordpressadmin.ru/ob-avtore/ ;)

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Евгений 22.05.2011 в 15:29

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Вадим Комахин 23.05.2011 в 12:29

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

    VN:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Дмитрий 27.06.2011 в 19:18

    Здравствуйте Вадим!
    А у меня проблема наоборот:)
    Начал делать сайт для работы на движке 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. Удалил его, но все осталось. Ладно бы хоть на русском было бы:)
    Может, подскажите, как это можно убрать?
    С уважением. Дмитрий

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 28.06.2011 в 16:53

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

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
  • Нет аватара
    Дмитрий 28.06.2011 в 18:08

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Денис 05.01.2012 в 06:27

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 09.01.2012 в 15:15

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

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
  • Нет аватара
    Владимир 31.01.2012 в 16:45

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 31.01.2012 в 23:14

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

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
  • Нет аватара
    Евгений 08.04.2012 в 18:46

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
    • Нет аватара
      Vadimon 09.04.2012 в 12:11

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

      VN:F [1.9.16_1159]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.16_1159]
      Rating: 0 (from 0 votes)
  • Нет аватара
    Евгений 10.04.2012 в 10:11

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Саша Алексеенко 30.06.2012 в 14:21

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)
  • Нет аватара
    Kubig 02.09.2013 в 15:18

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

    VA:F [1.9.16_1159]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.16_1159]
    Rating: 0 (from 0 votes)

Оставить комментарий

Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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

Блог про wordpress и все, что с ним связано – возможности системы, секреты и хаки, плагины, шаблоны, оптимизация, seo, безопасность и т.п. Проект для начинающих и продвинутых пользователей.

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога по E-mail:

E-mail:

Последние комментарии

Друзья проекта