Вывод записей на wordpress тизерами

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

Все достаточно просто, немножко кода в wordpress, немножко кода в CSS ну и немножко фантазии для оформления блоков тизеров. Итак, поехали.

Идем сначала в файл header.php, он находится в папке с вашей темой wordpress. Я вставил вывод тизеров под меню блога. Код такой:

<div id="articles">
 <?php $myposts = get_posts('orderby=rand&numberposts=6');
 foreach($myposts as $post) : ?>
 <div id="artimage">
 <img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo catch_that_image() ?>&amp;h=90&amp;w=120&amp;q=85&amp;zc=1" width="120" height="90" alt="<?php the_title(); ?>" />
 <br /><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
 <?php endforeach; ?>
</div>
<hr />

Ну тут все понятно, указываем блок articles, параметр numberposts указывает на количество тизеров, у меня их 6. Далее идет картинка, которая выводится скриптом timthumb.php, который должен лежать в папке с темой wordpress? там же нужно создать папку cahce и задать ей права chmod 777. В эту папку скрипт будет слаживать все кешированные картинки. Кстати скрипт извлекает первую картинку поста, уменьшает ее размер до необходимого. Скачать тут timthumb.

Как я это делаю? Присмотритесь к строке

<img src="<?php bloginfo('stylesheet_directory');
 ?>/timthumb.php?src=<?php echo catch_that_image() ?>
&amp;h=90&amp;w=120&amp;q=85&amp;zc=1" width="120" height="90"
alt="<?php the_title(); ?>" />

В ней вы видите src – адрес картинки это адрес скрипта, а сама артинка скрипту перелается функцией php – catch_that_image(). Эту функцию надо добавить в файл functions.php, который лежит в папке с темой блога. Вот код функции:

function catch_that_image() {
 global $post, $posts;
 $first_img = '';
 ob_start();
 ob_end_clean();
 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',$post->post_content, $matches);
 $first_img = $matches [1] [0];
 // no image found display default image instead
 if(empty($first_img)){
  $first_img = "/images/2010/03/money.jpg";
 }
 return $first_img;
}

Если картинка не найдена в записи, то выведем картинку по умолчанию, она прописана в параметре $first_img. Осталось только подредактировать CSS файл, чтобы визуально отобразить так как на надо. У меня код такой:

#articles {
background:none repeat scroll 0 0 #EFEFEF;
overflow:hidden;
padding:7px 5px;
text-align:center;
width:970px;
}

#articles #artimage{
float:left;
width:16.6%;
}

Вот в принципе и все. Удачи!