Как использовать миниатюры в WordPress


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

1. Добавляем функционал

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

// Обеспечиваем поддержку post-thumbnails 

add_theme_support('post-thumbnails'); 

// Если мы хотим использовать вызов функции, для начала мы должны убедиться, 
//что WordPress поддерживает вызов этой функции

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

2. Добавляем вызов функции

Теперь нам просто осталось сделать вызов этой функции. Это может быть индексный файл, и тогда миниатюры будут отображаться на главной странице. Или это могут быть файлы страницы или архива, и тогда миниатюра будет выводиться в постах и архивах. Для вызова этой функции добавьте код:

<?php the_post_thumbnail(); ?> 

Можно использовать проверку на наличие миниатюры

<?php
	if ( has_post_thumbnail() ) {
	 // миниатюра есть
	} else {
	 // миниатюры нет
	}
?> 

3. Размеры

Существует два подхода к изменению размеров изображения - изменение размеров и обрезание.

set_post_thumbnail_size( 50, 50 ); // ресайз да 50х50
set_post_thumbnail_size( 50, 50, true ); // обрезка до 50х50

4. Назначение стиля

WordPress при выводе миниатюр назначает контейнеру миниатюры класс "wp-post-image". Для назначения стиля отображения используйте в Вашем файле каскадных таблиц styel. cssпараметры класса "wp-post-image".
Хотя следующий код не является стандартом, вы можете использовать его как основу. Он позволяет обтекать миниатюру текстом справа.

.wp-post-image {
	float:left;
	margin-right:20px;
	margin-bottom:20px;
	width:200px;
	height:200px;
}

5. Назначение миниатюры

Для назначения миниатюры, используйте панель Post Thumbnail, загрузите миниатюру и выберите Use as thumbnail.

Не забудьте, что данная техника работает на WordPress 2.9 и выше.

Отображение миниатюр в ленте RSS

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

function insertThumbnailRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = '<p>' . get_the_post_thumbnail( $post->ID, 'medium' ) . '</p>' . $content;
}
return $content;
}

add_filter('the_excerpt_rss', 'insertThumbnailRSS');
add_filter('the_content_feed', 'insertThumbnailRSS');

О том как добавить текст в ленту RSSВы тоже можете почитать на моём блоге.

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

22 комментария

  1. Андрей31/10/2017
  2. Дмитрий19/12/2013
  3. Ника21/09/2011
  4. yo20/06/2011
    • Николай20/06/2011
  5. Allpa23/03/2011
    • Николай23/03/2011
  6. Хочу все знать!06/09/2010
    • Николай07/09/2010
  7. Anna Volkova30/05/2010
  8. Anna Volkova28/05/2010
    • Николай29/05/2010
  9. Anna Volkova28/05/2010
  10. Anna Volkova27/05/2010
    • Николай28/05/2010
  11. LUTERRR17/03/2010
  12. LUTERRR17/03/2010
    • Николай17/03/2010
  13. LUTERRR17/03/2010
    • Николай17/03/2010
  14. LUTERRR17/03/2010
    • Николай17/03/2010

Добавить коментарий

три × 4 =