Янв

Новая функция WordPress 2.9 – превью для постов

Просмотрев парочку статей в русских блогах о WordPress и небольшие короткие заметки в англоязычных проектах относительно функции превью для постов в версии 2.9, я подумал, что тема достаточно простая и особо рассказывать там нечего. Но сегодня решил все же чуть более детально рассмотреть вопрос и, к моему удивлению оказалось, что там просто великое множество нюансов. Короче говоря, решил поделиться с вами всеми находками и составить самый подробный мануал относительно функции превью для постов (Post Thumbnail) в WordPress 2.9.

Изображения (превью, или также это называют миниатюра) для постов и страниц в блоге часто используются в различных журнальных (газетных) шаблонах, где для каждой статьи на страницах архива или главной выводится соответствующее изображение. В прошлом посте я рассмотрел возможность получения первой картинки поста с помощью самописной функции, но начиная с версии WordPress 2.9 разработчики решили значительно упростить задачу. Для этого была введена в эксплуатацию новая функция the_post_thumbnail(). Итак, как же ее включить, использовать и что можно сделать.

Активация функции the_post_thumbnail

Не знаю по какой причине, но для использования функции превью к постам необходимо ее сначала активировать. Для этого заходим в файл functions.php вашего шаблона и пишем там следующие строки кода:

if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

После добавления данных строк в админке wordpress будет активирована возможность добавления превью. Проверка в коде используется для совместимости шаблона с разными версиями, чтобы если функции в вашей сборки не было, вся тема не «посыпалась».

Вы также можете добавить поддержку функции только для постов или страниц:

add_theme_support( 'post-thumbnails', array( 'post' ) ); // добавить для постов
add_theme_support( 'post-thumbnails', array( 'page' ) ); // добавить для страниц

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

Следующий шаг от Mark Jaquith – установка размеры для ваших превью в шаблоне. Для этого имеется два разных подхода – ресайз или вырезание части картинки. Ресайз позволяет пропорционально уменьшать изображения для поста до указанных вами параметров. Например, у вас есть картинка 100х50, тогда при уменьшении до 50х50 вы фактически получите превью размером 50х25. Преимущество этого метода в том, что отображаться будет все изображение целиком. Плохо то, что в таком случае вы можете получить не всегда одинаковые картинки – ресайз будет производиться то по ширине, то по высоте. В таком случае можно немного «схитрить» и указать для неважной величины очень большое значение – допустим, ширину картинки поставить в 50, а высоту – 9999. В итоге вы получите все превью с шириной 50, что весьма органично впишется в любой дизайн:)

set_post_thumbnail_size( 50, 50 ); // ресайз до размерности 50х50

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

set_post_thumbnail_size( 50, 50, true );

Теперь после предварительных настроек можно использовать функцию the_post_thumbnail() в шаблоне, но об этом чуть позже.

Добавление превью (миниатюры) для поста

После активации функции в админке при написании постав вы увидите блок «Миниатюра записи», где можно будет загрузить картинку. После клика на ссылку появится стандартное окно добавления изображения (Add Media), где можно выбрать изображение со своего компа или уже имеющееся в галерее. При выборе картинки из галереи в самом конце страницы с настройками вы найдете ссылочку «Использовать как миниатюру» (Use as thumbnail) – кликаем, и все готово.

На странице после загрузки фото будет такая же ссылка. Если вы все сделали правильно, то превью отобразится в блоке «Миниатюра записи».

Вывод миниатюры (превью) в шаблоне блога

За отображение превью отвечает функция the_post_thumbnail, поэтому в каком-то из файлов шаблона, например, index.php мы пишем:

<?php the_post_thumbnail(); ?>

Понятно, что использовать строку нужно в пределах цикла loop, которые выводит посты блога. В результате будет выведена миниатюра с размерами по умолчанию. Говорят, это все равно, что использовать код (хотя лучше без параметра):

<?php the_post_thumbnail('thumbnail'); ?>

Я точно не уверен, но вполне вероятно, что понятие «по умолчанию» берется именно из тех строк, которые мы указывали при активации – это нужно проверять на практие. Можно также выводить миниатюры различных размеров, которые в WordPress создаются автоматически при загрузке картинки.

<?php the_post_thumbnail('medium'); ?>
<?php the_post_thumbnail('large'); ?>

Кстати, интересно, что Matt Mullenweg в комментариях на одном из блогов не рекомендовал использовать именные аргументы для функции как thumbnail и другие, но пока никак это не объяснил.

Еще можно добавить в код проверку наличия миниатюры в посте:

<?php
if ( has_post_thumbnail() ) {
	// Есть! Выводим!
} else {
	// Нет, нужно использовать другие варианты.
}
?>

Результатом вызова функции the_post_thumbnail() будет генерация тега <img /> с классом wp-post-image, для которого вы можете прописать некоторые настройки в CSS по типу рамки или чего-то подобного:

.wp-post-image {
	border: 2px solid #ccc;
}

За вторую часть поста спасибо автору данной полезной заметки. Поскольку пост получился немаленьким, то еще один подпункт статьи я вынесу в следующий пост. В принципе, имеющейся информации должно хватить, завтра я покажу парочку полезных примерчиков применения данной функции на практике. Кстати, там в проверке наличия прервью для поста я говорил о другом варианте. Для вывода изображений вполне можно использовать произвольные поля (custom fields) — как раз недавно об этом писал в своем основном блоге.

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

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

Загрузка...

Категории: Возможности;

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

комментариев 66 к статье “Новая функция WordPress 2.9 – превью для постов”

← Ранее 1 2 3 Далее →

Tod 14.12.2010
Enemi, можно, нужно добавить вокруг кода вывода превью вставку ссылки, как это сделано для заголовка, например, или ссылки читать далее.
Евгений 03.01.2011
Не знал, что такое можно даже делать! Очень пригодится в моем новом проекте! Спасибо!
Игорь 21.02.2011
Ни че не понял, вот это и это set_post_thumbnail_size( 50, 50 ); // ресайз до размерности 50х50…….set_post_thumbnail_size( 50, 50, true ); куда вставлять?
Tod 21.02.2011
Игорь, это добавляется в файл функций functions.php.
Игорь 21.02.2011
написано что надо активировать в админке-это как…я вот все прописал но ни чего нету-не появляется-вывести как миниатюру…
ufolog 07.03.2011
Подскажите пожалуйста как на версии 2.9 можно создать опрос? За ранее спасибо.
Tod 07.03.2011
ufolog, использовать для опросов можно плагин wp-polls — подробнее о нем читаем в статье.
Макс 23.03.2011
Авто спасибо за статью, но у меня появилась проблема, при выводе миниатюры записи первой картинки на главной странице отображается одновременно миниатюра поста и большая картинка из записи поста, возможно ли как нибудь убрать большую картинку, чтобы она осталось только в записи, а не на главной странице, заранее спасибо.
Tod 23.03.2011
Макс, нужно внимательно разобрать что там в шаблоне происходит с выводом статьи. Если добавлять картинку непосредственно в текст статьи и в миниатюру, то будет именно то, о чем вы написали. Если просто указывать ее в виде миниатюры, то такого происходить не должно.
Дмитрий 27.04.2011
Спасибо большое, получилось, а как сделать, чтобы превьюшки не создавались постоянно при загрузке всех фотографий? а монтировались только из одной?
Tod 27.04.2011
Дмитрий, не совсем понял вопрос. Когда загружаете фотку, то указать в качестве превью можно только одну из них. Чтобы из всех фоток превью создавалось автоматом такого вроде нет.
Дмитрий 27.04.2011
Я имел ввиду, когда мы например заливаем 10 фоток в пост, все их них сохраняются и в оригинале и в маленьких размерах, а по факту используем из маленьких только одну для привью в большинстве случаем, как сделать, чтобы не все 10 держались на сервере в маленьком размере, а только 1, ту, которую поставили в привью, или это уже руками удалять все, те что не использовали в качестве привьюшек?
Tod 28.04.2011
Дмитрий, этот вопрос меня тоже волнует, но решения я пока не искал, как будет время, поищу обязательно.
Павел Богданов 05.08.2011
Здравствуйте!
Благодарю за разжеванную инфу по превьюшкам и за то, что она легко ищется в поисковике)
Сделал, работает всё. Но теперь появилось желание прикрепить к ссылкам на следующий и предыдущий посты небольшие превьюшки. Не подскажете случайно, как это сделать? Ну или хоть ткните носом в название соответствующей функции, а я уж нагуглю в кодексе)
Tod 06.08.2011
Павел, тут есть несколько моментов. Функции для вывода ссылок previous_post_link и next_post_link, возможно там в кодексе есть и других их вариации. В них сами понятно превью нет, можно считывать id постов и загружать для них картинку — но тут уже больше php.
Дмитрий 09.09.2011
Здравствуйте. Спасибо за познавательную статью, но у меня немного иная ситуация. При размещении очередного материала, миниатюра с картинки не создалась автоматом в директорию по умолчанию и вместо необходимой картинки 150×150 адрес создавшейся миниатюры ведет на основную картинку наибольшего размера. Из-за этого размер миниатюры отличается от остальных. Впервые такое произошло, уже и картинки перезаливал и статью, в админке WP тоже все настройки покрутил. Ничего не вышло. Возможно Вы подскажите, в каком направлении искать?
Tod 10.09.2011
Дмитрий, видимо, это какой-то частный случай или глюк, может быть посмотреть права записи на директорию миниатюр, хотя основная картинка туда то загружается. В общем, увы, подсказать не смогу.
Sergey 24.11.2011
Я превью создаю автоматически, т.е. без каких-либо доп. полей. Картинка выводится с тегом «alt», если нет картинки, выводится по умолчанию картинка «No Foto». Я хочу сделать, чтобы при отсутствии в посте картинки, не выводилось ничего. Я это сделал, но у меня выводится на этом месте «alt», так.как он у меня в норм. картинках есть. Из превьюшек я «alt» убирать не хочу… Вот я и ломаю голову, как мне выводить пустую строку без альта.
Tod 27.11.2011
Sergey, нужно поискать в wordpress функцию которая бы проверяла есть ли картинка в посте — можно найти в кодексе wordpress функцию the_post_thumbnail и посмотреть какие с ней связаны — иногда там есть нужные варианты. Но в целом совет один — добавить проверку на наличие картинки и в зависимости от этого выводить с альтом или без.
Хотя, возможно, если выводится уже какое-то «No Foto», то там есть условие в коде шаблона — нужно, в общем, там хорошенько посмотреть и поразбираться что к чему.
Sergey 28.11.2011
Tod, я и условия делал, но не двигается и все. Вот код, с которым мучаюсь. Может Вы подскажите, голова кипит уже…
// Get image attachment (sizes: thumbnail, medium, full)
function get_thumbnail($postid=0, $size=’full’) {
if ($postid $postid,
‘post_type’ => ‘attachment’,
‘numberposts’ => ‘1’,
‘post_mime_type’ => ‘image’, ))) {
foreach($images as $image) {
$thumbnail=wp_get_attachment_image_src($image->ID, $size);
return $thumbnail[0];
}
}
else {
return get_bloginfo ( ‘stylesheet_directory’ ).’/images/default_thumb.gif’;
}
}
// Automatically display/resize thumbnail
function tj_thumbnail($width, $height) {
echo
‘ID, ‘full’).’&h=’.$height.’&w=’.$width.’&zc=1″ alt=»‘.get_the_title().'» />’;
}
Sergey 28.11.2011
Сорри, вот корректный код вывода последней функции
// Automatically display/resize thumbnail
function tj_thumbnail($width, $height) {
echo
‘ID, ‘full’).’&h=’.$height.’&w=’.$width.’&zc=1″ alt=»‘.get_the_title().'» />’;
}
Sergey 28.11.2011
Почему-то последнюю правильно не хочет писать… В первой тоже есть незначительные вырезки… Ну как-то так, одна надежда на Вас.
Tod 29.11.2011
Sergey, тут 2 варианта — добавить в функцию get_thumbnail какую-то переменную мол есть картинка или не и в зависимости от условия в первом случае ставить $yespicture=1, во втором 0, а потом в tj_thumbnail сделать проверку этой переменной и выводить с альбом или без. Второй вариант (более правильный) убрать вывод tj_thumbnail и echo переместить в первую функцию дабы сразу и выводить картинку если что с альтом или без.
П.С. Я рассказал лишь логику, точный код привести не могу — тут вам придется самому поразбираться, если использовать второй вариант, то нужно не забыть вывод картинок в файлах шаблона с tj_thumbnail заменить на get_thumbnail. Что-то вроде этого.
Sergey 29.11.2011
Спасибо. Будем разбираться
rasse1 11.02.2012
Подскажите пожалуйста как можно сделать так , чтобы миниатюры в избранном у меня были не такого же размера как в посте? То есть в посте изображение к примеру 300 на 300 и весит 54кб , а на главной в избранном отображается та же картинка с таким же весом но уже 100на 100. Другими словами вес не не уменьшается. Как можно сделать так чтобы вес выводимых картинок в избранном соответствовал пропорциям 100 на 100. Просто хочется оптимизировать изображения на главной и уменьшить вес страницы
Tod 12.02.2012
rasse1, мне кажется что уменьшение веса страницы не стоит тех временных затрат дабы решить этот вопрос. Как сделать такую оптимизацию без понятия, может плагин поискать.
Антон 29.02.2012
Возникла трудность. После добавления «if ( function_exists( ‘add_theme_support’ ) ) add_theme_support( ‘post-thumbnails’ ); в functions.php» не добавляется меню для вставки превью.
Пробовал с этой же темой на локалхосте, все ок, а на самом сайте не хочет.
Пытался на WordPress 3.3.1. и 3.3

Но если не обратить на это внимание, после того, как вставляю строчку в index, на странице в разделе последние новости, выводит только название последней и дальше пусто.
Tod 01.03.2012
Антон, я с таким не сталкивался, если честно. Попробуйте добавить код в разных местах functions.php — например в самом начале или конце, может там какая-то ошибка при вставке.
Serg 09.11.2012
Tod, спасибо за статью! Все работает на 200% — но в этом и проблема…
Загружается миниатюра с указанным мной кропом и к нему еще в довесок «миниатюра 150х150». Как от нее избавится?

Заранее спаибо!
Tod 10.11.2012
Serg, зайти в код шаблона и посмотреть почему выводится 2 картинки, если я правильно понял проблему. Просто так ничего отображаться не будет — все вызывают те или иные функции в шаблоне.