画像をアップロードすると、WordPressは舞台裏で多くの作業を行い、訪問者に画像を提供で あなたは、このプロセスにピギーバックし、手動で画像のサイズを変更することを保存するために、カスタム画像サイズを追加することができます。
この記事では、WordPressが異なる画像サイズを作成する方法と理由を説明します。 次に、関数を変更して独自の画像サイズを追加する方法をお教えします。phpファイル、サムネイルを再生成し、Gutenberg画像ブロックおよび/またはWordPressのループに新しい画像サイズを追加します。
WordPressの画像サイズの説明
WordPressのメディアライブラリに画像をアップロードするたびに、これらはWordPressがデフォルトで作成する追加の画像サイズのオプシ:
- サムネイル
- Medium
- Medium Large
- Large
テーマが追加の画像サイズを指定している場合、WordPressもそれらを作成します。
WordPressはまた、アップロードした元のサイズを保持し、フルサイズのようにフルに名前を付けます。
ページまたは投稿に画像を挿入すると、Gutenberg imageブロックの画像サイズドロップダウンにこれらのすべて（Medium_Largeを除く）が表示されます。
なぜWordPressはこれほど多くの画像を作成するのですか？
画像はパンツのようなものです。 あなたは正しいサイズを得ることを確認したいです。 あまりにも小さいパンツや画像は愚かに見え、あなたと他の人には、彼らが正しく適合しないことは痛いほど明らかです。 あなたのサイト上の小さすぎる画像は、伸びたりピクセル化されたりします。
対照的に、それらが大きすぎる場合、それは超無駄です。 赤ちゃんに男のために作られたパンツを入れないでしょうか？ それも必要ではないので、多くの余分な生地です。 その赤ちゃんはパンツの脚で迷子になるだろう;)
画像は同じです。 画像がコンテナには大きすぎる場合は、ページに配信するためにダウンロードする帯域幅と時間を無駄にしています。 そして何のために？ 何のためにも
理想的には、アップロードするフルサイズの画像は、サイト上の最大の画像コンテナに収まるほど大きくなければなりませんが、大きくはありません。 次に、サイトで画像を使用するときは、必要な正確なサイズの画像を使用する必要があります。
Photoshopや他の画像エディタで適切なサイズを作成するために画像をスケーリングするには貴重な時間がかかるため、WordPressはこの作業を行い、あなたのために おかげで、ワードプレス！
サイトに画像を挿入するときに適切なサイズを選択するだけで、適切な画像を使用することのパフォーマンス上の利点を得ることができます。
WordPressのデフォルトの画像サイズがテーマに合っていない場合は、メディア>設定セクションでデフォルトを調整するか、カスタムサイズを追加して、より多くの
デフォルトの画像サイズは次のとおりです:
- サムネイルの場合は150pxの正方形
- 中画像の場合は300pxの幅
- 中画像の場合は768pxの最大幅
- 大画像の場合は1024pxの最大幅。
Medium_Largeがレスポンシブ画像のサポートを利用するために追加されたため、設定ページには含まれていません。 レスポンシブ画像といえば…
レスポンシブ画像
様々なサイズのこれらの画像はすべて別の目的を果たすので、いくつかのチュートリアルが示唆するように、WordPressがそれらを作成しないようにデフォルトをゼロに設定するべきではありません。
WordPressはバージョン4.4でcoreにレスポンシブイメージを追加しました。 画像src属性に1つの画像だけのURLを設定する代わりに、WordPressはさまざまなサイズの画像のUrlのリストであるsrcset（ソースのセット）も追加しました。
そのリストを作成するために使用する画像を推測しますか？ うん、WordPressはあなたが画像をアップロードするときに作成される異なるサイズで同じ画像を使用します。
訪問者のデバイスに適した画像を選択できるように、このリストをブラウザに提供します。 訪問者がモバイルデバイスを使用している場合、srcsetに小さな画像が表示されます。 デスクトップRetinaデバイスでサイトを訪問している場合は、アップロードしたフルサイズのRetina対応画像ファイルを受け取ります。 繰り返しますが、これがその必要性を満たすのに十分な大きさの画像をアップロードする必要がある理由です。
カスタム画像サイズを追加すると、同じアスペクト比を持つ限り、WordPressはそれをsrcsetに追加します。 カスタム画像サイズが別の形状に画像をトリミングする場合、それはセットから省略されます。
WordPressの大きな画像を「Web最適化」
WordPress5.3では、大きな画像ファイルの「web最適化された最大サイズ」を検出して生成することで、大きな画像ファイルを管理する新しい方法が導入されました。
それはどのように動作しますか？
新しい画像がアップロードされると、WordPressはその高さまたは幅がbig_image thresholdより上にあるかどうかに基づいて「大きな」画像であるかどうかを検出します。
デフォルトのしきい値は2560pxです(これは新しいbig_image_size_thresholdフィルタを使用して変更できます)。
画像の高さまたは幅がこのしきい値を超えている場合、そのしきい値がmax–heightおよびmax-widthの値として使用されて縮小されます。
縮小された画像は、使用可能な最大サイズとして使用されます。
スケーリングを無効にしたいですか？
スケーリングはbig_image_size_thresholdフィルタによって制御されます。
フィルタコールバックからfalseを返すと、それが無効になります（以下のように）:
add_filter( 'big_image_size_threshold', '__return_false' );
WordPressのサムネイルと注目の画像サイズ
私たちは今、我々は全体のサムネイル/注目の画像の混乱を解明する私たちのチュートリアルの一部に達しました。 WordPressは進化するにつれて下位互換性を維持しているため、物事の名前は変わりますが、関数はまだ古い名前で物事を参照しています。
WordPressのサムネイル画像サイズはバージョン2.9で導入されましたが、バージョン3.0ではすぐに注目の画像に変更されましたが、悲しいかな、名前が立ち往生し そのため、チュートリアルや関数名でもサムネイルと呼ばれる注目の画像をよく耳にします。
ここにいくつかの例があります:
- テーマに注目の画像がなく、その機能を有効にする場合は、関数ファイルに
add_theme_support( 'post-thumbnails' );を追加します。 - テーマにWordPressの注目画像サイズを表示するには、
the_post_thumbnail()関数を使用します。
サムネイルと注目画像は、デフォルトのサイズ150px x150pxを共有しています。 引数なしでthe_post_thumbnail()関数を使用してサイズを指定すると、デフォルトの150pxの正方形サイズが使用されます。
実際に正しいサイズを使用できるようにするには、カスタム画像サイズを作成し、それをfeatured-largeまたは類似の名前にすることをお勧めします。 次に、ループ内でそのイメージを使用する場合は、the_post_thumbnail('featured-large')を使用します。
WordPressでカスタム画像サイズの作成を開始する前に
カスタム画像サイズの作成を開始するときは、船外に出て考えられるあらゆる目的のために画像 それ以外の場合は、ホスティング上のスペースを燃やし、画像ごとに料金を請求する画像最適化サービスを使用している場合は、画像の許容量を大幅に
プランでは100枚の画像を最適化できますが、アップロードするたびに9枚の追加サイズが生成され、最適化が必要な場合は、10枚の画像をアップロードすると制限に達します。 カスタムサイズを追加し、画像の最適化計画を選択するときは、この点に注意してください。
Smush Proには画像最適化の制限がなく、CDNが付属しているため、サーバーのストレージスペースを明確に保つことができます。 あなたは通常よりも多くのカスタム画像サイズを追加することができます。 生地が安いので、それらの赤ちゃんに少しスキニージーンズの代わりにflowy MC Hammer pantsを置くのと同等と考えてください:)
Smush Proを7日間無料で試してみてください。WordPressでカスタム画像サイズを追加する方法
画像サイズを追加するために関数ファイルに追加するコードは次のとおりです:
add_image_size( 'the-name-for-custom-image-size', 600, 400, true );
この関数は、次の順序で4つのパラメータを受け入れます:
- カスタム画像サイズを指定する名前
- ピクセル単位の画像の幅
- ピクセル単位の画像の高さ
- 上で指定した幅と高さに合わせて画像をトリミングする必要があります
Cropping
croppingパラメータはブール値なので、trueまたはfalseを使用します。 それを完全に除外すると、デフォルトでfalseになります。
croppingパラメータをtrueに設定すると、WordPressはカスタム画像を作成するときに指定した寸法に合わせて画像をトリミングします。
たとえば、カスタム画像サイズが600px x600pxの正方形で、croppingをtrueに設定した場合、600px x800pxの長方形の画像をアップロードすると、200pxが切り取られて画
add_image_size( 'custom-image-square', 600, 600, true );
クロップパラメータをtrueに設定すると、特定の寸法に完全に適合する必要がある注目画像やポストアーカイブ画像など、正確でなければならない画像サ
ワードプレスの投稿画像のサイズや、高さや幅が可変のページ上の画像など、より大きな揺れの余地がある画像については、croppingをfalseに設定できます。 これにより画像のサイズが変更されますが、画像の形状が変更されたり、ピクセルが切り取られたりすることはありません。
あなたの画像であなたのサイトへのトラフィックを駆動しようとしている場合は、私たちの画像SEOガイドを見てみましょう。
サムネイルの再生成
いずれかの場合、最も重要なステップの一つ:
- WordPressのデフォルトの画像サイズを変更する
- カスタム画像サイズを追加するか、
- カスタムサイズが異なる新しいテーマに切り替える
サムネールを再生成しています。
この文脈では、サムネイルとは、テーマに含まれるカスタム画像サイズや関数ファイルを介して作成する画像を含む、WordPressが作成するすべての追加画像
WordPressが追加の画像を作成する方法を変更すると、それは今後アップロードする画像にのみ影響します。 メディアライブラリに既にある画像は更新されません。
既にアップロードした画像を変更するには、人気のあるサムネイルを再生成プラグインを使用する必要があります。
インストール後、ツールセクションにあります。
新しいサイズでサムネイルを再生成すると、サーバースペースを解放するために、古い未使用の画像サイズを削除するオプションがあります。
Gutenberg imageブロックのドロップダウンにカスタム画像サイズを追加する方法
カスタム画像サイズをGutenberg imageブロックのドロップダウンに表示したい場合にのみ、以下のコードを関数ファイルに追加する必要があります。 テーマの舞台裏で使用するカスタム画像サイズを作成した場合は、この手順をスキップできます。
私たちはimage_size_names_chooseフィルタにフックするつもりです。
配列に、add_image_size関数で指定したカスタムサイズの名前と、かっこ内のドロップダウンに表示する名前を追加します。
このチュートリアルを行ったときに学んだように、画像がドロップダウンに表示される前にサムネイルを再生成する必要があります。
WordPress画像サイズの追加フルコードスニペット
次に、学んだことをすべて1つのコードブロックに結合し、実際の例を示します。
ブログにカスタム画像サイズを追加したいとしましょう。
追加したい画像サイズは次のとおりです:
- 1600px x400pxの注目画像
- ブログのコンテンツセクションの幅にまたがる800pxのサイズ
私たちのテーマは現在注目の画像をサポートしていないので、それ
私のカスタムサイズが表示されます。 ブログコンテンツの幅にまたがる画像をトリミングしなかったことに注意してください。 私は彼らがちょうど並んで欲しいので、私はハードトリミング私の注目の画像になります。
私は私のテーマでWordPressの注目の画像サイズを使用することになりますので、私はGutenbergのドロップダウンに追加したい唯一の画像は、ブログの画像です。
このコードをfunctions.phpファイルに追加した後、次のステップはサムネイルを再生成することです。ループ内の投稿にカスタム注目画像を使用するには、single.phpまたはindex.php
に次のように追加します。the_post_thumbnail()関数に'featured-large'を追加する方法を参照してください。 それは私のコンテンツの上に、私のブログ記事のタイトルの下に私の注目の画像が表示されます。
カスタム画像サイズのベストプラクティス
WordPressでカスタム画像を作成する際に問題が発生しないように、いくつかのヒントを次に示します。
- 常に最大のファイルをアップロードできます。 画像サイズが小さすぎると、WordPressはさまざまなデバイスで画像を適切に提供するために必要なすべてのサイズを作成することができません。
- medium_largeのデフォルトサイズのサイズを変更する必要がある場合は、
update_option()関数を使用します。 この同じ機能を使用して、他のWordPressのデフォルトの画像サイズを更新できます。 - WordPressループの外にいる場合は、関数
get_the_post_thumbnail()を使用してカスタム画像の1つを使用できます。 - 問題が発生した場合に備えて、カスタム画像サイズを作成するときのソフトクロップとハードクロップの詳細を示します。
カスタム画像サイズを追加するだけです
WordPressのカスタム画像サイズがどのように機能するかを理解したら、ニーズに合わせて変更し、多くの時間を節 画像サイズを正しく取得することは、サイトのパフォーマンスと検索エンジンのランキングを向上させるのにも役立ちますので、正しく取得す
あなたが本当に別のレベルにあなたの画像の最適化を取りたい場合は、Smushをチェックしてください。 私たちは、あなたがカスタム画像サイズを追加するためにあなたの関数ファイルを変更することに対処するのを避けるのに役立ちます自動画像
遅延読み込みや画像を次世代形式に変換するなど、他にも優れた画像最適化機能が組み込まれています。 Smush Proを7日間無料で試してみて、画像最適化機能がサイトをどのように改善できるかを確認してください。
タグ：
- コード
- 画像