Редактирование миниатюры новости, или превью в WordPress

Превью новости или миниатюра WordPress (thumbnail) — это небольшое изображение, иллюстрирующее тему блога, которое отображается на главной странице вместе с кратким анонсом статьи. В последних версиях (а функция эта поддерживается только с версии 2.9) WordPress превью создается в админке при редактировании новости в виджете «Миниатюра записи». Почти все современные шаблоны WordPress миниатюры поддерживают, поэтому скорее всего у вас есть подобный блок.

Превью wordpress

Если его нет, значит вы используете старую версию шаблона и придется ее активирувать вручную. Для этого открываем functions.php и вставляем код:

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

Теперь можно будет задать для каждой новости свое превью (thumbnail) в WordPress.
Для этого нажимаем на ссылку «Задать миниатюру», загружаем картинку и далее в самому низу нажимаем на ссылку «Использовать как миниатюру», после чего закрываем окно.

thumbnail превью wordpress миниатюра

Но на этом мы не остановимся. Можно еще сделать так, чтобы не задавать каждый раз миниатюры WordPress вручную, автоматически выводить в его качестве первое изображение, которое вставлено в статье. Для этого нам потребуется два кода. 1й, который вставим в functions.php:

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

И второй, который надо использовать для выведения картинки в цикле loop.

<?php echo catch_that_image() ?>

Теперь посмотрите видео, а в конце статьи вас ждут еще несколько полезных настроек.


Получите годовую подписку на все видеоуроки блога

Дополнительные настройки миниатюры WordPress

1. Если Вы не хотите подключить использование превью WordPress только в новостях или наоборот в статических страницах, то вместо самого первого кода из данной статьи надо вставить:

add_theme_support( 'post-thumbnails', array( 'post' ) ); // для новостей
add_theme_support( 'post-thumbnails', array( 'page' ) ); // для страниц

2. Для автоматического уменьшения картинки до заданного размера используем такой код:

set_post_thumbnail_size( 50, 50 ); // ресайз до размерности 50х50

Однако если у вас картинка 200×100, то в виде расайза получится превью размером 50х25, что не есть гуд.
Для избежания такого недоразумения используем такой код:

set_post_thumbnail_size( 50, 50, true );

Но в этом варианте минус тот, что при неравномерных сторонах изображение обрежется до 50 пикселов и картинка может получиться неполной. Так что лучше всего создавать первое изображение в статье квадратным и спокойно использовать любой из предложенных вариантов.

3. Код вставки превью WordPress в шаблоне:

<?php the_post_thumbnail(); ?>

Или так, с проверкой подключения функции и заданием альтернативного кода, если превью новости в шаблоне не подддерживается:

<?php
if ( has_post_thumbnail() ) {
php the_post_thumbnail();
} else {
	// ЗДЕСЬ КОД, КОТОРЫЙ БУДЕТ ОТОБРАЖАТЬСЯ,
        //ЕСЛИ ПРЕВЬЮ НЕ ПОДДЕРЖИВАЮТСЯ
}
?>

4. Для вставки миниатюры новости с заданным размером непосредственно в шаблоне:

<?php the_post_thumbnail(array(60,60)); ?>

Или можно указать один из стандартных предустановленных размеров:

<?php
// миниатюра
the_post_thumbnail('thumbnail');
// средний
the_post_thumbnail('medium');
// большой
the_post_thumbnail('large');
// исходный
the_post_thumbnail();
?>

5. Также можно включить в этот код классы картинки:

<?php
//  слева
the_post_thumbnail('thumbnail', array('class' => 'alignleft'));
//  справа
the_post_thumbnail('thumbnail', array('class' => 'alignright'));
//  по центру
the_post_thumbnail('thumbnail', array('class' => 'aligncenter'));
// справа и свой класс  'my_own_class'
the_post_thumbnail('thumbnail', array('class' => 'alignright my_own_class'));
// миниатюра уменьшена до 60х60 слева the_post_thumbnail(array(60,60), array('class' => 'alignleft')); // миниатюра со стандартными размерами the_post_thumbnail(array(150,150), array('class' => 'alignleft')); // средняя миниатюра, уменьшенная до 200х133 the_post_thumbnail(array(200,133), array('class' => 'alignleft')); // большая миниатюра уменьшена до 400x266 the_post_thumbnail(array(400,266), array('class' =>; 'alignleft')) ?>

Миниатюры в админке WordPress

Иногда бывает удобно, когда Ваши посты в админке отображаются в виде миниатюр. Например, если вы ведете фотоблог. Для того, чтобы это сделать, добавьте код в functions.php:

if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) {
 
    // for post and page
    add_theme_support('post-thumbnails', array( 'post', 'page' ) );
 
    function fb_AddThumbColumn($cols) {
 
        $cols['thumbnail'] = __('Thumbnail');
 
        return $cols;
    }
 
    function fb_AddThumbValue($column_name, $post_id) {
 
            $width = (int) 50;
            $height = (int) 50;
 
            if ( 'thumbnail' == $column_name ) {
                // thumbnail of WP 2.9
                $thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
                // image from gallery
                $attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
                if ($thumbnail_id)
                    $thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
                elseif ($attachments) {
                    foreach ( $attachments as $attachment_id => $attachment ) {
                        $thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
                    }
                }
                    if ( isset($thumb) && $thumb ) {
                        echo $thumb;
                    } else {
                        echo __('None');
                    }
            }
    }
 
    // for posts
    add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' );
    add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 );
 
    // for pages
    add_filter( 'manage_pages_columns', 'fb_AddThumbColumn' );
    add_action( 'manage_pages_custom_column', 'fb_AddThumbValue', 10, 2 );
}

За размер изображений отвечают строки:

$width = (int) 50;
            $height = (int) 50;

Размер можете настроить по своему вкусу. Если написать значение «auto», то оно заполнит собой автоматически ячейку таблицы.

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

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

Комментариев: 14

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

    • Сео-плагин для автоматического задания тайтлов по названию статьи случайно не используете?

  • Возник вопрос. Как вывести превью изображения, если оно не загружалось на блог (с другого сайта) с заданием max пропорции любой из сторон?

  • Подскажите, можно ли сделать чтобы миниатюра выводилась ссылкой, чтобы при нажатии показывалось картинка бОльшего размера? сейчас она выводится просто как изображение и не кликабельна.

    • Сделайте миниатюру ссылкой на медиафайл полного размера и используйте один из плагинов для автовысплытия картинки — AutoHightslide, FansyBox или что-то наподобие него


      < ?php if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '';
      the_post_thumbnail('thumbnail');
      echo '';
      }
      ?>

  • А какой плагин нужно использовать, чтобы картинка в превью открывалась небольшим окном на этой же странице? Спасибо.

    • Можно попробовать сделать миниатюру ссылкой на медиафайл и использовать один из плагинов — AutoHightslide, FansyBox или что-то наподобие него

  • Начало статьи в общем уже есть на многих блогах. А вот за код для вывода миниатюр в Админке спасибо. Поставил. Выглядит классно!

  • Здравствуйте. У меня в анонсе записи сейчас стоит миниатюра, когда открываю запись — она же открывается, только чуть-чуть большего размера. Когда я в запись добавляю большую картинку помимо миниатюры, то окрыв запись — там 2 картинки: и миниатюра и большая — все вместе. Скажите, пожалуйста, а как сделать, чтобы в анонсе картинка была как миниатюра, а открыв запись — эта же миниатюрная картинка увеличивалась до полного размера или до указанного размера. спасибо

    • Здравствуйте! Ссылку пришлите, посмотреть. А так — вам надо править файл вывода полной новости, то есть single.php — там прописан код, который выводит картинки. Скорее всего у вас по умолчанию прописан вывод миниатюры в полной записи, а когда вы добавляете ее в тело текста, то она еще раз уже в большом виде показывается

  • Вопрос такой.
    Я хочу чтобы на главной, при клике на миниатюту открывалась не запись, а ссылка которую я сам задам. Это можно как-то сделать?

    • Можно, откройте файл index.php (или какой-то еще в вашем шаблоне, который отвечает за вывод цикла новостей на главной) в том месте, где будет картинка показываться, вставьте код: <?php if( has_post_thumbnail() ) : ?>
      <a href="ВАША ССЫЛКА" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
      <?php else : ?>
      <?php endif; ?>

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

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