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

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

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

Итак, сразу привожу код функции. Вы должны поместить функцию в файл 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/

Категория: WordPress | Теги:

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

  1. михаил | 7.10.2010

    здравствуйте! подскажите как сделать что бы на главной в превью картинки были определенно заданного размера…а при открытии страницы..картинки были большего размера как и надо. Спасибо.

  2. Макс | 7.10.2010

    Или картинку для превью делайте через дополнительные поля, или через CSS можно уменьшить размер картинок…, но это долго объяснять…

  3. Федя | 31.12.2010

    Малаца батя грит харашо зделали. Помогло в проекте =)

  4. Jarold | 4.03.2011

    Здраствуйте! вот в вырезке из первого кода

    $first_img = «/wp-content/uploads/2010/04/103.jpg»;

    говорится о том что картинки будут братся с папки uploads/ на сервере сайта.
    А как прописать код что б картинка бралась из полной новости и уменьшалась до нужных мне размеров и распологалась по центру, между «title» и описанием Анонса?

    Добавлю: что все мои картинки которые размещены в постах брались со стороних сайтов

    Спосибо.

  5. Макс | 4.03.2011

    Jarold, «курите» поиск, изучайте основы WP и учитесь задавать вопросы правильно…

  6. Анна | 2.06.2011

    Очень помогло при реализации каталога. Автору большое спасибо.

  7. Allpa | 5.07.2011

    Новость, хоть и давняя, помогла мне обуздать шаблон, — огромное Вам спасибо!
    Теперь меня мучает другой вопрос: как сделать так, чтобы выхватывалась не первая картинка (первой картинкой у меня идёт буквица), а вторая (которая и есть настоящая картинка, подходящая для анонса)?
    Буду признательна за совет или хотя бы за пинок в нужном направлении.. *_*

  8. Артем | 7.05.2012

    Возможно ли, при помощи этой функции, показать картинки следующего и предыдущего поста из этой же рубрики сайта?

Оставьте свой комментарий