Как вывести первую картинку из записи WordPress

У вас в блоге не каждая запись с картинкой в начале? Но вы хотите на главной странице вывести анонсы с картинками.

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

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

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

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 = "/wp-content/uploads/2010/04/103.jpg";
}
return $first_img;
}

Как вы видите в первой строке кода само название функции catch_that_image(), которая собственно и извлекает из поста первую картинку посредством регулярной записи. В 11-й строке указана картинка по умолчанию, это очень удобно, когда в записи нет фото (картинки), тогда можно вывести стандартную картинку на которой будет написано «Нет фото», например.

Сама функция вызывается вот так, это надо прописать в нужном месте в вашем wordpress шаблоне. А рядом можно прикрепить генерируемый анонс поста (как выводить анонс из записи в wordpress блоге).

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

Дальше можно отредактировать отображение картинки с помощью CSS стилей, добавив в код выше класс стиля.

<img class="first-image" src="<?php echo catch_that_image(); ?>" alt="" />

Вот примерный CSS код стиля картинки:

.first-image {
display: block; //отображаем как блок
width: 200px; //ширина 200 пикселей
height: 150px; //высота 150 пикселей
border: 1px solid #bbb; // рамка серого цвета шириной в 1 пиксель
float: left; //выравнивание картинки с левого бока
}

Вот приблизительно так можно отобразить картинку, она отобразится слева от анонса благодаря свойству float.

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

h++p://arniwebdesign.com/kak-vyvesti-pervuyu-kartinku-iz-posta/