WordPressでレスポンシブ画像を操作する

公開: 2016-08-24

最近まで、WordPressでレスポンシブ画像を操作することは非常に困難でした。ユーザーが自分で機能を作成する意思がない限り、運が悪かった。もう1つのオプションは、プラグインを購入するか、他の回避策を見つけることでしたが、開発者が利用できるコア機能はありませんでした。レスポンシブ画像をサポートせずに作成されたテーマは、パフォーマンスが遅いことが多く、画面サイズが異なると使い勝手が不安定になることがありました。これらは、顧客やユーザーが優れた機能に関連付ける属性ではありません。

幸い、これはすべてWordPress4.4のリリースで変更されました。レスポンシブ画像の機能がWordPressに直接含まれるようになり、開発者はテーマでそれを操作することもできます。これは、レスポンシブ画像プラグインを取得し、それをWordPressコアの一部にすることで実現されました。

すべての仕組み

もちろん、すでに行っていない限り、最初のステップはWordPress4.4に更新することです。更新が完了したら、サイトのソースコードを表示すると、サイトの画像にsizesとsrcsetの2つの新しい属性が追加されていることがわかります。これらの属性はフィルタリングされます。つまり、使用可能なすべての画像サイズが存在しますが、サイズは元の画像と一貫性が保たれます。アスペクト比が元のバージョンの画像と同じでない場合、srcset属性はカスタムトリミングを許可しません。これは、ユーザーの画面に表示されたときに画質が損なわれないようにするためです。

ボンネットの下に入り、変更を加える

WordPressは、レスポンシブ画像を背景機能として追加しました。これは、プロセスが自動的に行われることを意味します。メディアアップローダーを使用して画像をアップロードすると、属性はユーザーの介入なしにそれらの画像に適用されます。これは、画像の最適化にも役立ちます。

これはバックグラウンド機能であるため、レスポンシブ画像にはユーザーインターフェイスが付属していません。開発者は、各テーマのfunctions.phpファイルを変更して、画像に正確なsizes属性が指定されていることを確認できます。注意：レスポンシブ画像を参照する場合は、 sizesとsrcsetの画像タグ属性を意味します。

デフォルトの属性

この機能の使用を開始すると、WordPressがすべての可能なサイズを見つけて、それらをsrcset属性に追加するのに非常に優れていることに気付くでしょう。残念ながら、 sizes属性の予測可能性に関しては、問題が発生する可能性があります。これは、画像の幅をブラウザに伝達するために使用される属性であり、画像を任意の表示画面で使用および表示できるようにします。

注：この情報は、テーマ間で一貫していません。最良の推測として、デフォルトのサイズ属性を使用できます。

この属性をデフォルトとして設定すると、いくつかの方法で機能します。 1つ目は、 sizes属性を各画像に強制的に適用することです。これは、現在必須の要件であることを考えると役立ちます。 2つ目は、ブラウザが画像の元のサイズよりも広い画像ソースを使用できないことです。表示画面の幅（メディアクエリなど）に応じて画像サイズを微調整するために使用されるCSSコードは、残念ながら、このデフォルトの有用性を大幅に低下させる可能性があります。

テーマ開発者向けのフィルターフック

このデフォルト属性はCSSコードによって変更されていない画像でのみ機能するため、WordPressはテーマ開発者が使用するフィルターフックを作成しました。このフックを使用して、すべての画像のsizes属性を調整するだけです。その結果、提供されるsizes属性があらゆる状況で理想的であると確信できます。

警告

先に進む前に、デフォルトの属性オプションが優れたレスポンシブ画像機能を提供するための最良の方法ではないことを説明しましょう。実際、このデフォルトに依存するテーマを作成しないように作業する必要があります。これは、デフォルトの属性により、表示領域が元の画像のサイズほど大きくない場合に、ブラウザが画像ソースを変更できないようにするためです。また、CSSによってソースが微調整されており、より大きな画像が必要な場合、ブラウザーはソースを変更できません。

画像フィルタリング

テーマ開発者は、画像でフィルタリングを使用して、正確なsizes属性を取得できます。これは、WordPress関数のフックwp_calculate_image_sizesを使用して実現できます。この関数を使用して、現在のテーマで機能するようにすることができます。さまざまなタイプの画像にさまざまなsizes属性を適用する変更を加えることができます。

このリリースに付属する新機能により、WordPressメディアアップローダーを使用して追加したすべての画像にsizesとsrcset属性を適用できるようになりました。また、投稿内の画像に属性を追加することもできます。 wp_get_attachment_image_sizesを見てください。これにより、テーマのfunctions.phpファイルのフィルターを介してキャッチおよび変更できるsizes属性が返されます。同様に、wp_get_attachment_image_srcsetは、 wp_get_attachment_image_srcset属性に対してのみ同じことをsrcsetます。

レスポンシブ画像とカスタムテーマ

この最新リリースに付属する新機能には、テーマ内のレスポンシブ画像を効果的にサポートするために使用できる多くのフックが付属しています。これらのフックには次のものが含まれます。

Wp_calculate_image_sizes –テーマ開発者がsizes属性を調整してテーマに存在するブレークポイントを操作するために使用できるフック。

Max_srcset_image_width –テーマ開発者がsrcset属性にある画像の最大幅に従ってフィルタリングするために使用できるフック。

W_calculate_image_srcset –開発者がsrcset属性に従ってフィルタリングできるようにするフック。

レスポンシブ画像のサポートについて詳しく知る

WordPress開発者マニュアルは、これらのフックを効果的に使用することに関して、より多くのガイダンスを提供できます。あなたがする必要がある研究は、これらの種類の舞台裏の調整を行う際のあなたの快適さのレベルによって異なります。これを厳密に趣味として追求するテーマ開発者の場合は、少し実験することを選択するかもしれません。一方、キャリアテーマの開発者であれば、このアップデートを真にマスターするために必要な時間とリソースに投資することをお勧めします。

更新のメリット

WordPressをまだ更新していない場合（または管理対象のWordPressホストがまだ更新されていない場合）、更新するとユーザーはいくつかのすばらしい特典を利用できます。レスポンシブ画像のサポートにより、ページが大きすぎる画像をプルダウンする時間を無駄にしないため、ページのパフォーマンスを向上させることができます。ユーザーはまた、画像の品質が非常に印象的に向上したことに気付くでしょう。彼らはすべてに入る「ソーセージ作り」を見ることはありません。代わりに、彼らはそれがうまく機能することを見るでしょう。

開発者は、すべてのテーマの各functions.phpファイルのsizes属性を調整する必要があります。ただし、この最初の努力を行うと、物事ははるかに簡単になります。学習曲線に取り組んだ後、この新しい機能を使用することは非常に自然に行われることがわかります。

この新機能のコツをつかみ、レスポンシブ画像のサポートをカスタムテーマで機能させるには、ある程度の調査と実践が必要になる場合があります。ただし、開発者向けマニュアルを調べて理解しておけば、クライアントはパフォーマンスと機能の向上を本当に評価するでしょう。これは久しぶりで、ベテランのテーマ開発者やカスタムテーマの保守を任されている人は、このアップデートに当然興奮しています。