Отключаем создание копий картинок в WordPress
По умолчанию, WordPress генерирует четыре размера для каждой оригинальной картинки, которую мы загружаем. Темы и плагины могут создавать дополнительные размеры изображений. Таким образом, ваш сайт может создавать от 5 до 10 копий (дублей) каждого загружаемого изображения. Это может увеличить необходимое пространство на диске и размер бэкап файлов. Хорошо, когда все эти копии нужны и используются в теме, однако по факту этого не происходит почти никогда! Поэтому хорошо бы отменить регистрацию дополнительных размеров миниатюр. Ниже поговорим, как это сделать.
- Когда нужно убирать генерацию копий изображений?
- Как узнать какие размеры используются на сайте?
- Узнаем названия каждого размера
- Как отключить создание копий?
- #1 Отключение в коде
- #2 Удаление зарегистрированных размеров через фильтр
- #3 Отключение создания доп. размеров через фильтр
- #4 Изменение или отключение *-scaled размера
- Заключение
- Плагины по теме
Когда нужно убирать генерацию копий изображений?
По хорошему, почти всегда. Во всех случаях, когда тема не использует все создаваемые размеры. Для начала стоит проверить, не создаются ли копии картинок, которые не используются в теме. Также, многочисленные дубли загружаемых изображений, которые помещаются в папку uploads , могут значительно увеличить размер бэкап файлов — это как минимум неудобно. Представьте сами, вы загрузили одну картинку, а WordPress создал еще 7 миниатюр к ней — 7 копий этой картинки, при этом некоторые из дублей могут быть почти такого же размера как и оригинал. Из этих 7 копий всего одна пойдет на главную страницу, да и то провисит там пока её не сменит очередная и использованный файл будет лежать на хосте пожизненно, а использовался он день или неделю. Если у вас на сайте тысячи картинок, то это может вызвать проблемы и сложности.
Как узнать какие размеры используются на сайте?
По умолчанию WordPress создает следующие копии:
- thumbnail — миниатюра (меняется из админки).
- medium — средний размер (меняется из админки).
- medium_large — умеренно большой (с WP 4.4.).
- large — большой (меняется из админки).
- 1536×1536 — 2x medium_large (c WP 5.3).
- 2048×2048 — 2x large (c WP 5.3).
- -scaled — см. эту заметку.
Кроме этих размеров, дополнительные размеры может создавать сама тема. Например, доп. размер для установки миниатюры поста, для постов в боковой панели или для других целей.
Прежде всего, вам нужно определить сколько копий создается при загрузке изображения. Для этого зайдите в админ панель и загрузите изображение большого размера, пусть это будет картинка 1900х1000 пикселей (большой размер нужен для того, чтобы были созданы все возможные копии). Затем зайдите в папку загрузок изображений, обычно это: /wp-content/uploads/ . Там файлы сортируются по годам и месяцам, зайдите в последний год и месяц, там вы должны увидеть файл, который только что загрузили и все его копии:
Мой тестовый блог, где нет ни одного дополнительно зарегистрированного темой размера, создал 7 копий
Узнаем названия каждого размера
Пример с загрузкой изображения, показывает сколько их создается, но не показывает как называется каждый размер. Название (ID) размера нужно знать, чтобы его отключить.
Чтобы узнать какие размеры зарегистрированы на сайте, добавьте следующий код в файл темы header.php или footer.php . Так вы увидите какие на сайте существуют размеры и как они называются.
Теперь зайдите на сайт и вы увидите подобный массив:
Как отключить создание копий?
Чтобы отключить генерацию копий по умолчанию, зайдите в Настройки > Медиафайлы и поставьте ноль для «крупного» и «среднего» размеров.
Страница настроек Медиафайлы — оставляем только нужные размеры
ВАЖНО: Размер thumbnail (миниатюра) рекомендую оставить, потому что этот размер используются при создании стандартной галереи и в превью загруженных файлов в админ-панели. Если его убрать, то стандартная галерея не будет работать как положено. А окно медиатеки будет грузить оригиналы файлов, что будет сильно тормозить админку.
Заметка: для отображения картинок в загрузчике медиафайлов при прикреплении картинки к записи, используются средний размер (medium). Но если его нет, используется миниатюра (thumbnail). Поэтому средний размер можно смело отключать.
Размер medium_large , создаваемый по умолчанию с версии 4.4 отключить на странице настроек медиафайлов невозможно. Для отключения используйте хук ниже. Или зайдите на скрытую страницу настроек example.com/wp-admin/options.php и укажите 0 в настройке medium_large_size_w :
Отключение размера medium_large из админки
#1 Отключение в коде
Остальные 2 копии создаются темой. Обычно код темы отвечающий за генерацию дополнительных размеров можно найти в файле functions.php. Ищите размеры которые вы видели зайдя через FTP (672, 1038, 576) и функцию add_image_size(). Выглядеть она будет примерно так:
Удалите или закомментируйте эту строку, так вы отключите генерацию размера 1038х576.
Также за создание копий может отвечать функция set_post_thumbnail_size(), выглядит она так:
Её нужно удалить или закомментировать.
#2 Удаление зарегистрированных размеров через фильтр
В версии WordPress 3.9. появилась функция remove_image_size() — позволяет удалить указанный размер миниатюры (физические файлы не удаляются). Теперь, вместо удаления строк, можно отключить ненужные размеры добавив фильтр в файл functions.php :
Тут ‘image-name’ название размера ( ‘homepage-thumb’ из примера выше). Удаление вешается на событие after_setup_theme, обычно этого события достаточно. 999 означает что приоритет выполнения функции удаления, поздний, т.е. функция будет вызвана после всех остальных во время этого события.
#3 Отключение создания доп. размеров через фильтр
Варианты ниже могут стать спасением, когда никакой другой не подходит. Оба они практически одинаковые. Они не отключают регистрацию размеров, а просто удаляют их при получении в нужных местах кода.
Вариант 1
Этот вариант более полный, потому что он выключает размеры в нескольких местах, а не только во время загрузки изображения в папку uploads, как это делает второй вариант.
Также плагины работы с изображениями используют функцию get_intermediate_image_sizes() для получения промежуточных размеров. С этим вариантом, такие плагины не увидят ненужных размеров вовсе.
Вариант 2
Этот вариант отключает регистрацию указанных размеров только когда картинка загружается на сайт в папку uploads.
В этом коде названия: ‘blog-large’, ‘blog-medium’ и т.д. — это названия зарегистрированный размеров миниатюр, которые не нужно создавать при загрузке оригинального изображения.
#4 Изменение или отключение *-scaled размера
Подробнее про *-scaled размер читайте в этом заметке.
Заключение
Прежде чем использовать материал из этой статьи, нужно убедиться, что удаляемые размеры не используются в текущей теме, в качестве миниатюр для записей, в боковой панели или в других типах постов. Удаляйте создаваемые копии только, когда уверены, что они не нужны для правильной работы темы.
Плагины по теме
Kama Thumbnail
Мой плагин для создания миниатюр. C его помощью можно динамически создавать те размеры которые нужны в теме. А загружать только оригиналы. Я так и делаю на всех своих проектах.
Force Regenerate Thumbnails
При отключении размеров миниатюр, физические файлы миниатюр, которые лежат в папках, НЕ удаляются. Отключается только лишь зарегистрированный размер и при очередной загрузке файла миниатюра с отключенным размером создаваться уже не будет. Чтобы почистить «старые» файлы используйте плагин «Force Regenerate Thumbnails». Плагин полностью пересоздаст физические файлы в соответствии с текущими установками для миниатюр.
Как улучшить галерею продуктов Woocommerce (пошаговое руководство)
Когда дело доходит до электронной коммерции, картинки заменяют тысячи слов. Для большинства онлайн-потребителей решения о покупке основываются на фотографии продукта, а не на убедительной коммерческом предложении, на совершенствование которого вы потратили кучу времени. Следовательно, чтобы обеспечить максимальную конверсию нужно быть уверенным, что в вашем магазине WooCommerce фотографии и видео представлены на высшем уровне. Проблема? Да – стандартная галерея продуктов WooCommerce не демонстрирует ваши продукты наилучшим образом.
В этом пошаговом руководстве вы узнаете, как улучшить галерею продуктов WooCommerce, независимо от того, какую тему WooCommerce вы установили. Это простой трехэтапный процесс настройки с помощью плагина WooThumbs for WooCommerce .
Зачем улучшать стандартную галерею продуктов WooCommerce?
Хотя стандартная галерея продуктов WooCommerce достаточно функциональна, обновив фотографии продукта с помощью плагина, вы можете значительно увеличить свои продажи.
Готовая галерея WooCommerce довольно проста. Здесь можно отображать несколько изображений под рекомендуемой фотографией продукта, и это почти все.
В галереях продуктов электронной коммерции с высокой конверсией есть несколько изображений для каждого варианта продукта, встроенные видеоролики о продукте и плавное масштабирование, для подробного знакомства покупателя с вашими продуктами. И это без упоминания таких эффектов, как автоматические переходы или слайдеры фотографий.
К сожалению, стандартная галерея продуктов WooCommerce не предлагает ни одну из этих функций.
Как работает WooThumbs для WooCommerce
Добавляя функционал WooThumbs в свой магазин WooCommerce, вы можете пользоваться широким спектром преимуществ, которые в конечном итоге увеличат продажи онлайн.
С плагином вы сможете
- Выбирать между горизонтальным ползунком, вертикальным ползунком или эффектом затухания.
- Размещать эскизы выше, сбоку или под основным изображением продукта.
- Регулировать расстояние между эскизами, цвет значков, скорость перехода и многое другое.
- Добавлять дополнительные варианты изображения.
- Встраивать в свою галерею видеоконтент с YouTube, Vimeo и других платформ.
- Плавно масштабировать изображения с настраиваемыми режимами отображения.
- Внедрять полноэкранную, полностью адаптивную галерею изображений, включая мобильное масштабирование.
- Выбирать, сколько эскизов отображать одновременно.
Как создать улучшенную галерею продуктов с WooThumbs
Если вы готовы создать свою потрясающую галерею продуктов WooCommerce, то первым делом необходимо установить и активировать плагин WooThumbs for WooCommerce .
Настройте галерею изображений вашего продукта
Настраивая галерею продуктов, вы можете лучше согласовать ее со своей общей темой WooCommerce. В том числе изменение размеров изображений в объявлениях и корректировку макета.
1. После установки перейдите в WooCommerce > WooThumbs.
2. Оказавшись на панели инструментов WooThumbs, перейдите в Настройки дисплея.
3. В этом меню вы можете изменить следующее:
-
- Ширину галереи
По умолчанию это значение составляет 48%, поскольку это наиболее распространенная ширина раздела изображения в темах WooCommerce. Однако можно увеличить это значение до 100%. - Положение
Перемещать галерею изображений влево, вправо или вообще не перемещать. - Цвета значков
Цвет значков, расположенных на изображении, например, значки предыдущий / следующий. - Показывать значки при наведении?
Если этот параметр включен, значки будут видны только при наведении курсора на изображение. - Показать всплывающие подсказки к значкам?
Когда значки наведены, отображается всплывающая подсказка.
4. Затем перейдите к разделу «Размеры изображения», где можно изменить размеры изображений, коэффициенты кадрирования, размеры миниатюр и добавить изображения большого размера.
5. Есть еще 5 вариантов настройки, доступных пользователям с той же панели инструментов:
-
- Настройки карусели.
- Настройки навигации добавление стрелок в галерею продуктов W ooCommerce y).
- Настройки масштабирования.
- Полноэкранные настройки создание лайтбокса галереи товаров).
- Адаптивные настройки.
Добавьте дополнительные варианты изображения
Поскольку стандартная галерея продуктов предлагает всего лишь одну фотографию, владельцам магазинов WooCommerce сложно подтолкнуть клиентов к покупке. К счастью, плагин WooThumbs может добавлять дополнительные изображения в вариации вашего продукта.
- Перейдите к переменному продукту.
- Щелкните вкладку Варианты.
- Раскройте одну из вариаций.
- Щелкните ссылку Добавить дополнительные изображения. Появится медиа-галерея.
- Выберите одно или несколько дополнительных изображений и нажмите «Добавить вариант» .
- Теперь вы увидите дополнительные изображения, перечисленные на вкладке вашего варианта. Важно отметить, что вы все равно должны добавить в свой вариант «избранное» изображение по умолчанию.
- После того как вы завершите этот процесс для всех вариантов, либо обновите свой продукт, либо нажмите кнопку «Сохранить изменения».
Как добавить видео в галерею продуктов WooCommerce
Доказано, что видео является одним из самых конвертируемых медиаформатов: 73% онлайн-покупателей с большей вероятностью купят продукт после просмотра видео.
Существует три варианта поиска видео в WooThumbs: мультимедиа на основе oEmbed, встроенный HTML и собственное видео. Для видео, размещенных на сайтах oEmbed, таких как YouTube и Vimeo, просто выполните следующие действия (в качестве примера используется YouTube).
- Скопируйте URL-адрес вашего видео на YouTube.
- Откройте свою медиа-галерею.
- Выберите изображение, с которым хотите связать видео.
- Затем вы увидите два поля под данными WooThumbs Media: это URL-адрес и Соотношение сторон .
- В поле URL вставьте URL с YouTube. Это основной URL-адрес видео – тот же, что вы вставляете в редакторе постов / страниц, чтобы встроить видео.
- Если у вас есть встроенная HTML-ссылка на ваше видео, повторите процесс, но вместо этого вставьте эту прямую ссылку в поле Media URL.
После того, как вы завершите процесс, мультимедиа автоматически обновится. Теперь можно просмотреть видео на странице продукта.
Теперь вы знаете, как полностью настроить галерею продуктов WooCommerce, добавить дополнительные изображения к вариациям продукта и встроить видеоролики о продуктах.
Все, что вам нужно, — это небольшая помощь от плагина WooThumbs for WooCommerce, который увеличит производительность вашего онлайн магазина.
Как не скачивать картинки woocommerce
Знаю, что про это много раз спрашивали на форуме, но толкового ответа так и не нашел.
Как привести миниатюру товара к одному формату? Необходима чтобы товар на миниатюре полностью помещался, независимо от соотношений сторон картинки. Только не говорите, пожалуйста «фотошоп в помощь». Как Сейчас все выглядит
Настройки отображения
Как массово прикрепить картинки к товару?
Создаем новый docs.google документ и озаглавливаем его по мануалу.
Нам нужен столбец Артикула (SKU), Название товара, Транслит Название товара, Ссылка на карточку товара, Ссылка на фото, Специальные ячейки с месяцем и годом, Столбец с количеством картинок к товару.
Транслитированные названия
В ячейку C3 вставляем следующую формулу:
- Формула переводит текст из колонки «Название товара (Name)» на английский язык.
- Превращает все буквы в строчные.
- Вместо пробелов между словами подставляет дефис.
- Удаляет все математические и прочие знаки.
- Цепляет часть Артикула (SKU) через дефис.
Ссылка на карточку товара
В ячейку D3 вставляем следующую формулу:
Формула сформирует URL, взяв стандартный путь от домена до ссылки продукции и прицепив на конце транслитированное название товара.
- Вместо «Ваш домен» — вписываем URL своего сайта.
- Вместо «Ваш путь товара» — параметр зависит от настроек WP (Настройки -> Постоянные ссылки).
Ссылка на фото
В ячейку E3 вставляем следующую формулу:
Ссылаясь на ячейки с годом и месяцем, и на ячейку с маской картинки — формируется список из URL, относительно заявленного количества картинок.
Список используется потом при массовом импорте информации к карточкам товаров.
Маска URL картинки
В ячейку F3 вставляем следующую формулу:
Формула формирует маску из URL вашего домена + папки с картинками на сервере + транслитированного названия карточки товара.
Логика структуры обработки картинок
Чтобы досконально разобраться в оптимизации работы с картинками, нужно понять простую логику последовательности действий.
- Доскональное заполнение данных в файл склада.
- Покарточная обработка картинок (редактирование фото к товару происходит при обработке каждой карточки товара отдельно).
- Фиксация количества картинок к товару в специальном поле.
- Внимание с работой даты, месяца и года.
- Присваивание картинкам транслитированных (или переведенных на английский язык) названий.
- Импорт картинок, с покарточным заполнением мета тегов.
Заполняем данные
Работа импорта товаров в интернет-магазин на WooCommerce начинается с заполнения информацией о товарах в файл склада. На такой базе можно построить целую систему с шаблоном импорта всех видов товаров не только в магазин, но формировать списки для размещения товаров на маркетплейсах.
Минимальная информация: Артикул (SKU), Название товара, Цена, Характеристики, Габариты упаковки, вес и т.д. Эти данные помещаются в отдельные столбцы и используются в разных шаблонах и списках.
- Ширину галереи