Создаем на WordPress фотоблог

Новая страница 5

На днях одна из моих любимых посетительниц на форуме поинтересовалась, как в WordPress вывести на главной странице не анонсы статей, а лишь изображения прикрепленные к ним, причем по нескольку в одной строке. Мне очень захотелось попробовать сделать это самой, в итоге я создала шаблон для блог, идеально подходящего для размещения фото и других изображений. Вот сам этот блог — можете глянуть website headers

Итак, как я это реализовала. Сначала на словах. Я создала таблицу и добавила
переменную — сounter, которая сообщала бы, какой столбец выводится в данный
момент. При выводе постов алгоритм получился следующий: если столбец второй или
третий — то просто создаем новый столбец, а если уже вновь первый, то закрываем
строку, открываем новую и начинаем новый столбец.
Получилось вот что:
$counter=0;
if (have_posts()) : ?>
<table align="center"><tr>
<?php while (have_posts()) : the_post(); ?>
<?php if ($counter==0||$counter==1||$counter==2) { $counter++; ?><td width="32%"
> <?php }
else {?></tr><tr><td width="32%" > <?php $counter=1; } ?>

….
Вывод содержимого поста
….

</td>

<?php endwhile; ?></tr></table>

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

После этого я решила вторую задачу — вывела не содержание поста, а лишь
изображение прикрепленное к посту, причем не в оригинале,а в уменьшенном
варианте, так как оно может оказаться достаточно тяжелым и загрузка сразу
десятка изображений может существенно отразиться на общем времени загрузки
страницы. Можно было бы взять миниатюру, но в лично в моем случае — это не
подходило, поэтому я вывела средний размер (у меня это 300х77).
Итак, вот как я это сделала:

$counter=0;
if (have_posts()) : ?><table align="center"><tr>
<?php while (have_posts()) : the_post(); ?>
<?php if ($counter==0||$counter==1||$counter==2) { $counter++; ?><td width="32%"
> <?php }
else {?></tr><tr><td width="32%" >
<?php $counter=1; } ?>

….
Вывод заголовка
….

<div class="art-PostContent">
<?php
$image =»;
//Получаем картинки прикрепленные к посту
$args = array(
‘post_type’ => ‘attachment’,
‘post_mime_type’ => ‘image’,
‘numberposts’ => -1,
‘order’ => ‘ASC’,
‘post_status’ => null,
‘post_parent’ => $post->ID
);
$attachments = get_children($args);// получила прикрепленное изображение
if ($attachments) {
foreach ($attachments as $attachment) {
$attachment=wp_get_attachment_image_src($attachment->ID, ‘medium’);// выбрала
размер прикрепленного изображения- средний
$image = $attachment[0];
}
}
if($image !== ») { ?>
<img src="<?php echo $image; ?>"
alt="free website headers" title="header website free" width="200px"> <?php
}?>//вывела изображение нужной мне ширины 200 px и атрибутами alt и title,
содежащими мои ключевики

</div>

вывод нижнего колонтитула (теги поста, автор поста и т.д.)

</td>

<?php endwhile; ?></tr></table>

В результате у меня получился вполне приличный блог и я решила добавить рекламу
от Гугла после каждой строки:
$counter=0;
if (have_posts()) : ?><table align="center"><tr>
<?php while (have_posts()) : the_post(); ?>
<?php if ($counter==0||$counter==1||$counter==2) { $counter++; ?><td width="32%"
> <?php }
else {?></tr><tr><td colspan="3" align="center">код от ГУГла</td></tr><tr><td
width="32%" > <?php $counter=1; } ?>

….
Вывод заголовка
….

<div class="art-PostContent">
<?php
$image =»;
//Получаем картинки прикрепленные к посту
$args = array(
‘post_type’ => ‘attachment’,
‘post_mime_type’ => ‘image’,
‘numberposts’ => -1,
‘order’ => ‘ASC’,
‘post_status’ => null,
‘post_parent’ => $post->ID
);
$attachments = get_children($args);// получила прикрепленное изображение
if ($attachments) {
foreach ($attachments as $attachment) {
$attachment=wp_get_attachment_image_src($attachment->ID, ‘medium’);// выбрала
размер прикрепленного изображения- средний
$image = $attachment[0];
}
}
if($image !== ») { ?>
<img src="<?php echo $image; ?>"
alt="free website headers" title="header website free" width="200px"> <?php
}?>//вывела изображение нужной мне ширины 200 px и атрибутами alt и title,
содежащими мои ключевики

</div>

вывод нижнего колонтитула (теги поста, автор поста и т.д.)

</td>

<?php endwhile; ?></tr><tr><td colspan="3" align="center">код от ГУГла</td></tr></table>
Вот такая вот получилась картинка.
Вывод: в WordPress можно сделать все, так что не ограничивайтесь стандартными
схемами — импровизируйте и получайте удовольствие от достигнутых результатов

Комментарии на Facebook