Intereting Posts
Запросить базу данных после включения get_header () permalinks на теге title Пользовательские поля запросов – изменение значения метаданных Как вернуть 404 при вызове edit-comments.php? Если поле ввода имеет значение Требуется другое поле – PHP Удалить категорию из запроса (показать все сообщения в archive.php) pre_get_posts () Сделать сложную страницу редактируемой Игнорирование категории в WP_Query по-прежнему показывает ссылки в next_post_link ()? Как запросить одно значение данных из таблицы wp_metadata? Включите стороннюю библиотеку Javascript, которая не включена в WordPress Переадресация входа на определенную страницу профиля bp Распаковка двух столбцов для панели инструментов WordPress Изображения, не отображаемые после перемещения сайта Добавление последней страницы в начало и первую страницу в конец следующей и предыдущей страниц. Функция ссылок Почему этот фильтр не работает при передаче параметров?

Рекомендуемое изображение в 4.4 должно быть больше на мобильном устройстве

Я работаю над темой, которая отображает 3 столбца с изображениями, поэтому размер миниатюр на больших дисплеях будет 360x240px.

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

Теперь, чтобы поддерживать хороший показатель PageSpeed, я не хочу загружать более крупный размер изображения на настольные компьютеры и масштабировать его с помощью CSS, но на мобильных устройствах мне нужно, чтобы Featured Image было больше, например 640x426px.

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

Я зарегистрировал 2 новых размера изображения, но кажется, что the_post_thumbnail() всегда выбирает неправильную.

 add_image_size( 'loop', 360, 240, true ); add_image_size( 'loop-mobile', 640, 426, true ); 

Я пробовал разные методы, и ни один из них не близок к тому, что мне нужно:

  1. the_post_thumbnail();

    В этом случае изображение слишком мало на мобильных устройствах

  2. the_post_thumbnail('loop-mobile');

    В этом случае он всегда будет загружать большую версию 640x426px, которая влияет на показатель PageSpeed

  3. the_post_thumbnail(array(640,426));

    Такая же проблема с оценкой PageSpeed.

Спасибо за помощь!

3 столбца на рабочем столе

1 на мобильном телефоне

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

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

Самый простой способ – начать с того, что вы замените тег шаблона замены для the_post_thumbnail :

 function wpse_221989_the_post_thumbnail( $size, $attr ) { the_post_thumbnail( $size, $attr ); } 

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

Пока что нет ничего умного, но теперь мы можем опираться на эту функцию:

1 – нарисуйте набор размеров изображений

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

1 – В вашем случае, когда ваши версии изображений имеют одинаковое соотношение сторон, WP обрабатывает все для нас. Использование встроенного вызова изображения, такого как the_post_thumbnail приведет к srcset атрибута srcset из каждого размера изображения с тем же соотношением сторон, что и изображение, указанное в параметре $size . Вы можете использовать add_image_size для создания дополнительных версий, достаточно больших для дисплеев с высокой плотностью. Соотношение WP по формату позволяет допускать небольшие ошибки округления, поэтому оба размера в вашем вопросе должны соответствовать ОК.

2 – Чтобы браузер выбрал правильный размер изображения для пространства, вам понадобится атрибут нестандартных sizes . Атрибут sizes по умолчанию WP предполагает, что вы хотите, чтобы изображение было полным шириной браузера, но не шире, чем естественная ширина изображения. В вашем дизайне более узким экранам требуется большее изображение, а затем над определенной точкой останова вы хотите выбрать меньшую ширину изображения.

Итак, исходя из ваших размеров изображения, что ваша точка останова находится на уровне 640px , нам нужно, чтобы атрибут sizes немного напоминал следующее: (min-width: 640px) 33.333vw, 100vw

Что это говорит браузеру, для окон шириной 640px и более, выберите изображение из списка srcset который лучше всего соответствует трети ширины окна. Для других оконных ширин (<640px) выберите изображение из списка, которое наилучшим образом соответствует ширине окна.

Чтобы поместить это в код, мы создаем новую функцию, чтобы вернуть атрибут и встроить его в нашу функцию обертки:

 function wpse_221989_sizes() { return "(min-width: 640px) 33.333vw, 100vw"; } function wpse_221989_the_post_thumbnail( $size, $attr ) { add_filter( 'wp_calculate_image_sizes', 'wpse_221989_sizes', 10 , 2 ); the_post_thumbnail( $size, $attr ); remove_filter( 'wp_calculate_image_sizes', 'wpse_221989_sizes', 10 ); } 

Теперь, когда ваш шаблон темы вызывает wpse_221989_the_post_thumbnail наш атрибут пользовательских sizes будет заменен по умолчанию. Присоединившись к фильтру перед вызовом the_post_thumbnail и the_post_thumbnail сразу же после того, как мы сделаем нашу функцию тега шаблона чувствительной к контексту вашего вопроса, не нарушая атрибуты размеров, созданные на изображениях в других частях вашей темы.

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

Если Google Pagespeed для вас важен, проверьте, чтобы он подчинялся вашим srcset и srcset . Если нет, то используйте add_image_size чтобы сделать размер, который просто подходит для окна Pagespeed, и использовать этот размер в ваших вызовах для wpse_221989_the_post_thumbnail чтобы он был помещен в атрибут src . На моих сайтах я использую 1024px-изображение в качестве значения по умолчанию, которое, похоже, радует как рабочий стол, так и мобильный анализ Pagespeed.

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

Идеальным решением является атрибут srcset W3C HTML 5+ docs , к сожалению его реализация по умолчанию в wordpress отстойна, и вам нужно будет использовать соответствующий API, чтобы он соответствовал изображениям, как вы хотите, чтобы они были такими, какими вы хотите.

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