Больше результатов...

Generic selectors
Только точные совпадения
Искать в заголовках
Искать в контенте
Post Type Selectors
Filter by Categories
FAQ
Hostenko
Вдохновение
Видеоуроки
Новости
Плагины
Темы
Уроки
Хаки

Изображения в WordPress: руководство по настройке

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

inet.ws - Powerful VPS Hosting in the USA, Canada, UK and DE!

Управление размерами изображений в 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: руководство по настройке

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

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

Изображения в WordPress: руководство по настройке

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

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

Плагин NextGEN Gallery

Изображения в WordPress: руководство по настройке

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

Изображения в WordPress: руководство по настройке

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

  • Dynamic Content Gallery Plugin
  • Lightbox Gallery
  • Grand FIAGallery
  • LightBox Evolution [премиум плагин]

Заключение

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

Источник: WPLift.com
inet.ws - Powerful VPS Hosting in the USA, Canada, UK and DE!
Алексей Шевченко
редактор wpcafe
Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Комментарии к записи: 67

Майкл Шиш:

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

Чубака Иванович:

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

WordPresso:

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

KeePass:

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

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

WordPresso:

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

KeePass:

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

KeePass:

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

Howtomake:

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

Max:

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

WordPresso:

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

Moscowbomj:

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

Сергей:

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

Ольга Мирау:

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

WordPresso:

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

Ольга Мирау:

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

Антон:

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

WordPresso:

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

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

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

Фарид:

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

WordPresso:

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

Александр:

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

мы вставляем 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 постов на главной
для популярных

Александр:

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

WPcafe.org:

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

Иван:

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

WPcafe.org:

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

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

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

Ванильная Заграница:

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

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

Елена:

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

WPcafe.org:

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

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

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

WPcafe.org:

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

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

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

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

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

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

Denis Semenov:

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

Макс Еремин:

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

WPcafe.org:

Вы найдете ответ в этих двух уроках:

https://hostenko.com/wpcafe/tutorials/zagruzka-izobrazheniy-s-zadannyim-razresheniem-v-wordpress/

https://hostenko.com/wpcafe/tutorials/foto-galereya-na-wordpress-s-izobrazheniyami-zadannogo-razmera/

Nataly:

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

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

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

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

Борис:

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

Илья:

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

Борис:

Не могу разобраться((( Мучаюсь уже часа 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="»>

Андрей:

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

Татьяна:

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

WPcafe.org:

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

Игорь:

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

Виктор:

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

Кирилл:

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

Алексей:

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

WPcafe.org:

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

Дмитрий:

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

max:

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

Dokaf:

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

aznoginsk:

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

Людмила:

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

Руслан:

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

Руслан:

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

Ольга:

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

Владимир:

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

Андрей:

мне понравилось

Мария:

Здавствуйте! Обновила до версии WordPress 5.1.4. При публикации сейчас изображение не активное, т. е. не увеличивается при нажатии на него. Раньше при оформлении записи было все доступно и понятно. При публикации заметки с изображением можно было нажать на картинку и она увеличивалась в размере. Сейчас в этой версии не знаю как это сделать. Расстроилась что-то. Очень много времени занимает публикация материала.

Дима:

На днях узнал о сервисе BAILRY — бесплатная регулярная (периодическая) проверка сайта на доступность. Возможно, кому-нибудь он пригодится! Есть там и платная подписка — для постоянного контроля доступности сайта. Удачи всем!

Антон:

Здравствуйте! Поменял тему на сайте WordPress. После этого на главной странице со старыми изображениями и с новыми, которые загружаю всё нормально. А вот на других страницах старые картинки в статье стали просто огромными и размытыми.

Например, картинка была 300х100 пикселей, то сейчас она выглядит как 870х280 пикселей. Если пробую вставить старые, раннее загруженные изображения из библиотеки, то они всё равно остаются огромными. Если пробую загрузить новые изображения, то они не отображаются в статье. Хотя в библиотеку они загрузились.

У меня в настройках WordPress по умолчанию стоит “помещать загруженные мной файлы в папки по месяцу и году”. Пробовал отключить не помогает. Но заметил, что если на хостинге скопировать старые картинки из папок 2018-2021 г. или загрузить новые в папку 2017 года тогда всё нормально отображается.

Ещё на сайте установлен плагин WebP Converter for Media, может он как-то влияет. Хотя пробовал его удалять, не помогает.

Подскажите пожалуйста в чём может быть проблема? Вот страница сайта с данной проблемой: https://wmzi.ru/zarabotok-na-kapche/

Это у меня сайт для экспериментов, на нём мало картинок, а вот на рабочем сайте их много. И теперь боюсь менять на нём тему из-за подобной ошибки.

WPcafe:

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

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