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

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

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

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

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

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

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

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

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('//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.

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

[pwal id=»12726822″ description=»Чтобы посмотреть видеоурок, нажмите на одну из кнопок»]

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

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

[/pwal]

Дополнительные настройки миниатюры 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 в шаблоне:

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

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

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

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


Миниатюры в админке 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, как и любые другие изображения, прежде чем загружаться на сайт должны быть оптимизированы, о чем отдельный урок.

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