О сайте | Обратная связь | Памятка для вебмастера

Форма входа

Логин:
Пароль:
Grattis - партнерская программа по продаже голосовых поздравлений

Конструктор кнопок он-лайн


Получить код CSS

Подбор цветов

Шапки для сайтов

шапки для сайтов

Справочник по html и CSS

Поиск

Главная» Обучение » Создание сайта» Создаем на Wordpress фотоблог

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


Категория: Создание сайта | Добавил: otlichnica (06.04.2010)
Просмотров: 2179 | Теги: дизайн, wordpress, фотоблог, фотоблог на wordpress, фотоблог создать, wordpress фотоблог, wordpress фотблог, вывод ссылок на картинки прикрепленные к посту wordpress | Рейтинг: 5.0/1
Всего комментариев: 4
0  
3
Диана, там где ты помечаешь вот так:

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

или так:

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

Эти коды нужно искать в своей теме?


0  
4
ты правильно поняла :) - он везде немного разный, под дизайн сделан

0  
1
Супер! Только я посмотреть не могу. А так хочется глянуть, как это выглядит :)

0  
2
Что ты не можешь посмотреть?
Ответ: Сорри :) ССылку на сайт забыла поставить. Вот она - spravka.name

Имя *:
Email:
Код *: