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

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

Открываем файл 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];

// Если изображение отсутствует, то выводим изображение по умолчанию (указать путь к изображению)
  if(empty($first_img)){
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

Приведенная выше функция выводит первую картинку, которая находится в вашем посте, если картинки не существует, то показывается изображение по умолчанию, путь к которому необходимо указать, либо добавить в папку /images/ вашей темы изображение в формате .jpg и с именем default.

Не забываем сохранить файл functions.php и переходим к шаблону, в котором мы хотим выводить изображение, предположим index.php и вставляем функцию, отвечающую за показ картинки:

<?php echo catch_that_image() ?>

Функция должна находится в пределах основного цикла, выводящего запись в шаблоне, она покажет только ссылку на изображение, которую нужно поместить в тег <img>:

<img src="<?php echo catch_that_image() ?>"/>

Теперь пойдем немного дальше и создадим «умную» картинку анонс, для этого добавим атрибут alt с названием поста и сделаем картинку ссылкой на сам пост, проделанные операции добавят дополнительный вес нашему топику с точки зрения поисковой оптимизации:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
  <img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>"/>
</a>

Все хорошо, но единственная загвоздка — картинки отображаются таким же размером как и в посте, что не очень впишется в любой дизайн. Есть несколько решений данной задачи, самое элементарное мы рассмотрим сразу, а второе, более продвинутое и очень удобное в следующей статье. Чтобы изменить изображения, мы можем воспользоваться масштабированием картинок с помощью стандартных атрибутов высоты и ширины:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
  <img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" width="550"/>
</a>

Мы задали изображению ширину в 550px (можно так же задать в %), высота будет уменьшена пропорционально теперь изображение может вписаться в дизайн сайта, с такой же структурой как и у меня, но есть и отрицательные стороны этого метода: изображение масштабируется браузером, и при загрузке анонсов пользователь загрузит исходное изображение. Второй способ заключается в автоматическом ресайзе изображений с помощью PHP-скрипта, о котором я напишу в следующей статье.