Редактирование изображения в WordPress

Немногие знают, что WordPress в своём арсенале имеет простенькие возможности редактирования изображений. Конечно же, это не Adobe Photoshop или аналоги, но изменить размер или ориентацию — можно! 🙂

Давайте возьмём какой-нибудь не очень ровный снимок экрана с лишними элементами по бокам и попробуем с помощью редактора изображений привести файл в чувство.

Например, я сделаю вот такой неряшливый снимок:

Тестовый экземпляр для редактирования
Тестовый экземпляр для редактирования

Внимание! В данной инструкции рассматривается именно редактирование изображение, а не правка его свойств, названия и прочей текстовой информации.

Если вам нужно отредактировать атрибуты, тогда вам следует заглянуть в заметку Редактирование свойств изображения. 🙂

Что мы с вами хотим получить?

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

Редактирование изображения в WordPress

Как отредактировать файл?

Как и везде в WordPress, попасть в один и тот же экран можно несколькими путями. В нашем случае это: клик по изображению в редакторе, кнопка «Добавить медиафайл» или же меню «Медиафайлы».

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

Клик по изображению

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

Нажимаем мышкой на наше изображение и в появившемся всплывающем элементе выбираем кнопку с иконкой карандаша:

Переход к редактированию из редактора
Переход к редактированию из редактора

И в появившемся окне в правой области экрана находим и нажимаем кнопку «Редактировать оригинал». Это способ №1.

Редактирование в Библиотеке файлов

Находясь в интерфейсе редактирования записи или страниц, при клике на кнопку «Добавить медиафайл» можно перейти в Библиотеку файлов. Там видны все загруженные ранее изображения, щёлкнем по ней.

Используем Библиотеку файлов
Используем Библиотеку файлов

Здесь нам надо найти нужный нам файл и щёлкнуть по нему. Файл автоматически выделится рамкой, это признак того, что файл выбран:

Файл выделится рамкой
Файл выделится рамкой

И теперь в правой области экрана необходимо нажать на ссылку «Редактировать», из неё мы попадём в нужный нам интерфейс:

Переходим в редактирование изображения
Переходим в редактирование изображения

Поиск файла через меню «Медиафайлы»

Третий способ может быть использован в том случае, если вы не прикрепляли файл к записи или странице, а загрузили собственноручно. Например, это может быть фон для сайта или что-то ещё.

Заходим в меню «Медиафайлы» и видим плиточное представление:

Редактирование изображения через "Медиафайлы"
Редактирование изображения через «Медиафайлы»

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

Кликнем по нужному файлу и интерфейс редактирования откроется незамедлительно. Нам останется только нажать на кнопку «Редактировать» под изображением:

Кнопка редактирования
Кнопка редактирования

Отлично! Я думаю с этим вы уже разобрались. Переходите к следующей странице по ссылке ниже и продолжим наш урок.

Читайте также:  Использование эффекта Lightbox для изображений

Интерфейс редактирования

Если вам удалось попасть в интерфейс редактирования изображения, то перед вам появится следующий экран:

Интерфейс редактирования изображения
Интерфейс редактирования изображения

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

Пробежимся по ним очень быстро, чтобы было понимание.

Панель инструментов

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

Панель инструментов
Панель инструментов

Рабочая область

Здесь мы с вами видим некий холст с предпросмотром редактируемого изображения. В зависимости от размера исходного изображения он будет или подстраиваться по ширине экрана, или же сожмётся в прямоугольник.

Рабочая область
Рабочая область

Сразу после использования кнопок на панели инструментов изменения будут отображаться в этой области. Рассмотрим их отдельно для каждого случая чуть позже.

Настройки и свойства медиафайла

Не смог придумать ничего умнее для этого блока настроек, поэтому пусть будет так. Не все элементы в WordPress можно назвать «человеческими» словами. 🙂

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

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

Блок «Масштабировать»

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

Изменение масштаба
Изменение масштаба

Например, вы загрузили очень большой файл и хотите сделать его меньше 1000 пикселей по ширине. Для этого в первое поле вводим «1000», второе автоматически рассчитается от этого размера пропорционально:

Пропорциональное масштабирование
Пропорциональное масштабирование

Для сохранения этого масштаба нажимаем на кнопку «Масштабировать» и изображение автоматически сохранится с новым размером.

Блок «Обрезать»

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

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

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

Выбираем прямоугольную область
Выбираем прямоугольную область

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

Если вы не можете точно нарисовать прямоугольник (как в моём случае), то нет ничего страшного! Главное — точно выставить левую границу, а правую мы сейчас подберём опытным путём.

Читайте также:  Как вставить видео с Vimeo в WordPress

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

Ручной ввод размера изображения
Ручной ввод размера изображения

Наверно в данном случае это неочевидно, т.к. файл очень большой и мелкие манипуляции с ним не так видны. Но если я захочу изменить высоту и введу «700» во второе поле, то увидим результат:

Обрезаем высоту изображения
Обрезаем высоту изображения

После нажатия на кнопку «Сохранить» этот прямоугольный фрагмент будет вырезан из вашего изображения и сохранён по новой в этот же самый файл.

Блок «Настройки миниатюры»

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

Теперь давайте вернёмся к нашей задаче и обрежем ненужные элементы в этом снимке экрана.

Как обрезать изображение

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

Очертим рабочее пространство:

Устанавливаем размер области
Устанавливаем размер области

Затем надо нажать на кнопку обрезки изображения в Панели инструментов (самая первая слева):

Кнопка обрезки изображения
Кнопка обрезки изображения

От изображения автоматически будет отрезан выделенный фрагмент и сохранён в этот же файл. Результат вы увидите мгновенно:

Результат выполнения обрезки изображения
Результат выполнения обрезки изображения

Ну, как вам? 🙂

Как повернуть изображение

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

Возьмём для примера мою фотографию, которую я предварительно повернул по часовой стрелке (не все же фотографируют корректно, правда ведь?):

Моя фотография для эксперимента :-)
Моя фотография для эксперимента 🙂

Нам надо развернуть её на 90 градусов по часовой стрелке, чтобы выглядела как положено в правильной ориентации. Для этого откроем файл на редактирование любых из удобных вам способов.

И воспользуемся кнопкой поворота изображения:

Поворот изображения по часовой стрелке
Поворот изображения по часовой стрелке

Теперь нам останется нажать на кнопку «Сохранить» и наша фотография будет в том положении, какое мы ей задали:

Результат редактирования
Результат редактирования

Подведём итоги

WordPress не обладает каким-либо мощным редактором с набором фильтров и возможностей, но именно масштабирования, обрезания и поворота обычно достаточно для быстрой правки.

Если вам требуется что-то удалить с заднего фона, нарисовать какую-то надпись или каким-то хитрым образом отредактировать изображение, то я рекомендую воспользоваться специализированным редактором.

Если у вас остались вопросы по теме — буду рад получить их через форму комментирования на этой странице! 🙂

Автор

Александр Кадыров

Занимаюсь разработкой сайтов на WordPress около 10 лет, с тех же пор стал вести блог о WordPress. В итоге это всё вылилось в этот курс, где вы сейчас находитесь. В свободное время программирую на Ruby, PHP и Golang, увлекаюсь администрированием серверов и автоматизацией своей деятельности.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *