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

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

0
Want create site? Find Free WordPress Themes and plugins.

В этом посте я объясню, как и почему WordPress создает изображения разных размеров. Затем я научу вас, как добавлять собственные размеры изображений, изменяя файл functions.php, восстанавливая эскизы и добавляя новые размеры изображений в блок изображений Гутенберга и / или цикл WordPress.

Объясненные размеры изображений WordPress

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

  • Thumbnail
  • Средняя
  • Средний большой
  • большой

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

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

Вы можете увидеть все это (за исключением Medium_Large) в выпадающем списке Размер изображения в блоке изображенийГутенберга при вставке изображения в страницу или публикацию.

Почему WordPress создает так много изображений?

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

Напротив, если они слишком большие, это супер расточительно. Вы бы не надели на ребенка пару брюк, сделанных для мужчины, верно? Это такая дополнительная ткань, которая даже не нужна. Этот ребенок заблудится в штанине;)

Изображения одинаковы. Если ваше изображение слишком велико для контейнера, вы теряете трафик и время, загружая его для показа на своей странице. И для чего? Ни за что.

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

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

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

Если размеры изображения WordPress по умолчанию не соответствуют размерам вашей темы, вы можете настроить значения по умолчанию в разделе « Медиа»> «Настройки » или добавить пользовательские размеры, чтобы у вас было больше вариантов выбора.

Размеры изображений WordPress по умолчанию, за исключением medium_large, который по умолчанию скрыт

Размеры изображения по умолчанию следующие:

  • Квадрат 150px для миниатюр
  • Ширина 300 пикселей для средних изображений
  • Максимальная ширина 768 пикселей для изображений средних размеров
  • Максимальная ширина 1024px для больших изображений.

Medium_large был добавлен, чтобы воспользоваться поддержкой адаптивного изображения, поэтому он не включен в страницу настроек. Говоря об отзывчивых изображениях …

Адаптивные изображения

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

WordPress добавил отзывчивые изображения в ядро ​​в версии 4.4 . Вместо того, чтобы заполнять srcатрибуты изображения URL-адресом только для одного изображения, WordPress также добавил srcset(набор источников), который представляет собой список URL-адресов изображений различных размеров.

Угадайте, какие изображения он использует для создания этого списка? Да, WordPress использует одни и те же изображения в разных размерах, которые он создает при загрузке изображения.

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

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

WordPress Миниатюры и Размер рекомендуемого изображения

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

Размер  изображения WordPress  Thumbnails был представлен в версии 2.9, но был быстро изменен на Featured Images в версии 3.0, но, увы, название застряло. Таким образом, вы часто будете слышать избранные изображения, упоминаемые как миниатюры в руководствах и даже в названиях функций.

Если у вас нет мета-блока избранного изображения, вставьте add_theme_support (‘post-thumbnails’); в ваш файл functions.php

Вот некоторые примеры:

  • Если в вашей теме нет изображений, и вы хотите включить эту функцию, вы добавите ее add_theme_support( 'post-thumbnails' );в файл функций.
  • Чтобы отобразить размер рекомендуемого изображения WordPress в теме, вы будете использовать the_post_thumbnail()функцию.

Миниатюры и избранные изображения имеют размер по умолчанию 150 на 150 пикселей. Если вы используете the_post_thumbnail()функцию без аргумента для указания размера, она будет использовать квадрат по умолчанию размером 150px.

Чтобы сделать это менее запутанным для себя, чтобы вы могли использовать правильный размер, я предлагаю создать нестандартный размер изображения и присвоить ему имя – большой или что-то подобное. Затем, когда вы захотите использовать это изображение в цикле, вы будете использовать the_post_thumbnail('featured-large').

Прежде чем вы начнете создавать собственные размеры изображений в WordPress

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

Если ваш план позволяет оптимизировать 100 изображений, но при каждой загрузке создается 9 дополнительных размеров, которые также необходимо оптимизировать, вы достигнете своего предела после загрузки 10 изображений. Помните об этом при добавлении нестандартных размеров и выборе планов оптимизации изображений.

Smush Pro не имеет ограничений по оптимизации изображений и поставляется с CDN, поэтому вы можете сохранить свободное место на сервере. Вы сможете добавить больше пользовательских размеров изображения, чем обычно. Подумайте об этом, как о том, чтобы надевать на этих малышей плавные брюки MC Hammer вместо маленьких джинсов скинни, потому что ткань дешевая 🙂

Как добавить пользовательские размеры изображений в WordPress

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

add_image_size( 'the-name-for-custom-image-size', 600, 400, true );

Эта функция принимает 4 параметра в следующем порядке:

  1. Имя, которое вы даете свой размер изображения
  2. Ширина изображения в пикселях
  3. Высота изображения в пикселях
  4. Если изображение обрезается до ширины и высоты, указанных вами выше

Урожайность

Параметр обрезки является логическим, поэтому вы будете использовать true или false . Если вы оставите его целиком, то по умолчанию будет установлено значение false .

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

Например, если пользовательский размер изображения равен квадрату 600 на 600 пикселей, а для параметра обрезки установлено значение true, то при загрузке прямоугольного изображения размером 600 на 800 пикселей 200 пикселей будут обрезаны, чтобы сделать изображение квадратным.

add_image_size( 'custom-image-square', 600, 600, true );

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

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

Регенерирующие миниатюры

Один из самых важных шагов, когда либо:

  1. изменение размеров изображения по умолчанию в WordPress
  2. добавление нестандартных размеров изображения или
  3. переключение на новую тему с разными размерами

восстанавливает эскизы.

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

Когда вы вносите изменения в способ, которым WordPress создает дополнительные изображения, это будет влиять только на изображения, которые вы загружаете, в дальнейшем. Он не обновляет изображения, которые уже есть в вашей медиатеке.

Чтобы изменить уже загруженные изображения, вы должны будете использовать популярный плагин Regenerate Thumbnails .

После установки вы найдете его в разделе « Инструменты ».

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

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

Как добавить пользовательские размеры изображения в раскрывающийся список в блоке изображений Гутенберга

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

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

Мы собираемся зацепить image_size_names_chooseфильтр.

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

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

WordPress Добавить изображение Размер Полный код Фрагмент

Далее мы объединим все, что мы узнали, в один блок кода с реальным примером.

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

Вот размеры изображений, которые вы хотите добавить:

  • Изображение размером 1600 на 400 пикселей
  • Размер 800px, который охватывает ширину раздела контента вашего блога

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

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

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

После того, как я добавлю этот код в свой functions.phpфайл, следующим шагом будет восстановление миниатюр.

Чтобы использовать мое пользовательское изображение для своих публикаций в цикле, я добавлю следующее в single.phpилиindex.php

Видите, как я добавила 'featured-large'в the_post_thumbnail()функцию? Это будет отображать мое изображение под заголовками моих сообщений в блоге, над моим содержанием.

Пользовательские размеры изображений Лучшие практики

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

  1. Всегда загружайте самый большой файл, который вы можете. Если размер вашего изображения слишком мал, WordPress не сможет создать все размеры, необходимые для правильной работы с изображениями на различных устройствах.
  2. Если вам нужно изменить размер по умолчанию medium_large, используйте  update_option()функцию. Вы можете использовать эту же функцию, чтобы обновить любой другой размер изображения WordPress по умолчанию.
  3. Если вы находитесь вне цикла WordPress, вы можете использовать эту функцию,  get_the_post_thumbnail()чтобы использовать одно из ваших пользовательских изображений.
  4. Вот еще на мягком кадрирование и жестком кадрирование при создании пользовательских размеров изображений в случае , если вы столкнетесь с проблемами.

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

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

Если вы действительно хотите поднять оптимизацию изображения на новый уровень, посмотрите Smush. Мы добавили удивительный CDN в Smush Pro, который имеет автоматическое изменение размера изображения, что поможет вам избежать изменения файла функций для добавления пользовательских размеров изображения.

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

Did you find apk for android? You can find new Free Android Games and apps.
Вы можете написать отзыв

Оставить отзыв

VebPro - Интернет-магазин цифровых товаров
Вход / Регистрация временно отключены
Сравнить товары
  • Всего (0)
Сравнить
0