web-dev-qa-db-ja.com

The_post_thumbnail（）の予期しないwidthおよびsrcset属性。

私はテーマを変更し、子テーマを使用し、そしてテンプレートファイル（single.php）で大きな投稿サムネイルを表示する必要があるので、このコードがあります。

the_post_thumbnail('large');

Settings> Mediaで、大きいサイズは最大幅= 1024ピクセルと最大高さ= 1024ピクセルに設定されます（私はこれらがWordpressのデフォルト設定であると思います）。さて、問題は投稿ページで私がこのHTMLコードを手に入れることです：

<img src="https://example.com/wp-content/uploads/2018/07/example-image-4-1024x682.jpg"
class="attachment-large size-large wp-post-image" alt=""
srcset="https://www.example.com/wp-content/uploads/2018/07/example-image-4-1024x682.jpg 1024w,
https://www.example.com/wp-content/uploads/2018/07/example-image-4-300x200.jpg 300w,
https://www.example.com/wp-content/uploads/2018/07/example-image-4-768x512.jpg 768w,
https://www.example.com/wp-content/uploads/2018/07/example-image-4-272x182.jpg 272w,
https://www.example.com/wp-content/uploads/2018/07/example-image-4.jpg 1280w"
sizes="(max-width: 800px) 100vw, 800px" width="800" height="533">

その結果、本来の「大きな」画像ではなく1024pxの幅の画像ではなく、800pxの幅の画像が得られます。最大幅を800pxに設定する "sizes"属性と、画像を800pxに設定する "width"属性に問題があるようです。それらは私には間違っているようです。それで、正確に何が起こっているのですか？もしそれがテーマの中の何かによって引き起こされているならば、私がそれを変えることができるようにそれがどこにあるのかをどうやって見つけるのですか？

The_post_thumbnail（）に関連するドキュメントを見て、私はこれらのフィルタを見ました：

post_thumbnail_size
post_thumbnail_html
wp_get_attachment_image_attributes

そのため、テーマの中で文字列 "post_thumbnail"と "attachment_image"を探してみましたが、それでは何も役に立ちませんでした。それで、私は他に何を探しますか？アドバンストカスタムファイルなどのプラグインがインストールされていますが、それらを無効にしても問題が解決しないため、問題の原因はテーマであるか、Wordpressについて理解できないものであるはずです。 。

theme-developmentpost-thumbnailsimage-size
2
reed

the_post_thumbnail()やwp_get_attachment_image()のような関数で画像の幅と高さの属性を生成するとき、画像は image_downsize() 関数を通して渡されます。この関数が最後に行うことは、 image_constrain_size_for_editor() 関数を介してイメージを実行することです。

この関数は与えられたサイズ、あなたのケースではlarge、Settings> Mediaの設定に基づいて画像の幅と高さを決定します。ただし、medium、medium_large、およびlargeイメージの最大可能サイズは、テーマの Content Width が定義されているものに設定されます。テーマでコンテンツの幅を800として定義している場合、medium、medium_large、またはlargeサイズの画像の幅は800に制限されます（カスタム画像サイズはエディタではこれによってのみ影響を受けます）。

最大寸法を削除したい場合は、 editor_max_image_size フィルタを使用して希望の最大幅と高さを含む配列を返すか、両方の場合は0を使用して制限を削除できます。フィルタの$sizeおよび$context引数を使用して、フロントエンドまたはバックエンドのlargeイメージにのみ適用できます（フロントエンドの場合は'display'、管理者の場合は'edit'）。

この例では、フロントエンドのlargeイメージのサイズ制限を削除します。

function wpse_308298_max_image_size( $max_image_size, $size, $context ) {
    if ( $size === 'large' && $context === 'display' ) {
        $max_image_size = [0,0];
    }

    return $max_image_size;
}
add_filter( 'editor_max_image_size', 'wpse_308298_max_image_size' );
1
Jacob Peattie