워드프레스에서 반응형 이미지 비활성화하기
워드프레스에서 반응형 이미지(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 미디어 쿼리 코드를 찾아서 제거해야 합니다.
일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.
좋은 포스팅 감사합니다.
이 방법으로 한다면 모바일에서 pc 버전으로 보일때 화면을 줌인도 가능할까요?
안녕하세요?
아마 다음 글이 원하는 기능을 구현하는 데 도움이 될 것 같습니다.
https://www.thewordcracker.com/basic/disable-pinch-to-zoom-in-wordpress/
워드프레스에서 반응형 이미지(responsive images) 기능 사용하지 않기 ~ 사용하기 방법이 궁금합니다....
질문드립니다.... 포스트 작성하여 사진을 올리면 모바일에서 그 사진크기가 너무 크게 보이네요..
포스트에 추가한 사진을 모바일에 딱 맞게 싸이즈를 바꿔줄수 있나여 ?
안녕하세요?
블로그를 방문해주셔서 감사합니다.
질문의 내용만으로는 정확한 답변을 드릴 수가 없는 점 양해바랍니다.
보통 반응형으로 반응하여 모바일일 때에도 본문의 너비에 맞게 표시됩니다. 만약 특정 테마에서 그런 문제가 나타나는 경우라면 테마 개발자(판매자)에게 문의해보시면 가장 정확한 답변을 얻을 수 있을 것 같습니다.
참고로 다음과 같은 CSS를 적용하여 테스트해보시기 바랍니다.
@media only screen and (max-width:767px) {.image-resized img {
width:100%;
height:auto;
}
}
실제 요소 이름은 적절히 조정하시면 됩니다.
일반적으로는 썸네일 크기를 정의하고 제대로 썸네일 크기를 불러오면 반응형으로 작동할 것으로 생각됩니다.