Как создать дополнительные размеры изображений в WordPress

В прошлом месяце была обнаружена огромная уязвимость в известном скрипте изменения размера изображений, который называется TimThumb. С тех пор сообщество сотрудничало и решало проблемы. Хотя TimThumb является жизнеспособным вариантом, мы считаем, что разработчикам тем WordPress следует сосредоточиться на использовании основных функций, а не полагаться на сторонние скрипты. В этой статье мы покажем вам, как добавить дополнительные размеры изображений в WordPress..


WordPress имеет встроенную функцию «Миниатюры постов» или «Избранные изображения». Существует также встроенная функция add_image_size (), которая позволяет вам указать размеры изображения и дать вам возможность обрезать. Использование этих основных функций в вашей теме может существенно устранить необходимость в стороннем скрипте, таком как TimThumb, в большинстве случаев..

Регистрация дополнительных размеров изображения для вашей темы

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

add_theme_support (‘post-thumbnails’);

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

Пример кода может выглядеть так:

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

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

Режим жесткого урожая – Как вы заметили, после высоты добавлено значение «true». Это истинное значение говорит WordPress обрезать изображение до размера, который мы определили (в данном случае 120 x 120px). Это метод, который мы часто используем в наших проектах тем, чтобы убедиться, что все пропорционально и наш дизайн не сломан. Эта функция автоматически обрезает изображение с боков или сверху и снизу в зависимости от размера. Недостатком жесткого кадрирования является то, что вы не можете контролировать, какая часть изображения отображается.

Исправление Майк Литтл – Когда вы загрузили изображение и перед тем, как вставить его в сообщение, вы можете нажать «Редактировать изображение» и оттуда изменить миниатюру или все изображение, масштабировать, повернуть или перевернуть изображение, а также миниатюру. выберите точную часть изображения, которое вы хотите.

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

Пример мягкого урожая

Режим неограниченной высоты – Есть моменты, когда у вас есть очень длинные изображения, которые вы хотите использовать в своем дизайне, но вы хотите убедиться, что ширина ограничена. Основное использование, которое мы находим для такого размера изображения, – это посты с инфографикой. Инфографика имеет тенденцию быть очень длинной и полной информации. Жесткая обрезка такого изображения на одной странице поста – не лучшая идея. Но по своей природе инфографика шире, чем ширина контента. Таким образом, вы можете указать ширину, которая не будет нарушать ваш дизайн, оставляя высоту неограниченной, чтобы вся инфографика могла отображаться без искажений. Пример отображения будет выглядеть так:

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

Отображение дополнительных размеров изображения в вашей теме WordPress

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

<?php the_post_thumbnail (‘ваш указанный размер изображения’); ?>

Примечание: этот фрагмент кода должен быть вставлен в цикл post.

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

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

Если вы не делаете это на новом сайте, то вам, вероятно, придется восстанавливать эскизы. Функция add_image_size () работает так, что она генерирует размеры только с той точки, в которую она была добавлена ​​в тему. Поэтому любые изображения постов, которые были добавлены до включения этой функции, не будут иметь новый размер. Так что нам нужно восстановить новый размер изображения для старых постов изображений. Это легко сделать с помощью плагина Regenerate Thumbnails. После установки и активации этого плагина в меню добавляется новая опция: Инструменты »Regen. Эскизы

Восстановить миниатюрный плагин

Нажмите значок «Восстановить миниатюру» и дайте плагину сделать свою работу.

Другой плагин, который может сделать эту работу, – Простые Размеры Изображения.

Включение дополнительных размеров изображения для вашего контента

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

После того, как вы установите и активируете этот плагин, новые параметры будут добавлены на вашей странице Настройки »Медиа. Вы увидите список размеров, которые вы определили в своей теме. Все, что вам нужно сделать, это установить флажок «Показывать при вставке».

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

После того, как вы установите этот флажок, вашему автору будут доступны дополнительные размеры для публикации.

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

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

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

Мы считаем, что этот метод должен быть добавлен в соответствии с рекомендациями для всех разработчиков тем WordPress. Что ты думаешь?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map