Дек
31
38

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

дизайн манияСреди последних тенденций в шаблонах 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, поэтому, если у вас последняя версия системы — обратите на нее внимание.

Внимание! Если у вас есть свой блог и желание помочь проекту развиваться – предлагаю обмен ссылками. Подробнее здесь. Всех с наступающим Новым Годом! Счастья и удачи побольше.

P.S. Иногда в жизни любого человека возникает вопрос или проблемы поиска новой работы. Именно в таких случаях вам может пригодится работа в Екатеринбурге от прямых работодателей — множество объявлений и вакансий ждут своих «будущих» сотрудников.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 8, средний балл: 5,25 из 7)
Loading ... Loading ...

категория Категории: Оптимизация; Хаки и секреты;
теги Теги: , , , , , .
Заработай на сайте
заработок в GoGetLinks

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

  • Антон   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 есть много настроек.

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

(предыдущая статья)

Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Заработай в GoGetLinks
Облако тегов
Лучшее в категории
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Loading ... Loading ...
Друзья проекта
Последние новости