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

Управление размерами изображений в WordPress

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

Здесь вы также можете выбрать, обрезать ваши изображения пропорционально, или позволить WordPress обрезать для вас изображения самостоятельно.

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

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150 );
}

В коде выше мы установили размер миниатюр 150 x 150 px. Установка размера миниатюры записи — полезная маленькая функция. У нее три аргумента:

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

Здесь $crop сообщает WordPress, обрезать изображение или нет. По умолчанию значение false, установка значения true позволит WordPress обрезать изображение.

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

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

if ( function_exists( 'add_image_size' ) ) {
	add_image_size( 'tag-thumb', 200,200 );
	add_image_size( 'homepage-thumb', 220, 180 );
	 }

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

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

Обрезка изображений в WordPress

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

Есть два способа получить доступ к редактору изображений:

  • Когда вы загружаете изображения со страницы редактирования записи, после загрузки зайдите в галерею и щелкните по изображению, которое вы хотите редактировать, и затем щелкните по кнопке Изменить.
  • Либо вы можете зайти в Медиафайлы, загрузить свое изображение, если вы уже загрузили изображение, — щелкнуть ссылку Редактировать.

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

Отказ от создания копий изображений

То, что 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');

Создание галерей с помощью Медиа-загрузчика

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

Плагин NextGEN Gallery

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

Есть много хороших плагинов, которые позволяют вам отображать изображения, например:

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

Заключение

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

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

Вам понравился материал?

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

61 комментарий

сначала новые
по рейтингу сначала новые по хронологии

Добрый день, неожиданно фотографии с Wordpress стали в миниатюрах превращаться в овальные, как яйцо по длине. Что я делаю не так? Спасибо! Ольга М.

Руслан

А как мне сделать ширину 100% ? в настройках только пиксельные размеры

Руслан

Здравствуйте.
Я начинающий блогер. Начинаю самотушки изучать движок Вордпресс. В процессе создание было всё отлично, но 3 дня назад захотел в одной статье поменять фотографию, то при нажатие на фотографию она почему то не выделилась. Раньше всё было нормально.
Версия движка 4,3,11
Буду очень благодарен Вам за советы, почему это сталось и как это исправить?

Людмила

Здравствуйте! Подскажите в чём может быть проблема - в редакторе страницы при нажатии на картинку не появляется всплывающее окошко редактирования картинки.И я не могу удалить картинку.

Добрый день.
Когда открыта админ панель, всё норм., все загруженные изображения в записи на месте. Как только просто на сайт захожу, нет картинок, один текст. Что не так делаю?
Сайт noginskblog.wordpress.com

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

классный у Вас сайт - спасибо за помощь в решении проблем

Дмитрий

Подскажите пожалуйста,загружаю фото размером 56 килобайт,а оно 213 килобайт,как это исправить?.

Алексей

Уважаемый автор, подскажите, как так сделать, что фото на сайте были наоборот НЕ кликабельные и при нажатии не включалась новая страница. Вот у вас в этом познавательном материале некоторые фотки статичные, а некоторые при нажатии увеличиваюся. Я вот хочу сделать так, что бы все фото на моем сайте были статичными (то есть при нажатии левой кнопкой мыши ничего не происходило, только если выбрать и открыть в новом окне фото только на правой кнопке мыши)?

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

Кирилл

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

Виктор

Помогите сменить директорию изображений!!!
"Настройка медиафайлов" - "Загрузка файлов" - у меня нет этого подпункта, а у Вас на картинке есть!!! , при том что обновлен до последнего WP. А проблема в следующем: Создал Папку и в /Content-WP создавал и в /Upload создаю папку images (и права менял на папки и под папки) ложу туда а их не видно и через ссылки не открывается. Помогите пожалуйста...правильно настроить это все дело, и по больше написали бы о плагинах для самого WP редактора как его расширить (но не о визуальных редакторах), За ранее благодарен.

Здравствуйте, у меня при загрузке изображений создается копий 10 с разным размером. Они просто забивают мне сервер. Мне нужно сделать так, чтобы оставить только 3 размера, которые используются сайтом. Подскажите, пожалуйста. Буду очень благодарен, если кто поможет

Татьяна

Здравствуйте! задаю миниатюру, а она же и выводится первой картинкой при открытии всего поста. Как сделать, чтобы миниатюра не отображалась в самом посте, а только в анонсе на главной. Сайт только начала: http://detimamapapa.ru/

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

Андрей

Скажите, а можно вывести кликабельную ссылку категории или метки на миниатюру поста? Как например на некоторых постах сайта 4pda.ru

Не могу разобраться((( Мучаюсь уже часа 3...Как в моей теме отключить вывод картинок миниатюрами-мне нужно чтобы картинки выводились в полный размер.

Добавил в 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');

Не помогло((( В настройках тоже отключил...

Вот как выглядит файлик, который отвечает за вывод записи-content.php

<article id="post-" >

<a class="first_A" href="" title="">

<img src="ID), 'post-big-default', false, '' ); echo $src[0]; ?>" alt="">

<a href="" rel="date">

<a class="post-comments" href="">

<a class="first_A" href="" title="">

<img src="ID), 'carousel-block', false, '' ); echo $src[0]; ?>" alt="">

<a href="" title="">

<a href="" rel="date">

<a class="post-comments" href="">

<a href="" rel="bookmark" title="">

<a href="" rel="date">

<a href="">

Как делать миниатюры для постов не загружая их на вордпресс? а добавляя url как в пост с других фотохостингов. (Проблема в размере и создании кучи копий).

Андрей Смоляков

Создал в wp-content/uploads папку IMG, скинул туда картинки по FTP, а они нигде
не отображаются когда хочу вставить товар в Woocommerce.
Может плагин есть какой? чтобы в штатной медиа галерее в каталогах сайта можно было передвигаться? А не выбирать из сотни залитых картинок нужную. Сори, если задаю глупый вопрос (((

Очень даже не глупый вопрос, у меня таже проблема

Привет. Очень нужна подсказка.
Если установить свой параметр ширины для Medium size в Параметры → Медиафайлы, то этот же размер разве не должен показываться при выборе размера для картинки, которая вставляется в пост? У меня почему-то так и остались дефолтные 300х120.

Заранее спасибо.

Denis Semenov

Привет!
Подскажите, можно ли и как отресайзить уже залитые фотографии, если при заливке "large" стоял 5240, а сейчас изменил на 1600 (собственно, на это разрешение и надо отресайзить все залитые фото, чтобы они не грузили страницу своими полными версиями)? Фотографий много и хотелось бы не ручками их менять :)
Заранее спасибо за ответ!

Макс Еремин

Я бы не стал делать это средствами Wordpress. Гораздо проще и быстрее будет скачать всю папку с картинками на комп, поставить XnView и через команду Инструменты - Пакетная обработка преобразить всю папку до максимального размера 1600. Все фотки которые были больше 1600 урежутся, все которые меньше - останутся прежними.

Андрей Смоляков

Добрый день Братья! Вопрос такой: можно ли в корне сайта создать папку например IMG и туда залить по FTP например несколько папок по 100 картинок в каждой и ссылки на эти картинки вставлять куда нужно. Что бы порядок был и ситема. Ранее делал сайтики на HTML и соответственно каждую папку контролировал. Можно ли так поступать с Wordpress?

В корне сайта не желательно, а вот в wp-content/uploads вполне

Андрей Смоляков

Денис (всё правильно?), есть вопрос далее по моей теме.

Создал в wp-content/uploads папку IMG, скинул туда картинки, а они нигде не отображаются когда хочу вставить товар в Woocommerce.
Может плагин есть какой? чтобы в штатной медиа галерее в каталогах сайта можно было передвигаться?

Андрей Смоляков

Спасибо, так и сделаю - будет порядок. А то кидаю изображения через медиа загрузчик и понимаю что что-то не так)))

Здравствуйте, только начала изучать вордпрес. И сразу же после установки возникла проблема с изображениями. Изображения загружаются, и в галерее изображений они видны, но в самом посте их нет, даже значка не появляется, но при просмотре в HTML ссылка есть. Если к примеру, я копирую ссылку на изображение из своего блога, то картинка появляется.
Первая ссылка загружено через вордпрес, второй случай ссылка скопирована и вставлена в ручную.
Посоветуйте в чем может быть проблема. Все установки стандартные.
GromavaElena@mail.ru

У вас в первом случае ссылка указана на картинку в формате .bmp - браузеры не любят отображать картинки в этом формате. А во втором случае - обычный jpg. Используйте всегда картинки в формате jpg или png - и у вас никогда не будет проблем!

Спасибо огромное!!!

Вот этот совет помог решить проблему: "Установки размеров миниатюр для записи могут быть перезаписаны в файле functions.php вашей темы..."

Евгений Лопатин

проблема с миниатюрами изображений: при загрузке миниатюры wordpress (или woocommerce??) самопроизвольно обрезает картинку и в качестве миниатюры выводит ее центральную часть, что выглядит плохо(( пытался сжать картинку, тогда она влезала в размер миниатюры, но выводилась с неудовлетворительным качеством, изменение размера миниатюры в настройках медиафайлов тоже ничего не дала(( помогите найти решение

Евгений, вам нужно по адресу http://ваш_сайт/wp-admin/options-media.php поставить нули во всех полях для изображений. После этого откройте файл functions.php вашй темы и найдите там что-то подобное тому, что описывалось в разделе "Разные размеры миниатюр для разных шаблонов" этой записи.
Вам нужно поставить размер изображений, например (200, 200) или (200, 9999). В первом случае будут изображения 200х200 пикселей без обрезки по центру. Во втором случае будут создаваться изображения шириной 200 пикселей и n-пикселей пропорционально по высоте.
Обязательно проверьте наличие подобной записи (200, 200, true). Это означает, что будут создаваться миниатюры 200х200 пикселей, но путем так называемого "кропа" или образки по центру. Вам нужно убрать значение true.
По идее должно заработать. Если конечно я вас правильно понял.

Александр у меня та же проблема что Евгений Лопатин согласно вашего ответа я максимум смог поставить нули, открыд файл functions.php здесь ничего не могу найти может подскажите приблезительно где можно ставить размеры или где же искать эти строки чтобы поставить размеры, зарание спасибо )

Хотел уточнить, я использую плагин woocommerce возможно в нем нужно исправить код ?

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

Так написан движок WordPress, оригиналы всегда остаются нетронутыми.

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

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

Здравствуйте! А почему в этом коде

мы вставляем category-thumb, когда речь идет о тегах. По логике вещей, раз уж мы создали функцию 'tag-thumb', то и выводить нужно именно ее.

Или я ошибаюсь?

У себя я сделал так. В functions.php
add_theme_support('post-thumbnails');
set_post_thumbnail_size( 300, 9999 ); //Для миниатюр постов на главную
add_image_size( 'page-single', 620, 9999 ); //Для одной страницы
add_image_size( 'popular', 140, 9999 ); //Для популярных

Выводил так:
в loop постов на главной
для популярных

Здравствуйте, проблема заключается в том, что я использую woocommerce.
Не могли бы вы посоветовать что делать? Когда я создаю товар. Есть миниатюра. Добавляю и получается вот что. Как сделать полное изображение? На счет некоторых изображений ( Полных- они появились при смены темы - остались с прошлой)

Для начала почистите кэш картинок (Гугл знает как), а затем я бы на вашем месте перезалил заново все картинки в одном и том же (заранее подготовленном) разрешении.

Алексей Курбатов

Здравствуйте, помогите убрать рамки с картинок, вот сайт fullportal.ru

Заметил, что при загрузке картинки в новой версии wordpress 3.5.0 система создает страницу для этой картинки, что очень плохо, ведь её нельзя закрыть в роботсе. Что можно сделать в таком случае? Пример:

http://hi-techzoom.com/anons-igryi-the-witcher-3-wild-hunt/wiedzmin-3-wild-hunt-polowanie_4bcd/

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

Ольга Мирау

Здравствуйте! Мой блог: http://mircollag.ru Хочу узнать,почему у меня в редакции записи миниатюра картинки красивая, а после опубликования она становится меньше размеров и в белой рамке.??Где-то в настройках Fancy рамки? Прилагаю две картинки:

Если вы пользуетесь FancyBox плагином, то это он добавляет свои стили оформления. Это можно править в настройках плагина. Если же нет - то тогда через файл style.css

Ольга Мирау

Спасибо,большое! Я уже высмотрела - это в Fancy по умолчанию.

Сергей

Как я долго искал эту инфу!!! Спасиб большое!!!

Подскажите пожалуйста, а есть ли плагин позволяющий изменять размеры картинки "на лету" (как timthumb), то есть ресайзить ее по пропорциям, при этом сохранять в папку и на месте вывода отдавать уже файл готовый, тем самым не загружая сервер при выводе?

По-моему такая возможность есть у NEXTgen Gallery. А вообще, вы можете выводить изображение в любом разрешении без нагрузки на сервер с помощью стилей style.css

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

Хорошо написано, но с апдейтом о версии 3,5 все мощно поменяется http://make.wordpress.org/ui/2012/07/30/media-wireframes/

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

Разве что только с помощью плагинов, но мы никогда не испытывали трудностей со встроенным загрузчиком. Если перетягивать картинки в загрузчик путем dran'n'drop - то очень удобно получается.

Вроде как и вы используете «FancyBox for WordPress». Можете поделиться своими настройками?

Подскажите, пожалуйста, при помощи какого плагина осуществляется zoom картинок в вашем блоге? (в частности в этой статье) Я у себя использую «FancyBox for WordPress», но мне кажется, что вы используете лучшее решение, чем моё.

Заранее благодарен за ответ.

Да, мы используем FancyBox
http://wordpress.org/extend/plugins/fancybox-for-wordpress/
В настройках можно выбирать стиль визуализации при раскрытии картинок.

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

То, что доктор прописал. Еще не ознакомился полностью, но искал толковую информацию достаточно долго.