WordPressテーマ、AVADAのRecent Postsのサムネイルを上下カットさせずに表示する方法

AVADAのRecent Postsで表示される画像は、正方形の画像であっても上下がカットされて表示される

Recent Postsを使ったページを実際に表示した時のソースコードは以下のようになっている

修正前

<img class="attachment-recent-posts size-recent-posts" draggable="false" src="https://example.com/wp/wp-content/uploads/img01-700x441.png" sizes="(max-width: 700px) 100vw, 700px" srcset="https://example.com/wp/wp-content/uploads/img01-320x202.png 320w, https://example.com/wp/wp-content/uploads/img01-700x441.png 700w" alt="" width="700" height="441" />

cssなどでトリミングをしているわけではなく、画像自体がトリミングされている

画像をトリミングしているのは、画像をアップロードした時に、自動的にアップロードした画像サイズ以外のサイズのサムネイルを作成しているが、この時にトリミングされる

AVADAで、アップロード時の画像サイズを指定しているのは、
class-avada-init.php

class-avada-init.php

class Avada_Init {
// -- 略 --
  /**
  * Add image sizes.
  *
  * @access public
  */
  public function add_image_size() {
    add_image_size( 'blog-large', 669, 272, true );
    add_image_size( 'blog-medium', 320, 202, true );
    add_image_size( 'recent-posts', 700, 441, true );
    add_image_size( 'recent-works-thumbnail', 66, 66, true );

    // Image sizes used for grid layouts.
    add_image_size( '200', 200, '', false );
    add_image_size( '400', 400, '', false );
    add_image_size( '600', 600, '', false );
    add_image_size( '800', 800, '', false );
    add_image_size( '1200', 1200, '', false );
  }
}
// -- 略 --

class-avada-init.phpを直接修正するのではなく、function.phpに以下を追加

function.php

class Avada_Init {
  public function add_image_size() {
    add_image_size( 'blog-large', 669, 272, false );
    add_image_size( 'blog-medium', 320, 202, false );
    add_image_size( 'recent-posts', 700, 441, false );
    add_image_size( 'recent-works-thumbnail', 66, 66, false );
  }
}

add_image_sizeに関しては
関数リファレンス/add image size
を参照

第4引数に「false」を指定することでトリミングしないようにする

function.phpに追加後、画像をアップロードし直すと、自動で作成される画像がトリミングされなくなる

Recent Postsを使ったページを実際に表示した時のソースコードは以下のようになる

修正後

<img class="attachment-recent-posts size-recent-posts" draggable="false" src="https://example.com/wp/wp-content/uploads/img01.png" sizes="(max-width: 800px) 100vw, 800px" srcset="https://example.com/wp/wp-content/uploads/img01-150x150.png 150w, https://example.com/wp/wp-content/uploads/img01-700x700.png 700w, https://example.com/wp/wp-content/uploads/img01-768x768.png 768w, https://example.com/wp/wp-content/uploads/img01.png 800w" alt="" width="800" height="800" />

WordPressテーマ、AVADAのRecent Postsのサムネイルを上下カットさせずに表示できました