Изображения WordPress не отображаются на мобильных устройствах? Причины, исправления, часто задаваемые вопросы.

Опубликовано: 2021-09-30

Раскрытие информации: этот пост содержит партнерские ссылки. Я могу получить компенсацию, когда вы переходите по ссылкам на товары в этом посте. Чтобы ознакомиться с моей Политикой в ​​отношении рекламы, посетите эту страницу . Спасибо за чтение!

Содержание

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

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

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

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

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

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

Изображения WordPress не отображаются на мобильных устройствах. Причины и исправления.

Конфликт плагинов или тем.

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

Чтобы проверить наличие конфликтов с другими плагинами, сначала отключите все плагины, работающие на вашем сайте. Затем переключитесь на стандартную тему «Двадцать».

Если проблема исчезнет, ​​включите плагины один за другим, чтобы определить источник проблемы. Затем включите свою тему.

Чтобы упростить диагностику, установите плагин Health Check .

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

Проблемы с компоновщиком страниц.

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

Вы найдете его в нижней части Elementor в «Настройки» >> «Адаптивный режим»: выберите мобильное представление. Затем перетащите изображение, которое хотите показать.

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

Добавьте приведенный ниже код CSS в файл style.css текущей активной дочерней темы или вы можете добавить дополнительную опцию CSS в настройщик темы:

@media (максимальная ширина: 767 пикселей){

.elementor: не (.elementor-edit-area-active) .elementor-hidden-phone {

дисплей: блок;

}

}

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

Тогда попробуйте это:

Перейдите на «Редактировать страницу с помощью Elementor», нажмите «Раздел» >> «Дополнительно» >> «Адаптивный» и отключите параметр «Скрыть на мобильном устройстве». Или вы можете добавить приведенный ниже код в раздел Customize>>Custom CSS, чтобы исправить это:

@media (максимальная ширина: 767 пикселей)

.elementor: не (.elementor-edit-area-active) .elementor-hidden-phone {

отображение: блок !важно;

}

Отсутствие обновлений темы.

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

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

Использование плагина оптимизации изображений.

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

Например, была проблема, вызванная плагином Autoptimize, который конвертирует изображения в формат .webp для быстрой загрузки и других функций.

.webp format Небольшое примечание: формат .webp У вас также может быть проблема с плагином «Отложенная загрузка».

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

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

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

Для этого вы должны попробовать этот плагин и посмотреть, поможет ли он:

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

Проблемы с WP Rocket.

Если вы недавно приобрели WP Rocket и надеетесь, что он ускорит ваш сайт, но обнаружите, что ваши изображения исчезают на мобильных устройствах, вы можете просмотреть этот документ по устранению неполадок на WP Rocket для некоторых возможных быстрых исправлений: « Мой сайт не работает» . ».

Изображения WordPress не отображаются на мобильных устройствах.

В большинстве случаев, как и во многих других проблемах с WordPress, все может сводиться к конфликту плагинов и/или тем.

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

Однако из-за огромного количества тем и плагинов, а также их кодирования, конфликты неизбежны.

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

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

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