web-dev-qa-db-ja.com

WP 4.4。レスポンシブイメージブラウザが「間違った」ブラウザを選択している

WP 4.4。レスポンシブ画像機能が組み込まれて出荷されます。しかし、私はそれに満足していません。

私はfunctions.phpでいくつかのカスタム画像サイズを設定しました：

add_image_size（ 'ポストサムネイル'、600、600、true）; 
 add_image_size（ 'news-large'、1024、false）; 
 add_image_size（ 'news-small'、500、false） ; 
 add_image_size（ '3-col'、500、375、true）; 
 add_image_size（ 'presscutting'、600、850、true）; 
 add_image_size（ '中規模'、768、false）。 //デバイスサポートのために今日追加された
 add_image_size（ 'full-feature-image'、2000、false）; 
 add_image_size（ 'gallery-image'、800、600、true）;

私が考えたように、トリミングされていない（トリミングがfalseに設定されていない）画像はsrcsetに追加されます。画像はフロントエンドに出力されます（読みやすくするために改行が追加されています）。

<img width = "2000" height = "1335" 
 src = "http://mywebsite.com/cms/wp-content/uploads/2015/03/image-2000x1335.jpg" 
 class = "添付ファイルのフル機能イメージのサイズフル機能のイメージ" alt = "asdf" 
 srcset = "
 http://mywebsite.com/ cms/wp-content/uploads/2015/03/image-300x200.jpg 300w、
 http://mywebsite.com/cms/wp-content/uploads/2015/03/image-768x513.jpg 768w 、
 http://mywebsite.com/cms/wp-content/uploads/2015/03/image-1024x683.jpg 1024w、
 http://mywebsite.com/cms/wp-内容/アップロード/ 2015/03/image-500x334.jpg 500w "
 sizes ="（最大幅：2000px）100vw、2000px ">

しかし、今私の問題：私の画面では、それは1600ピクセルの画面解像度を持っていますが、1024ピクセルの幅で指定された画像のみが表示されます。そのため、すべての画像がぼやけて見えます。

どうすればWPや私のブラウザが代わりに2kpxの画像を使用するようにすることができますか？ 1280px、1440px、1600px、1968pxとしましょう。それとも、ぼやけてあまりにも小さすぎるバージョンを表示するのではなく、WP /ブラウザにもっと大きな画像を使用するように指示する簡単な方法はありますか。

imagesimage-sizeresponsivefeatures
9
rob_st

ドキュメンテーションに関しては、Make Blogにこのブログ投稿があります。

WordPress 4.4の応答画像

コメントに記載されている1600px制限を増やすには、これを試してください。

add_filter('max_srcset_image_width', function($max_srcset_image_width, $size_array){
    return 2000;
}, 10, 2);

最後に、既に述べたように、 add_image_size への呼び出しを修正する必要があります。

add_image_size（ 'news-large'、1024、false）;

する必要があります

add_image_size('news-large', 1024, 0, false);
9
kraftner

私はあなたがあなたのfunctions.phpに追加することができるフィルタ関数でsrcsetに余分なサイズを加えることによって同じ問題を解決しました：

function filter_max_srcset( $max_width, $size_array ) {
    if ( $size_array[0] === 1800 ) {
        $max_width = 1800;
    }
    return $max_width;
}
add_filter( 'max_srcset_image_width', 'filter_max_srcset', 10, 2 );
1
user1895954