반응형 이미지의 채택이 증가하는 것을 무시할 수는 없지만 WordPress와 같은 대규모 CMS의 제약 조건에서 기능을 사용하는 것은 매우 어려울 수 있습니다. 기능을 테마에 직접 디자인하는 것은 전적으로 가능하지만 그렇게 하는 것은 어렵고 시간이 많이 걸리는 작업입니다.

다행히도 WordPress 4.4가 출시됨에 따라 테마 및 플러그인 개발자는 제품에 반응 형 이미지를 사용할 수 있습니다. 이 릴리스가 시작된 이래로 "반응 형 이미지 RICG"플러그인이 WordPress 코어에 병합되었습니다. 즉, 이제 반응 형 이미지 지원이 내부 WordPress 기본 기능으로 제공됩니다. 작동 방식과 WordPress 사이트를 최대한 활용하기 위해 어떻게 사용할 수 있는지 살펴 보겠습니다.

응답 이미지-TRAC-워드 프레스

어떻게 이미지 작업을 responsives

WordPress 4.4로 업그레이드하자마자 전체 내용 이미지에는 "srcset" 및 " 속성이 있습니다. 크기 원본 요청 이미지의 크기를 유지하면서 사용 가능한 모든 이미지 크기가 있는지 확인하기 위해 필터링됩니다. 사용자 정의 크기 조정은 "에서 무시된다는 점에 유의하십시오. srcset »가로 세로 비율이 요청한 원본 이미지와 다른 경우. 또한 기능을 통해 이미지를 호출하여 " WP-얻을-첨부 이미지 반응 형 이미지도 반환합니다.

레« 응답 이미지 백그라운드 기능으로 사용자가 미디어 업로드 인터페이스를 통해 WordPress에 이미지를 업로드 할 때마다 모든 것이 자동으로 발생합니다. 페이지에 이미지가 표시되면 " srcset "그리고" 크기 이 백그라운드 프로세스의 결과입니다.

이는 새로운 반응형 이미지 기능에 눈에 보이는 UI가 없음을 의미합니다. 전환할 수 있는 옵션이 없습니다. 형태 입력하거나 확인란을 선택합니다. 즉, 테마 개발자는 " functions.php 이미지의 속성이 " 크기 ". 실제로 WordPress에서 반응 형 이미지에 대해 이야기 할 때 특히 속성에 대해 이야기하고 있습니다. " srcset "과" 크기 이미지의 태그에서 찾을 수 있습니다.

WordPress가 사용 가능한 모든 크기를 " srcset ","크기 "속성은 예측하기가 조금 더 어렵습니다. 실제로 " 크기 창의 사용 가능한 크기에 따라 이미지를 브라우저에 알리는 역할을합니다. 사용자 테마의 스타일에 따라 정보가 다르므로 다음과 같이 합리적인 기본값을 제공하는 것이 최선입니다.

sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"

이 기본 속성 " 크기 두 가지를합니다. 첫째, 유효한 속성 " 크기 이미지에 존재하며, 최근 사양에 따라 필수 요구 사항이되었습니다. 둘째, 브라우저가 원래 요청 된 너비보다 큰 이미지 소스를 제공하지 않도록합니다. CSS 조작의 경우 창 너비에 따라 이미지 크기가 달라 지지만 기본값 인 " 크기 유용성이 떨어집니다.

기본 속성 " 크기 "CSS에 의해 변경되지 않은 이미지에만 도움이됩니다. 필터 괄호를 사용하여 테마 개발자가"속성을 설정할 수 있습니다. " 크기 "각 이미지의 완벽한 보장" 크기 각 중지 지점으로 전달됩니다.

가능한 경우 테마가 "속성의 기본값에 의존해서는 안된다는 점에 유의해야합니다. 크기"반응 형 이미지 지원에 대한 정확한 정보를 제공합니다." 실제로 기본 속성 " 크기 »창이 요청 된 이미지의 원래 크기보다 작을 때 브라우저가 이미지 소스를 변경하는 것을 허용하지 않습니다. 또한 중단 점에서 CSS로 이미지를 편집 한 경우 이미지가 요청 된 원래 크기보다 클 수있는 경우 소스를 변경할 수 없습니다.

테마 개발자이거나 WordPress 코드베이스에 액세스 할 수있는 경우 테마의 이미지를 필터링하여 " 크기 곧 새 버전이 출시 된 후 수행 할 수있는 가장 중요한 작업 중 하나입니다. 다음은 "에서 후크의 예입니다. wp_calculate_image_sizes 테마에 맞게 개발할 수 있습니다.

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

이 예에서 체크 표시는 추천 이미지 및 미리보기 이미지를 포함한 모든 콘텐츠에 적용됩니다. 다른 유형의 이미지가 다른 값을 갖도록 추가 논리를 추가 할 수 있습니다.

코드 소스 WP-이미지 응답

""속성에 새로운 기능이 추가되었습니다 srcset "과" 크기 »를 표시하기 위해 추가된 이미지 외에도 미디어 관리자를 통해 WordPress에 추가된 이미지에 추가할 수 있습니다. 내용. 기능 " wp_get_attachment_image_sizes 기본 속성 "을 반환합니다 크기 "파일의 테마 필터로 수정할 수 있습니다 functions.php ". 기능 wp_get_attachment_image_srcset 속성을 반환합니다 srcset »요청 된 이미지의 사용 가능한 모든 크기가 포함됩니다. 이러한 새로운 기능의 사용에 대한 문서 및 예제를 찾을 수 있습니다. 개발자의 참조 디렉토리.

테마에 대한 반응 형 이미지 구성

새로운 기능에는 테마에 가장 적합한 반응 형 이미지에 대한 새로운 수준의 지원을 제공하는 데 사용할 수있는 몇 가지 새로운 괄호가 있습니다. 훅 max_srcset_image_width "테마 개발자가 포함 할 이미지의 최대 너비를 필터링 할 수 있습니다." srcset ". 훅 wp_calculate_image_srcset »속성을 필터링합니다« srcset »후크 (필터) 도중 이미지« wp_calculate_image_sizes "테마 개발자가 사용자 정의 할 수 있습니다." 크기 테마의 이미지 중단 점과 더 잘 일치합니다.

"를 가장 잘 필터링하는 방법의 예를 찾고 있다면 크기 이미지 중 새로운 XNUMX 개 테마가 완벽한 예가 될 것입니다. 이 테마의 functions.php 파일에서 마지막 두 함수는 " 크기 테마 내의 다른 이미지 중단 점에 응답합니다.

반응형 이미지 필터 워드프레스 튜토리얼#

WordPress 4.4로 업데이트하면 사용자가 반응 형 이미지 호환성의 이점을 즉시 얻을 수 있으므로 모든 창 크기와 픽셀 밀도에서 선명하고 깨끗한 이미지를 표시 할 수 있습니다. 또한 페이지가 더 이상 크고 무거운 이미지를 오랫동안로드 할 필요가 없기 때문에 성능이 향상됩니다. 이것은 사용자를위한 자동 프로세스이지만 테마 개발자는 테마에 맞게 이미지 크기를 조정해야합니다.

이것이이 튜토리얼의 전부입니다. WordPress에서 반응 형 이미지의 중요성과 개념을 더 잘 이해하는 데 도움이되기를 바랍니다. 좋아하는 소셜 네트워크에서 친구들과이 튜토리얼을 공유하십시오.