WordPress Fix: создаем пользовательские размеры изображений в WordPress. Плагин для WordPress Simple Image Sizes

В этой статье я бы хотел рассказать вам как добавить пользовательские размеры изображений к уже имеющимся в WordPress. В WordPress есть встроенная поддержка миниатюр, об этом я писал в статье WordPress Fix: добавляем в тему миниатюры WordPress. Так же есть еще одна функция add_image_size(), которая позволяет задать нужные вам размеры для изображений в WordPress. Использование встроенных функций WordPress позволит вам сократить количество установленных плагинов и следовательно снизить нагрузку на хостинг. Давайте посмотрим как нам создать дополнительные размеры изображений.

Начнем мы с добавления поддержки миниатюр в WordPress (если это у вас уже сделано — переходите к следующему пункту). Для этого понадобиться вставить в functions.php всего одну строку кода:

add_theme_support( 'post-thumbnails' );

После добавления поддержки миниатюр в ваше тему WordPress можно перейти к заданию дополнительных размеров для изображений с помощью функции add_image_size(). Использование функции очень простое:

add_image_size( ‘name-of-size’, width, height, crop mode );

Вот несколько примеров кода:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Режим жесткого кропа
add_image_size( 'homepage-thumb', 220, 180 ); // Режим мягкого кропа
add_image_size( 'singlepost-thumb', 590, 9999 ); // Режим неограниченной высоты

Если вы заметили, все три примера разные по размерам и по режиму кропа. Давайте более подробно разберем все эти режимы.

Режим жесткого кропа

Как вы могли заметить, этот режим включается при добавлении true в самом конце. Этот режим указывает WordPress на то, что необходимо урезать изображение до введенных нами размеров (120х120). Такой метод часто применяется в создании тем, так как вы можете жестко задать размеры и быть уверенным, что дизайн не поедет. Главный минус данного режима — вы не можете контролировать какую именно часть изображения функция вырежет. Часто такой режим применяется при выводе свежих записей в сайдбар, когда выводится миниатюра поста и его название рядом. Вот пример вывода:

Режим мягкого кропа

Этот режим изменяет размер вашего изображение пропорционально, согласно заданным вами параметрам. Чаще всего высота не учитывается, а учитывается только ширина. Поэтому можно опустить все параметры кроме ширины. В итоге мы получаем полноценные изображения, но контролировать их высоту мы не можем. Поэтому рекомендуется применять такой режим только тогда, когда вам не критична высота изображения. Вот пример:

Режим неограниченной высоты

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

Выводим изображения с пользовательским размером

Теперь, после добавления нужной нам функциональности, нам требуется вывести полученные изображения в теме WordPress. Откройте тот файл темы, в котором вы хотите вывести ваше изображение и добавьте следующий код в нужное место:

< ?php the_post_thumbnail( 'ваш_пользовательский_размер_изображения' ); ?>

Имейте ввиду: если вы хотите вывести изображение внутри поста, то эта часть кода должна быть вставлена внутрь цикла вывода поста (loop).
Вот собственно и все, что требуется для того, чтобы вывести изображение нужного нам размера в нужном нам месте.

Заново сгенерировать миниатюры в заданных размерах

Если вы проделывали все предыдущие шаги не на новом сайте, то вам скорей всего придется заново сгенерировать миниатюры для всех постов в заданных вами размерах. Для этого вы можете воспользоваться плагином regenerate thumbnails. После установки и активации плагина вы увидите в меню новый пункт «Regen. Thumbnails».

Все, что остается сделать — нажать на кнопку «Regenerate All Thumbnails».
[info]Имейте ввиду, что процесс необратим. Рекомендуется сделать полный бэкап перед использованием данного плагина.[/info]

Добавляем новые размеры изображений в редактирование поста

Мы добавили новые размеры изображений в тему для WordPress, научились выводить миниатюры в заданном формате. Нам остается только добавить возможность выбора новых размеров в админ панель. После следующих манипуляций вы сможете выбрать нужный вам размер изображения прямо при редактировании поста. Что же нужно проделать? Нам понадобиться плагин Simple Image Sizes. После его установки и активирования вы увидите все доступные размеры изображений в вашей теме. Все, что остается сделать — поставить напротив нужного размера галочку «Show in post insertion».

После того как вы проделаете эту операцию со всеми нужными размерами вы увидите такую картину:

Да, и кстати, плагин Simple Image Sizes позволяет добавлять новые размеры изображений прямо из админ панели, без надобности лезть в код.

Если вам требуется нанять копирайтеров, то ознакомьтесь с обзором сервисов по ссылке.