web-dev-qa-db-ja.com

レスポンシブ画像

画面の解像度に応じて、投稿のサムネイルまたはギャラリーの画像に適切なレスポンシブ画像のサイズを表示するためのネイティブ機能はありますか？

通常私は使っています：

1.カスタム画像サイズ：

function customImageSetup () {
  add_theme_support( 'post-thumbnails' );
  add_image_size('grid_1 mini square', 60, 60, TRUE);
  add_image_size('grid_2', 160);
  add_image_size('grid_2 square', 160, 160, TRUE);
  add_image_size('grid_4', 360);
  add_image_size('grid_4 square', 360, 360, TRUE);
  add_image_size('grid_6', 560);
  add_image_size('grid_6 square', 560, 560, TRUE);
  add_image_size('grid_8', 760);
  add_image_size('grid_8 square', 760, 760, TRUE);
  add_image_size('grid_10', 960);
  add_image_size('grid_12', 1160, FALSE);   
}

2.表示例.img-maxクラスが割り当てられたサムネイル：

<?php the_post_thumbnail('grid_4', array( 'class' => "img-max"));?>

3.画像に合うようにこの単純なcss行：

.img-max { width:100%; height:auto; }

これはほとんどの場合にうまくいきますが、特にレスポンシブWebデザインの観点からは、異なる画面解像度でカスタムイメージサイズを利用することは非常に便利です。

Javascriptなしで画像サーバ側を置き換えるためのワードプレス機能はありますか？

imagesgalleryimage-sizeresponsive
4
p2or

@ cristian.raiberからの回答に追加するために、Wordpressやphpには画面サイズを検出する機能はありません。そして、そのような機能は絶対にありません。 Phpはサーバーサイドで実行され、ブラウザサイドであるクライアントサイドの前に実行されます。 phpに関して言えば、そしてWordpressに関しては、予測可能で信頼性のある方法でそのような検出を処理するためのどんな種類の関数の将来の実装も見ることができません。

あなたがそれをどのように見ても、この作品を作るための愚かな方法はありません。サーバー側の操作は予測可能であり、エンドユーザーの入力に依存せず、最も重要なことにエンドユーザーが操作することができないため、信頼できるものです。クライアント側の操作は操作できます。

次のクライアント側の変数と操作を見てください。

  • Cookie - > Cookieはユーザーによって削除またはブロックされることがあります。また、Cookieは州法または国の法律によってブロックされることもあります。

  • jQuery - >エンドユーザーはいつでもjqueryを無効にできる

  • ブラウザ - >サイトは、ブラウザによって動作が異なります。エンドユーザーはブラウザ検出を無効にすることができます

クライアントサイドのソリューションは場合によってはうまくいきますが、他のケースでは上記に基づかない場合もあります（他に言及されていない点もあります）。

wp_is_mobile()を使用して携帯電話を検出し（タブレットではなく携帯電話でのみ動作します）、それに応じて正しい画像サイズを調整することができますBUT、次の点に注意する必要があります

  • 上記はクライアント側の操作を示していますが、これもクライアント側の操作に依存するため、信頼性の低い機能です。私の意見では、ミッキーマウスの機能

  • 画面サイズは検出されず、携帯電話デバイスのみが検出されます。タブレットでは動作しません

結論

これに対する唯一の適切な解決策は、できる限り画像を最適化することです（これには、コンテンツサイズに応じて適切な計画と正しい画像サイズを作成する必要があります。コンテンツの最大幅が500pxの場合は700pxイメージをロードしないでください）。ブラウザはそれに応じて画像のサイズを変更します。私はこれがブラウザが画像をリサイズするために多くのリソースを使うのでロード時間を遅くすることを知っています、しかし少なくともあなたはエンドユーザーに確実にコンテンツを提供することができます

4
Pieter Goosen

ネイティブ関数はありませんが、 RICG Responsive Imagesプラグイン は利用可能な画像サイズを持つsrcset属性を追加します。 Srcset（<picture>要素と共に）は、 着実にブラウザサポートを得ています - javascriptは不要で、どちらを決めるかはブラウザ次第ロードする正しい画像.

この属性は、[メディアの追加]ボタンを使用した投稿に追加されます。 テーマテンプレート内で手動で呼び出す方法 があります。たとえば、customImageSetup関数を変更して tevkori_get_srcset_string（） を呼び出すことができます。

メディアライブラリやデータベースに変更を加えることはなく、サイトをアンインストールしてもサイトは通常の状態に戻ります。

2
William Turrell

いいえ、現時点ではそんなことはありません。しかし、あなたが本当にこれに熱心であるならばあなたが試みることができる解決策があります。

これは私が過去に使ったことがあり、それには限界がありますが、うまくいきました。

解決策：

ユーザーの現在の画面解像度を取得し、それをCookieに書き込む小さなJS関数を書くことができます。ユーザーが自分のブラウザウィンドウのサイズを変更している場合は、Cookieに格納されている値を更新する機能も必要になります。

あなたはPHPを使ってこのクッキーを読むことができ、以下の行に沿って何かを持つことができます。

if($screen_resolution > 640 && $screen_resolution < 860) {

 the_post_thumbnail('your-custom-image-size-for-this-viewport-here');
}

P.S：このソリューションは、キャッシングシステムではうまく機能しないことを考慮してください。

1
cristian.raiber