Янв

Миниатюры для поста в WP 2.9 на практике

В продолжение прошлого поста про новую функцию wordpress 2.9 и создание превью для постов блога — сегодня немного практики. Раньше мы рассказали как активировать функцию для админки, теперь что же нужно использовать в коде шаблона дабы выводить результаты ее работы.

Атрибуты img для вывода превью

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

< ?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>

Можно использовать несколько классов либо добавлять другие атрибуты тега img как, например, переопределить alt – полезный для поисковиков.

<?php the_post_thumbnail('medium', array('class' => 'alignleft another_class')); ?> // задаем дополнительный класс
<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext')); ?> // класс + атрибут alt

Для заголовка title изображения превью мы можем также использовать переопределение, если нам это нужно. Без упоминания этих атрибутов по умолчанию автоматически выведутся значения из заданного вами в Media Library при загрузке картинки.

<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>

Использование Media Settings

Есть в настройках wordpress блога такой раздел как «Медиафайлы» (Media Settings). Там можно указывать размер для миниатюрных изображений. Насколько я понимаю, если у вас есть блог с множеством зарегистрированных пользователей, то они могут эти настройки менять под себя. Так это или нет сказать сложно, но предлагаю научиться эти значения использовать при генерации миниатюр – мало ли пригодится для чего.

<?php
$width = get_option('thumbnail_size_w') / 2; //получить указанную ширину превьюшки
$height = get_option('thumbnail_size_h') /2; //получить указанную высоту превьюшки
the_post_thumbnail(array($width, $height), array('class' => 'alignleft'));
?>

В тех же медиа настройках есть 2 других размера «средний» и «большой» с указаниями других величин ширины и высоты изображения. Чтобы их считать нужно юзать код:

<?php get_option('medium_size_w'); //ширина "среднего" изображения ?>
<?php get_option('medium_size_h'); //высота "среднего" изображения ?>
<?php get_option('large_size_w'); //ширина "большого" изображения ?>
<?php get_option('large_size_h'); //ширина "большого" изображения ?>
<?php get_option('thumbnail_crop'); //проверка на вырезание части изображения, On=1, Off=0 ?>

Совместимость с другими версиями WordPress

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

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

if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
	the_post_thumbnail();
} else {
	$postimage = get_post_meta($post->ID, 'post-image', true);
	if ($postimage) {
		echo '<img src="'.$postimage.'" alt="" />';
	}
}

Здесь первым делом проверяется поддержки функции превью для постов, а также наличие этой самой миниатюры. Если все гуд – картинка выводится, в противном случае будет использован другой вариант. В данном случае используется метод произвольных полей custom fields — считывается ссылка для поля с названием post-image. Хотя, конечно, здесь может быть любой другой используемый вами метод, тот же с получением первой картинки поста вполне подходит.

Есть, кстати, возможность получить первое изображение из библиотеки media library

if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) {
  the_post_thumbnail(); // @param: array(height, width)
} else {
  // via mediathek
  $attachments = get_children( array(
                  'post_parent'    => get_the_ID(),
                  'post_type'      => 'attachment',
                  'numberposts'    => 1, // show all -1
                  'post_status'    => 'inherit',
                  'post_mime_type' => 'image',
                  'order'          => 'ASC',
                  'orderby'        => 'menu_order ASC'
                  ) );
  foreach ( $attachments as $attachment_id => $attachment ) {
    echo wp_get_attachment_image( $attachment_id );
  }
}

Подробнее о методе можно почитать здесь.

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

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

Автор рассказывает мол the_post_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');

Вот, как оказывается, все не просто с этими превью для постов в WordPress 2.9.

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

(голосов - 3, средний балл: 6,67 из 7)

Загрузка...

Категории: Хаки и секреты;

Теги: Wordpress 2.9, изображения, миниатюры постов, практика, сниппеты.

комментария 33 к статье “Миниатюры для поста в WP 2.9 на практике”

1 2 Далее →

AzzePis 05.01.2010
Спасибо за исчерпывающие примеры!
Перспективный блоггер 07.01.2010
array(‘class’ => ‘alignleft’, ‘alt’ => ‘alttext’, ‘title’ => ‘titletext’)

alttext и titletext почему-то не работают. Так и выводятся как строки: alttext и titletext
Tod 07.01.2010
Перспективный блоггер, спасибо за замечание. Похоже я неправильно понял автора англоязычной статьи и там эти alttext и titletext вроде как означают обычный текст, который можно указывать, если мы хотим переопределить значения данных полей картинки из медиа библиотеки. Непонятно правда зачем это нужно, возможно попытаться вставить в картинку тайтл поста или что-то такое.
Только что попробовал и если их не указывать, то заданные вручную значения альт и тайтл будут выводится автоматически.
Перспективный блоггер 07.01.2010
Только что попробовал и если их не указывать, то заданные вручную значения альт и тайтл будут выводится автоматически.

То, что надо! Спасибо! Я че-т сам так не подумал попробовать. Сама функция просто класс, и в Рунете у тебя пока что у единственного внятное описание и отличные примеры! Спасибо за труды!
Yury 22.01.2010
покажите хоть в работе это! а то две статьи про миниатюры и посты, а посмотреть что получается в итоге негде!
Tod 23.01.2010
Yury, в работе нужно поискать где-то забугром, где новые шаблоны делают регулярно, я тестировал в блоге — все четко, но ставить пока не ставил, т.к. не было необходимости.
Перспективный блоггер 23.01.2010
Показал бы, да сайт клиента, которому делал, сейчас почему-то временно недоступен. Как встанет — кину ссылку. Делал почти весь шаб с помощью этой функции миниатюр, работает блестяще. Разработка красивого шаблона облегчается в разы.
RodgerFox 01.02.2010
хм… не пойму, поч ругается wp:
Fatal error: Call to undefined function the_post_thumbnail() in в строчке с вызовом функции =\
Перспективный блоггер 06.02.2010
Yury, как и обещал, демонстрирую в работе: _http://a1tv.com.ua/
Аналог популярного русского музыкального проекта. А ведь и не скажешь, что на ВП? ;)
Yury 06.02.2010
Перспективный блоггер, да , выглядит очень даже недурственно. спасибо за пример
Саша 21.03.2010
У меня несколько другой код вывода привьюшек, но вот в чем оказия, выводит не ту картику которую нужно, ставлю первую, а выводит следующию, подскажите как быть?
Алекс 05.05.2010
подскажите из-за чего может не работать функция смены title и alt у миниатюры? версия wp 2.9.1 миниатюры выводятся непосредственно таким кодом <a href="» target=»_self»> », ‘title’ => »)); ?>
мне необходимо вообще убрать значения тегов, чтобы при наведении на миниатюру ее не закрывала всплывающая подсказка. пробовал ставить разные значения alt и title, но все-равно выводится то, что было указано в админке.
Алекс 05.05.2010
блин не могу добавить код. в общем 100 раз его проверял, он точно такой же как у вас в статье
Tod 05.05.2010
Алекс, может попробовать задавать пустые значения тайтлов:
<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => '', 'title' => '')); ?>
<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => '', 'title' => '')); ?>
Алекс 05.05.2010
Вставил ваш код и все стало ок. Оказалось, что у меня проблема была в том, что я не указывал атрибут размера в данном случае’medium’ почему-то думал, что он не обязательный.
Алекс 05.05.2010
если позволите, оффтопик небольшой, чтобы расставить для себя все точки над i.
можно ли так же сделать пустыми теги title и alt для фотографий в каждом отдельном посте. как я понимаю надо что-то в single.php наколодовать.
Oxygen 25.11.2010
Большое спасибо, отличная статья!
Артур 05.09.2011
А если у меня в качестве миниатюры, первая картинка поста, этот последний код (Отображение миниатюр в RSS блога) для RSS будет работать?
Tod 06.09.2011
Артур, последний код именно для миниатюр заданных в посте, поэтому вряд ли оно подойдет для «первой картинки поста». Фишка метода в том, что в переменную $content добавляется картинка а потом идет в RSS, то есть вместо функции get_the_post_thumbnail нужно подставить другой код для получения картинки поста и все тогда будет работать.
Артур 06.09.2011
Я уверен ты обьяснил все очень понятно, но я в этом ничерта не смыслю :)
Ну вот есть у меня там скрипт timthumb.php, он обрезает картинку и наверное делает еще много чего..
На главной есть такой код:

<img src="/timthumb.php?src=&w=400&h=250&zc=1″>

В функциях темы тоже код есть к этому делу:

function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, ‘<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '’);
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;
$cleanF = strpos($image[$num],’src=»‘)+5;
$cleanB = strpos($image[$num],'»‘,$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);
}
if(stristr($image[$num],'<img')) { echo $imgThumb; }
$more = 0;
}

Может скажешь конкретнее чего поменять то? Или добавить?
Артур 06.09.2011
Убралось в первом коде ?php bloginfo(‘template_directory’); ?> и ?php getImage(‘1’); ?>
Tod 06.09.2011
Артур, хм, ну по логике я бы кусок кода с
<img src="/timthumb.php?src=&w=400&h=250&zc=1″>
<img src="/timthumb.php?src=&w=400&h=250&zc=1″>
добавил в последний пример вместо функции
get_the_post_thumbnail( $post->ID, 'medium' )
get_the_post_thumbnail( $post->ID, 'medium' )
Рам 30.10.2011
Подскажите как реализовать миниатюры в виде ссылок на пост. Заранее спасибо
Tod 01.11.2011
Рам, про вывод можно почитать также в заметке превью для постов — там больше именно процесс создания и вывода рассматривается. Но видел вроде уже сделали на своем сайте.
Рам 03.11.2011
Спасибо. Да, помог плагин Featured Post with thumbnail
Матерый 15.04.2012
Ищу и ни как не могу найти ответа. Вот в чем дело.
Использую тему Darhive, которая автоматически создает миниатюры, даже если изображение не было вставлено в запись.
Подскажите- где и что нужно удалить, чтобы записи выводились без них?
Tod 16.04.2012
Матерый, все «фишки» темы зачастую прописаны в functions.php, я бы начинал поиски миниатюр оттуда + конечно, файлы отображения главной и архивов index.php, archive.php.
ChenZi 18.06.2012
Приветствую! Не подскажешь, где можно подправить?! Использую тему atahualpa, в постах изображения в зависимости от ресайза браузера автоматически масштабируются, на главной странице в мультипостах, задать показывать миниатюры, можно только фиксированного размера, например я указываю размер миниатюры 1000 на 200, соответственно потом на мультистраницах при ресайзе браузера, миниатюра не масштабируется, а залезает на соседние элементы, меню и прочее? Как сделать ее масштабируемой, резиновой?
Tod 18.06.2012
ChenZi, масштабирование — штука непростая в плане реализации, сомневаюсь, что в wordpress предусмотрено что-то для миниатюр. Единственный вариант, который приходит на ум, ручной вывод миниатюр с проверкой размера экрана и использования тех или иных размеров картинок. Но это кажется настолько громоздим решением, что я бы в лучшем случае просто бы поработал с css стилями дабы элементы друг на друга не залезали.
Владислав 10.04.2016
Как заключить миниатюру в тег, например, ?