Vadimon's Blog. Блоггерам и вебмастерам

В этом уроке будем делать блок «Об авторе», который должен выводиться в каждом посте.

Начинаем

Во-первых, я покажу, что у нас получится в результате урока. В верхней части (или нижней, кому как нравится) каждого поста будет добавляться  вот такой вот блок, в котором будет выводиться информация об авторе.

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

Кстати, можете посмотреть все теги автора здесь

Вставляем HTML-код

Добавляем HTML-код в файл single.php в удобное для вас место, HTML-код для блока будет выглядеть следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="article-author">
<h3>Об авторе: Иван Иванов</h3>
<div id="author-image">
<img src="http://www.site.ru/site_images/author_images/01.gif" alt="Об авторе" /></div>
<div id="author-text">
 
Привет, я Иван Иванов, программист и веб-дизайнер из России. Также веду блоги
на LiveJournal и Blogger, автор нескольких книг и учебников по программированию
и веб-дизайну.Можете посмотреть мое портфолио ЗДЕСЬ.
 
Иван Иванов написал 3 поста.</div>
</div>

Код начинается с div-а «article-author», внутри которого находится заголовок блока, заключенный в тег H3. Можете выбрать заголовок другого размера, в зависимости от дизайна вашего блога.

Внутри «article-author» вложены еще два div-а «author-image» и «author-text». DIV «article-author» будет содержать миниатюру фотографии автора размером 80х80 пикселей, а «author-text» будет содержать текст автора.

Вставляем CSS-код

Код таблицы стилей CSS для нашего блока будет выглядеть так:

#article-author {
	float: left;
	width: 598px;
	margin-top: 30px;
	border: 1px solid #d9d9d9;
	background-color: #E9E9E9;
	padding: 10px;
	clear: both;
}
 
#article-author a {
	color: #56b0d8;
}
 
#article-author a:hover {
	color: #000;
}
 
#author-image {
	float: left;
	height: 80px;
	width: 80px;
	border: 1px solid #d9d9d9;
	background-color: #FFFFFF;
	padding: 10px;
}
 
#author-text {
	float: left;
	width: 486px;
	margin-left: 10px;
	margin-top: 8px;
}
 
#author-text p {
	font-size: 12px;
	line-height: 18px;
}
 
h3 {
	color: #000000;
	text-transform: capitalize;
	font-weight: normal;
	font-size: 18px;
	letter-spacing: -1px;
	margin-bottom: 10px;
}

Вставляем тег автора поста

Чтобы подключить тег автора поста, нужно заменить некоторые слова в нашем HTML-коде тегом кода PHP. Первый тэг, который мы подключим, будет <?php the_author(); ?> или <?php the_author_link(); ?>, если хотите, чтобы имя автора отображалось ссылкой на его сайт или блог.

Тег <?php the_author_link(); ?> будет отображать ссылку на сайт автора поста. Ссылку на сайт можно установить в панели администрирования в профиле пользователя (Администрирование> Пользователи> Ваш профиль). Просто введите адрес сайта в разделе «Контактная информация».

Теперь заменим в коде текст, где упоминается имя автора на <?php the_author_link(); ?>

Наше изменение в коде выглядит таким вот образом:

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

<div id="article-author">
<h3>Об авторе: <?php the_author_link(); ?></h3>
<div id="author-image">
<img src="http://www.site.ru/site_images/author_images/01.gif" alt="Об авторе" />
</div>
<div id="author-text">
 
Привет, я Иван Иванов, программист и веб-дизайнер из России. Также веду блоги
на LiveJournal и Blogger, автор нескольких книг и учебников по программированию
и веб-дизайну.Можете посмотреть мое портфолио ЗДЕСЬ.
 
&nbsp;
 
<?php the_author_link(); ?> написал 3 поста.
</div>
</div>

Фото автора

Если вы единственный автор на вашем блоге, то можете добавить вашу миниатюру фотографии размером 80х80 пикселей просто указав путь к изображению на блоге. Если у вас несколько авторов, то можете использовать специальный идентификатор для отображения изображения. Каждому автору при регистрации на вашем блоге присваивается уникальный идентификатор. Узнать этот идентификатор можно в панели администратора, если навести курсор мыши на имя автора поста при редактировании записей.

Таким образом, зная уникальный идентификатор автора, в нашем случае это «1″, можно сохранить миниатюру автора с именем, совпадающим с номером идентификатора, например «1.png» или «1.gif». Затем просто вставляете тег <?php the_author_ID(); ?> вместо имени нашей миниатюры. Теперь HTML-код выглядит следующим образом:

1
2
3
4

<div id="author-image">
<img src="http://www.site.ru/site_images/author_images/<?php the_author_ID();?>.gif"
alt="Об авторе" />
</div>

Текст автора

Теперь заменим в коде текст автора на <?php the_author_description(); ?>, а сам текст напишем в панели администратора в персональных настройках своего профиля.

HTML-код теперь выглядит так:

1
2
3
4
5
6
7
8

<div id="author-text">
 
<?php the_author_description();?>
 
&nbsp;
 
<?php the_author_link(); ?> написал 3 поста.
</div>

Необязательные теги

В принципе, на этом можно и остановиться, а можно добавить тег <?php the_author_posts(); ?>, который будет выводить количество постов, опубликованных этим автором на блоге.

HTML-код теперь выглядит так:

1
2
3
4
5
6
7
8

<div id="author-text">
 
<?php the_author_description();?>
 
&nbsp;
 
<?php the_author_link(); ?> написал <?php the_author_posts(); ?> поста.
</div>

Весь HTML-код

Итак, в итоге весь код блока «Об авторе» будет выглядеть вот так:

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

<div id="article-author">
<h3>Об авторе: <?php the_author_link(); ?></h3>
<div id="author-image">
<img src="http://www.site.ru/site_images/author_images/<?php the_author_ID();?>.gif"
alt="Об авторе" />
</div>
<div id="author-text">
 
<?php the_author_description();?>
 
&nbsp;
 
<?php the_author_link(); ?> написал <?php the_author_posts(); ?> поста.
</div>
</div>

Как видите, ничего сложного.