Янв

Новая функция 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 Далее →

SeoAdvicer 02.01.2010
Интересно, почему по умолчанию функция не активирована?
Tod 02.01.2010
SeoAdvicer, не знаю точно, может чтобы было глюков с шаблонами, которые далеко не все используют последние новшества 2.9. Хотя вообще нюансов с этими миниатюрами для постов немало — может разработчики что-то «мутят» :)
i247 03.01.2010
Как основная масса шаблонов будет переписана активируют.
Ян 03.01.2010
Сделали хорошо, но вот не всем этот метод подойдёт. Если на блоге уже есть много постов, то придется вручную добавлять для каждого миниатюру. В таком случае лучше подойдёт «Получение и отображение первой картинки поста».
dizelbox 03.01.2010
Лично я считаю последние нововведения WordPress ненужными большинству пользователей, в том числе и мне самому. До сих пор пользуюсь версией 2.7
seofeel 04.01.2010
Скрины примеров бы хотелось увидеть)
Tod 04.01.2010
Ян, полностью согласен, с внедрением на старые проекты есть проблемка, но ее можно решить за счет совместного использования методов — типа если «есть картинка-прервью» — выводить ее, нет — брать первую с помощью функции.
dizelbox, последние версии wordpress — это не только «нововведения», а и много-много исправленных багов.
seofeel, не совсем понял про скрины)
BOLVERIN 13.01.2010
В функции нету фигурных кавычек — лучше добавить для надежности.
RodgerFox 18.01.2010
Простите, меня больше интиресует вопрос как быть с блогерами кто ещё не перешёл на новую версию?? будет ли вообще работать функция?
Евгений 28.01.2010
А как активировать функцию в админке? У меня нет ничего похожего.

Может быть по этому при работе с изображением у меня нет ссылки «использовать как миниатюру»

add_theme_support добавил, но ничего не изменилось.

Может что-то еще надо сделать? Версия WP последняя
Tod 28.01.2010
Евгений, add_theme_support добавляется в файле functions.php? Мне сложно сказать почему не работает, так как я активировал успешно с помощью нее.
RodgerFox, использовать альтернативные методы вывода превью.
ElectroRat 12.02.2010
Вставляю код в файл functions.php, тот, что с ВП идет, а не с темой, и после вставки кода

if ( function_exists( ‘add_theme_support’ ) )
add_theme_support( ‘post-thumbnails’ );

админка просто висит :( что делаю не так? Может надо еще что-то в код добавить, скобки какие-то иль еще что? Подскажите плз.
BOLVERIN 12.02.2010
2 ElectroRat: а зачем вы его туда вставляете, а не функции темы?
ElectroRat 13.02.2010
Добавляю код в файл functions.php темы, и в админке ничего не появляется. Не могу понять, что делаю не так… версия ВП от Lecactus 2.9.1
Вот кусок кода :

/* ======================== ADMIN ========================================= */

// Hook for adding admin menus
add_action(‘admin_menu’, ‘theme_ads_add_pages’);

if(!get_option(‘theme_ads_block_number’))
{
add_option(‘theme_ads_block_number’, 4, »);
}

// action function for the_post_thumbnail
if ( function_exists( ‘add_theme_support’ ) )
add_theme_support( ‘post-thumbnails’ );
// action function for above hook
function theme_ads_add_pages() {
// Add a new submenu under Options:
add_options_page(‘Theme Ads’, ‘Theme Ads’, 8, ‘theme_ads’, ‘theme_ads_options_page’);
}

Пробовал и так
// action function for the_post_thumbnail
if ( function_exists( ‘add_theme_support’ ) )
{
add_theme_support( ‘post-thumbnails’ );
}

Результата не видно :(
ElectroRat 13.02.2010
Разобрался ! всем спасибо за внимание :)
Решил вопрос так, после всего кода в functions.php вставил отдельно

и все заработало.
Артём Савельев 20.02.2010
Функция чудесная, но полноценно работает только в третей версии. во второй нужно сначала сохранять запись, или сохранять картинку и только потом делать миниатюру.
Yurbasik 19.03.2010
А можешь скрин сделать в нескольких вариантах? чтобы наглядно увидеть что где..
Sweefy 29.03.2010
Спасибо за статью.
Евгений 02.04.2010
А можно ли как-то приспособить это дело к плагину, который выводит в конце поста ссылки на «похожие статьи», чтобы слева от каждой из них отображалась миниатюра?
Tod 02.04.2010
Евгений, можно сделать все, что угодно если знаешь php и сможешь подредактировать код плагина или функции, которая выводит связные записи. Хотя также можно поискать плагин, который бы все это сделал за вас.
Offi 07.07.2010
Спасибо за статью, то что надо!

Единственный момент который не хочет корректно работать это функция:

set_post_thumbnail_size( 100, 100, true);

Вместо того чтоб кропать картинку до заданный пропорций на выходе получаеться width = 10, а height = 100. Оригинал картинки длиннее по вертикали, то же и с thumbnail’ом, вместо того чтоб обрезать.

Заменил функцию на:

add_image_size(‘mini_thumbs’, 100, 100, true);

и поменял вызов thumbnail’ов в шабе на:

the_post_thumbnail(‘mini_thumbs’);

Стало выдавать более корректные пропорции для картинки: width=»79″ height=»100″,
но кропа как небыло так и нет.

Версия WP: 2.9.2

Подскажите в какую сторону копать?

PS. в админке в качестве превью картинки в меню создания thumbnail’а картинка автоматом кропаеться норм, но как thumbnail после нажатия «Use as thumbnail» подгружаеться криво кропнутая версия 10х100.
Offi 07.07.2010
вопрос решен.

получаеться что если делать thumbnail из уже загруженных ранее в галлерею картинок не приаттаченных к текущему посту, то crop не работает, работает только масштабирование, а вот если создавать thumbnail загружая новую картинку.
…
потестив еще немного пришел к выводу:
кроп не работает на тех картинках, которые были загруженны до активизации add_theme_support( ‘post-thumbnails’ ); в шаблоне.
Tati 22.07.2010
Добрый день!

Подскажите, пожалуйста, почему миниатюра не отображается в категориях, а отображается только на главной странице ( в анонсах)?
Tod 22.07.2010
Tati, потому что нужно добавить отображения картинок-миниатюр и на страницы категорий (в файл archives.php) — они могут выводиться через файл архивов.
Tati 22.07.2010
Все получилось — СПАСИБО!!!!!

И отдельное спасибо за оперативный ответ :)!
Хочу все знать! 04.09.2010
У меня превьюшки появляются обрезанные со всех сторон, т.е. видно только центр картинки. Как исправить, подскажите… Прописать размеры? На сколько понимаю, это у меня кусок в functions.php отвечающий за миниатюры :

$cpanel = new ControlPanel();
$theme_options = get_option(‘WpAdvNewspaper’);

function showthumb() {

global $theme_options;

if($theme_options[‘thumb’] == 1) {
echo get_the_image(array(‘Thumbnail’,’My Thumbnail’),’thumbnail’);
} else {
}

}

function showthumb_i() {

global $theme_options;

if($theme_options[‘thumb_sub’] == 1 && $theme_options[‘thumb’] == 1) {
echo get_the_image(array(‘Thumbnail’,’My Thumbnail’),’thumbnail’);
} else {
}

}
Женя 12.09.2010
Дошел до того как активировать. активировал:
if ( function_exists( ‘add_theme_support’ ) )
add_theme_support( ‘post-thumbnails’ );
потом чуть ниже вставил
add_theme_support( ‘post-thumbnails’, array( ‘post’ ) );
и все далбше непойму как что делать???
можно понаглядней плиз…я тока учусь
Tod 15.09.2010
Женя, почитай продолжение статьи про миниатюры для wordpress на практике — там примеры кода есть для вставки.
Poster2710 31.10.2010
Спасибо, все работает )
Enemi 13.12.2010
А можно сделать так, чтобы превьюшка была кликабельна и вела на саму запись?