Полное руководство по работе с изображениями на WordPress

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

Сегодня вы узнаете не только о том, как настроить размер картинок на WordPress и отредактировать их, уменьшить размер файла для ускорения загрузки страниц веб-сайта, но и как создаются галереи и активируется для них карусель картинок.

Смотрите также:

  • Картинки в WordPress: руководство по параметру
  • Картинки в WordPress: отметки, редактирование, прикрепление изображений
  • Редактируем картинки в WordPress
  • Понимание принципа работы картинок на WordPress(для адаптивного дизайна)
  • Загрузка картинок с заданным разрешением в WordPress

Управление размером картинок на WordPress

При загрузке картинок на WordPress автоматом создаются их альтернативные размеры: миниатюра, средний размер и большой. Их точная ширина и высота задаются в Параметрах → Медиафайлы, как показано ниже:

Полное руководство по работе с картинками на WordPress

Если в данных настройках не указать формат миниатюры, то он будет сгенерирован автоматом.

Параметра размера миниатюр изменяются в файле functions.php используемой вами темы. Таким образом, изменения размера миниатюр в Параметрах → Медиафайлы не будет иметь никакого влияния на то, как будет выводиться миниатюра в записи. Особенно эта опция может пригодиться разработчикам тем.

add_theme_support( 'post-thumbnails');set_post_thumbnail_size( 150, 150);

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

<?php set_post_thumbnail_size( $width, $height, $crop);?> 

Содержимое $crop уведомляет WordPress о том, необходимо обрезать изображение или нет. По умолчанию эта функцию в параметрах отключена, но если настроить значение ‘false’ на ‘true’, то она активируется, и WordPress обрежет картинку.

Различные размеры миниатюр для различных шаблонов

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

add_image_size( 'tag-thumb', 200,200);add_image_size( 'homepage-thumb', 220, 180);

Чтобы данные изменения отобразились на веб-сайте, надо добавить небольшой код в файлы используемого шаблона. В примере выше указано два размера миниатюр. Один для шаблона меток Tags, второй для стартовой страницы. Миниатюра tag отобразится, если добавить в шаблон tags.php следующий программный код:

<?phpif( has_post_thumbnail()) {the_post_thumbnail( 'category-thumb'); }?>

Редактирование картинок в WordPress

WordPress может похвастаться наличием встроенного редактора картинок, в котором можно обрезать, настроить размер картинки или перевернуть его. Есть два метода воспользоваться данным редактором. Первый из них — перейти на Редактирование картинки(Edit Image) по ссылке, которая появится справа сразу после загрузки картинок.

Полное руководство по работе с картинками на WordPress

Второй — зайти в Медиафайлы → Библиотека в админке, где находится список недавно загруженных картинок, навести курсор мышки на одно из них и выбрать Редактирование(Edit).

Полное руководство по работе с картинками на WordPress

При нажатии на кнопку Редактирование появятся пару настроек, которые могут обрезать изображение, перевернуть его, масштабировать, а также отредактировать alt-текст, заголовок или описание:

Полное руководство по работе с картинками на WordPress

Как избежать появления дублей картинок на WordPress

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

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

Стандартные размеры картинок создаются двумя методами. Проще всего зайти в раздел Параметра → Медиафайлы и задать нули(0) в полях ввода, соответствующих каждому из данных картинок.

Полное руководство по работе с картинками на WordPress

Более сложный вариант – добавить программный код в файл functions.php используемой темы:

function wplift_remove_image_sizes( $sizes) { unset( $sizes['thumbnail']); unset( $sizes['medium']); unset( $sizes['large']); return $sizes;}add_filter('intermediate_image_sizes_advanced', 'wplift_remove_image_sizes');

Автоматическое сжатие картинок

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

Как известно, поисковики больше любят веб-сайты, загрузка страниц которых не занимает более нескольких секунд. С автоматическим сжатием картинок отлично справится бесплатный плагин WP Smush.


Полное руководство по работе с картинками на WordPress

Вы также можете воспользоваться опцией Bulk Smush.it для сжатия всех более давних картинок на веб-сайте, а также их оптимизации.

Полное руководство по работе с картинками на WordPress

Создание галерей картинок

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

Полное руководство по работе с картинками на WordPress

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

После этого нажать кнопку Создать галерею, и она будет добавлена к записи.

Полное руководство по работе с картинками на WordPress

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

Полное руководство по работе с картинками на WordPress

Карусель для организации галереи картинок

Знакомы вы с плагином Jetpack или нет, но в нем есть одна замечательная функцию под названием Carousel(карусель). При нажатии на галерею появятся полноэкранные картинки, которые можно просматривать при помощи кнопок «Предыдущее» и «Следующее».


Полное руководство по работе с картинками на WordPress

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

Источник: wplift.com

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

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