Всё о миниатюрах в wordpress

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

Блог выглядит на много живее. А стандартным отображением статей на главной странице (несколько целых статей либо отрывков) уже никого не удивишь.
Возрастает количество просмотров статей с миниатюрами.
В некоторых случаях превью может сыграть бОльшую роль в привлечении внимания читателя, чем заголовок.

Этим постом я отвечу на вопрос, что делать, если вам всё же хочется использовать миниатюры, а темой это не предусмотрено. Не менять же ее на новую из-за этого.

Существует несколько способов вставки миниатюр в нужное место темы wordpress. Наверное самый старый способ – использование произвольных полей. В админке при написании нового поста вы можете добавить новое произвольное поле, например mini, и ввести адрес до картинки, которую вы хотите использовать, как миниатюру. После этого в нужном месте темы вставляем вот такой код:

<img src="<?php echo get_post_meta($post->ID, "mini", true);?>" />

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

На просторах интернета существует большое количество плагинов для вставки миниатюр.

Hungred Post Thumbnail – очень функциональны плагин. Он прекрасно подойдет для тех, кто в PHP, HTML и CSS ни бум-бум. С помощью него можно загрузить миниатюру для каждого поста прямо из админки (жаль нет функции обрезки), выбрать миниатюру по умолчанию, назначить миниатюры, которые будут отображаться в случайном порядке и др. Вид и размер отображаемых миниатюр так же можно назначить в админке. Единственный недостаток данного плагина – отсутствие возможности вставить код для отображения миниатюры вручную. Плагин сам вставляет код перед вот такой строчкой в вашем шаблоне:

<?php the_excerpt(); ?>

Но если отрывок статьи выводится по-другому, то миниатюра не вставится. Так же из-за этого невозможно обернуть код вывода миниатюры в какой-нибудь div, чтобы с помощью CSS изменить положение миниатюры относительно текста.

WP Post Thumbnаil – хорошая альтернатива предыдущему плагину. С его помощью можно загружать картинки из админки и сразу же их обрезать. Но, к сожалению, он поддерживает только картинки в формате .jpeg и по этому не избавляет от необходимости, пусть не всегда, но всё же пользоваться графическим редактором.
WP Choose Thumb – позволяет выбрать, какую из картинок, загруженных для определенного поста, отображать в качестве миниатюры. Правда обрезает изображения плагин сам и если они не квадратные, то миниатюра получается просто квадратным куском, вырезанным из картинки. По этому для каждого поста придется загружать по отдельной квадратной картинке.
Simple Post Thumbnails – на самом деле простой плагин. В настройках можно установить размеры превью и выбрать миниатюру по умолчанию, а уже при написании поста загрузить изображение. Плагин сам его уменьшит до заданного вами размера, сохранив при этом пропорции.

Код отображения миниатюр в трех последних плагинах нужно вставлять в шаблон вручную.

Есть еще и третий способ. Его суть в том, чтобы с помощью простой PHP функции извлечь из поста 1-ю картинку, уменьшить её до заданных размеров, сохранив пропорции, и вставить в качестве миниатюры. Такой способ подсказал мне Димокс, любезно предоставив следующий код:

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)) $size = getimagesize($first_img);
       $imageWidth = $size[0];
       if ($imageWidth > 170) $imageWidth = 170;
       $post_title = $post->post_title;
       $post_title = str_replace('"', '\'', $post_title);
       if(empty($first_img)) {
               return '';
       } else {
               if ($imageWidth > 80) return '<img src="'.$first_img.'" width="'.$imageWidth.'" alt="'.$post_title.'" class="alignleft" /> ';
       }
}

Этот код нужно вставить в файл functions.php вашей темы.

Цифра 170 – это ширина, которая будет поставлена у картинки, а 80 – это минимальная ширина картинки, чтобы она вывелась функцией. Эти цифры можно изменить в зависимости от того, куда вы будете вставлять миниатюру.

В шаблон нужно вставить следующий код:

<?php echo catch_that_image(); ?>

На этом первая часть поста заканчивается. В следующей части я подробно напишу, как вставить код отображения миниатюры в wordpress шаблон и как это всё красиво оформить.

Upd 02.11.2009: Всё о миниатюрах в wordpress часть 2.

P.S. Информационный спонсор статьи о миниатюрах в wordpress – женские туфли оптом из натуральной кожи и кожи молодого дерматина от каталога дешёвой обуви ObuvDeshevo.ru

Комментарии:
Kubig

1 ноября 2009
Прив хорошая статья, к сожалению Я с WP работаю совсем не давно и ещё не очень разобрался в терминах, разъясни пожалуйста, вот например Я пишу новости как на своём блоге Обои с девушками пишу так:

Картинка
Статья
[more...]
ссылки

Возможно ли как например в этой теме http://wp-genius.solostreamsites.com/ сделать так что бы картинка из моего поста отображалась там в виде превью и была бы так же началом к моему сообщению в блоге?
Если что то тема на скачивание этой темы:

http://depositfiles.com/files/918fpdf5d
http://rapidshare.com/files/295109056/wp-genius.zip

Зарание спасибо

Ответить
Ян Такушевич отвечает:
1 ноября 2009 в 16:07
Когда ты скачаешь и установишь эту тему, то в ней уже будет встроена возможность отображения миниатюр, как в демо версии по адресу http://wp-genius.solostreamsites.com/

Ответить
Kubig отвечает:
1 ноября 2009 в 18:12
Ну это Я понял, просто не понятно когда эту миниатюру вставлять при написание новости или она сама берётся из контента.

Ответить
Ян Такушевич отвечает:
1 ноября 2009 в 19:51
Это уже зависит от конкретной темы. В админке в разделе написания новой заметки внимательно посмотри, нет ли там специального окна для загрузки миниатюры. Если нету, то наверняка как миниатюра будет использоваться 1-е изображение из статьи.
Алика

2 ноября 2009
Спасибо! Никак не могла разобраться как вставлять миниатюры в различных «журнальных» темах (( Попробую эти плагины.

Ответить
Los Maniacos

2 ноября 2009
Спасибо, а то замучился уже методом тыка искать эти миниатюры в коде

Ответить
Lifeout

3 ноября 2009
Автору спасибо! Весьма полезная статейка для начинающего ВП-вебмастера…

Ответить
RodgerFox

25 ноября 2009
Меня заинтересовала миниатюра с произвольными полями, а как сделать так чтобы первая картинка которую добавляют в пост (через загрузчик либо ссылкой) выводилась как миниатюра.
Заранее спасибо.
P.S. не капли не похож на web2.0 и css3 =\

Ответить
Ян Такушевич отвечает:
1 ноября 2009 в 18:33
Внимательно читайте договор!
Самый последний способ с использованием PHP функции как раз то, что Вам нужно.
На счет web 2.0 и CSS3 не понял.

Ответить
Виктория

26 ноября 2009
Сохранили нам кучу времени, спс.

Ответить
Seopress

14 декабря 2009
Нормальная подборка. Но разве нельзя просто вставить картинку и выделя ее менять ее размер. А насчет обрезать так можно юзать и фотошоп

Ответить
RodgerFox

28 января 2010
Ещё раз извините, я про способ самый последний) работает на половину если не пишу функцию вызова, с ней ошибка и все рушается. а без неё место картинки серое пятно и показывает ошибку к пути картинки что я делаю не так если закачивал картинку при помощи встроенного загрузчика и сама функция должна его находить, ещё шняга в том что и в после картинка тоже … ну местонеё серый фон=\ подскажите пожалуйста.

Ответить
Ян Такушевич отвечает:
1 ноября 2009 в 10:21
Свяжитесь со мной по skype: yan-rich, в комментариях общаться не удобно, да и смотреть нужно.

Ответить
Санёк

13 марта 2010
Куча ошибок в коде, ни ничего не работает

Ответить
Ян Такушевич отвечает:
1 ноября 2009 в 10:05
Ошибок нет, всё работает. Что конкретно не получается?

Ответить
Санёк отвечает:
1 ноября 2009 в 11:03
скопируй код с блога в любой php редактор и увидишь, что код не рабочий

Ответить
Ян Такушевич отвечает:
1 ноября 2009 в 16:27
Да, был косяк, видимо wordpress код испоганил. Поправил, теперь всё ок.
Виктор

18 июля 2010
Здравствуйте, Ян!
Я хочу сделать видеоблог (видео хочу вставлять с youtube и подобных видеохостингов) и вставлять превью миниатюру видео примерно как здесь judovision.org.
Подскажите каким способом добиться такого же.

Заранее благодарю!

Ответить
Ян Такушевич отвечает:
1 ноября 2009 в 19:30
Если честно, то видео на wordpress не занимался, нужно разбираться, а еще проще – спросить у админа вышеупомянутого сайта.

Ответить

Об авторе…

Добро пожаловать!

Меня зовут Ян Такушевич и я рад приветствовать Вас на моём блоге. Мне 22 года, живу я в городе Минске. Чтобы связаться со мной, посетите страницу об авторе. Так же можете заказать услуги по созданию сайтов и блогов или рекламу на этом блоге.