이미지 크기 설명

당신이 당신의 워드 프레스 웹 사이트에 사진을 업로드 할 때,그 사본–추가 크기의 이미지가 생성됩니다. 왜 우리는 그들을 필요로합니까? 우리는 사이트의 모든 곳에서 같은 크기의 이미지를 사용하지 않기 때문에:

• 게시물,
• 포트폴리오,
• 팝업,
• 아카이브 페이지에 게시물 축소판,
• 위젯,
• 관리 영역 등;

그래서,예를 들어 워드 프레스는 아카이브 페이지에 게시물 페이지와 150 150(예를 들어)이미지에 전체 크기의 이미지를 사용할 수 있습니다.

하지만 대기 2000–당신이 더 등록 된 이미지 크기,더 많은 파일이 귀하의 웹 사이트에있을 것입니다 및 업로드하는 동안 이미지를 처리하는 데 더 많은 시간이 필요합니다 명심하십시오.

기본 워드 프레스 이미지 크기

워드 프레스는 기본적으로 여러 이미지 크기를 지원합니다. 당신은 찾아”설정>미디어”의 관리 영역에서 변경할 수 있습니다.

예를 들어 이 페이지에서 워드프레스 썸네일 크기를 변경할 수 있습니다.

당신이 그들을 사용하지 않는 워드 프레스는 이러한 크기의 각각에 대한 복사본을 생성하지 않으려면 어떻게. 테마functions.php에 다음 후크를 삽입 할 수 있습니다.

하지만 항상 워드 프레스 테마가 업데이트를받는 경우,다음 더 나은 자식 테마 또는 사용자 정의 플러그인을 사용하는 것을 명심하십시오.

add_filter('intermediate_image_sizes', 'misha_turn_off_default_sizes'); function misha_turn_off_default_sizes( $default_image_sizes) { unset( $default_image_sizes); // turn off thumbnail sizeunset( $default_image_sizes); // turn off medium sizeunset( $default_image_sizes); // turn off large size return $default_image_sizes; }

미디어_큰

medium_large이미지 크기는 함께 반응 이미지 기능과 함께 워드 프레스 4.4 에 나타났다. 고정 폭768과 비례 높이가 있습니다.

이 코드와 같이 간단하게medium_large크기를 비활성화 할 수 있습니다:

add_filter('intermediate_image_sizes', 'misha_deactivate_medium_large'); function misha_deactivate_medium_large( $default_image_sizes ){ $default_image_sizes;return $default_image_sizes; }

모든 이미지 크기를 얻는 방법?

때때로 당신은 웹 사이트에서 사용 가능한 이미지 크기의 목록이 무엇인지 찾을 수있다. 불행히도 기본 및 사용자 정의 이미지 크기 모두에 대해 일반적인 방법이 없으므로:

• 기본 이미지 크기 목록이 필요한 경우get_intermediate_image_sizes()을 사용할 수 있습니다.:

  print_r( get_intermediate_image_sizes() );/* Array ( => thumbnail => medium => medium_large => large ) */

• 등록 된 이미지 크기를 나열해야하는 경우$_wp_additional_image_sizes전역 변수에서 얻을 수 있으며 더 자세히 설명 할 수 있습니다.:

  global $_wp_additional_image_sizes;print_r( $_wp_additional_image_sizes );/*Array( => Array ( => 400 => 400 => 1 ) => Array ( => 2000 => 1200 => 1 ))*/

기능

그것은 관리 영역에서 포스트 이미지 크기를 쉽게 사용할 수있을만큼–당신이해야 할 모든 당신이 드롭 다운에서 필요한 이미지 크기를 선택하는 것입니다. 그럼 함수들을 살펴보자.내가 다른 어떤 것보다 더 자주 사용하기 때문에 내 목록의 상위 1 위입니다.

the_post_thumbnail( $size = 'thumbnail', $attr = '' );

이 함수는<img>태그를 인쇄합니다.

$크기 기본적으로

• 이미지 크기 식별자(이름)–medium,custom등의 매개 변수 값으로 사용할 수 있습니다thumbnail,

  // prints the featured image, size large of a current post in the loopthe_post_thumbnail( 'large' );

• 사용자 정의 크기array( width, height ),예:

  the_post_thumbnail( array( 100, 100 ) );

  당신이 그것을 사용하는 경우,가장 적절한 이미지 크기가 표시됩니다.

• 이 매개 변수에full값을 전달할 수 있으며 원본 이미지가 표시됩니다.배열로 속성을 전달할 수 있습니다.src속성을 다시 작성할 수도 있습니다! 😁

  the_post_thumbnail( 'medium', array( 'class' => 'my-image', 'data-id' => 1000 ) );

  이 함수는 다음과 같이 매우 유사합니다.이 함수의 차이점은 다음과 같습니다.:

  • 첫 번째get_the_post_thumbnail()은 게시물 아이디,다른 모든 것은 동일합니다.
  • 이미지를 반환하고 인쇄하지 않습니다.

  예:

  echo get_the_post_thumbnail( get_the_ID(), 'medium' );

  이 기능을 사용하면 이미지를 가져올 수 있습니다.

  wp_get_attachment_image_src( $attachment_id, $size = 'thumbnail' );

  첨부파일 아이디는 게시물 아이디가 아닙니다. 그러나 예를 들어 추천 이미지 아이디가 필요한 경우get_post_thumbnail_id()기능을 사용할 수 있습니다.

  예:

  $image_array = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );echo $image_array;

  $size매개 변수 및 크기 배열에 대해 조금 위에서 읽습니다.

  사용자 정의 이미지 크기를 추가하는 방법

  이 과정은 매우 간단하며 두 단계로 구성됩니다. 첫 번째 단계가 필요합니다.워드 프레스에서 이미지 크기를 등록하려면 현재 테마functions.php또는 하위 테마functions.php또는 사용자 지정 플러그인에서 이 기능을 사용할 수 있습니다.

  add_image_size( $size_name, $width = 0, $height = 0, $crop = false );

  $크기 _이름 예약된 이미지 크기 이름은 사용할 수 없습니다.: thumb, thumbnail, post-thumbnail, medium, medium_large, large, full. $폭 픽셀 폭,설정 0–무제한 폭. $높이 높이(픽셀 단위),0–무제한 높이 설정,예:

  add_image_size( 'fixedwidth500', 500, 0 ); // or just skip the third parameter

  $자르기 이전 이 매개 변수는false또는true만 허용 할 수 있지만 지금은 훨씬 더 확장되므로 가능한 값은 다음과 같습니다:

  값	설명
  false (기본값)	이미지가 잘리지 않고 맞춤 측정기준에 맞게 크기가 조정됩니다
  true	이미지 크기를 조정하고 제공 해상도에 의해 정확하게 잘립니다,이미지의 중앙 부분이 사용됩니다.
  array( position_X, position_Y )	position_X 수락: center left right position_Y 수락: center top bottom
  값	설명

  예를 살펴보겠습니다:

  add_image_size( 'my-image-size-name', 200, 200, array( 'left', 'top' ) );

  일을 간단하게 유지하기 위해 나는이 예에서 사각형 크기를 사용하기로 결정했다. 그래서,원래 이미지가 수평 인 경우,이미지의 왼쪽 부분은 남아 있지만,오른쪽 부분이 잘립니다,그리고 같은 나는 수직 이미지에 대해 말할 수있는 것을,말을 쉽게-이미지의 하단 부분이 잘립니다.

  “수동 이미지 자르기”플러그인을 사용하여 수동 자르기를 할 수도 있습니다.

  그러나 많은 이미지 크기를 만들지 마십시오:

  • 더 많은 이미지 크기를 생성-더 많은 파일이 업로드 폴더에 될 것입니다,
  • 더 많은 시간이 귀하의 사이트에 이미지를 업로드해야합니다.

  미디어 업 로더와 구텐베르크에 사용자 정의 이미지 크기를 추가하는 방법

  당신은 위젯과 게시물에 이미지를 삽입 할 때,워드 프레스(3.5+)는 사용할 이미지 크기를 선택할 수 있습니다:

  

  당신이 볼 수 있듯이,거기에 당신에게 사용자 정의 크기를 추가 할 수 있습니다:

  add_filter('image_size_names_choose', 'misha_new_image_sizes'); function misha_new_image_sizes($sizes) {$addsizes = array("my-image-size-name" => 'Misha size' // "image size name" => "Label (anything)");$newsizes = array_merge( $sizes, $addsizes );return $newsizes;}

  멋진 것은이 후크는 구텐베르크 이미지 블록 작동한다는 것입니다.

  자신의 크기를 변경하거나 테마를 변경 한 후 이미지를 다시 생성하는 방법

  아마도 당신은 상황을 알고add_image_size()매개 변수를 변경 한 후 또는 웹 사이트 테마를 변경 한 후 워드 프레스는 자동으로 이미지 크기를 생성하지 않고 이전 해상도의 이미지는 여전히 사이트에 표시됩니다.

  이 상황에서 어떻게 해야 합니까? 업로드 폴더에 2-3 장의 사진 만 있으면 다시 업로드 할 수 있습니다. 그러나 2-3 수천 개의 이미지가 있다면 어떻게해야합니까?

  이 상황을 해결하는 두 가지 방법이 있습니다–플러그인과 코드 사용:

  플러그인으로 축소판 재생성

  두 가지 간단한 플러그인을 추천 할 수 있습니다:

  • 아약스 썸네일 재 구축
  • 강제 재생성 썸네일

  그들 각각은 자신의 장점과 단점을 가지고,그래서 어쩌면 다른 상황에 대해 당신은 당신을 위해 더 맞는 어떤 플러그인을 선택할 수 있습니다.

  썸네일을 프로그래밍 방식으로 재생성

  여기에서 이미지를 재생성 할 수있는 코드,사용 방법을 보여 드리고자합니다.

  $attachment_id = 5; // pass your attachment ID here $path = get_attached_file( $attachment_id );$meta = wp_generate_attachment_metadata( $attachment_id, $path );wp_update_attachment_metadata( $attachment_id, $meta );

  사용자 정의 포스트 유형에 대한 특정 이미지 크기 썸네일을 만드는 방법 만

  그래서,당신의 웹 사이트가 10 등록 된 사용자 정의 포스트 유형을 가지고 있으며,그들 각각은 웹 사이트 페이지에 2-3 이미지 크기를 사용한다고 가정 해 봅시다. 그것은 우리가 웹 사이트에 어떤 사진을 업로드 할 때 워드 프레스는 그것의 20~30 사본을 만드는 것을 이해하기 쉽습니다!

  사용자 지정 게시물 형식에 대 한 추가 이미지 크기()를 사용할 수 있는 방법이 없습니다 하지만 여기이 문제를 해결 하는 코드의 작은 조각입니다. 이 코드는 워드프레스에서 사진의 특정 해상도 복사본을 만들어야 할 때와 그렇지 않을 때를 알려줍니다.

  intermediate_image_sizes및intermediate_image_sizes_advanced후크 모두 이 작업에 적합합니다. 아래의 매우 간단한 예제는functions.php파일 썸네일에 코드를 삽입 한 후 사용자 정의 포스트 유형page에서 업로드 된 이미지에 대해 생성되지 않습니다.

  add_filter( 'intermediate_image_sizes_advanced', function( $sizes ){ if( isset( $_REQUEST ) && 'page' == get_post_type($_REQUEST ) ) {unset( $sizes );} return $sizes; } );

  조금 더 복잡한 예,그러나 그것은 또한 정확합니다:

  /* * this hook will be fired while you uploading a picture */add_filter( 'intermediate_image_sizes', 'misha_reduce_image_sizes' ); function misha_reduce_image_sizes( $sizes ){/* * $sizes - all image sizes array Array ( => thumbnail => medium => large => post-thumbnail ) * get_post_type() to get post type */$type = get_post_type($_REQUEST); // $_REQUEST post id the image uploads to foreach( $sizes as $key => $value ){ /* * use switch if there are a lot of post types */if( $type == 'page' ) {if( $value == 'regionfeatured' ){ // turn off 'regionfeatured' for pages unset( $sizes ); }} else if ( $type == 'region' ) {if( !in_array( $value, array('regionfeatured','misha335') ) ){ // for regions turn off everyting except 'regionfeatured' and 'misha335' unset( $sizes ); }} else {if( $value != 'thumbnail' ){ // turn off everything except thumbnail unset( $sizes ); }}}return $sizes;}

  

  미샤 루드라스티

  워드프레스,우커머스,구텐베르크를 너무 좋아해요. 12 경험의 세.

  사용자 지정 개발자 도움이 필요하십니까? 문의하기