レスポンシブ イメージの採用の増加は無視できませんが、WordPress のような大規模な CMS の制約の下で機能を採用することは非常に困難です。 自分でテーマに機能を設計することは完全に可能ですが、そうするのは難しく、時間のかかる作業です.

幸い、WordPress 4.4のリリースにより、テーマとプラグインの開発者は、製品でレスポンシブイメージを使用できるようになります。 このリリースの開始以来、「Responsive Images RICG」プラグインがWordPressコアに統合されました。つまり、レスポンシブイメージのサポートがWordPressの内部デフォルト機能になりました。 それがどのように機能するか、そしてそれを使用してWordPressサイトを最大限に活用する方法を見てみましょう。

応答性の像のtrac-ワードプレス

画像はresponsivesのしくみ

WordPress 4.4 にアップグレードするとすぐに、 コンテンツ 画像には属性「srcset」と「 サイズ 元の要求された画像のサイズを維持しながら、使用可能なすべての画像サイズが存在することを保証するためにフィルタリングされます。 カスタムサイズ変更は「」から無視されることに注意することが重要です。 srcset »アスペクト比が要求された元の画像と異なる場合。 また、「」機能で画像を呼び出すことで WP-GET-添付画像 レスポンシブ画像も返されます。

ザ・ 応答画像 これはバックグラウンドの機能です。つまり、ユーザーがメディアアップロードインターフェイスを介してWordPressに画像をアップロードするたびにすべてが自動的に行われます。 ページに画像が表示されると、その画像には「」という属性が付けられます。 srcset "そして" サイズ このバックグラウンドプロセスの結果として。

これは、新しいレスポンシブ画像機能に目に見える UI がないことを意味します。 切り替えるオプションはありません。 フォーム 記入するか、チェックボックスをオンにします。 そうは言っても、テーマ開発者は「 のfunctions.php 画像の属性が「 サイズ "。 実際、WordPressでレスポンシブ画像について話すときは、特に属性について話します。 srcset "そして" サイズ 画像のタグにあります。

WordPressは属性に利用可能なすべてのサイズを挿入する例外的な仕事をしていますが、 srcset "、"サイズ "属性は予測が少し難しいです。 確かに、属性「 サイズ ウィンドウの利用可能な寸法に応じて画像がどのようにブラウザに通知する責任があります。 ユーザーのテーマのスタイルによって情報が異なるため、次のように適切なデフォルトを提供するのが最善の方法です。

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

このデフォルト属性「 サイズ XNUMXつのことをします。 まず、有効な属性が「 サイズ 画像に存在しますが、これは最近、仕様に従って必須の要件になりました。 次に、ブラウザが元の要求された幅よりも大きい画像ソースを提供しないようにします。 CSS操作の場合、画像のサイズはウィンドウの幅によって異なりますが、デフォルト値は「 サイズ 役に立たなくなります。

デフォルト属性「 サイズ 「CSSによって変更されていない画像にのみ役立ちます。テーマ開発者が「属性」を設定できるように、フィルターブラケットが使用可能になります。 サイズ 「各画像のうち、完璧であることを確認する」 サイズ 各停止ポイントに配信されます。

ここで重要なのは、可能であれば、テーマが属性「」のデフォルト値に依存してはならないということです。 サイズ「レスポンシブイメージのサポートに関する正確な情報を提供するため。」 確かに、デフォルトの属性「 サイズ »ウィンドウが要求された画像の元のサイズよりも小さい場合、ブラウザが画像ソースを変更することを許可しません。 また、画像が要求された元のサイズよりも大きい可能性がある場合、ブレークポイントでCSSを使用して画像を編集すると、ソースを変更できなくなります。

テーマの開発者であるか、WordPressコードベースにアクセスできる場合は、テーマ内の画像をフィルタリングして、属性「 サイズ 新しいバージョンが間もなく登場した後にできる最も重要なことのXNUMXつです。 以下は、「」のフックの例です。 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ファイルでは、最後のXNUMXつの関数が属性「 サイズ テーマ内のさまざまな画像ブレークポイントに応答するため。

レスポンシブ画像フィルター WordPress チュートリアル#

WordPress 4.4にアップデートすると、応答性の高い画像の互換性がすぐに得られ、すべてのウィンドウサイズとピクセル密度で鮮明で鮮明な画像の表示が促進されます。 これにより、ページが大きくて重い画像を長時間ロードする必要がなくなるため、パフォーマンスも向上します。 これはユーザーにとって自動プロセスですが、テーマ開発者はテーマに合わせて画像サイズを調整する必要があります。

このチュートリアルはこれですべてです。WordPressのレスポンシブ画像の重要性と概念をよりよく理解するのに役立つことを願っています。 お気に入りのソーシャルネットワークでお気軽にこのチュートリアルを友達と共有してください。