В специфики того, что я придирчиво отношусь к захламлению и имею свойство избавляться от лишнего, вывод изображений в WordPress я изучил вдоль и поперек. Представляю один из наилучших способов вывода изображений.
Не обязательно, но можно ознакомиться с предыдущей статьёй о миниатюрах на WordPress.
WordPress генерирует кучу дополнительных размеров изображений. Для начала надо убрать их.
Убираем автоматически создаваемые размеры изображений.
Отдельная статья посвящена тому, как убрать изображение в разрешении 768 на WordPress
Теперь приступаем.
Инструкция вывода изображений в шаблоне сайта на WordPress
1. В разделе Настройки -> Медиатека везде ставим ноль.
Это нужно для того, чтобы нигде не дублировались значения. А если появляются новые изображения, то можно было бы легко вычислить, что они не ваших рук дело, а кого-нибудь плагина.
2. Заходим в файле functions.php и добавляем следующие размеры.
add_image_size( 'thumbnail', 100, 100, true );
// Архивы
add_image_size( 'post-thumbnail', 270, 200 );
// Обычный формат записи
// Архивы при разрешении Retina
add_image_size( 'medium', 600, 400 );
// Записи при разрешении Retina
add_image_size( 'large', 1200, 800 );
В результате WordPress будет генерировать 4 размера изображений.
Почему не нужно вставлять никуда кроме миниатюр значение «crop»? Об этом можно почитать по уже ранее приведенной ссылке.
Важно указать в functions.php названия, которые уже зарезервированы WordPress-ом для изображений. Если назвать их иначе, то могут возникнуть какие-нибудь нестыковки. Например, не должным образом может работать функция srcset. О ней чуть ниже.
Первое изображение 100 на 100 (thumbnail) необходимо для различных внутренних административных функций, чтобы мы быстро смогли увидеть и работать со своими загруженными картинками.
Второе изображение (post-thumbnail) будет выводиться в списке разделов. Его размер не будет виден в списке доступных для загрузки в запись изображений. А следовательно не будет мешать и мозолить глаза.
Изображение с названием medium будем вставлять в свою запись. Другие размеры, относящиеся к данному примеру, вставлять не нужно.
Последний размер, который будет генерироваться это large. Он должен быть в 2 раза больше medium. И вот почему.
img scrset для the_post_thumbnail
В WordPress начиная с версии 4.4 был введен для изображений параметр srcset. Если посмотреть на изображения в коде сайта на WordPress, то оно будет выглядеть следующим образом:
Для чего это нужно. При разных разрешениях экрана монитора будет отдаваться разные размеры картинок. Работает функция в WordPress автоматически, нужно лишь создать для неё соответствующие условия.
Что мы и сделали. Мы загружаем картинку минимального размера (нами утвержденного) в свою статью. И для неё же генерируется изображение с разрешением в 2 раза выше. Такая картинка загрузится на сайт, если он будет просматриваться с дисплеев повышенной плотности пикселей (Retina и т.д).
В то же самое время надо, чтобы scrset работал и для разделов сайта, когда выводятся миниатюры. Для них мы выводим картинки с помощью следующего php кода:
if( has_post_thumbnail() ) {
$title_attribute = get_the_title( $post->ID );
$arr = array('title' => esc_attr( $title_attribute ), 'alt' => esc_attr( $title_attribute ) );
echo '<figure class="archive-article-thumbnail">';
echo '<a href="' . get_permalink() . '" title="'.the_title( '', '', false ).'">';
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail', $arr );
echo '</a></figure>';
}?>
Из кода можно увидеть, что изображение будет выводить в пост размеры указанные в названии post-thumbnail. Именно для этого он был записан в файл functions.php.
Для записей нам такой маленький размер не нужен (в контексте данного примера). Возможно у вас будут другие размеры для других задач. Важно понять, что изображения должны генерироваться в двух разрешениях: одно меньше — другое в два раза больше. И первое изображение мы выводим на сайте, а второе подключится автоматически. Также следует придерживаться название закрепленных за WordPress.
При вставке в статью будут следующие размеры:
Можно заметить, что есть ещё размер полный. Этот размер оригинального изображения. С помощью плагина Resize Image After Upload можно утвердить его границы. Например, обрезать до 1920 пикселей или меньше. Это же изображение будет выводиться, если кликнуть на картинку.
Дополнительно картинки можно сжать или растянуть с помощью стилей CSS на всю читаемую область, но в данной статье об этом касаться не будем.
