18 Фев
Как установить размер изображения в WordPress теме? Изображения, выделенные как «featured image«, стали важной частью WordPress с выпуском версии 2.9. Их также могут называть миниатюрами или превью, но это одно и то же. В этой статье мы рассмотрим, как программно получать и устанавливать размер изображений «featured image«.
Разновидности размеров изображений в WordPress
Изображения играют важную роль на сайтах, помогая делать страницы более живыми и интересными. Однако они могут добавить большое количество дополнительных данных, которые пользователи должны загрузить для просмотра страницы. Это может быть особенно проблематично, если вы используете один размер изображения для отображения на всех устройствах — больших и маленьких.
К счастью, WordPress автоматически создает изображения разных размеров, чтобы вы могли оптимизировать доставку контента для разных пользователей. Один из таких размеров называется «миниатюра (или Thumbnail)». Размеры этого изображения доступны в панели администрирования WordPress, перейдя к Настройки > Медиафайлы.
Размер «Thumbnail» отличается от другого размера изображения, называемого «post-thumbnail«, который регистрируется, когда тема добавляет поддержку изображений записей.
В этой статье мы сосредоточимся на размере «post-thumbnail» и научимся получать и устанавливать его значение.
Как установить размер изображения в WordPress теме.
Вероятнее всего, вы захотите, чтобы размеры ваших миниатюр были одинаковыми. Одним из способов сделать это является использование функции set_post_thumbnail_size(). Функция принимает три параметра: ширину, высоту и необязательное логическое значение, указывающее, хотите ли вы обрезать изображения или масштабировать их размер. По умолчанию это значение установлено false, что означает, что изображения будут изменяться (масштабироваться) в размере.
Следующая строка кода указывает WordPress создавать миниатюры размером 1000 пикселей по ширине и 500 пикселей по высоте с изменением размера.
set_post_thumbnail_size(1000, 500);Учтите, что изображения будут изменяться в размере, чтобы стать точно такими же, как 1000 пикселей по ширине и 500 пикселей по высоте, только если у них одинаковое соотношение сторон. В противном случае, они будут изменяться так, чтобы иметь соответствующую ширину или высоту в зависимости от соотношения сторон.
Предположим, что вам не важно обрезание изображений, но они всегда должны быть размером 1000 пикселей по ширине и 500 пикселей по высоте при использовании в качестве миниатюр. В этом случае, вы можете установить третий параметр в true.
set_post_thumbnail_size(1000, 500, true);Теперь все ваши миниатюры будут обрезаны до точно такого же размера, 1000 пикселей по ширине и 500пикселей по высоте.
Функция set_post_thumbnail_size() использует функцию add_image_size() внутри, чтобы зарегистрировать размер изображения для миниатюры. Если вы хотите зарегистрировать дополнительные размеры изображений, рассмотрите использование функции add_image_size().
Добавление этого вызова функции в ваш файл functions.php не приведет к изменению размеров существующих миниатюр. Для этого вы должны использовать плагин для регенерации миниатюр. Кроме того, меньшее изображение не будет увеличено до размеров миниатюры, которые вы указали.
Как узнать размер миниатюры в WordPress?
Если вы хотите узнать текущий зарегистрированный размер изображения, установленного как изображение записи, WordPress предлагает нам несколько функций, чтобы получить всю эту информацию. Я кратко упомяну их здесь.
Функция get_intermediate_image_sizes() полезна для тех, кто просто хочет получить список зарегистрированных размеров изображений. Это не даст вам никакой другой информации о размерах изображений. Вот пример того, что вернет функция:
Array
(
[0] => thumbnail
[1] => medium
[2] => medium_large
[3] => large
[4] => post-thumbnail
[5] => woocommerce_thumbnail
[6] => woocommerce_single
[7] => woocommerce_gallery_thumbnail
)Функция wp_get_additional_image_sizes() показывает информацию о всех других зарегистрированных размерах изображений, кроме миниатюр, среднего, среднего-большого и большого (thumbnail, medium, medium_large, and large). Эта функция возвращает ассоциативный массив массивов с информацией, такой как ширина, высота и кадрирование для зарегистрированных размеров изображений:
Array
(
[post-thumbnail] => Array
(
[width] => 1000
[height] => 500
[crop] => 1
)
[woocommerce_thumbnail] => Array
(
[width] => 324
[height] => 324
[crop] => 1
)
[woocommerce_single] => Array
(
[width] => 416
[height] => 0
[crop] => 0
)
[woocommerce_gallery_thumbnail] => Array
(
[width] => 100
[height] => 100
[crop] => 1
)
)Вы можете увидеть размер post-thumbnail, который я зарегистрировал в выводимых данных выше. Он также имеет установленный параметр обрезки (crop) равный 1, что означает, что изображения будут обрезаны, а не изменены (масштабированы) в размере.
Допустим, вы хотите получить информацию обо всех зарегистрированных размерах изображений для веб-сайта на WordPress. В этом случае наилучшим вариантом для вас будет использование функции wp_get_registered_image_subsizes().
Array
(
[thumbnail] => Array
(
[width] => 180
[height] => 180
[crop] =>
)
[medium] => Array
(
[width] => 420
[height] => 420
[crop] =>
)
[medium_large] => Array
(
[width] => 768
[height] => 0
[crop] =>
)
[large] => Array
(
[width] => 1024
[height] => 1024
[crop] =>
)
[post-thumbnail] => Array
(
[width] => 1000
[height] => 500
[crop] => 1
)
[woocommerce_thumbnail] => Array
(
[width] => 324
[height] => 324
[crop] => 1
)
[woocommerce_single] => Array
(
[width] => 416
[height] => 0
[crop] =>
)
[woocommerce_gallery_thumbnail] => Array
(
[width] => 100
[height] => 100
[crop] => 1
)
)Как стилизовать миниатюры в WordPress
Некоторым разработчикам тем может потребоваться задать различные стили для миниатю, отличающиеся от остальных изображений. В WordPress это можно сделать очень просто с помощью CSS-селекторов.
Любая миниатюра (превью или featured image), которая выводится на сайте, уже имеет класс wp-post-image. К изображению также могут быть добавлены другие необязательные классы, такие как size-post-thumbnail или size-large, в зависимости от размера, который был выбран для выделенного изображения.
Это позволяет вам выбирать миниатюры определенного размера и применять к ним соответствующие стили.
Заключение (Как установить размер изображения в WordPress теме)
В этом уроке было рассмотрено все, что вам нужно знать о том, как получить или установить размер изображений для изображений записей (featured images) на WordPress. Теперь вы должны быть в состоянии точно указать желаемый размер своих изображений записей и стилизовать эти изображения на основе применяемых к ним конкретных классов.
