画像サイズの説明

WordPressのウェブサイトに画像をアップロードすると、そのコピー–追加のサイズの画像が作成されます。 なぜ我々はそれらを必要とするのですか？ サイト上のどこにでも同じサイズの画像を使用しないので:

• 投稿では、ポートフォリオでは
• 、ポップアップでは
• 、アーカイブページの投稿サムネイルとしては
• 、ウィジェットでは
• 、管理領域などでは
• ;

だから、例えばWordPressでは、投稿ページでフルサイズの画像を使用し、アーカイブページでは150×150（例えば）の画像を使用することができます。

しかし、待ってください–あなたが持っているより多くの登録された画像サイズは、より多くのファイルがあなたのウェブサイト上にあり、アップロード中に画像を処理するためにより多くの時間が必要になることに注意してください。

デフォルトのWordPressの画像サイズ

WordPressはデフォルトでいくつかの画像サイズをサポートしています。 これらは、”設定>メディア”の管理領域で検索して変更できます。

だから、例えば、あなたはこのページでWordPressのサムネイルのサイズを変更することができます。

あなたがそれらを使用せず、WordPressがこれらのサイズごとにコピーを生成したくない場合はどうなりますか。 テーマfunctions.phpに次のフックを挿入できます。

ただし、WordPressテーマが更新を受け取った場合は、子テーマまたはカスタムプラグインを使用することをお勧めします。

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

medium_large画像サイズは、応答画像機能と一緒にWordPress4.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 ))*/

Functions

管理領域でWP image sizesを使用するのは簡単です–あなたがしなければならないのは、ドロップダウンから必要な画像サイズを選択することだけです。 それでは、関数を見てみましょう。

the_post_thumbnail()

私は何よりも頻繁にそれを使用するので、私のリストのトップ1。

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

この関数はURLではなく<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の値を渡すと、元の画像が表示されます。

$attrここでは任意のHTML属性を配列として渡すことができます。src属性を書き換えることもできます！ 😁

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

get_the_post_thumbnail()

この関数は、_post_thumbnail()と非常によく似ていますが、違いは次のとおりです:

• 最初のget_the_post_thumbnail()は投稿IDであり、他のすべては同じであり、
• は画像を返し、印刷しません。

:

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

wp_get_attachment_image_src()

この関数は、画像URLを取得することができます。

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

添付ファイルIDは投稿IDではないことに注意してください。 たとえば、注目の画像IDが必要な場合は、get_post_thumbnail_id()関数を使用できます。

:

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

$sizeパラメータとsize配列については、少し上を読んでください。

カスタム画像サイズを追加する方法

このプロセスは非常に簡単で、二つのステップで構成されています。 最初のステップが必要です。

add_image_size()

WordPressで画像サイズを登録するには、現在のテーマfunctions.phpまたは子テーマfunctions.phpまたはカスタムプラグインでこの関数を使用できます。

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

$size_name予約された画像サイズ名を使用することはできません。:thumb,thumbnail,post-thumbnail,medium,medium_large,large,full. √幅幅ピクセル単位で、0–無制限の幅を設定します。 $高さピクセル単位の高さ、0を設定–無制限の高さ、例:

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

$crop Earlierこのパラメータはfalseまたはtrueのみを受け入れることができますが、今でははるかに拡張されているので、可能な値は次のとおりです:

例を見てみましょう:

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

物事を簡単に保つために、この例では正方形のサイズを使用することにしました。 だから、元の画像が水平であれば、画像の左の部分は残りますが、右の部分はトリミングされ、垂直画像についても同じことが言えます–画像の下の部分

“手動画像クロップ”プラグインを使用して手動トリミングを行うことも可能です。

しかし、多くの画像サイズも作成しないでください:

• あなたが作成するより多くの画像サイズ—より多くのファイルがあなたのuploadsフォルダ、
• になり、より多くの時間があなたのサイトに画像をアップロード

Media UploaderとGutenbergにカスタム画像サイズを追加する方法

ウィジェットや投稿に画像を挿入すると、WordPress（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;}

クールなことは、このフックはGutenberg image blockでも機能するということです。

サイズを変更したり、テーマを変更したりした後に画像を再生成する方法

add_image_size()パラメータを変更した後、またはウェブサイトのテーマを変更した後、WordPressは画像サイズを自動的に生成せず、古い解像度の画像がサイトに表示されます。

この状況で何をすべきですか？ あなたのアップロードフォルダ内の唯一の2-3の画像がある場合は、単にそれらを再アップロードすることができます。 しかし、2-3千の画像がある場合はどうすればいいですか？

この状況を解決するには、プラグインとコードを使用する方法が二つあります:

プラグインでサムネイルを再生成

Ok、私はあなたに二つの簡単なプラグインをお勧めすることができます:

• Ajaxサムネイル再構築
• サムネイルを強制的に再生成

それらのそれぞれは、独自の長所と短所を持っているので、多分異なる状況のために、あなたは

プログラムでサムネイルを再生成する

ここでは、画像を再生成できるコード、使用方法を示したいだけです–それはあなたの選択です。

$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の画像サイズを使用していると想像してみましょう。 それは我々がウェブサイト上の任意の画像をアップロードすると、WordPressはそれの20-30のコピーを作成することを理解するのは簡単です！ カスタム投稿タイプにadd_image_size()を使用する方法はありませんが、ここにこの問題を解決する小さなコードがあります。 このコードは、画像の特定の解像度のコピーを作成する必要があるときと作成しないときをWordPressに伝えます。

intermediate_image_sizesとintermediate_image_sizes_advancedの両方のフックはこのタスクではOKです。 以下の非常に簡単な例では、コードをfunctions.phpファイルに挿入した後、カスタム投稿タイプpageからアップロードされた画像のサムネイルmy-image-size-nameは作成されません。

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;}

Misha Rudrastyh

私はWordPress、WooCommerce、Gutenbergをとても愛しています。 経験の12年。

いくつかのカスタム開発者の助けが必要ですか？