Вы забрели на блог Вебмастерицы


Я не "рублю бабло" - я просто зарабатываю в интернете.

Впервые на блоге и не знаете SEO-терминов? Тогда проходите в мой SEO-словарь!

31 Окт 2011

Вывод превью в WordPress без использования встроенных миниатюр

В посте про вывод превью средствами ВП ко мне обратился с таким вопросом Казбек: «… а если я уже использую картинки хранящиеся у меня на Web альбоме Picassa и они уже встроены в посты.. можно ли как нибудь их вывести теперь в анонсы этих постов» (орфография авторская, если что).

Так вот, существует еще один способ вывести превью автоматически. Когда-то я использовала именно его. Скажу сразу — способ не мой, я нашла его где-то в инете… Поскольку там рерайт на рерайте, автора метода найти не смогла. :( Если кто знает — укажите.

Как действует этот способ вывода превью?

Выводится и ресайзится (т.е., изменяется её размер) первая картинка из поста.

Чем удобно?
1. Если подгружены изображения с другого сайта, как у Казбека, то они ничтоже сумняшеся будут выводиться и в превью. Если использовать стандартный метод — нужно загружать фото на сайт.

2. Если сайт с историей, то не надо сидеть и часами указывать вручную миниатюры к уже опубликованным записям. :)

Чем неудобно?
1. Фото, как правило, имеют разное соотношение сторон. Скажем, у одной фото 200х300 пикселей ширина и высота, а у второй — 300х300 пикселей. Поэтому, если мы просто отресайзим эти фото и укажем ширину-высоту, то их «перекорежит». Я думаю, все видели сайты с такими превью… Это выглядит ужасно. Например, так:
перекореженная превью
А нормальная превью должна выглядеть так:
нормальная превью

2. С другой стороны, если мы указываем только ширину картинки, чтоб её как раз не «корежило», то тогда высота картинок будет разная, а это в анонсах некрасиво. Говорю, исходя из личного опыта. :) Когда 2 анонса рядом, и у одной превью 150х100, а у второй — 150х200, то это не айс. Опять же, многие дизайны к черту летят.

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

Кстати, ВП при заливании может создать 3 дополнительных картинки, их размеры можно найти через админку Настройки => Медиафайлы, там будет вот такое:
настройки размеров миниатюр в вордпресс

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

Но возвращаемся к самому способу. Я его выложу, а вы уж решайте сами, использовать или нет. :)

Способ вывода превью в WordPress без использования встроенных миниатюр

Итак, в файл functions.php нам надо добавить код (я всегда добавляю в самый конец файла):

<?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;
}
?>

После чего вот такая строка:

<?php echo catch_that_image(); ?>

будет выводить урл первой картинки в посте. И можно для вывода превью, соответственно, использовать, например, такой код:

<img title="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" />

Думаю, понятно, что тут задается:
width=»150″ — ширина картинки в пикселях
src — где лежит картинка, путь к ней (source)
class=»alignleft» — задан класс в css, как правило, в ВП-темах есть такой класс, делает картинку обтекаемой текстом
alt, title — ну, это все знают. :) описания картинок.

Надеюсь, поможет. :)

ЗЫ. PHP я только начала изучать, так что по самой сути кода сказать могу немного.

Понравился пост? Так поделитесь же! :)

Твитнуть
Нравится

Отзывы:

(17) на Вывод превью в WordPress без использования встроенных миниатюр

Поболтаем о сайтиках?

Вы также можете зарегистрироваться и загрузить свою аватарку. :)


Или залогиниться, если вы уже зарегистрированы.

Полезное вебмастеру:

  • Точные апдейты Яндекса
  • Список всех аддурилок
  • Проверить домен:
    регистрация доменов
    домен RU - 99 руб
    домен РФ - 99 руб
    Зарегистрируй себе домен!
    имя: 

    2domains.ru