Дек

Получение и отображение первой картинки поста

Среди последних тенденций в шаблонах wordpress за 2009 год большую популярность обрели так называемые «журнальные темы» (magazine). С их помощью можно придать блогу вид газеты или онлайн СМИ. Мне лично такие дизайны очень нравятся, так как позволяют на одной странице собрать множество источников информации из разделов и максимально точно дать представление о том или ином проекте. То есть ты заходишь на главную и видишь последние публикации в категориях, понимаешь о чем здесь можно почитать – это более наглядно чем вывод последних 3-5 постов блога.

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

<div class="post-image">
<?php
$id =$post->ID;
$the_content =$wpdb->get_var("SELECT post_content FROM $wpdb->posts WHERE ID = $id");
$pattern = '!<img.*?src="(.*?)"!';
preg_match_all($pattern, $the_content, $matches);
$image_src = $matches['1'][0];
?>
<div class="tumbr" style="border: 1px solid #333; width: 140px;height: 110px;background: url(<?php if($image_src != '') { echo $image_src; } else { ?><?php bloginfo('template_directory'); ?>/images/no-image.gif<?php } ?>) 0 0 no-repeat;"> </div>

В итоге с главной и страниц категорий получалось до 10-15 лишних запросов к базе данных, что, конечно, при посещаемости в 2-3к уников давало о себе знать.

Пришлось искать альтернативное решение – и оно нашлось! Итак, заходим в файл 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)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

После этого сохраняем и закрываем файлик. В результате вызова данной функции вы получите ссылку на первое изображение из поста. Если такового не найдется, то будет выводиться картинка по адресу images/default.jpg (или можете задать свой).

Теперь для вывода ссылки на картинку нужно всего лишь вызвать функцию:

<?php echo catch_that_image() ?>

Но помните, что выводится лишь путь, который нужно вставить уже в HTML код для тега IMG! Например, вот так:

<div class="tumbr" style="border: 1px solid #333; width: 140px;height: 110px;background: url(<?php if(catch_that_image() != '') { echo catch_that_image(); } else { ?>http://design-mania.ru/wp-content/themes/Hamasaki-wordpress-theme/images/no-image.gif<?php } ?>) 0 0 no-repeat;"> </div>

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

Оцените статью:

(голосов - 9, средний балл: 5,44 из 7)

Загрузка...

Категории: Оптимизация; Хаки и секреты;

Теги: magazine темы, php, миниатюры постов, пишем функцию для wp, полезное для блога, правка шаблона.

комментарий 41 к статье “Получение и отображение первой картинки поста”

← Ранее 1 2

Антон 15.01.2015
можно выводить картинку следующим образом, чтоб в постах выводилась ссылка на первую картинку, а на главной странице выводилась ссылка на указную картинку ?

Такую технологию хочу применить в мета

То-есть находясь в посте будет выводится ссылка на первую картинку, а находясь на главной будет выводится ссылка на указанную картинку.
Tod 16.01.2015
Антон, тут без программирования не обойтись, я готового решения не знаю.
Алексей 29.01.2016
Добрый вечер!

Отличная статья, но по закону жанра без интриги не обошлось ))
Объясните пожалуйста, что значит «который нужно вставить уже в HTML код для тега IMG!» это значит куда? в HTML куда?
А то все получилось, а вот картинка не выводится, отображается только путь к /default.jpg

Спасибо.
Tod 30.01.2016
Алексей, сразу после этой фразы есть пример кода. Функция выводит только путь, вам нужно его «запихнуть» в картинку. Добавлять этот HTML код нужно в том месте шаблона, где хотите выводить изображение.
Алексей 30.01.2016
Спасибо за скорый ответ!

Вот как раз с этим то и танцую ))
Картинку вывожу произвольным полем, как только я уже не пытался «запихнуть» код в картинку, не выходит… )
А если учесть,что я из «начинающих» так у меня уже смешались в кучу кони, люди. ))
Может подскажете как мне быть…

в шаблоне: ID, ‘cover’, true); ?>

в произвольном поле ‘cover’ :

Затыка только с выводом картинки, все остальное работает на ура. Буду очень признателен если подскажете, т.к. сам уже не соображаю.
Спасибо.
Tod 30.01.2016
Алексей, код не отображается, пишите на почту stod84@gmail.com.
Марина 10.02.2016
Добрый вечер! Ваше решение вывода первой картинки поста просто находка для некоторых сайтов, так как, не все картинки можно загружать на сайт. Они занимают место и тянут блог.
Применила ваш код. Все получилось, посмотрите на главной polnymledi.ru
Но вот теперь поставила задачу себе сделать картинки в RSS ленте. В инете много кодов, но все они именно для миниатюр, а я на сайте не применяю миниатюры ( очень много картинок, сайт не выдержит)))
Так вот в чем вопрос — вы можете помочь сделать ваш код приемлемым к выводу картинок в RSS?
Пожалуйста, может быть можете помочь??? Адрес polnymledi.ru/feed/
Спасибо! Марина.
Tod 11.02.2016
Марина, увы, подсказать готовое решение не могу, но есть парочка наводок. Во-первых, пост добавление миниатюры в RSS — там вместо функции считывания миниатюры вызываете функцию первой картинки поста. Теоретически это сработает. Возможно, вам пригодится пост про анонсы посты в ленте RSS — недавно настраивал для блогов и подробно расписал этот вопрос. Ну, и напоследок статья про модуль Advanced Excerpt — для RSS есть много настроек.
Наталья 01.07.2017
Сработало! Спасибо взяла вашу функцию для первой картинки.
Использовала в связочке
if(catch_that_image() != »)
$output .= » . «\n»;
else {
Alexandro 26.09.2017
Как раз ищу способ как в анонсах при отсутствии картинки (бывает, что юзеры-авторы публикуют статьи без картинок) выводить альтернативное изображение с сервера (так же, как в форумах при отсутствии аватара юзера выводится стандартный аватар).
Но у вас описан метод для старых тем WP. В новой теме Twenty Seventeen как это можно реализовать?
Tod 27.09.2017
Alexandro, а что функции из статьи у вас не работают? просматривая бегло код, не вижу там каких-то уникальных строк, которые бы не работали на других версиях системы или темах. Вы тестировали данный вариант? выдает какую-то ошибку?

← Ранее 1 2

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

Получение и отображение первой картинки поста

Похожие статьи:

комментарий 41 к статье “Получение и отображение первой картинки поста”