Пост с картинкой wordpress

Подбирая шаблон для своего сайта, всегда приходится «допиливать» дизайн под себя. Тем более когда речь идет о создании дизайна с нуля. Не так давно мне понадобилась возможность вывода поста определенной категории в определенном месте. Передо мной встала задача следующего содержания:

1.Вывод заголовка поста
2.Вывод анонса определенной длины
3.Вывод картинки поста
4.Вывод в определенном месте
5.Вывод определенной категории

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

В итоге я плюнул, и решил сам написать, позаимствовав некоторые функции из найденных решений.

Итак нам понадобятся две функции – вывод анонса и вывод картинки:

Функция номер раз: поиск первой картинки в посте (функция не моя, подсмотрел где-то на блоге):

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];
 
  if(empty($first_img)){ 
    $first_img = "/images/default.jpg";
  }//изображение по умолчанию, если в статье нет изображение
  return $first_img;
}

Функция номер два – вывод анонса поста, с фиксированным числом символов (тоже не моё):

function the_content_limit($max_char, $more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
    $content = get_the_content($more_link_text, $stripteaser, $more_file);
    $content = apply_filters('the_content', $content);
    $content = str_replace(']]>', ']]>', $content);
    $content = strip_tags($content);

   if (strlen($_GET['p']) > 0) {
      echo "<p>";
      echo $content;
      echo "&nbsp;<a href='";
      the_permalink();
      echo "'>"."Read More &rarr;</a>";
      echo "</p>";
   }
   else if ((strlen($content)>$max_char) && ($espacio = strpos($content, " ", $max_char ))) {
        $content = substr($content, 0, $espacio);
        $content = $content;
        echo "<p>";
        echo $content;
        echo "...";
        echo "<div style='clear:left; '></div><br/><a href='";
        the_permalink();
        echo "' style='text-align:right;color: #000;'>".$more_link_text."</a>";
        echo "</p>";
   }
   else {
      echo "<p>";
      echo $content;
      echo "&nbsp;<a href='";
      the_permalink();
      echo "'>"."Read More &rarr;</a>";
      echo "</p>";
   }
}

Обе эти функции копируем друг за другом в файл functions.php нашей темы.

Теперь дело за малым – вывести на страницы нашего блога. Прежде всего необходимо сделать конструкцию из div-ов, т.е. определиться как внешне будет выглядеть пост. Я для себя выбрал следующую структуру: название поста, ниже слева изображение, справа его обтекает текст статьи. Пример можно увидеть на этом сайте справа в сайдбаре.

Код который нужно разместить в месте где планируете вывод (в моем случае – это sidebar.php):

<div  align="left" >
		<?php query_posts('cat=77&showposts=10'); ?>
		<!--вывод категории 77, количество постов 10-->
		<h2>заголовок для постов</h2>
		
		<div >
		
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<div class="experiense"><a href="<?php the_permalink() ?>" ><?php the_title() ?></a></div>
			
<div>
<img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" width="80"/>
<!--width="80" - ширина миниатюры-->
				<div>
				<?php the_content_limit(200, "[узнать больше...]"); ?>
<!--вывод анонса в 200 символов, [узнать больше...] будет выводиться после анонса-->
				
				</div>
			</div>		
			<?php endwhile; else: ?>
			<?php endif; ?>
			<?php>wp_reset_query();?>
		</div>
	</div>

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