Intereting Posts
Добавление нескольких таксономических фильтров в функции functions.php Как wordpress отслеживает идентификатор сообщения, когда почтовый идентификатор не используется в постоянных ссылках? Получение изображений в RSS Reader Удаление поля «Веб-сайт» из комментариев и ответов? Добавить классы Bootstrap для последних сообщений Widget Я думаю, что emoji убивают мой сайт WordPress … Как я могу отлаживать? Необычная проблема с пользовательским шаблоном RSS сортируемые столбцы в настраиваемом типе сообщений не будут работать Вопрос памяти на WordPress Multisite Пользовательские размеры изображений добавляют к метаданным Вызов неопределенной функции get_user_meta () – попытка получить доступ к данным в MySQL из настраиваемых полей Как импортировать пользователей в WordPress? WPML Получить url без вывода Проверьте, что находится в URI (пост, архив и т. Д.) Добавить виджет «Прямо сейчас» в пользовательскую панель

Какая хорошая альтернатива использованию $ content_width для оптимизации изображений?

$content_width GLOBAL в WordPress вызывает множество тем и даже некоторые плагины, ограничивая размер изображений и вставляя сообщения, это требование для тем, представленных на wordpress.org.

Он устанавливается с помощью:

 $content_width = 584; // Twenty Twelve example 

Если вы вставляете большое изображение (по умолчанию 1024×1024) в сообщение, это приводит к:

 src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328" 

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

 src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328" 

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

Является ли использование add_image_size и удаление возможности вставки полноразмерных изображений не лучшим вариантом?

пс. Я писал об этом здесь с более точными данными

Solutions Collecting From Web of "Какая хорошая альтернатива использованию $ content_width для оптимизации изображений?"

Имейте в виду, что $content_width global используется не только для изображений, но и для внедренных объектов, таких как видео. Таким образом, любое решение будет не просто случаем отказа от использования / поддержки самой $content_width .

Обычно тема будет ограничивать изображения области содержимого несколькими способами:

  1. Большой размер изображения: определение $content_width что-то подходящее для дизайна темы
  2. Оригинал / полный размер изображения: определение правила CSS для #content img { max-width: XXX; height: auto; } #content img { max-width: XXX; height: auto; } #content img { max-width: XXX; height: auto; } для обеспечения того, чтобы вставляемые полноразмерные изображения не нарушали макет
  3. Миниатюра Размер изображения: Вызов set_post_thumbnail_size() чтобы определить размер эскиза по умолчанию для set_post_thumbnail_size() изображения / сообщения Thumbnail. (Примечание. Я лично не рекомендую использовать этот метод. Определите настраиваемые размеры изображений, специфичные для данного местоположения для выделенного изображения, а затем вызовите этот настраиваемый размер в определенном месте шаблона с помощью the_post_thumbnail( $size ) .)

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

Тематические значения для большого изображения

Один из вариантов – переопределить параметры для больших размеров изображения . (Соблюдайте осторожность. Это хорошо для вашего собственного сайта, но общедоступная тема, которая беспорядочна с настройками конфигурации пользователя, – это … в лучшем случае.

Большие настройки размера изображения сохраняются как:

 $large_image_width = get_option( 'large_size_w' ); $large_image_height = get_option( 'large_size_h' ); 

Таким образом, вы можете установить эти значения в соответствии со своим значением $content_width :

 global $content_width; update_option( 'large_size_w', $content_width ); update_option( 'large_size_h', $content_width ); 

(Конечно, вы бы захотели поместить некоторые отказоустойчивые / проверки ошибок вокруг этого, в зависимости от ситуации.)

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

Если вы просто хотите запретить пользователям вставлять полноразмерные изображения (опять же: будьте осторожны, это может быть область плагинов), вы можете фильтровать 'image_size_names_choose' :

 function wpse86950_filter_image_size_names_choose( $possible_sizes ) { unset( $possible_sizes['full'] ); return $possible_sizes; } add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' ); 

Опять же: вы можете захотеть добавить некоторые нормальные отказы здесь, так как этот фильтр используется в нескольких местах.

Определите размер пользовательского изображения для изображений с полной шириной

Связанный с предыдущим вариантом, вы можете определить размер изображения 'full-post-width' :

 global $content_width; add_image_size( 'full-post-width', $content_width, $content_width, false ); 

Затем добавьте его в список доступных параметров:

 function wpse86950_filter_image_size_names_choose( $possible_sizes ) { // Unset full image size unset( $possible_sizes['full'] ); // Add full-post-width image size $possible_sizes['full-post-width'] = 'Full Post Width'; // Return array return $possible_sizes; } add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' ); 

Да, я так думаю. Чтобы обойти проблему $content_width для тем, представленных в репо, я использую фильтры параметров, чтобы заставить размеры, которые я выбрал для дизайна.

 add_filter( 'option_large_size_w', function( $opt ) { return 1024; } ); add_filter( 'option_large_size_h', function( $opt ) { return 0; } ); add_filter( 'option_embed_size_w', function( $opt ) { return 1024; } ); add_filter( 'option_embed_size_h', function( $opt ) { return 0; } ); // ...etc...