WordPressコアでのレスポンシブ画像の重要性

公開: 2016-11-16

レスポンシブ画像の人気が高まっており、誰もが無視できないものです。ただし、WordPressなどの一般的なCMSで同じ機能を使用することは、困難な経験になる可能性があります。ユーザーがテーマ内で機能を作成することは可能ですが、このタスクは時間のかかる作業になる可能性があります。しかし、WordPress 4.4が導入されて以来、状況は劇的に変化し、開発者や管理者がレスポンシブ画像機能をテーマに組み込むのが非常に簡単になりました。

主なハイライトには、WordPressコア内でのレスポンシブイメージプラグインの可用性が含まれます。これは、ユーザーがWordPressのデフォルト機能として提供されるレスポンシブ画像サポートの存在を享受できることを意味します。この機能が実際にどのように機能するか、そしてWordPressサイトの可能性を活用するためにどのように注意深く使用できるかを詳しく見てみましょう。

機能の機能

WordPress 4.4にアップデートすると、すべてのコンテンツと画像はsrcset属性とsizes属性で構成されます。これは主に、実際に要求された画像のサイズを維持するために、すべての画像サイズの可用性を確保するためです。アスペクト比が元の要求された画像と比較して変化する場合、カスタムクロップはsrcset属性から除外されます。同時に、wp-get-attachment-image関数を介して画像が呼び出されると、レスポンシブ画像が返されます。

レスポンシブ画像は、メディアアップローダーを介してWordPressに画像がアップロードされるたびに自動的に機能するため、WordPress4.4の背景機能として機能します。この自動バックグラウンドプロセスにより、画像がページに表示されるたびにsrcset属性とsizes属性が表示されます。これは、新しいレスポンシブ画像機能に表示されるインターフェイスがないことを意味します。表示されるインターフェイスがないため、入力用のフォームやチェック用のボックス、切り替え用のオプションなどのオプションは使用できません。

テーマ開発者は、テーマのfunctions.phpファイルを編集して、画像で正確なサイズ属性が利用できるようにする必要があります。 imageタグに存在するsrcset属性とsizes属性は、WordPressのレスポンシブ画像を実際に表すものであるため、これを考慮することが重要です。 srcset属性に使用可能なすべてのサイズを含めることに関しては、WordPressのパフォーマンスは良好ですが、予測が最も難しいのはサイズ属性です。使用可能なすべてのビューポートでの画像の幅についてブラウザに説明するのは、サイズ属性の義務です。ただし、結果はユーザーのテーマで使用できるスタイルによって異なる場合があり、適切なデフォルト、つまり 'sizes =”（最大幅：{{image-width}}）100 vw、{{image-width}}”を提供します。

サイズ属性を使用すると、ユーザーは特に2つのことを実行できます。まず、仕様に関する限り、現在前提条件となっている画像内の有効なサイズ属性の可用性を保証します。第二に、それはブラウザが要求された元の幅と比較してより多くの画像ソースを提供することを防ぎます。ただし、CSSがビューポートの幅がまったく異なる画像のサイズを操作する場合は常に、デフォルトのサイズ属性の利点が少なくなります。

テーマ開発者は、フィルターフックを使用して、各画像に対応するサイズ属性を調整し、すべてのブレークポイントで完全なサイズ属性を確実に配信できます。したがって、正確なレスポンシブ画像のサポートを提供する場合、テーマがデフォルトのサイズ属性に依存しないようにすることが望ましいです。主な理由は、ビューポートのサイズが元の要求された画像サイズと比較して小さい場合、ブラウザがデフォルトのサイズ属性によって画像ソースを変更または変更することを許可されていないという事実です。ただし、ブレークポイントでCSSを使用して画像が既に変更されている場合は、ソースも変更できません。

WordPressコードベースにアクセスできる個人の場合、またはテーマ開発者の場合は、正確なサイズ属性を提供するために、テーマ内の画像をフィルタリングする必要があります。これは、新しいバージョンがリリースされた後に実行する必要がある最も重要なことです。

テーマのレスポンシブ画像の構成

テーマに合わせて調整されたレベルのレスポンシブ画像サポートを提供するために使用できる新しい機能とともに、いくつかの新しいフックが導入されています。 srcset属性に含める必要のある画像の最大幅は、max_srcset_image_widthフックを介してテーマ開発者がフィルタリングできます。画像のsrcset属性は、 wp_calculate_image_srcsetにフックすることでフィルタリングできますが、 sizes属性は、テーマ開発者がwp_calculate_image_sizesをフィルタリングすることで、画像のブレークポイントをテーマに合わせるようにカスタマイズできます。

コンテンツ画像はwp_calculate_image_sizesでフィルタリングできますが、投稿サムネイル/注目画像はwp_get_attachment_image_attributes関数でフィルタリングできます。異なるブレークポイントでの注目画像の表示方法はテーマが異なり、同じ状況でのコンテンツ画像の表示方法とはまったく異なるため、2つの異なる機能が必要です。したがって、WordPress 4.4は、テーマ開発者にさまざまな方法で画像をフィルタリングする機会を提供し、それによって可能な限り具体的にします。

これはすべて、ユーザーとテーマ開発者がWordPress4.4アップデートを通じてレスポンシブ画像サポートで達成できる即時のメリットを強調しています。また、テーマ開発者は、ビューポートサイズやピクセル密度に関係なく、鮮明で鮮明な画像を含めることができます。これにより、Webページは、より大きな画像の読み込みに必要な追加時間を回避できるため、Webサイトのパフォーマンスが向上します。これはユーザーの自動手順ですが、テーマ開発者は、テーマ内のfunctions.phpファイルに時間を費やして、画像サイズ属性を調整する責任があります。さらに、レスポンシブイメージプラグインの作成とマージはチームの努力であることに留意する必要があります。