• Главная
  • Карта сайта
Не найдено

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

Опубликовано: 01.09.2018

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

Сегодня вы узнаете не только о том, как изменить размер изображений на 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 следующий код:

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

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

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

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

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

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

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

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

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

Более сложный вариант – добавить код в файл 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 .

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

Создание галерей изображений

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

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

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

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

Карусель для организации галереи изображений

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

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

Источник: wplift.com
Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss