Вывод миниатюры wordpress

Миниатюры в вордпрессе: Часть 1

Понравилась статья? Оставьте оценку:

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, в среднем: 5 из 5)

Сегодня поговорим о миниатюрах в вордпрессе. Миниатюра — это небольшое изображение, использующееся в анонсе поста.

Главное отличие миниатюры от картинок внутри поста в том, что картинка внутри поста — это просто ссылка на изображение в контенте. А миниатюра — это отдельное поле с изображением, прикрепленное к посту.

Для того чтобы использовать миниатюры внутри поста их нужно подключить в шаблоне. Для этого используется функция

Важно! Не забудьте подключить поддержку миниатюр в functions.php!

add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );

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

miniatura_wordpress

После этого справа у вас появится метабокс, в котором можно установить миниатюру. Если все сделано правильно, а метабокса нет — возможно его нужно просто включить (вверху справа Настройки экрана).

После этого в метабокс можно грузить изображение миниатюры.

Размеры миниатюр

По умолчанию загруженную большую картинку вордпресс режет на миниатюры различных размеров. Собственно «размер миниатюра» (по дефолту размер 150 на 150 пикселей), «Средний размер» (300 на 300 пикселей) и «Большой размер» (1024 на 1024 пикселя). Эти стандартные размеры можно изменить на странице «Настройки -> Медиафайлы». Скрин

miniatura_wp

Как видно на скрине рядом с размером миниатюры есть еще волшебная галочка «обрезать миниатюру точно по размерам». Дело в том, что по умолчанию размер 150 на 150 получится только из квадратной картинки. Например если загрузим изображение 300 на 300 — то вордпресс сожмет ее до 150 на 150, сохранив пропорции. А если загрузим картинку 450 на 300, что тогда произойдет?

Если бы вордпресс просто сжал такую картинку до 150х150 — то пропорции оказались бы искажены. Поэтому, картинку будет сжата до 150х100. А если нам нужны точные размеры миниатюры 150х150 — что делать? Тогда устанавливаем галочку «обрезать точно по размерам». Алгоритм обрезки по размерам будет такой:

  • сначала вордпресс сожмет картинку по минимальной стороне до заданного. в нашем случае это будет 225х150
  • затем оставшаяся «лишняя» ширина (ну или высота) будет обрезана точно по заданным размерам (то есть лишняя ширина 225 обрежется до 150 — в нашем случае)

У остальных размеров такой чудо-галочки нет, да в общем-то, она там особо и не нужна.

Вывод миниатюры

Миниатюры заданы, размеры подогнаны, осталось вывести миниатюры в шаблоне. Для этого используются функции;

the_post_thumbnail($size = 'post-thumbnail', $attr = '')
// или
get_the_post_thumbnail($post_id = null, $size = 'post-thumbnail', $attr = '')

Параметры функций:

  • $post_id — ID поста, для которого нужно получить миниатюру.
  • $size — размер миниатюры. «thumbnail» — размер миниатюры, «medium» — средний размер, «large» — крупный размер и «full» — полный размер картинки.
  • $attr — массив переопределяемых атрибутов тега IMG. Что можно переопределить: «src» — src картинки, «class» — класс стиля картинки, «alt» — альт картинки и «title» — заголовок картинки.

Разница в функциях the_post_thumbnail и get_the_post_thumbnail в том, что первая — сразу выводит миниатюру, а вторая — сохраняет в переменную.

Пример 1:

while( have_posts() ) : the_post();
	if( has_post_thumbnail() ): ?>
		<a href="<?php the_permalink(); ?>">
		<?php the_post_thumbnail('thumbnail', array('class'=>'img-responsive')); ?>
		</a>
	<?php endif; 
endwhile;

Что в нем: вывели для всех постов миниатюры, оформили их ссылкой на пост, и дополнительно для каждой миниатюры добавили класс img-responsive.

Пример 2

while( have_posts() ) : the_post();
	if( has_post_thumbnail() ): 
		echo '<a href="' . get_the_permalink($post->ID) . '">';
		echo get_the_post_thumbnail($post->ID, 'thumbnail', array('class'=>'img-responsive'));
		echo '</a>';
	endif; 
endwhile;

Что в нем: то же самое что в примере 1, но с использованием функции get_the_post_thumbnail

В следующей статье разберем более детально как задавать дополнительные свои размеры миниатюр.

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