Disable image responsiveness in WP

워드프레스에서 반응형 이미지 비활성화하기

Disable image responsiveness in WP

워드프레스에서 반응형 이미지(responsive images) 기능 사용하지 않기

워드프레스 4.4(“Clifford”)부터 모든 이미지 태그에 ‘srcset’ 속성을 추가하는 새로운 기능이 추가되었다고 합니다. 이 기능에 따라 여러 가지 해상도의 이미지가 있으면 브라우저에서 자체적으로 판단하여 해상도에 맞는 이미지를 로드합니다.

이 기능은 매우 유용하지만 간혹 이미지가 반응형으로 표시되지 않기를 원할 수 있습니다.

이 경우 다음과 같은 코드를 추가하여 srcset 속성을 비활성화시킬 수 있습니다.

add_filter('wp_get_attachment_image_attributes', function($attr) {
if (isset($attr['sizes'])) unset($attr['sizes']);
if (isset($attr['srcset'])) unset($attr['srcset']);
return $attr;
}, PHP_INT_MAX);
add_filter('wp_calculate_image_sizes', '__return_false', PHP_INT_MAX);
add_filter('wp_calculate_image_srcset', '__return_false', PHP_INT_MAX);
remove_filter('the_content', 'wp_make_content_images_responsive');
// Source: stackexchange

위의 코드를 사용 중인 워드프레스의 함수 파일(functions.php)에 추가하거나 사이트 레벨의 함수 파일(“워드프레스 플러그인과 테마 비교 – 사이트별 플러그인 만들기” 참고)에 추가하도록 합니다.

참고로 위의 코드를 추가하기 전에 PHP 5.3 이상을 사용하고 있는지 확인하시기 바랍니다.

참고 – 모바일 버전을 비활성화하려는 경우

Avada, Enfold와 같은 일부 인기 테마에서는 반응형을 비활성화하여 모바일 버전에서도 PC 버전(데스크톱 버전)처럼 보이도록 하는 기능을 제공합니다.

만약 테마 내에서 이런 기능을 제공하지 않는 경우에는 모바일 버전에 적용되는 CSS 미디어 쿼리 코드를 찾아서 제거해야 합니다.



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.