вход

Как использовать миниатюры в 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 Вы тоже можете почитать на моём блоге.

Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
21 комментарий

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

  1. А как сделать чтобы в миниатюре отображались картинки оригинального размера? А то когда постеры к фильмам обрезает не очень красиво смотрится. Хотя бы на примере моего сайта, адрес я указал.

  2. Николай:

    Перед тем как кликнуть на кнопку “insert into post” нажмите на кнопку “file URL” и картинка будет привязана в полный размер

  3. Я думаю ты не совсем меня понял, шаблон сжимает картинку автоматом в миниатюру на главной до 150*150, есть идейные соображения как можно это изменить, может правкой кода стиль шаблона? А по клику и развёртывании поста – картинка имеет свой родной вес, однако я заинтересован чтобы и на главной был родной размер, указанный при загрузке.

  4. Николай:

    Думаю самый простой способ здесь – это публиковать картинку в сам пост в начале, а затем добавить функцию в тему, которая будет брать первую картинку поста и использовать её как миниатюру.

  5. А как это сделать? Я итак загружаю картинку сперва оригинального размера + приходится для публикации в миниатюре указывать особое значение через дополнительное поле.

  6. Николай:

    В рунете я встречал описание того, как это сделать, поэтому у себя не стал освещать этот вопрос. Может быть позже напишу об этом.

  7. Я думаю довольно актуальная тема не только для меня, если встретится, дайте знать, буду признателен.

  8. Николай, у вас в постах – миниатюры? Просто наша тема миниатюры поддерживает, но в rss их не отдает. Я думала так и должно быть, а у вас, смотрю, картинка уходит в рассылку. Не знаете как бы это и у нас реализовать?

  9. Николай:

    Анна, добрый день! Спасибо за интерес к моему блогу. Ваш блог мне тоже очень нравиться, я его постоянно читаю. Отвечаю на вопрос : для отображения миниатюр в ленте новостей нужно в файл functions.php добавить код:

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

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

    p.s. Я дополнил эту статью этим кодом, можете посмотреть в статье.

  10. Спасибо большое, Николай! Сегодня же сделаю:)

  11. Николай, все получилось замечательно, спасибо! Но у меня тут возник еще один вопрос. Можно ли сделать еще и так, чтобы текст в rss был рядом с картинкой, а не под ней?

  12. Николай:

    Анна, рад тому, что мой совет Вам помог. Для того чтобы текст располагался рядом с картинкой, Вы можете использовать например стили. Для этого нужно поместить Вашу миниатюру в тэг и назначить этому тэгу стиль “float:left”. Таким образм, текст будет располагаться слева от картинки. На практике, тот код который я Вам советовал, нужно изменить на такой:

    function insertThumbnailRSS($content) {
    global $post;
    if ( has_post_thumbnail( $post->ID ) ){
    $content = '<div style="float:left; padding-right: 10px;">' . get_the_post_thumbnail( $post->ID, 'medium' ) . '</div>' . $content;
    }
    return $content;
    }

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

  13. Нет слов! Все стало еще замечательнее! Спасибо большое:)

  14. Хочу все знать!:

    Хочу все знать! 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 {
    }

    }

  15. Николай:

    Анна, функция отвечающая за вывод миниатюр в файле functions.php не обрезает сами миниатюры. Если они выводятся, значит функция работает правильно. Так что же обрезает Ваши картинки. Я полагаю Вам нужно искать в файле стилей Style.css. Если посмотреть код страницы, то Ваши миниатюры выводятся в контейнере div, которому назначен какой нибудь стиль. Посмотрите как формируется этот стиль, какие размеры контейнера, и вообще, как он выводиться. Думаю, вам нужно менять именно стиль для контейнера с миниатюрой.

  16. Пытаясь решить проблему с миниатюрами WordPress, набрела на Ваш блог :)

    Собственно, проблем несколько.

    У меня в блоге все картинки в постах имеют один размер – 140х140.
    И перевьюшки на страницах с анонсами – они тоже размером 140х140.

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

    В настройках медиафайлов я указала чёткий размер миниатюр 140х140, во всех остальных полях (там где полагается ставить размеры средних и больших) – по нолям.
    Но WordPress тупо генерирует из изображения, например, image.jpg, у которого размер 140х140, ещё и image-140×136.jpg с размером, есссно, 140х136. И именно это изображение назначает миниатюрой. И оно конфликтует с оформлением шаблона, выходя за рамку, обрамляющую изображение (на страницах, где выводится краткие анонсы постов с перевьюшками).

    Я решила обхитрить ВП и стала загружать изображения размером 141х141. В таком случае ВП генерирует миниатюру 141х136, но она уже не вылезает за рамку, – я вздохнула с облегчением.

    Но тут вылезла другая проблема: картинка, которую ВП назначает миниатюрой и которая выводится на странице с анонсами, имеет ЯВНО ухудшенное качество.
    То есть в посте картинка с нормальным качеством, а в анонсах – размытая, ибо ВП, видите ли, заботится о трафике посетителей блога.

    Собственно, ВОПРОС: где находится этот чёртов параметр, задающий это чёртово качество этих чёртовых миниатюр этого чёртвого вордпресса?

    Прошу простить за ругань: сил моих уже нет совсем :) Второй день бьюсь над этими чёртовыми проблемами.. о.О

    Хелп, а?..

  17. Николай:

    @Allpa

    Проблема скорее всего кроется в функциях вашей темы. Найдите файл functions.php в папке с вашей темой, и посмотрите там. Я думаю в этом файле есть функция которая и обрезает загружаемые изображения. Там же должна быть функция и вывода миниатюр.

  18. yo:

    Попробовала вставить код для вывода миниатюр
    в итоге вообще фид не отображается
    выдает ошибку
    This page contains the following errors:

    error on line 32 at column 25: Extra content at the end of the document

    убрала этот код – ошибка осталась ;(

  19. Николай:

    Код, приведённый в статье полностью рабочий. Но здесь нужно учитывать версию Вашего WordPress. Указанный код работает от версии 2.9 и выше. По поводу оставшейся ошибки не переживайте, лента RSS работает с задержкой.

  20. Спасибо за полезную информацию, а то я пользовалась миниатюрами, создаваемыми силами галлереи в сочетании с или брала шаблон с встроенной функцией.

  21. Здраствуйте. Столкнулся с такой проблемой:

    Когда добавляешь фото в миниатюру, то на главной странице изображение обрезанное, причем как не масштабировал, все без толку.
    Помогите =( http://pravvo.org.ua/

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

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

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.